/* ======================================================================
   portal-shell.css  —  "Nordisk × Mjuk" theme for the ChamberSign portal

   Editorial calm (serif display type, warm paper, hairline structure)
   meets warm reassurance (soft surfaces, rounded cards, friendly accents,
   a sage trust colour).

   GLOBAL on purpose: in this environment the Blazor scoped-CSS bundle was
   not regenerating, so all theming lives here and is linked from App.razor
   AFTER the scoped bundle (it wins). Fonts (Newsreader + Plus Jakarta Sans)
   are loaded by the <link> tags in App.razor.

   HOW IT WORKS: the :root block below re-maps the existing design tokens
   (the same names tokens.css / landing-page.css already use). Because every
   component reads those tokens via var(), re-mapping them re-themes the
   WHOLE app — shell, forms, picker, invite pages — from one place. The
   rules after it add the finishing touches CSS alone can do.
   ====================================================================== */

:root {
    /* Brand — DECIDED: green primary action + olive trust accent.
       (Replaces the interim blue. Green = the agreed "Signera" colour.) */
    --brand-primary: #78A557;
    --brand-primary-hover: #96BB7A;
    --brand-primary-soft: #EAF1E3;
    --brand-accent: #5E7A4E;          /* olive — trust badge text */

    /* Surfaces — warm paper */
    --bg-page: #F4EEE6;
    --bg-page-alt: #EFE7DA;
    --bg-surface: #FCFAF6;
    --bg-subtle: #FBF6EE;
    --bg-hover: #F0E9DD;

    /* Text — warm ink */
    --text-heading: #211C17;
    --text-primary: #2A2320;
    --text-secondary: #7A7066;
    --text-muted: #9A8E80;

    /* Borders */
    --border-subtle: #EADFD0;
    --border-button: #E2D7C8;

    /* Softer, friendlier radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* UI font */
    --font-family-base: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-default: var(--font-family-base);

    /* Trust-badge tint */
    --accent-soft: #EAF1E3;

    /* Focus ring re-tinted to the green primary (overrides landing-page.css) */
    --cs-color-focus-ring: rgba(120, 165, 87, 0.30);

    /* Brand mark colour — the coral c·sign dot. The real logo image carries
       this now; kept for any text-based wordmark fallback. */
    --brand-mark: #FF5757;

    /* ── INVITE BANNER COLOUR ──────────────────────────────────────────
       The coloured header band on the signer invite page. Change this one
       value to recolour it. Options from the brand exploration:
         #929FB3 slate · #90AE7A sage · #97849F mauve · #7FB2C9 sky · #2B2A33 ink
         #5E7A4E forest · #3A4A6B navy · #4F8C86 teal · #6E5A78 plum
         #C57B5C terracotta · #B89A6E warm sand                          */
    --banner: #929FB3;
}

/* Base UI font everywhere */
html, body {
    font-family: var(--font-family-base);
}

/* ======================================================================
   APP SHELL  — full-width banner header, then sidebar + content below.
   The banner appears on every page (it lives in MainLayout), so the logo
   lives here rather than being repeated in the sidebar.
   ====================================================================== */
.cs-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cs-appbanner {
    position: relative;
    overflow: hidden;
    background: var(--banner);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}

.cs-appbanner::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 230px;
    height: 230px;
    border: 18px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.cs-appbanner-logo {
    position: relative;
    height: 28px;
    display: block;
}

.cs-appbanner-tag {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgb(43, 43, 43);
}

.cs-shell-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.cs-shell-body > .sidebar {
    width: 250px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    /* neutralise the old layout's sticky/100vh sidebar rules */
    position: static;
    height: auto;
}

.cs-shell-body > .content {
    flex: 1;
    background: var(--bg-surface);
    padding: 40px 44px;
    min-width: 0;
}

@media (max-width: 760px) {
    .cs-shell-body { flex-direction: column; }
    .cs-shell-body > .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .cs-appbanner { padding: 18px 22px; }
    .cs-shell-body > .content { padding: 26px 22px; }
}

/* Serif display type for headings (the "Nordisk" half) */
.cs-page h1,
.cs-home-title {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-heading);
}

.cs-page h1 {
    font-size: 30px;
}

.cs-page h2 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -0.005em;
    color: var(--text-heading);
}

/* ======================================================================
   SHELL — sidebar + Home
   ====================================================================== */

.page > .sidebar {
    background-color: #fff !important;
    border-right: 1px solid var(--border-subtle);
}

.sidebar .top-row {
    height: 66px !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.cs-brand-lockup {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Real c·sign logo in the sidebar (black wordmark + coral dot, on transparent) */
.cs-brand-logo {
    height: 26px;
    display: block;
}

.cs-brand-dot { color: var(--brand-mark); }

.cs-brand-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-left: 8px;
    align-self: center;
}

.cs-nav-links {
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    gap: 5px;
}

.cs-nav-links .cs-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.cs-nav-links .cs-nav-link:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.cs-nav-links .cs-nav-link.active {
    background-color: var(--brand-primary-soft);
    color: var(--text-heading);
    font-weight: 600;
}

.cs-nav-links .cs-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-primary);
}

.cs-nav-footer {
    margin-top: auto;
    padding: 18px 24px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Home */
.cs-home { max-width: 780px; padding: 8px 0; }

.cs-home-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
}

.cs-home-title { font-size: 34px; margin: 8px 0 0; }

.cs-home-lead {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 8px 0 0;
    max-width: 52ch;
}

.cs-home-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 26px;
}

.cs-home-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(80, 58, 34, 0.04);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.cs-home-card:hover {
    border-color: var(--border-button);
    box-shadow: 0 8px 22px rgba(80, 58, 34, 0.08);
    transform: translateY(-1px);
}

.cs-home-card-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--text-heading);
}

.cs-home-card-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 6px 0 18px;
}

.cs-home-card-cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-primary);
    padding: 9px 18px;
    border-radius: var(--radius-md);
}

.cs-home-card-cta--secondary {
    color: var(--text-primary);
    background: #fff;
    border: 1.5px solid var(--border-button);
}

/* Mobile hamburger */
.sidebar .navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%2833,28,23,0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat center/1.5rem !important;
}

.sidebar .nav-scrollable { display: none; }
.sidebar .navbar-toggler:checked ~ .nav-scrollable { display: flex !important; flex-direction: column; }

@media (min-width: 641px) {
    .sidebar .navbar-toggler { display: none; }
    .sidebar .nav-scrollable {
        display: flex !important;
        flex-direction: column;
        height: calc(100vh - 66px);
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .cs-home-cards { grid-template-columns: 1fr; }
}

/* ======================================================================
   PAGE-LEVEL REFINEMENTS  (signer flow + admin pages)
   ====================================================================== */

.cs-card {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(80, 58, 34, 0.04), 0 14px 40px rgba(80, 58, 34, 0.07);
    padding: 30px;
}

.cs-card--highlighted {
    border-color: var(--brand-primary);
}

/* Buttons */
.cs-button {
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.cs-button-primary {
    box-shadow: 0 1px 2px rgba(120, 165, 87, 0.22);
}

.cs-button-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(120, 165, 87, 0.28);
}

.cs-button-secondary {
    border-color: var(--border-button);
}

.cs-button-secondary:hover:not(:disabled) {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

/* Inputs */
.cs-page input[type="text"],
.cs-page input[type="email"],
.cs-page input[type="search"],
.cs-page input[type="tel"],
.cs-page input[type="url"],
.cs-page input[type="number"],
.cs-page select,
.cs-page textarea {
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-button);
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cs-page textarea { min-height: 96px; }

.cs-page label { font-weight: 600; color: var(--text-secondary); }

/* Tabs */
.cs-tabs { border-bottom: 1px solid var(--border-subtle); }

.cs-tab-active {
    color: var(--text-heading);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

/* Tables */
.cs-page table.cs-table th {
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-page-alt);
}

/* Warnings */
.cs-page .cs-rule-warning,
.cs-page .cs-warning {
    background: #FBF1DD;
    border: 1px solid #ECD9A8;
    color: #8a5a00;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-top: 14px;
    max-width: none;
}

/* Links — but NOT link-styled buttons (those keep their own label colour) */
.cs-page a:not(.cs-button) { color: var(--brand-primary); }
.cs-page a:not(.cs-button):hover { color: var(--brand-primary-hover); }
.cs-page a.cs-button-primary,
.cs-page a.cs-button-primary:hover { color: #fff; }
.cs-page a.cs-button-secondary,
.cs-page a.cs-button-secondary:hover { color: var(--text-primary); }
.cs-page a.cs-button { text-decoration: none; }

/* ======================================================================
   FIRMATECKNARE PICKER
   ====================================================================== */

.cs-page .picker-section-header {
    font-family: var(--font-family-base);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 22px;
    margin-bottom: 12px;
}

.cs-page .picker-row {
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 12px;
    border-radius: 0;
}

.cs-page .picker-row--normal:hover { background: var(--bg-subtle); }

.cs-page .picker-row--selected {
    background: #EFF4FB;
    border-left: 3px solid var(--brand-primary);
    padding-left: 9px;
}

.cs-page .picker-row--highlighted {
    background: var(--brand-primary-soft);
    border-left: 3px solid var(--brand-primary);
    padding-left: 9px;
}

/* Friendly round avatar — holds coloured initials (set inline per person).
   The fallback tint applies if the markup still renders the silhouette. */
.cs-page .picker-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.cs-page .picker-avatar svg { width: 22px; height: 22px; }

/* Names in the serif display face */
.cs-page .picker-name {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-heading);
}

/* Authority as a calm chip */
.cs-page .picker-authority-label {
    display: inline-block;
    align-self: flex-start;
    margin-top: 5px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

/* "Du" badge in the sage trust colour */
.cs-page .picker-du-badge {
    background: var(--accent-soft);
    color: var(--brand-accent);
    font-weight: 600;
}

/* Picker action button keeps pill-ish friendliness */
.cs-page .picker-send-btn { padding-left: 1.4rem; padding-right: 1.4rem; }

/* ======================================================================
   FIRMATECKNARE SELECT (admin)
   ====================================================================== */

.cs-page .firmatecknare-list-header { color: var(--text-muted); }
.cs-page .firmatecknare-row { border-bottom: 1px solid var(--border-subtle); }

/* ======================================================================
   INVITE / LANDING PAGE — header, document preview, footer
   ====================================================================== */

.cs-page .cs-header-band { padding: 38px 0 22px; }

/* Coral dot in the c·sign wordmark (header + footer) — brand mark colour */
.cs-page .cs-logo-dot,
.cs-page .cs-footer .cs-logo-dot { color: var(--brand-mark); }

/* Editorial hero on the invite / select screen */
.cs-page .invite-hero {
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border-subtle);
}

.cs-page .invite-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px var(--font-family-base);
    color: var(--brand-accent);
    background: var(--accent-soft);
    padding: 7px 15px;
    border-radius: 30px;
}

.cs-page .invite-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-accent);
}

.cs-page .invite-headline {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-heading);
    margin: 16px 0 0;
    max-width: none;
}

.cs-page .invite-sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 10px 0 0;
    max-width: 64ch;
}

.cs-page .cs-logo-text {
    font-family: var(--font-family-base);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-heading);
}

.cs-page .cs-thin-divider {
    border-top: 1px solid var(--border-subtle);
    max-width: 360px;
}

.cs-page .cs-invitation-subtext p { color: var(--text-secondary); }

.cs-page .invite-flow-preview object {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.cs-page .document-title {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 500;
    color: var(--text-heading);
}

.cs-page .cs-link-danger { color: var(--brand-primary); }
.cs-page .cs-link-danger:hover { color: var(--brand-primary-hover); }

.cs-page .cs-footer { color: var(--text-muted); }

/* ======================================================================
   INVITE BANNER  ("Option 1")  — coloured brand band at the top of the
   signer invite card. Colour is driven by the --banner variable in :root.
   ====================================================================== */

/* The card becomes a flush container so the banner can bleed to its edges */
/* ======================================================================
   INVITE BANNER  ("Option 1")
   ====================================================================== */
.cs-page .cs-card--bannered {
    padding: 0;
    overflow: hidden;
}

.cs-page .cs-banner {
    position: relative;
    overflow: hidden;
    background: var(--banner);
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Decorative ring — purely cosmetic, delete if undesired */
.cs-page .cs-banner::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 230px;
    height: 230px;
    border: 18px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.cs-page .cs-banner-logo {
    position: relative;
    height: 32px;
    display: block;
}

.cs-page .cs-banner-tag {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgb(43, 43, 43);
}

/* Padded body region under the banner */
.cs-page .cs-card-body {
    padding: 34px 40px 40px;
}

/* Centered intro for the bannered layout */
.cs-page .invite-hero--center {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 30px;
    padding-bottom: 0;
    border-bottom: none;
}

.cs-page .invite-hero--center .invite-headline { max-width: none; }
.cs-page .invite-hero--center .invite-sub { max-width: none; }

@media (max-width: 640px) {
    .cs-page .cs-banner { padding: 20px 22px; }
    .cs-page .cs-card-body { padding: 24px 22px 30px; }
}