/* ============================================================================
   Xcobean brand tokens + app switcher (v3, 2026-07-31)
   CANONICAL copy: xcobean-platform/public/brand/xcobean-brand.css
   Mirrored into: xcobean-id/public/brand/, xcobean-backoffice/public/brand/
   Keep the three copies identical; bump the version comment when editing.

   v3: palette copied from xcobean.co.ke (its Tailwind "primary" scale):
   blue 600 #2563eb actions, 700 #1d4ed8 hover, 900 #1e3a8a deep, 50 #eff6ff
   tint, font Inter. Blue fills carry WHITE text. (v2 yellow was wrong: yellow
   + black is YEHU's brand, not Xcobean's. v1 green/navy predates the co.ke
   rebrand.) Rolled out to id.xcobean first.

   Body classes select the per-skin harmonization layer:
     .xcb-wow     console.xcobean.com  (WowDash)
     .xcb-nftmax  payments.xcobean.com (merchant theme)
     .xcb-id      id.xcobean.com       (inline-styled portal)
   The ops portal (app.xcobean.com) carries these tokens natively via Tailwind.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --xcb-ink: #1e3a8a;          /* deep brand blue: headers, sidebars, dark accents */
    --xcb-ink-700: #1e40af;
    --xcb-brand: #2563eb;        /* primary actions, links, accents (white text on fills) */
    --xcb-brand-600: #1d4ed8;    /* hover */
    --xcb-brand-50: #eff6ff;     /* pale tint: badges, hovers, selected tiles */
    --xcb-bg: #f8fafc;
    --xcb-radius: 12px;
    --xcb-shadow: 0 6px 24px -8px rgba(30, 58, 138, .14);
    --xcb-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- App switcher (identical on every portal; <details> = zero JS) ------- */
.xcb-apps { position: relative; display: inline-block; font-family: var(--xcb-font); }
.xcb-apps summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: inherit; opacity: .85; border: 1px solid rgba(128, 138, 168, .35);
    background: rgba(255, 255, 255, .06);
}
.xcb-apps summary::-webkit-details-marker { display: none; }
.xcb-apps summary:hover { opacity: 1; }
.xcb-apps[open] > nav {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000;
    min-width: 220px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: var(--xcb-radius); box-shadow: var(--xcb-shadow); padding: 6px;
}
.xcb-apps nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; text-decoration: none;
    font-size: 13.5px; font-weight: 500; color: var(--xcb-ink) !important;
}
.xcb-apps nav a:hover { background: var(--xcb-brand-50); color: var(--xcb-brand) !important; }
.xcb-apps nav a .xcb-dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--xcb-brand); flex: 0 0 8px;
}
.xcb-apps nav a small { display: block; font-weight: 400; color: #64748b; font-size: 11px; }

/* ---- WowDash console (.xcb-wow): accent + font harmonization ------------- */
.xcb-wow, .xcb-wow body, body.xcb-wow { font-family: var(--xcb-font) !important; }
body.xcb-wow .text-primary-600, body.xcb-wow .text-primary-light,
body.xcb-wow .hover-text-primary:hover { color: var(--xcb-brand) !important; }
body.xcb-wow .bg-primary-600 { background-color: var(--xcb-brand) !important; }
body.xcb-wow .bg-primary-50 { background-color: var(--xcb-brand-50) !important; }
body.xcb-wow .btn-primary,
body.xcb-wow .btn-primary-600 { background-color: var(--xcb-brand) !important; border-color: var(--xcb-brand) !important; }
body.xcb-wow .sidebar-menu .active > a,
body.xcb-wow .sidebar-menu li a.active-page,
body.xcb-wow .sidebar-menu li a.active {
    background-color: var(--xcb-brand) !important; color: #fff !important;
}
body.xcb-wow a { color: var(--xcb-brand); }

/* ---- Merchant theme (.xcb-nftmax): accent + font harmonization ----------- */
body.xcb-nftmax, body.xcb-nftmax h1, body.xcb-nftmax h2, body.xcb-nftmax h3,
body.xcb-nftmax h4, body.xcb-nftmax p, body.xcb-nftmax a, body.xcb-nftmax span,
body.xcb-nftmax td, body.xcb-nftmax th, body.xcb-nftmax button { font-family: var(--xcb-font) !important; }
body.xcb-nftmax .menu-bar__one li.active a,
body.xcb-nftmax .menu-bar__one li.active .nftmax-menu-icon { color: var(--xcb-brand) !important; }
body.xcb-nftmax .btn-primary,
body.xcb-nftmax button[type=submit].nftmax-btn { background-color: var(--xcb-brand) !important; border-color: var(--xcb-brand) !important; }
body.xcb-nftmax a { color: var(--xcb-brand); }
body.xcb-nftmax .xc-stat h2 { color: var(--xcb-ink); }

/* ---- id.xcobean (.xcb-id): its inline --xc-blue vars already ARE the
   co.ke blues; pin them to the tokens so future palette edits propagate. --- */
body.xcb-id {
    --xc-blue: var(--xcb-brand);
    --xc-blue-dark: var(--xcb-brand-600);
    --xc-blue-deep: var(--xcb-ink);
    font-family: var(--xcb-font) !important;
}
body.xcb-id .badge { background: var(--xcb-brand-50); color: var(--xcb-brand); }
/* The KYB org page uses .btn / .btn.secondary, which no layout defines,
   so they rendered as native OS buttons. .btn = primary blue (same shape
   as the layout's .btn-primary); .secondary = white with a border. */
body.xcb-id .btn {
    appearance: none; -webkit-appearance: none;
    background: var(--xcb-brand); color: #fff; border: 1px solid var(--xcb-brand);
    padding: 10px 20px; border-radius: 8px;
    font-family: var(--xcb-font); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s;
}
body.xcb-id .btn:hover { background: var(--xcb-brand-600); border-color: var(--xcb-brand-600); }
body.xcb-id .btn.secondary, body.xcb-id .btn-secondary {
    background: #fff; color: var(--xcb-brand); border: 1px solid #cbd5e1;
}
body.xcb-id .btn.secondary:hover, body.xcb-id .btn-secondary:hover {
    background: var(--xcb-brand-50); border-color: var(--xcb-brand);
}
/* File inputs: replace the OS-default "Choose file" chip with a branded
   secondary button (avatar upload, KYB documents, director IDs). Keep the
   webkit and standard rules SEPARATE: an unknown pseudo in a selector list
   would invalidate the whole rule. */
body.xcb-id input[type=file] { font-family: var(--xcb-font); font-size: 14px; color: #64748b; }
body.xcb-id input[type=file]::file-selector-button {
    appearance: none; -webkit-appearance: none;
    background: #fff; color: var(--xcb-brand);
    border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 8px 16px; margin-right: 12px;
    font-family: var(--xcb-font); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s;
}
body.xcb-id input[type=file]::file-selector-button:hover {
    background: var(--xcb-brand-50); border-color: var(--xcb-brand);
}
body.xcb-id input[type=file]::-webkit-file-upload-button {
    appearance: none; -webkit-appearance: none;
    background: #fff; color: var(--xcb-brand);
    border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 8px 16px; margin-right: 12px;
    font-family: var(--xcb-font); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s;
}
body.xcb-id input[type=file]::-webkit-file-upload-button:hover {
    background: var(--xcb-brand-50); border-color: var(--xcb-brand);
}