/* ============================================================================
   Material 3 (Material You) theme for Insurance Renewals.
   Loaded AFTER clientforge.css (see index.html), so it re-skins the shared
   baseline chrome (cf-*) and adds new MD3 components (md-*). Tokens are from
   docs/apps/insurance-renewals/09. Dark mode is a token swap.
   ============================================================================ */
:root {
  --md-primary:            #3a5bd9;
  --md-on-primary:         #ffffff;
  --md-primary-container:  #dde1ff;
  --md-on-primary-container:#001258;

  --md-secondary:          #5a5d72;
  --md-secondary-container:#dee0f9;
  --md-on-secondary-container:#171a2c;

  --md-surface:            #fbf8ff;
  --md-surface-container:  #f0edf5;
  --md-surface-container-high:#eae7ef;
  --md-on-surface:         #1b1b21;
  --md-on-surface-variant: #46464f;
  --md-outline:            #c6c5d0;
  --md-outline-variant:    #e3e1ec;

  --st-active-bg:   #d7f2df;  --st-active-fg:   #0d5227;
  --st-soon-bg:     #fdeccd;  --st-soon-fg:     #6b4a00;
  --st-due-bg:      #ffe0d6;  --st-due-fg:      #7a2600;
  --st-expired-bg:  #ffdad6;  --st-expired-fg:  #8c0009;

  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px;
  --shape-xl: 28px; --shape-full: 999px;

  --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --elev-2: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.12);
  --elev-3: 0 4px 8px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.10);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary:            #b8c3ff;
    --md-on-primary:         #001258;
    --md-primary-container:  #1f3aa8;
    --md-on-primary-container:#dde1ff;
    --md-secondary-container:#3d4066;
    --md-on-secondary-container:#e0e1ff;
    --md-surface:            #121218;
    --md-surface-container:  #1e1e25;
    --md-surface-container-high:#282830;
    --md-on-surface:         #e4e1e9;
    --md-on-surface-variant: #c7c5d0;
    --md-outline:            #90909a;
    --md-outline-variant:    #46464f;
    --st-active-bg:#0d3b20; --st-active-fg:#a6f0c0;
    --st-soon-bg:#4a3400;  --st-soon-fg:#ffdf9e;
    --st-due-bg:#5c1c00;   --st-due-fg:#ffb59c;
    --st-expired-bg:#690005;--st-expired-fg:#ffb4ab;
  }
}

/* ---- Re-skin the shared baseline chrome ---- */
body { background: var(--md-surface); color: var(--md-on-surface);
       font-family: var(--font); -webkit-font-smoothing: antialiased; }
.cf-shell { background: var(--md-surface); min-height: 100vh; }

/* Sticky, frosted header (glassmorphism) instead of a flat solid bar — reads as one floating
   layer over the scrolling content, and stays reachable without eating scroll position. */
.cf-header { position: sticky; top: 0; z-index: 20;
             background: color-mix(in srgb, var(--md-surface) 78%, transparent);
             backdrop-filter: saturate(180%) blur(16px);
             -webkit-backdrop-filter: saturate(180%) blur(16px);
             box-shadow: var(--elev-1); border-bottom: 1px solid var(--md-outline-variant);
             padding-top: env(safe-area-inset-top); }
.cf-brand  { color: var(--md-on-surface); font-weight: 700; letter-spacing: -.02em; }
.cf-nav a, .cf-nav .cf-linkbtn { color: var(--md-on-surface-variant); transition: color .15s ease; }
.cf-nav a:hover, .cf-nav .cf-linkbtn:hover { color: var(--md-on-surface); }
.cf-main   { max-width: 920px; padding-bottom: 2.5rem; }

/* App-specific header nav links (Contracts/Settings) hand off to the bottom tab bar on
   mobile — `display: contents` keeps them true flex children of .cf-nav on desktop, so this
   wrapper never affects spacing there. */
.ir-navlinks { display: contents; }

.cf-input, textarea.cf-input {
  background: var(--md-surface-container); color: var(--md-on-surface);
  border: 1px solid var(--md-outline); border-radius: var(--shape-sm);
  padding: .8rem .8rem; font: inherit; }
.cf-input:focus { outline: 2px solid var(--md-primary); border-color: var(--md-primary); }
textarea.cf-input { min-height: 4rem; resize: vertical; }
.cf-code-input { letter-spacing: .5em; }

.cf-btn { background: var(--md-primary); color: var(--md-on-primary);
          border: none; border-radius: var(--shape-full); padding: .65rem 1.4rem;
          font: inherit; font-weight: 500; box-shadow: var(--elev-1); cursor: pointer;
          transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.cf-btn:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--elev-2); transform: translateY(-1px); }
.cf-btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.cf-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.cf-btn-sm { padding: .45rem 1rem; font-size: .88rem; }
.cf-btn-outline { background: transparent; color: var(--md-primary);
                   border: 1px solid var(--md-outline); border-radius: var(--shape-full);
                   padding: .6rem 1.4rem; font: inherit; font-weight: 500; cursor: pointer; }
.cf-btn-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.cf-linkbtn-inline { color: var(--md-primary); }
.cf-muted { color: var(--md-on-surface-variant); font-size: .9rem; }
.cf-linkbtn { background: none; border: none; color: var(--md-primary); cursor: pointer;
              font: inherit; font-weight: 500; padding: .35rem .5rem; border-radius: var(--shape-sm); }
.cf-linkbtn:hover { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }
.cf-linkbtn.cf-del { color: var(--st-expired-fg); }

/* ---- Login / vault card (doc 10 onboarding + unlock flows) ---- */
.cf-card { background: var(--md-surface-container); color: var(--md-on-surface);
           border: none; border-radius: var(--shape-xl); box-shadow: var(--elev-2); }
.cf-card h1 { letter-spacing: -.02em; }
.cf-card > p { color: var(--md-on-surface-variant); }
.cf-card hr { border-top: 1px solid var(--md-outline-variant); }
.cf-card label { color: var(--md-on-surface-variant); }
.cf-notice { background: var(--st-due-bg); color: var(--st-due-fg); }
.cf-recovery-code { background: var(--md-surface-container-high); color: var(--md-on-surface);
                     border: 1px dashed var(--md-outline); border-radius: var(--shape-md); }
.cf-ack { color: var(--md-on-surface); }
.cf-status { color: var(--md-on-surface-variant); }
.cf-status.is-ok { color: var(--md-on-surface); }
.cf-error { background: var(--st-expired-bg); color: var(--st-expired-fg);
            border-radius: var(--shape-md); padding: .65rem .85rem; }

/* Blazor's unhandled-error banner, matched to the app's snackbar (.md-snackbar) look. */
#blazor-error-ui { background: #31313a; color: #f2f0f7; border-radius: var(--shape-sm); box-shadow: var(--elev-3); }

/* ---- Page header row ---- */
.ir-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin: .25rem 0 1.1rem; }

/* ---- Toolbar: segmented control + action ---- */
.ir-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ir-toolbar .spacer { flex: 1; }
.md-segmented { display: inline-flex; border: 1px solid var(--md-outline); border-radius: var(--shape-full);
                overflow: hidden; }
.md-segmented button { border: none; background: transparent; color: var(--md-on-surface-variant);
                       padding: .55rem 1.1rem; font: inherit; font-weight: 500; font-size: .9rem; cursor: pointer;
                       display: inline-flex; align-items: center; gap: .4rem; }
.md-segmented button + button { border-left: 1px solid var(--md-outline); }
.md-segmented button[aria-selected="true"] { background: var(--md-secondary-container);
                       color: var(--md-on-secondary-container); }
.md-segmented .count { font-variant-numeric: tabular-nums; opacity: .7; font-size: .82em; }

.section-hint { color: var(--md-on-surface-variant); font-size: .82rem; margin: 0 0 1rem; }

/* ---- Policy card (hero) ---- */
.md-cards { display: grid; gap: .85rem; }
@media (min-width: 720px) { .md-cards { grid-template-columns: 1fr 1fr; } }

.md-card { position: relative; overflow: hidden; background: var(--md-surface-container);
           border: 1px solid var(--md-outline-variant);
           border-radius: var(--shape-lg); box-shadow: var(--elev-1);
           padding: 1rem 1.15rem 1rem 1.35rem;
           transition: transform .18s ease, box-shadow .18s ease; }
.md-card:active { transform: scale(.985); }
@media (hover: hover) { .md-card:hover { box-shadow: var(--elev-2); } }
.md-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
                   background: var(--accent, transparent); }
.md-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.md-card .name { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.md-card .polno { color: var(--md-on-surface-variant); font-size: .82rem; margin: .15rem 0 0;
                  font-variant-numeric: tabular-nums; }
.md-card .dates { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .8rem 0 0;
                  color: var(--md-on-surface-variant); font-size: .84rem; align-items: center; }
.md-card .countdown { font-weight: 600; color: var(--md-on-surface); }
.md-card.is-soon    .countdown { color: var(--st-soon-fg); }
.md-card.is-due     .countdown { color: var(--st-due-fg); }
.md-card.is-expired .countdown { color: var(--st-expired-fg); }
.md-card .guestline { margin: .6rem 0 0; font-size: .72rem; letter-spacing: .04em;
                      text-transform: uppercase; color: var(--md-on-surface-variant); }
.md-card .footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                   margin-top: .95rem; padding-top: .8rem; border-top: 1px solid var(--md-outline-variant);
                   flex-wrap: wrap; }
.md-card .notes { margin: .6rem 0 0; font-size: .85rem; color: var(--md-on-surface-variant); }

.md-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem;
           border-radius: var(--shape-full); font-size: .76rem; font-weight: 600; white-space: nowrap; flex: none; }
.md-chip .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.md-chip--active  { background: var(--st-active-bg);  color: var(--st-active-fg); }
.md-chip--soon    { background: var(--st-soon-bg);    color: var(--st-soon-fg); }
.md-chip--due     { background: var(--st-due-bg);     color: var(--st-due-fg); }
.md-chip--expired { background: var(--st-expired-bg); color: var(--st-expired-fg); }

.md-pdf-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
               border-radius: var(--shape-full); background: var(--md-surface-container-high);
               color: var(--md-on-surface); font-size: .8rem; font-weight: 500; border: none; cursor: pointer;
               max-width: 100%; }
.md-pdf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pdf-chip:hover { filter: brightness(.97); }
.pdf-none { color: var(--md-on-surface-variant); font-size: .8rem; }
.md-card .actions { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* File input styled as a tonal button */
.md-upload { position: relative; overflow: hidden; display: inline-flex; }
.md-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.md-upload .label { background: var(--md-secondary-container); color: var(--md-on-secondary-container);
                    border-radius: var(--shape-full); padding: .45rem 1rem; font-size: .82rem; font-weight: 500; }

/* ---- Sharing panel ---- */
.md-panel { background: var(--md-surface-container); border-radius: var(--shape-lg);
            box-shadow: var(--elev-1); padding: 1.15rem 1.25rem; margin-top: 1.5rem; }
.md-panel h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }
.md-panel .sub { color: var(--md-on-surface-variant); font-size: .85rem; margin: 0 0 .9rem; }
.md-guest { display: flex; align-items: center; gap: .6rem; padding: .55rem 0;
            border-top: 1px solid var(--md-outline-variant); }
.md-guest .who-col { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.md-guest .who { font-size: .9rem; word-break: break-all; }
.md-guest .fingerprint { font-size: .74rem; font-family: ui-monospace, monospace;
                         color: var(--md-on-surface-variant); word-break: break-all; }
.md-guest .badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--md-on-surface-variant); }
.md-inviterow { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.md-inviterow .cf-input { flex: 1; min-width: 200px; }
.btn-outlined { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline);
                border-radius: var(--shape-full); padding: .55rem 1.1rem; font: inherit; font-weight: 500; cursor: pointer; }

/* ---- Danger zone (Settings: delete account) ---- */
.md-panel--danger { border: 1px solid color-mix(in srgb, var(--st-expired-fg) 35%, transparent); }
.md-panel--danger h2 { color: var(--st-expired-fg); }
.md-panel--danger label { display: block; font-size: .82rem; font-weight: 500;
                           color: var(--md-on-surface-variant); margin: .9rem 0 .4rem; }
.md-panel--danger .row-actions { margin-top: 1.1rem; }
.cf-btn--danger { background: var(--st-expired-fg); color: var(--st-expired-bg); }
.cf-btn--danger:disabled { opacity: .4; cursor: default; }

/* ---- FAB (mobile) ---- */
.md-fab { position: fixed; right: 1.25rem; z-index: 15; display: none;
          bottom: calc(1.25rem + env(safe-area-inset-bottom));
          align-items: center; gap: .5rem; border: none; cursor: pointer;
          background: var(--md-primary); color: var(--md-on-primary);
          border-radius: var(--shape-lg); padding: 1rem 1.35rem; box-shadow: var(--elev-3);
          font: inherit; font-weight: 600;
          transition: transform .15s ease, box-shadow .15s ease; }
.md-fab:active { transform: scale(.95); box-shadow: var(--elev-2); }
@media (max-width: 719px) {
  .md-fab { display: inline-flex; }
  .ir-toolbar .cf-btn.new { display: none; }
  /* Room above the frosted bottom tab bar so the FAB and last card never sit under it. */
  .md-fab { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .cf-main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---- Dialog ---- */
.md-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 30;
            display: flex; align-items: center; justify-content: center; padding: 1rem;
            animation: scrim-in .15s ease; }
.md-dialog { background: var(--md-surface-container-high); color: var(--md-on-surface);
             border-radius: var(--shape-xl); box-shadow: var(--elev-3); width: 100%; max-width: 460px;
             padding: 1.5rem; max-height: 90vh; overflow-y: auto;
             animation: dialog-in .18s cubic-bezier(.2,.8,.2,1); }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .md-scrim, .md-dialog { animation: none; } }
.md-dialog h2 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; }
.md-dialog label { display: block; font-size: .78rem; font-weight: 500; color: var(--md-on-surface-variant);
                   margin: .9rem 0 .3rem; }
.md-dialog .cf-input { width: 100%; }
.md-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.md-dialog .row-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }

/* ---- Snackbar / banners ---- */
.md-snackbar { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 40;
               background: #31313a; color: #f2f0f7; padding: .85rem 1.1rem; border-radius: var(--shape-sm);
               box-shadow: var(--elev-3); font-size: .9rem;
               animation: snackbar-in .18s cubic-bezier(.2,.8,.2,1); }
@keyframes snackbar-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .md-snackbar { animation: none; } }
@media (max-width: 719px) { .md-snackbar { bottom: calc(4.75rem + env(safe-area-inset-bottom)); } }
.md-error { background: var(--st-expired-bg); color: var(--st-expired-fg); border-radius: var(--shape-md);
            padding: .75rem 1rem; margin: 0 0 1rem; font-size: .88rem; }

/* ---- Empty / loading ---- */
.md-empty { text-align: center; color: var(--md-on-surface-variant); padding: 2.5rem 1rem; }
.md-empty .icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.md-skel { height: 96px; border-radius: var(--shape-lg); margin: .85rem 0;
           background: linear-gradient(90deg, var(--md-surface-container) 25%,
             var(--md-surface-container-high) 50%, var(--md-surface-container) 75%);
           background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .md-skel { animation: none; } }

/* ---- Bottom tab bar (mobile) ----
   2025 mobile-app pattern: primary destinations live in the thumb zone, not a top bar you
   have to reach for. Desktop keeps the header links (.ir-navlinks); this replaces them below
   719px. Frosted to match the header so both read as one floating chrome layer. */
.ir-tabbar { display: none; }
@media (max-width: 719px) {
  .ir-navlinks { display: none; }
  .ir-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    justify-content: space-around;
    background: color-mix(in srgb, var(--md-surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--md-outline-variant);
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .ir-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    flex: 1; max-width: 120px; padding: .35rem .5rem; border-radius: var(--shape-md);
    text-decoration: none; color: var(--md-on-surface-variant);
    font-size: .68rem; font-weight: 600; letter-spacing: .01em;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
  }
  .ir-tabbar a .ic { font-size: 1.3rem; line-height: 1; }
  .ir-tabbar a:active { transform: scale(.92); }
  .ir-tabbar a.active { color: var(--md-primary); }
}