/* =============================================================================
   iDocThis — theme.css
   Single shared component system driven by the iDocThisU logo palette.
   Everything references the :root tokens — no inline hex anywhere else.
   (Spec: iDocThis-Website.md §2–§5)
   ============================================================================= */

:root {
    /* ---- Brand gradient stops -------------------------------------------- */
    --pink: #ed8dbe;
    --pink-soft: #f6bcd6;
    --violet: #9d8bcb;
    --blue: #5e97d6;
    --blue-soft: #9cc0e8;
    --peach: #f6d9cf; /* warm highlight — the only survivor of the old coral */

    /* ---- Signature gradients --------------------------------------------- */
    --grad: linear-gradient(120deg, #ee8fbf 0%, #a98ccb 52%, #5e97d6 100%);
    --grad-soft: linear-gradient(120deg, #fbe3ee 0%, #efe7f4 50%, #e4eef8 100%);
    --grad-icon: linear-gradient(135deg, #f6dad0 0%, #eaa9cb 45%, #9bb6e6 100%);
    --page-bg: linear-gradient(125deg, #fbeef3 0%, #f7f1f5 38%, #f1f2f7 62%, #eaf1f8 100%);

    /* ---- Surfaces & text ------------------------------------------------- */
    --card: #ffffff;
    --surface: #faf7fa; /* warm-white inner panels / inputs */
    --ink: #2a2a31; /* headings & body */
    --ink-2: #666a73; /* sub-labels, metadata */
    --ink-3: #9aa0aa; /* placeholders, disabled, faint values */
    --line: #ece9ef; /* hairline dividers */
    --line-2: #e3e0e8; /* stronger borders */

    /* ---- Readable accent inks (text/links on white) ---------------------- */
    --pink-ink: #d46aa0;
    --blue-ink: #3f7ec0;
    --violet-ink: #8068bf;

    /* ---- Status & category (chips/dots only — never fills behind text) ---- */
    --good: #3bb077;
    --danger: #e0594f;
    --cat-medical: #5e97d6;
    --cat-school: #3bb077;
    --cat-legal: #9d8bcb;
    --cat-other: #9aa0aa;

    /* ---- Radii ----------------------------------------------------------- */
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --r-card: 18px;
    --r-pill: 999px;

    /* ---- Shadows --------------------------------------------------------- */
    --sh-sm: 0 1px 2px rgba(42,42,49,.05);
    --sh: 0 1px 2px rgba(42,42,49,.04), 0 10px 26px rgba(86,70,110,.08);
    --sh-lg: 0 18px 50px rgba(86,70,110,.16);
    --sh-pink: 0 10px 24px rgba(214,106,160,.28);

    /* ---- Layout ---------------------------------------------------------- */
    --container: 1180px;
    --container-pad: 28px;
    --header-h: 68px;

    /* ---- Bootstrap link colour overrides (de-coral the existing pages) ---- */
    --bs-link-color: var(--blue-ink);
    --bs-link-hover-color: var(--violet-ink);
    --bs-link-color-rgb: 63,126,192;
    --bs-link-hover-color-rgb: 128,104,191;
}

/* =============================================================================
   Base / typography (§3)
   ============================================================================= */
html { font-size: 16px; }

body {
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--page-bg) fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p { text-wrap: pretty; }

.t-hero    { font-size: clamp(40px, 6vw, 74px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.t-h1      { font-size: clamp(32px, 4vw, 42px); font-weight: 800; line-height: 1.1; }
.t-h2      { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.t-card-title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.2; }
.t-strong  { font-size: 17px; font-weight: 700; }
.t-body    { font-size: 16px; font-weight: 500; line-height: 1.6; }
.t-meta    { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

.eyebrow {
    font-size: 13px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--violet-ink);
}

/* Gradient text — use sparingly for hero emphasis, wordmark, taglines */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

/* =============================================================================
   Layout helpers
   ============================================================================= */
.wrap {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section { padding-block: 64px; }

.heart-rule {
    height: 3px; border: 0; border-radius: var(--r-pill);
    background: var(--grad); opacity: .9;
}

/* =============================================================================
   Buttons (§5)
   ============================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1;
    padding: 13px 22px; border-radius: var(--r-pill);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    min-height: 44px; transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--grad); color: #fff; border-color: transparent;
    box-shadow: var(--sh-pink);
}
.btn-primary:hover { color: #fff; filter: saturate(1.05) brightness(1.02); box-shadow: var(--sh-pink), var(--sh); }

.btn-outline {
    background: #fff; color: var(--ink); border-color: var(--line-2);
}
.btn-outline:hover { color: var(--violet-ink); border-color: var(--violet); }

.btn-ghost { background: transparent; color: var(--violet-ink); border-color: transparent; }
.btn-ghost:hover { background: var(--surface); }

.btn-sm { padding: 9px 16px; font-size: 14px; min-height: 38px; }
.btn-lg { padding: 16px 28px; font-size: 18px; min-height: 52px; }
.btn-block { display: flex; width: 100%; }

/* =============================================================================
   Header (§5)  — sticky, frosted translucent white
   ============================================================================= */
.site-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--header-h);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header .bar {
    max-width: var(--container); margin-inline: auto;
    padding-inline: var(--container-pad);
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { display: block; width: 32px; height: 32px; object-fit: contain; }
.brand-word { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }

.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-u {
    font-weight: 800; color: var(--violet-ink); text-decoration: none;
    padding: 8px 6px; white-space: nowrap;
}
.nav-u:hover { color: var(--violet); }

.signed-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-pill); padding: 7px 14px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.signed-pill strong { color: var(--ink); }

/* =============================================================================
   Footer (§5)
   ============================================================================= */
.site-footer {
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.5);
}
.site-footer .bar {
    max-width: var(--container); margin-inline: auto;
    padding: 18px var(--container-pad);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 14px; color: var(--ink-2); font-weight: 600;
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--violet-ink); }
.site-footer .links { display: flex; gap: 20px; }

/* =============================================================================
   Cards (§5)
   ============================================================================= */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--sh);
}
.card-pad { padding: 24px; }
.card-soft { background: var(--surface); }

/* =============================================================================
   Pills / badges (§5)
   ============================================================================= */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-pill); padding: 5px 12px;
    font-size: 13px; font-weight: 800; line-height: 1;
    border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
}
.pill-soft   { background: var(--surface); }
.pill-pink   { background: #fbe6f0; border-color: #f4cfe2; color: var(--pink-ink); }
.pill-blue   { background: #e6f0fb; border-color: #cfe0f4; color: var(--blue-ink); }
.pill-violet { background: #efe9f8; border-color: #ddd2f0; color: var(--violet-ink); }
.pill-good   { background: #e4f6ee; border-color: #c5ead8; color: var(--good); }

.count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--grad); color: #fff;
    font-size: 12px; font-weight: 800;
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-medical { background: var(--cat-medical); }
.dot-school  { background: var(--cat-school); }
.dot-legal   { background: var(--cat-legal); }
.dot-other   { background: var(--cat-other); }

/* =============================================================================
   Tables (§5)  — the shared list style; reuse for every record table
   ============================================================================= */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
    text-align: left; font-size: 13px; font-weight: 800; letter-spacing: .02em;
    color: var(--ink-2); text-transform: uppercase;
    padding: 10px 16px; border-bottom: 1px solid var(--line-2);
}
.tbl td {
    padding: 16px; border-bottom: 1px solid var(--line);
    font-size: 16px; font-weight: 500; color: var(--ink); vertical-align: middle;
}
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: var(--surface); }
.tbl tr[data-href] { cursor: pointer; }
.tbl .primary-cell { font-weight: 800; }
.tbl .primary-cell .sub { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.tbl .r { text-align: right; }
.tbl-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2);
}

/* =============================================================================
   Tabs (§5)  — record-detail tabs
   ============================================================================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px; border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2);
    border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active {
    color: var(--violet-ink);
    border-bottom-color: transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        var(--grad) border-box;
    border-image: var(--grad) 1;
    position: relative;
}
.tab.active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px;
    background: var(--grad); border-radius: var(--r-pill);
}
.tab-panel { display: none; padding-top: 20px; }
.tab-panel.active { display: block; }

/* =============================================================================
   Inputs (§5)
   ============================================================================= */
.field { display: block; margin-bottom: 16px; }
.field > label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.input {
    width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r); padding: 12px 14px; min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
    outline: 0; border-color: var(--violet);
    box-shadow: 0 0 0 4px rgba(157,139,203,.22);
}
.input-group { position: relative; }
.input-group .toggle-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
    padding: 6px; min-height: 32px;
}

/* =============================================================================
   Device frame (§5)  — holds a real screenshot
   ============================================================================= */
.device-stage { position: relative; display: inline-block; }
.device-stage .glow {
    position: absolute; inset: -8% -8% -4% -8%; z-index: 0;
    background: radial-gradient(60% 55% at 50% 40%, rgba(237,141,190,.45), transparent 70%);
    filter: blur(22px);
}
.device {
    position: relative; z-index: 1;
    width: 264px; padding: 11px; border-radius: 46px;
    background: linear-gradient(160deg, #3a3a44, #22222a);
    box-shadow: var(--sh-lg);
}
.device::after {
    content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 56px; height: 6px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.22); z-index: 2;
}
.device img { display: block; width: 100%; height: auto; border-radius: 36px; }
.device-sm { width: 210px; padding: 9px; border-radius: 38px; }
.device-sm img { border-radius: 30px; }

/* =============================================================================
   Segmented control (All / Shared / Not shared, month/week/day)
   ============================================================================= */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; }
.seg button {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 700; color: var(--ink-2);
    padding: 7px 14px; border-radius: var(--r-pill);
}
.seg button.active { background: #fff; color: var(--violet-ink); box-shadow: var(--sh-sm); }

/* =============================================================================
   Feature / category cards
   ============================================================================= */
.icon-chip {
    width: 46px; height: 46px; border-radius: var(--r);
    background: var(--grad-soft); color: var(--violet-ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.gradient-stamp {
    display: inline-flex; gap: 8px; align-items: center;
    font-weight: 900; letter-spacing: .02em;
}

/* =============================================================================
   Reduced motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 920px) {
    .section { padding-block: 44px; }
}
@media (max-width: 640px) {
    :root { --container-pad: 18px; }
    .brand-word { font-size: 19px; }
    .nav-right { gap: 6px; }
}

/* =============================================================================
   De-coral bridge: recolor existing Bootstrap pages until each is reworked.
   Loaded AFTER site.css so these win. (§0 — remove the coral/orange entirely)
   ============================================================================= */
.btn-primary,
.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--grad);
    box-shadow: var(--sh-pink);
}

.btn-outline-primary,
.btn-outline-teal {
    --bs-btn-color: var(--violet-ink);
    --bs-btn-border-color: var(--line-2);
    --bs-btn-hover-color: var(--violet-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--violet);
    --bs-btn-active-color: var(--violet-ink);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--violet);
}

.text-teal { color: var(--violet-ink) !important; }

.navbar .nav-link.active { color: var(--violet-ink) !important; }

[data-filter].active {
    background: var(--violet-ink);
    border-color: var(--violet-ink);
    color: #fff;
}

/* Soft cards / tables already in the app inherit the new palette */
.card-soft {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--sh);
}
.table-hover-soft thead tr { background-color: var(--surface); }
.table-hover-soft tbody tr:nth-child(even) { background-color: rgba(250,247,250,.55); }
.table-hover-soft tbody tr:hover { background-color: var(--surface); }

.kpi-pill { border: 1px solid var(--line-2); background: #fff; }

/* Dashboard count cards as navigation links */
.kpi-link { display: block; transition: transform .12s ease, box-shadow .18s ease; }
.kpi-link:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.kpi-arrow { color: var(--ink-3); font-size: 1.1rem; transition: color .15s ease, transform .15s ease; }
.kpi-link:hover .kpi-arrow { color: var(--violet-ink); transform: translateX(2px); }

.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(157,139,203,.30);
    border-color: var(--violet);
}
.form-check-input:checked { background-color: var(--violet); border-color: var(--violet); }

/* Shared "← Back to …" text link */
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; color: var(--violet-ink); text-decoration: none;
}
.back-link:hover { color: var(--violet); }

/* Bootstrap nav-tabs → gradient active treatment (record-detail pages) */
.nav-tabs { border-bottom: 1px solid var(--line-2); }
.nav-tabs .nav-link {
    color: var(--ink-2); font-weight: 700; border: 0; border-bottom: 2.5px solid transparent;
    background: transparent; border-radius: 0; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-color: transparent; isolation: isolate; }
.nav-tabs .nav-link.active {
    color: var(--violet-ink); background: transparent;
    border: 0; border-bottom: 2.5px solid transparent; position: relative;
}
.nav-tabs .nav-link.active::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px;
    background: var(--grad); border-radius: var(--r-pill);
}