/* ============================================================================ KYCOne brand stylesheet — VERIFY. TRUST. GROW. Owned by ZINBLE Edge Services. All theming lives here: the site CSP is `style-src 'self'` (no unsafe-inline), so inline styles never apply — this sheet, served from the same origin, is the single source of visual truth. Fonts: Poppins (headings) / Inter (body) are named first and fall back to the platform UI stack, because the CSP `font-src 'self'` forbids remote webfonts. ============================================================================ */ :root { /* Brand palette (brand standard, 2026) */ --kyc-green: #00A86B; --kyc-green-dark: #007A4D; --kyc-green-darker: #00623D; --kyc-green-050: #E6F7F0; --kyc-green-100: #CDEFE1; --kyc-charcoal: #1A1A1A; --kyc-slate: #6B7280; --kyc-light: #F2F4F7; --kyc-white: #FFFFFF; --kyc-border: #E5E8EF; /* Map the tenant-branding tokens to the brand as a CSP-safe default. The per-tenant inline override on is blocked by the CSP, so these are the effective values for the demo tenant. */ --kyc-primary: var(--kyc-green); --kyc-secondary: var(--kyc-slate); --kyc-accent: var(--kyc-green-dark); --kyc-radius: 14px; --kyc-radius-sm: 10px; --kyc-shadow: 0 6px 20px rgba(16, 24, 40, 0.08); --kyc-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08); --kyc-shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.14); --kyc-font-head: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --kyc-font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; /* Feed Bootstrap's own tokens so links, focus, etc. inherit the brand. */ --bs-primary: #00A86B; --bs-primary-rgb: 0, 168, 107; --bs-link-color: #007A4D; --bs-link-color-rgb: 0, 122, 77; --bs-link-hover-color: #00623D; --bs-body-font-family: var(--kyc-font-body); --bs-body-color: #212633; --bs-body-bg: var(--kyc-light); } html { font-size: 15px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } body { font-family: var(--kyc-font-body); color: #212633; background-color: var(--kyc-light); /* Subtle brand wash so full-bleed pages never look flat. */ background-image: radial-gradient(1100px 460px at 100% -8%, rgba(0, 168, 107, 0.07), transparent 60%), radial-gradient(900px 420px at -10% 8%, rgba(0, 122, 77, 0.06), transparent 55%); background-attachment: fixed; display: flex; flex-direction: column; min-height: 100vh; margin: 0; } h1, h2, h3, h4, h5, h6, .navbar-brand, .display-6 { font-family: var(--kyc-font-head); font-weight: 600; color: var(--kyc-charcoal); letter-spacing: -0.01em; } /* ---- Focus ring: brand green, replaces the stock blue -------------------- */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus, a:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 0.12rem var(--kyc-white), 0 0 0 0.28rem rgba(0, 168, 107, 0.55); border-color: var(--kyc-green); outline: none; } /* ---- Top navigation ------------------------------------------------------ */ .navbar { background: var(--kyc-white); border-bottom: 1px solid var(--kyc-border); box-shadow: var(--kyc-shadow-sm); padding-top: 0.55rem; padding-bottom: 0.55rem; } .navbar .navbar-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--kyc-font-head); font-weight: 700; font-size: 1.28rem; color: var(--kyc-charcoal); letter-spacing: -0.02em; } .navbar .navbar-brand .brand-mark { height: 34px; width: auto; display: block; } .navbar .navbar-brand .brand-name span { color: var(--kyc-green); } .navbar .nav-link { color: #47505f; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: 8px; transition: color .15s ease, background-color .15s ease; } .navbar .nav-link:hover { color: var(--kyc-green-dark); background: var(--kyc-green-050); } .navbar .nav-link[aria-current="page"] { color: var(--kyc-green-dark); background: var(--kyc-green-050); font-weight: 600; } .navbar .navbar-text { color: var(--kyc-slate); font-weight: 500; } /* ---- Buttons (override Bootstrap per-variant custom props) ---------------- */ .btn { border-radius: 10px; font-weight: 600; letter-spacing: 0.01em; } .btn-primary { --bs-btn-bg: var(--kyc-green); --bs-btn-border-color: var(--kyc-green); --bs-btn-hover-bg: var(--kyc-green-dark); --bs-btn-hover-border-color: var(--kyc-green-dark); --bs-btn-active-bg: var(--kyc-green-darker); --bs-btn-active-border-color: var(--kyc-green-darker); --bs-btn-disabled-bg: #8fd4bb; --bs-btn-disabled-border-color: #8fd4bb; box-shadow: 0 6px 16px rgba(0, 168, 107, 0.28); transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; } .btn-primary:hover { box-shadow: 0 8px 20px rgba(0, 122, 77, 0.32); } .btn-primary:active { transform: translateY(1px); } .btn-outline-secondary { --bs-btn-color: #47505f; --bs-btn-border-color: var(--kyc-border); --bs-btn-hover-bg: var(--kyc-light); --bs-btn-hover-color: var(--kyc-charcoal); --bs-btn-hover-border-color: #cfd5e1; } .btn-lg { padding: 0.7rem 1.4rem; font-size: 1.02rem; } /* ---- Cards --------------------------------------------------------------- */ .card { border: 1px solid var(--kyc-border); border-radius: var(--kyc-radius); box-shadow: var(--kyc-shadow); background: var(--kyc-white); } .card-header { background: var(--kyc-white); border-bottom: 1px solid var(--kyc-border); font-family: var(--kyc-font-head); font-weight: 600; color: var(--kyc-charcoal); border-top-left-radius: var(--kyc-radius) !important; border-top-right-radius: var(--kyc-radius) !important; padding: 0.85rem 1.15rem; } .card-body { padding: 1.25rem; } /* ---- Forms --------------------------------------------------------------- */ .form-label { font-weight: 600; color: #384150; margin-bottom: 0.35rem; font-size: 0.92rem; } .form-control, .form-select { border-radius: 10px; border-color: var(--kyc-border); padding: 0.55rem 0.8rem; background-color: #fcfdfe; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .form-control:hover, .form-select:hover { border-color: #cfd5e1; } .form-control:focus, .form-select:focus { background-color: var(--kyc-white); } .form-text { color: var(--kyc-slate); } /* ---- Badges -------------------------------------------------------------- */ .badge { font-weight: 600; letter-spacing: 0.02em; padding: 0.4em 0.7em; border-radius: 7px; } .badge.text-bg-success, .badge.bg-success { background-color: var(--kyc-green) !important; color: #fff !important; } .badge.text-bg-secondary { background-color: #eef1f6 !important; color: #5b6472 !important; } /* ---- Definition lists (verify result / provider details) ----------------- */ dl.row dt { color: var(--kyc-slate); font-weight: 600; } dl.row dd { color: #212633; } code { color: var(--kyc-green-dark); background: var(--kyc-green-050); padding: 0.12rem 0.4rem; border-radius: 6px; font-size: 0.9em; } /* ---- Tables -------------------------------------------------------------- */ .table { --bs-table-bg: transparent; } .table > thead th { font-family: var(--kyc-font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kyc-slate); border-bottom: 1px solid var(--kyc-border); } .table > tbody td { border-color: #eef1f6; } /* ---- Alerts -------------------------------------------------------------- */ .alert { border-radius: var(--kyc-radius-sm); border: 1px solid transparent; } .alert-warning { background: #fff7e6; border-color: #ffe2a8; color: #7a5200; } .alert-danger { background: #fdecec; border-color: #f7c4c4; color: #8a1f1f; } /* ---- Console sidebar shell ----------------------------------------------- */ body.kyc-console { background: var(--kyc-light); } .kyc-shell { display: flex; min-height: 100vh; align-items: stretch; } .kyc-sidebar { position: sticky; top: 0; align-self: flex-start; width: 252px; flex-shrink: 0; height: 100vh; overflow-y: auto; background: var(--kyc-white); border-right: 1px solid var(--kyc-border); display: flex; flex-direction: column; padding: 1.1rem 0.85rem 1rem; } .kyc-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.5rem 1.2rem; } .kyc-sidebar-brand .brand-mark { height: 36px; width: auto; } .kyc-sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .kyc-sidebar-brand .brand-name { font-family: var(--kyc-font-head); font-weight: 700; font-size: 1.16rem; color: var(--kyc-charcoal); } .kyc-sidebar-brand .brand-name span { color: var(--kyc-green); } .kyc-sidebar-brand .brand-org { font-size: 0.72rem; font-weight: 500; color: var(--kyc-slate); letter-spacing: 0.02em; } .kyc-nav { display: flex; flex-direction: column; gap: 2px; } .kyc-nav-link { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.7rem; border-radius: 10px; color: #47505f; font-weight: 500; font-size: 0.95rem; text-decoration: none; border: none; background: transparent; text-align: left; cursor: pointer; transition: background-color .14s ease, color .14s ease; } .kyc-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; color: #98a1b0; transition: color .14s ease; } .kyc-nav-link:hover { background: var(--kyc-light); color: var(--kyc-charcoal); } .kyc-nav-link:hover svg { color: var(--kyc-green-dark); } .kyc-nav-link.is-active { background: var(--kyc-green-050); color: var(--kyc-green-darker); font-weight: 600; } .kyc-nav-link.is-active svg { color: var(--kyc-green); } .kyc-nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(0,168,107,0.35); } .kyc-nav-section { margin: 1.1rem 0.7rem 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa2b1; } .kyc-support { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(150deg, #0c8f5e, #085f3d); color: #fff; border-radius: 14px; padding: 0.8rem 0.85rem; } .kyc-support-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; background: rgba(255,255,255,0.16); border-radius: 9px; } .kyc-support-icon svg { width: 18px; height: 18px; } .kyc-support-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .kyc-support-title { font-size: 0.8rem; font-weight: 600; } .kyc-support-text a { color: #cdece0; font-size: 0.78rem; text-decoration: none; word-break: break-all; } .kyc-support-text a:hover { color: #fff; text-decoration: underline; } .kyc-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .kyc-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; background: var(--kyc-white); border-bottom: 1px solid var(--kyc-border); padding: 0.6rem 1.25rem; min-height: 60px; } .kyc-hamburger { display: none; cursor: pointer; color: #47505f; margin: 0; padding: 0.3rem; border-radius: 8px; } .kyc-hamburger svg { width: 24px; height: 24px; display: block; } .kyc-hamburger:hover { background: var(--kyc-light); } .kyc-user { display: flex; align-items: center; gap: 0.65rem; margin-left: auto; } .kyc-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--kyc-green-050); color: var(--kyc-green-darker); font-weight: 700; font-size: 0.86rem; font-family: var(--kyc-font-head); } .kyc-user-meta { display: flex; flex-direction: column; line-height: 1.2; } .kyc-user-name { font-weight: 600; font-size: 0.9rem; color: var(--kyc-charcoal); } .kyc-user-role { font-size: 0.74rem; color: var(--kyc-slate); } .kyc-signout { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--kyc-border); background: var(--kyc-white); color: #6b7280; cursor: pointer; transition: all .14s ease; } .kyc-signout svg { width: 19px; height: 19px; } .kyc-signout:hover { background: #fdecec; color: #c62828; border-color: #f7c4c4; } .kyc-main { flex: 1 0 auto; padding: 1.6rem 1.5rem; max-width: 1240px; width: 100%; } .kyc-content .site-footer { margin-top: 0; } .kyc-nav-backdrop { display: none; } @media (max-width: 992px) { .kyc-sidebar { position: fixed; top: 0; left: 0; z-index: 60; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--kyc-shadow-lg); } .kyc-nav-cb:checked ~ .kyc-shell .kyc-sidebar { transform: translateX(0); } .kyc-nav-cb:checked ~ .kyc-shell .kyc-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(16,24,40,0.45); } .kyc-hamburger { display: inline-flex; } .kyc-main { padding: 1.15rem 1rem; } } /* ---- Page shells --------------------------------------------------------- */ main#main { flex: 1 0 auto; width: 100%; } .page-shell { max-width: 1180px; margin-inline: auto; padding-inline: 1rem; } .page-head { margin-bottom: 1.4rem; } .page-title { font-size: 1.55rem; font-weight: 600; margin-bottom: 1.4rem; } .page-head .page-title { margin-bottom: 0.15rem; } .page-subtitle { color: var(--kyc-slate); font-size: 0.95rem; margin: 0; } .page-title .eyebrow { display: block; font-family: var(--kyc-font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kyc-green-dark); margin-bottom: 0.15rem; } /* ---- KPI tiles (dashboard) ----------------------------------------------- */ .kpi-card { position: relative; overflow: hidden; } .kpi-card .kpi-label { font-size: 0.82rem; font-weight: 600; color: var(--kyc-slate); margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; } .kpi-card .kpi-value { font-family: var(--kyc-font-head); font-size: 1.9rem; font-weight: 700; color: var(--kyc-charcoal); line-height: 1.1; margin: 0; } .kpi-card .kpi-icon { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--kyc-green-050); color: var(--kyc-green-dark); } .kpi-card .kpi-icon svg { width: 22px; height: 22px; } .kpi-card.is-alert .kpi-value { color: #c62828; } .kpi-card.is-alert .kpi-icon { background: #fdecec; color: #c62828; } /* ---- Verify result header tint ------------------------------------------- */ .result-card .card-header { background: var(--kyc-green-050); color: var(--kyc-green-darker); } .result-card.is-fail .card-header { background: #f4f6f9; color: #5b6472; } /* Verify error: long provider/ProblemDetails strings must wrap inside the alert, never overflow. */ .verify-error { overflow: hidden; } .verify-error p { overflow-wrap: anywhere; word-break: break-word; margin: 0; } /* Empty-state hint on the verify screen */ .verify-empty { border: 1px dashed var(--kyc-border); border-radius: var(--kyc-radius); padding: 2rem 1.5rem; text-align: center; color: var(--kyc-slate); background: #fbfcfe; } .verify-empty .mark { height: 52px; opacity: 0.85; margin-bottom: 0.75rem; } /* ---- Auth (sign-in) split screen ----------------------------------------- */ body.kyc-auth { background: var(--kyc-white); } .auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; } /* Left: brand hero pane */ .auth-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(700px 420px at 88% 8%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(760px 520px at 0% 100%, rgba(0,0,0,0.22), transparent 55%), linear-gradient(150deg, #0c8f5e 0%, #0a7a4f 45%, #085f3d 100%); display: flex; align-items: center; } /* Large watermark shield */ .auth-hero::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 360px; height: 360px; background: no-repeat center/contain url("../img/kycone-mark.svg"); opacity: 0.10; transform: rotate(-8deg); } .auth-hero-inner { position: relative; z-index: 1; padding: clamp(2rem, 5vw, 4.5rem); max-width: 520px; } .auth-hero-brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 2.2rem; } .auth-hero-mark { height: 52px; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); } .auth-hero-word { font-family: var(--kyc-font-head); font-weight: 700; font-size: 1.9rem; color: #fff; letter-spacing: -0.02em; } .auth-hero-word span { color: #9defc9; } .auth-hero-tagline { font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.74rem; color: rgba(255,255,255,0.72); margin-bottom: 1.5rem; } .auth-hero-head { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.15; margin: 0 0 1rem; } .auth-hero-sub { color: rgba(255,255,255,0.86); font-size: 1.02rem; line-height: 1.6; margin: 0 0 2rem; max-width: 30rem; } .auth-hero-values { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .auth-hero-values li { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #eafaf3; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 0.32rem 0.72rem; border-radius: 999px; } /* Right: form pane */ .auth-panel { display: flex; flex-direction: column; background: var(--kyc-white); } .auth-panel-inner { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .auth-form { width: 100%; max-width: 24rem; } .auth-form-logo { display: none; height: 52px; margin: 0 auto 1.25rem; } .auth-form-title { font-size: 1.55rem; font-weight: 600; margin: 0 0 0.25rem; } .auth-form-sub { color: var(--kyc-slate); font-size: 0.92rem; margin-bottom: 1.75rem; } .auth-form-note { color: var(--kyc-slate); font-size: 0.8rem; text-align: center; margin-top: 1.25rem; } .auth-panel .site-footer { background: transparent; border-top: none; } @media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-hero { min-height: auto; padding: 1.5rem 0; } .auth-hero::after { width: 200px; height: 200px; right: -50px; bottom: -50px; } .auth-hero-head, .auth-hero-sub, .auth-hero-values { display: none; } .auth-hero-inner { padding: 1.4rem 1.5rem; } .auth-hero-brand { margin-bottom: 0.6rem; } .auth-hero-tagline { margin-bottom: 0; } .auth-form-logo { display: none; } } /* ---- Customer (Re-KYC) portal -------------------------------------------- */ .customer-topbar { display: flex; align-items: center; gap: 0.55rem; background: var(--kyc-white); border-bottom: 1px solid var(--kyc-border); box-shadow: var(--kyc-shadow-sm); padding: 0.7rem 1.1rem; } .customer-topbar .brand-mark { height: 30px; width: auto; } .customer-topbar .brand-name { font-family: var(--kyc-font-head); font-weight: 700; font-size: 1.12rem; color: var(--kyc-charcoal); } .customer-topbar .brand-name span { color: var(--kyc-green); } .customer-shell { max-width: 480px; margin-inline: auto; } /* ---- Footer (Developed by ZINBLE + version) ------------------------------ */ .site-footer { flex-shrink: 0; border-top: 1px solid var(--kyc-border); background: var(--kyc-white); color: var(--kyc-slate); padding: 0.9rem 1rem; margin-top: 2rem; } .site-footer .footer-inner { max-width: 1180px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.82rem; } .site-footer .credit { display: inline-flex; align-items: center; gap: 0.45rem; } .site-footer .credit img { height: 20px; width: auto; display: block; } .site-footer .credit .by { color: var(--kyc-slate); } .site-footer .meta { color: #9aa2b1; } .site-footer .meta .dot { margin: 0 0.4rem; color: var(--kyc-border); } /* On the split sign-in screen the footer sits on the white form pane, so it keeps the default (dark-on-light) treatment — only the divider and padding are trimmed. */ body.kyc-auth .site-footer { border-top: none; padding-bottom: 1.25rem; } body.kyc-auth .site-footer .footer-inner { justify-content: center; } /* ---- Admin screens: users / settings / reports / change-password ---------- */ .alert-success { background: var(--kyc-green-050); border-color: var(--kyc-green-100); color: var(--kyc-green-darker); border-radius: var(--kyc-radius-sm); } .role-badge { background: var(--kyc-green-050) !important; color: var(--kyc-green-darker) !important; } .flash-secret { font-size: 1.05rem; padding: 0.35rem 0.7rem; letter-spacing: 0.06em; user-select: all; } /* Password policy checklist (change-password screen) */ .policy-card { border-left: 4px solid var(--kyc-green); border-top-left-radius: 0; border-bottom-left-radius: 0; } .policy-list { list-style: none; margin: 0; padding: 0; } .policy-list li { position: relative; padding: 0.5rem 0 0.5rem 1.9rem; font-size: 0.92rem; border-bottom: 1px solid #eef1f6; color: #384150; } .policy-list li:last-child { border-bottom: none; } .policy-list li::before { content: ""; position: absolute; left: 0; top: 0.62rem; width: 18px; height: 18px; border-radius: 50%; background: var(--kyc-green-050); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; } .policy-list li.is-met { color: var(--kyc-green-darker); } .policy-list li.is-met::before { background-color: var(--kyc-green-100); } /* Report share bar (stepped widths — the CSP forbids inline styles) */ .share-bar { height: 8px; border-radius: 999px; background: var(--kyc-light); overflow: hidden; } .share-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kyc-green), var(--kyc-green-dark)); } .share-fill.w-0 { width: 2%; } .share-fill.w-5 { width: 5%; } .share-fill.w-10 { width: 10%; } .share-fill.w-15 { width: 15%; } .share-fill.w-20 { width: 20%; } .share-fill.w-25 { width: 25%; } .share-fill.w-30 { width: 30%; } .share-fill.w-35 { width: 35%; } .share-fill.w-40 { width: 40%; } .share-fill.w-45 { width: 45%; } .share-fill.w-50 { width: 50%; } .share-fill.w-55 { width: 55%; } .share-fill.w-60 { width: 60%; } .share-fill.w-65 { width: 65%; } .share-fill.w-70 { width: 70%; } .share-fill.w-75 { width: 75%; } .share-fill.w-80 { width: 80%; } .share-fill.w-85 { width: 85%; } .share-fill.w-90 { width: 90%; } .share-fill.w-95 { width: 95%; } .share-fill.w-100 { width: 100%; } /* ---- Platform Admin (SuperAdmin) ------------------------------------------- */ .admin-scope-badge { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: #fff7e6; border: 1px solid #ffe2a8; color: #7a5200; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .admin-credit-form { white-space: nowrap; } .admin-credit-amount { width: 110px; display: inline-block; } @media (max-width: 575.98px) { .admin-scope-badge { display: none; } } .admin-form-card { max-width: 860px; } .admin-gstin-input { width: 12.5rem; font-size: 0.78rem; } /* Org services selection (Settings → Services) */ .org-service-item { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; cursor: pointer; border: 1px solid var(--kyc-border); border-radius: 10px; padding: 0.6rem 0.7rem; background: var(--kyc-white); transition: border-color .12s ease, background-color .12s ease; } .org-service-item:hover { border-color: #cfd5e1; } .org-service-item.is-on { border-color: var(--kyc-green-100); background: var(--kyc-green-050); } .org-service-item .form-check-input { margin-top: 0.2rem; flex-shrink: 0; } .org-service-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .org-service-name { font-weight: 600; font-size: 0.88rem; color: var(--kyc-charcoal); } .org-service-meta { font-size: 0.74rem; color: var(--kyc-slate); } .org-service-meta code { background: transparent; padding: 0; color: var(--kyc-slate); } /* ---- Sidebar nav group (CKYC submenu) -------------------------------------- */ .kyc-nav-group { margin: 0; } .kyc-nav-group summary { list-style: none; cursor: pointer; position: relative; } .kyc-nav-group summary::-webkit-details-marker { display: none; } .kyc-nav-caret { width: 15px !important; height: 15px !important; margin-left: auto; transition: transform .18s ease; } .kyc-nav-group[open] .kyc-nav-caret { transform: rotate(180deg); } .kyc-nav-sub { padding: 2px 0 4px 2.4rem; display: flex; flex-direction: column; gap: 1px; } .kyc-nav-subheading { margin: 0.35rem 0 0.15rem 0.55rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa2b1; } .kyc-nav-sublink { display: block; padding: 0.38rem 0.55rem; border-radius: 8px; color: #47505f; font-size: 0.88rem; font-weight: 500; text-decoration: none; } .kyc-nav-sublink:hover { background: var(--kyc-light); color: var(--kyc-charcoal); } .kyc-nav-sublink.is-active { background: var(--kyc-green-050); color: var(--kyc-green-darker); font-weight: 600; } /* Brand-green radios/checkboxes */ .form-check-input:checked { background-color: var(--kyc-green); border-color: var(--kyc-green); } .form-check-input:focus { border-color: var(--kyc-green); box-shadow: 0 0 0 0.2rem rgba(0,168,107,0.25); } /* ---- CKYC search screen ---------------------------------------------------- */ .ckyc-toggle { display: inline-flex; gap: 4px; background: var(--kyc-white); border: 1px solid var(--kyc-border); border-radius: 12px; padding: 4px; } .ckyc-toggle button { display: inline-flex; align-items: center; gap: 0.45rem; border: none; background: transparent; border-radius: 9px; padding: 0.45rem 0.95rem; font-weight: 600; font-size: 0.92rem; color: #6b7280; cursor: pointer; } .ckyc-toggle button svg { width: 17px; height: 17px; } .ckyc-toggle button.is-active { background: var(--kyc-green-050); color: var(--kyc-green-darker); } .ckyc-toggle button:disabled { cursor: not-allowed; opacity: 0.6; } .ckyc-rail-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--kyc-slate); margin: 0.25rem 0.35rem 0.7rem; } .ckyc-cases { display: flex; flex-direction: column; gap: 8px; } .ckyc-case { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--kyc-border); border-radius: 12px; padding: 0.7rem 0.8rem; background: var(--kyc-white); } .ckyc-case-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--kyc-light); color: #6b7280; } .ckyc-case-icon svg { width: 19px; height: 19px; } .ckyc-case-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ckyc-case-name { font-weight: 600; font-size: 0.9rem; color: var(--kyc-charcoal); } .ckyc-case-sub { font-size: 0.76rem; color: var(--kyc-slate); } .ckyc-case.is-active { border-color: var(--kyc-green); background: var(--kyc-green-050); } .ckyc-case.is-active .ckyc-case-icon { background: var(--kyc-green); color: #fff; } .ckyc-case.is-active .ckyc-case-name { color: var(--kyc-green-darker); } .ckyc-case-dot { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; border-radius: 50%; border: 4px solid var(--kyc-green); background: var(--kyc-white); } .ckyc-case.is-disabled { opacity: 0.62; } .ckyc-ident-box { border: 1px solid var(--kyc-border); border-radius: 12px; padding: 1rem 1.1rem; background: #fbfcfe; } .ckyc-ident-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kyc-slate); margin: 0 0 0.7rem; } .btn-ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 0.35rem; } .ckyc-bulk-table { max-height: 420px; overflow-y: auto; } .kpi-icon.position-static { position: static; width: 34px; height: 34px; border-radius: 9px; } .kpi-icon.position-static svg { width: 18px; height: 18px; } /* ---- A4 verification report (print only) --------------------------------- */ .kyc-print { display: none; } @media print { /* Show only the report; hide the app chrome regardless of nesting. */ body * { visibility: hidden; } .kyc-print, .kyc-print * { visibility: visible; } .kyc-print { display: block; position: absolute; inset: 0; width: 100%; padding: 0; margin: 0; color: #111; font-family: var(--kyc-font-body); } .kyc-print-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #00A86B; padding-bottom: 12px; margin-bottom: 18px; } .kyc-print-mark { height: 46px; width: auto; } .kyc-print-org { flex: 1; } .kyc-print-orgname { font-family: var(--kyc-font-head); font-weight: 700; font-size: 18pt; color: #1A1A1A; } .kyc-print-doctype { font-size: 10pt; letter-spacing: 0.14em; text-transform: uppercase; color: #6B7280; } .kyc-print-status .ok { color: #007A4D; border: 1.5px solid #007A4D; } .kyc-print-status .fail { color: #8a1f1f; border: 1.5px solid #8a1f1f; } .kyc-print-status span { font-weight: 700; font-size: 11pt; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 6px; } .kyc-print-section { font-family: var(--kyc-font-head); font-size: 11pt; color: #007A4D; margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #E5E8EF; } .kyc-print-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; } .kyc-print-table th, .kyc-print-table td { text-align: left; vertical-align: top; padding: 5px 8px; border-bottom: 1px solid #EEF1F6; } .kyc-print-table th { width: 34%; color: #6B7280; font-weight: 600; } .kyc-print-foot { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #E5E8EF; padding-top: 8px; font-size: 8.5pt; color: #6B7280; } @page { size: A4; margin: 14mm; } } /* ---- Responsive polish --------------------------------------------------- */ @media (max-width: 575.98px) { .page-title { font-size: 1.3rem; } .kpi-card .kpi-value { font-size: 1.55rem; } .navbar .navbar-brand .brand-name { font-size: 1.1rem; } .site-footer .footer-inner { justify-content: center; text-align: center; } .card-body { padding: 1.05rem; } } /* ---- Two-step verification (TOTP) --------------------------------------- */ .mfa-code-input { text-align: center; letter-spacing: 0.45em; font-variant-numeric: tabular-nums; font-weight: 600; max-width: 240px; } .mfa-steps { padding-left: 1.15rem; display: grid; gap: 0.9rem; margin-bottom: 0; } .mfa-steps > li { padding-left: 0.25rem; } .mfa-qr-wrap { margin: 0.65rem 0 0.35rem; } .mfa-qr { background: #fff; border: 1px solid #E5E8EF; border-radius: 0.5rem; padding: 0.5rem; image-rendering: pixelated; } .mfa-manual summary { cursor: pointer; color: var(--kyc-primary, #007A4D); font-size: 0.9rem; } .mfa-manual-key { display: inline-block; background: #F4F6F9; border: 1px solid #E5E8EF; border-radius: 0.375rem; padding: 0.4rem 0.6rem; font-size: 0.95rem; letter-spacing: 0.08em; word-break: break-all; } /* ---- CKYC 2.0 dashboard -------------------------------------------------- */ /* Journey colours live here, not in inline styles: the CSP is style-src 'self', so a style="--swatch:…" attribute would be dropped and every chip render grey. */ .ckyc-c-search { --swatch: #2563EB; } .ckyc-c-download { --swatch: #10B981; } .ckyc-c-create { --swatch: #F59E0B; } .ckyc-c-update { --swatch: #8B5CF6; } .ckyc-c-failed { --swatch: #F87171; } .ckyc-c-other { --swatch: #6B7280; } .ckyc-range { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid #E5E8EF; border-radius: 0.6rem; padding: 0.25rem 0.6rem; } .ckyc-range .form-select { border: 0; box-shadow: none; padding: 0.25rem 1.75rem 0.25rem 0.25rem; font-weight: 600; font-size: 0.92rem; background-position: right 0.25rem center; } .ckyc-range-icon { display: inline-flex; width: 18px; height: 18px; color: #6B7280; } .ckyc-range-icon svg { width: 100%; height: 100%; } .ckyc-kpi .card-body { padding: 1.05rem 1.15rem; } .ckyc-kpi-label { font-size: 0.85rem; color: #6B7280; margin: 0 0 0.15rem; } .ckyc-kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.02em; } .ckyc-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0.65rem; flex: 0 0 auto; color: var(--swatch, #6B7280); background: color-mix(in srgb, var(--swatch, #6B7280) 12%, #fff); } .ckyc-kpi-icon svg { width: 20px; height: 20px; } .ckyc-kpi-trend { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; } .ckyc-kpi-trend svg { width: 14px; height: 14px; } .ckyc-kpi-trend.is-up { color: #059669; } .ckyc-kpi-trend.is-down { color: #DC2626; } .ckyc-kpi-trend.is-flat { color: #9CA3AF; font-weight: 500; } .ckyc-chart svg, .ckyc-donut svg { width: 100%; height: auto; display: block; } .ckyc-donut svg { max-width: 240px; margin: 0 auto; } .ckyc-grid { stroke: #EEF1F6; stroke-width: 1; } .ckyc-axis { fill: #9CA3AF; font-size: 11px; } .ckyc-bar-success { fill: #2563EB; } .ckyc-bar-failed { fill: #F87171; } .ckyc-donut-empty { fill: none; stroke: #EEF1F6; stroke-width: 22; } .ckyc-donut-total { fill: #111827; font-size: 22px; font-weight: 700; } .ckyc-donut-caption { fill: #9CA3AF; font-size: 11px; } .ckyc-legend { display: flex; justify-content: center; gap: 1.1rem; margin-top: 0.6rem; font-size: 0.85rem; color: #4B5563; } .ckyc-legend-wrap { flex-wrap: wrap; row-gap: 0.35rem; } .ckyc-legend span { display: inline-flex; align-items: center; gap: 0.35rem; } .ckyc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--swatch, #6B7280); flex: 0 0 auto; } .ckyc-actions { display: grid; gap: 0.6rem; } .ckyc-action { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; border: 1px solid #E5E8EF; border-radius: 0.65rem; padding: 0.7rem 0.85rem; color: inherit; transition: border-color .15s ease, background-color .15s ease; } .ckyc-action:hover, .ckyc-action:focus-visible { border-color: var(--kyc-primary, #007A4D); background: #F9FBFD; } .ckyc-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0.6rem; flex: 0 0 auto; color: var(--swatch, #6B7280); background: color-mix(in srgb, var(--swatch, #6B7280) 12%, #fff); } .ckyc-action-icon svg { width: 18px; height: 18px; } .ckyc-action-text { display: flex; flex-direction: column; line-height: 1.25; } .ckyc-action-text small { color: #6B7280; } .ckyc-action-chevron { width: 16px; height: 16px; margin-left: auto; color: #C3C9D4; }