/* ============================================================================
 * Certopact brand stylesheet
 * Palette + typography from certopact-logo-pack BRAND-GUIDE.html
 * Applied across Client Portal (manage.certopact.com) + Admin Portal
 * ============================================================================ */

:root {
    --cream: #F4F6F8;
    --paper: #FFFFFF;
    --ink: #0B1220;
    --navy: #0B1F3A;
    --gold: #B08840;
    --gold-lt: #D4B271;
    --mid: #6B6860;
    --line: rgba(11, 18, 32, 0.10);

    --topnav-h: 56px;
    --sidebar-w: 232px;
    --sidebar-w-collapsed: 44px;
}

html, body {
    min-height: 100%;
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
}

h3 {
    font-size: 1.35rem;
}

h1 em,
h2 em,
h3 em {
    font-style: italic;
    color: var(--gold);
}

.lede {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--mid);
    line-height: 1.5;
}

.kicker {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 11px;
    color: var(--mid);
}

a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover,
a:focus {
    color: var(--gold);
}

/* Form-control theming (.btn / .btn-sm / .btn-lg sizing, .btn-navy /
   .btn-outline-navy, .cp-icon-btn, .form-control / .form-select / floating
   labels, .cp-pwd-wrap + toggle) now lives in theme.css. Loaded immediately
   after this file by _Layout.cshtml. */

/* Form-page title: restrained section-heading scale (form pages only, so
   dashboards keep their larger display headings). Heading scale, not a
   control — stays here in the typography section. */
.cp-compact-forms h1 {
    font-size: 1.9rem;
    line-height: 1.2;
}

/* Layout + navigation --------------------------------------------------- */

/* Reserve space for the fixed topbar on any page carrying the app chrome,
   and lay the page out as a full-height column so the footer sticks to the
   bottom even when the content is short. */
body:has(.cp-topnav) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--topnav-h);
}

body:has(.cp-topnav) > main {
    flex: 1 0 auto;
}

body:has(.cp-topnav) > .cp-footer {
    flex: none;
}

.cp-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-h);
    z-index: 1040;
    gap: 0.75rem;
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    /* No left padding so the hamburger sits flush over the icon rail. */
    padding: 0.5rem 1rem 0.5rem 0;
}

.cp-topnav .cp-brand img {
    height: 28px;
    width: auto;
}

.cp-topnav .cp-user {
    color: var(--mid);
    font-size: 0.925rem;
}

/* Sidebar styles (.cp-hamburger, .cp-subnav, .cp-nav-backdrop, .cp-role-operator,
   and the sidebar-space-reserving media queries) now live in sidebar.css.
   Loaded immediately after this file by _Layout.cshtml. */

.cp-footer {
    background-color: var(--cream);
    color: var(--mid);
    border-top: 1px solid var(--line);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.cp-footer a {
    color: var(--mid);
}

.cp-footer a:hover,
.cp-footer a:focus {
    color: var(--gold);
}

/* Cards + tiles --------------------------------------------------------- */

.cp-tile {
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.05);
}

.cp-tile .cp-tile-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--mid);
    margin-bottom: 0.5rem;
}

.cp-tile .cp-tile-value {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 2.25rem;
    color: var(--gold);
    line-height: 1;
}

.cp-tile .cp-tile-foot {
    color: var(--mid);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Usage progress thresholds (Round D will flip data in) */
.cp-usage-bar {
    height: 6px;
    background-color: var(--line);
    border-radius: 3px;
    overflow: hidden;
}

.cp-usage-bar-fill {
    height: 100%;
    background-color: var(--navy);
}

.cp-usage-threshold-amber .cp-usage-bar-fill {
    background-color: var(--gold);
}

.cp-usage-threshold-red .cp-usage-bar-fill {
    background-color: #B04040;
}

/* Login split layout ---------------------------------------------------- */

.cp-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 960px) {
    .cp-login-shell {
        grid-template-columns: 1fr;
    }
}

.cp-login-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 320px;
    /* Clip absolutely-positioned .cp-hero-slide layers used by Client portal. */
    overflow: hidden;
}

/* Admin portal: single static hero image baked into the modifier class.
   (Client portal stacks .cp-hero-slide layers inside the hero for its
   auto-rotating carousel — see below.) */
.cp-login-hero--admin { background-image: url('../img/login/admin-login-hero.png'); }

/* Hero carousel slide layers — Client portal login page only. Each layer is
   absolutely positioned to fill the hero; only the one carrying .is-active
   is opaque. certopact.js rotates .is-active between layers on a 5s timer
   (with reduced-motion + tab-visibility courtesies). To add a 3rd slide:
     1. Drop client-login-hero-3.png into wwwroot/img/login/
     2. Add a .cp-hero-slide--3 rule below
     3. Add <div class="cp-hero-slide cp-hero-slide--3"></div> to
        Client.Web/Views/Shared/_LoginLayout.cshtml
   The JS auto-detects slide count — no JS edit needed. */
.cp-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 1;
}

.cp-hero-slide.is-active {
    opacity: 1;
}

.cp-hero-slide--1 { background-image: url('../img/login/client-login-hero-1.png'); }
.cp-hero-slide--2 { background-image: url('../img/login/client-login-hero-2.png'); }
.cp-hero-slide--3 { background-image: url('../img/login/client-login-hero-3.png'); }

.cp-login-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.55), rgba(11, 18, 32, 0));
    pointer-events: none;
    /* Above the slide layers so the dark fade reads across any background. */
    z-index: 2;
}

.cp-login-hero-caption {
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    /* Above both the slides (z=1) and the gradient (z=2). */
    z-index: 3;
}

.cp-login-form {
    background-color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.cp-login-form-inner {
    width: 100%;
    max-width: 420px;
}

.cp-login-logo {
    height: 32px;
    width: auto;
    margin-bottom: 1.75rem;
}

/* ── Verification channel selection ────────────────────────────────────────── */

/* Step indicator */
.cp-step-indicator {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 1.75rem;
}
.cp-step-indicator .step {
    flex: 1 1 0;
    padding: 0.65rem 1rem;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.cp-step-indicator .step:last-child { border-right: 0; }
.cp-step-indicator .step-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cp-step-indicator .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(11,18,32,0.08);
    color: var(--mid);
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
}
.cp-step-indicator .step-title {
    font-weight: 600;
    color: var(--mid);
    font-size: 0.82rem;
    line-height: 1.3;
}
.cp-step-indicator .step-sub {
    font-size: 0.71rem;
    color: var(--mid);
    opacity: 0.7;
    padding-left: 2rem;
    line-height: 1.3;
}
.cp-step-indicator .step.is-current { background: #f5f1e7; }
.cp-step-indicator .step.is-current .num { background: var(--navy); color: #fff; }
.cp-step-indicator .step.is-current .step-title { color: var(--ink); }

/* Channel divider */
.cp-channel-divider {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.5rem 0 1.25rem;
    font-size: 0.77rem;
    color: var(--mid);
    font-family: 'Manrope', sans-serif;
}
.cp-channel-divider::before,
.cp-channel-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.cp-channel-divider .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(11,18,32,0.18);
    flex-shrink: 0;
}

/* OR pill between cards */
.cp-or-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 0 1rem;
}
.cp-or-pill::before,
.cp-or-pill::after {
    content: '';
    flex: 1;
    width: 1px;
    background: var(--line);
    min-height: 2rem;
}
.cp-or-pill > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--mid);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .cp-or-pill {
        flex-direction: row;
        padding: 0.75rem 0;
        width: 100%;
    }
    .cp-or-pill::before,
    .cp-or-pill::after {
        width: auto;
        height: 1px;
        min-height: unset;
    }
}

/* Card illustration (top-right corner) */
.cp-card-illus {
    position: absolute;
    top: 1rem;
    right: 1rem;
    pointer-events: none;
    opacity: 0.92;
}

/* Channel icon + check badge */
.cp-ch-icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.cp-ch-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-ch-check {
    position: absolute;
    bottom: -4px;
    right: -6px;
}

/* RECOMMENDED badge */
.cp-badge-rec {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-lt);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.6;
    white-space: nowrap;
}

/* Privacy notice at card bottom */
.cp-card-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.72rem;
    color: var(--mid);
    line-height: 1.45;
}

/* Aadhaar number input group */
.cp-aadh-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cp-aadh-flag {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}
.cp-aadh-wrap .cp-aadh-input {
    padding-left: 3.4rem;
    padding-right: 2.6rem;
}
.cp-aadh-eye {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--mid);
    display: flex;
    align-items: center;
    z-index: 2;
}
.cp-aadh-eye:hover { color: var(--ink); }

/* User-feedback surfaces (.alert-danger, .cp-toast-*, .cp-badge-*) now live
   in feedback.css. Loaded after this file by _Layout.cshtml. */

/* Tenant logo in topbar / Client edit page — kept aspect-ratio, capped size. */
.cp-tenant-logo {
    height: 36px;
    max-width: 180px;
    object-fit: contain;
}

/* Preview chrome around a tenant logo on Edit/Details pages — adds a thin
   border + white background so transparent PNG/SVG logos stay legible against
   the cream page background. Compose with .cp-tenant-logo (36×180) for forms,
   or pair with inline sizing for larger detail-page headers. */
.cp-logo-preview {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px;
    background: #fff;
}

/* Form-page centred wrappers — replaces inline style="max-width: NNNpx;" on
   form cards. Use the size that fits the form's column count:
     cp-form-narrow-sm  → simple single-column forms (login, password, etc.)
     cp-form-narrow-md  → standard create/edit forms
     cp-form-narrow-lg  → BillingSettings & similar wide single-column forms
     cp-form-narrow-xl  → Client Create/Edit (multi-section wide form) */
.cp-form-narrow-sm { max-width: 480px; margin-left: auto; margin-right: auto; }
.cp-form-narrow-md { max-width: 560px; margin-left: auto; margin-right: auto; }
.cp-form-narrow-lg { max-width: 720px; margin-left: auto; margin-right: auto; }
.cp-form-narrow-xl { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Table-header kicker variant — same JetBrains-Mono uppercase as .kicker,
   1px smaller for tighter table heads. Replaces inline font-size:10px on
   <th class="kicker"> across every list page. */
.kicker-xs { font-size: 10px; }

/* Table head with paper background — replaces inline style="background-color:
   var(--paper);" on <thead> across list pages. */
.cp-thead-paper { background-color: var(--paper); }

/* Misc ---------------------------------------------------------------- */

.text-gold {
    color: var(--gold) !important;
}

.text-mid {
    color: var(--mid);
}

.bg-paper {
    background-color: var(--paper) !important;
}

/* Focus ring default */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}