/* ============================================================
   Sydney Dental — Unified Theme (CRM · Payment · Document)
   One design system so all three modules feel like one app.
   Brand: dental green #226b68
   ============================================================ */

:root {
    --brand:        #226b68;
    --brand-dark:   #174a48;
    --brand-darker: #103634;
    --brand-light:  #e7f5f4;
    --brand-accent: #2fb6a8;

    --ink:        #1f2d2c;
    --muted:      #6b7d7c;
    --line:       #e6ebea;
    --bg:         #f3f6f5;
    --card-radius: 14px;
    --shadow-sm: 0 1px 3px rgba(16,54,52,.08);
    --shadow:    0 4px 18px rgba(16,54,52,.10);
    --shadow-lg: 0 10px 30px rgba(16,54,52,.16);

    /* let Bootstrap 5.3 components inherit the brand */
    --bs-primary: #226b68;
    --bs-primary-rgb: 34,107,104;
    --bs-link-color: #226b68;
    --bs-link-hover-color: #174a48;
}

* { -webkit-font-smoothing: antialiased; }

body {
    background: var(--bg) !important;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Layout shell ---------- */
.app-shell { min-height: 100vh; }

.app-sidebar {
    background: linear-gradient(185deg, var(--brand-dark) 0%, var(--brand-darker) 100%);
    color: #cfe6e4;
    min-height: 100vh;
    padding: 0;
    position: sticky;
    top: 0;
    box-shadow: 2px 0 12px rgba(0,0,0,.06);
}

.app-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 20px 16px;
    color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: .2px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-brand .logo-dot {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand));
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
}

.app-nav { padding: 8px 10px 90px; }
.nav-section {
    color: #6f9b99; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; padding: 16px 12px 6px;
}
.nav-link-item {
    display: flex; align-items: center; gap: 11px;
    color: #b7d4d2; text-decoration: none;
    padding: 9px 12px; margin: 2px 0; border-radius: 9px;
    font-weight: 500; font-size: .94rem; transition: background .15s, color .15s;
    position: relative;
}
.nav-link-item i { font-size: 1.05rem; width: 20px; text-align: center; }
.nav-link-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link-item.active {
    background: rgba(47,182,168,.16); color: #fff; font-weight: 600;
}
.nav-link-item.active::before {
    content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px;
    width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-accent);
}

.sidebar-foot {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 16px; background: rgba(0,0,0,.18);
    border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-foot .who { color: #fff; font-weight: 600; font-size: .9rem; }
.sidebar-foot .role-chip {
    font-size: .65rem; font-weight: 700; letter-spacing: .04em;
    background: var(--brand-accent); color: #06302c; padding: 2px 8px; border-radius: 20px;
}
.sidebar-foot a.logout {
    color: #ffd6d6; text-decoration: none; font-size: .88rem; display: inline-flex; gap: 6px; align-items: center;
}
.sidebar-foot a.logout:hover { color: #fff; }

/* mobile top bar */
.app-mobilebar {
    background: var(--brand-dark); color: #fff;
    padding: 10px 14px; display: flex; justify-content: space-between; align-items: center;
}
.app-mobilebar .brand { font-weight: 800; }

.app-main { padding: 26px 30px; }

/* ---------- Editor / standalone top bar (document form pages) ---------- */
.app-topbar {
    background: #fff; border-bottom: 1px solid #e3ebea;
    box-shadow: var(--shadow-sm);
    padding: 10px 18px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1030;
}
.app-topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; }
.app-topbar .brand .logo-dot {
    width: 28px; height: 28px; border-radius: 8px; color:#fff;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand));
    display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Cards ---------- */
.card { border: none; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.card-kpi { border: none; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.card .card-header {
    background: #fff; border-bottom: 1px solid #eef3f2; font-weight: 700; color: var(--ink);
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}
.kpi-tile {
    background:#fff; border-radius: var(--card-radius); box-shadow: var(--shadow-sm);
    padding: 18px 20px; display:flex; align-items:center; gap:16px;
    border-left: 4px solid var(--brand);
}
.kpi-tile .kpi-ic {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.kpi-tile .kpi-num { font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--ink); }
.kpi-tile .kpi-label { color: var(--muted); font-size: .85rem; }

/* ---------- Tables ---------- */
.table > thead th { background: #f4f8f7; color: var(--muted); font-weight: 700;
    text-transform: uppercase; font-size: .74rem; letter-spacing: .03em; border-bottom: 1px solid #e9efee; }
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--brand-light); }

/* ---------- Buttons (recolor legacy markup automatically) ---------- */
.btn-primary, .btn-success {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker); --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
}
.btn-brand { background: var(--brand); color:#fff; font-weight:600; }
.btn-brand:hover { background: var(--brand-dark); color:#fff; }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.link-primary, a { }
.badge.bg-primary { background-color: var(--brand) !important; }

/* ---------- Forms ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .2rem rgba(47,182,168,.18);
}

/* ---------- Document module: recolor its top navbar to brand ---------- */
.navbar { background-color: var(--brand) !important; }

/* ---------- Auth / login ---------- */
.auth-wrap {
    min-height: 100vh; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(1200px 600px at 20% -10%, #2c7d79 0%, transparent 60%),
                linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-darker) 100%);
    padding: 20px;
}
.auth-card {
    background:#fff; width:100%; max-width: 410px; border-radius: 18px;
    box-shadow: var(--shadow-lg); padding: 38px 34px;
}
.auth-brand {
    display:flex; align-items:center; justify-content:center; gap:10px;
    color: var(--brand); font-weight: 800; font-size: 1.5rem; margin-bottom: 4px;
}
.auth-brand .logo-dot {
    width: 38px; height: 38px; border-radius: 10px; color:#fff;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand));
    display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.auth-sub { text-align:center; color: var(--muted); margin-bottom: 26px; font-size:.95rem; }

/* ============================================================
   Phase A.5 — page header, components, spreadsheet tables
   ============================================================ */

/* ---------- Page header ---------- */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-title { font-weight: 800; color: var(--ink); display:flex; align-items:center; gap:10px; }
.page-title i { color: var(--brand); }
.page-subtitle { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- KPI tile as a link ---------- */
a.kpi-tile { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-tile .kpi-ic.tone-trip   { background: linear-gradient(135deg, #2fb6a8, #1f8f86); }
.kpi-tile .kpi-ic.tone-money  { background: linear-gradient(135deg, #e0a32e, #c07d12); }
.kpi-tile .kpi-ic.tone-doc    { background: linear-gradient(135deg, #5b8def, #2f5fd0); }

/* ---------- Status badge ---------- */
.sd-badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; border-radius: 7px; }

/* ---------- Boolean chip (COM Hotel / Documents) ---------- */
.chip-bool {
    display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.chip-bool.is-yes { background: var(--brand-light); color: var(--brand-dark); }
.chip-bool.is-no  { background: #f0f2f2; color: #97a3a2; }

/* ---------- Empty state ---------- */
.empty-state i { color: var(--brand-accent); }

/* ---------- Spreadsheet-style table (the two operational sheets) ---------- */
.sheet-wrap { overflow-x: auto; border-radius: var(--card-radius); }
.sheet-table { width: 100%; margin: 0; font-size: .85rem; border-collapse: separate; border-spacing: 0; }
.sheet-table thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--brand-dark); color: #eafaf8; font-weight: 700;
    text-transform: none; letter-spacing: 0; font-size: .76rem;
    padding: 9px 10px; white-space: nowrap; border-bottom: none;
}
.sheet-table tbody td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid #eef3f2; }
.sheet-table tbody tr:nth-child(even of :not(.sheet-group-header)) td { background: #fbfdfc; }
.sheet-table tbody tr:hover:not(.sheet-group-header) td { background: var(--brand-light); }
.sheet-table .num-col { color: var(--muted); width: 38px; text-align: center; }

/* month / visit group header row */
.sheet-group-header td {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
    color: #fff; font-weight: 800; letter-spacing: .02em; cursor: pointer;
    padding: 7px 12px; position: sticky; top: 34px; z-index: 4;
}
.sheet-group-header .count-pill {
    background: rgba(255,255,255,.22); border-radius: 20px; padding: 1px 9px;
    font-size: .76rem; font-weight: 700; margin-left: 8px;
}
.sheet-group-header.collapsed .caret { transform: rotate(-90deg); }
.sheet-group-header .caret { transition: transform .15s ease; display:inline-block; }
.sheet-subgroup td {
    background: #eef6f5 !important; color: var(--brand-dark); font-weight: 700;
    font-size: .8rem; padding: 5px 12px;
}
.cost-cell { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ============================================================
   Referral / Affiliate hub (affiliate.php)
   ============================================================ */
.ref-hero {
    border-radius: var(--card-radius);
    background:
        radial-gradient(1200px 240px at 90% -40%, rgba(47,182,168,.45), transparent 60%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 60%, var(--brand-darker) 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.ref-hero-body { padding: 30px 32px; }
.ref-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
    padding: 5px 12px; border-radius: 30px; font-size: .8rem; font-weight: 700;
}
.ref-hero-title { font-weight: 800; margin: 14px 0 6px; font-size: 1.7rem; }
.ref-hero-sub { color: rgba(255,255,255,.82); max-width: 640px; margin: 0; line-height: 1.55; }

/* activation form */
.ref-activate { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 22px; }
.ref-activate-field { flex: 1 1 320px; }
.ref-code-input {
    letter-spacing: .12em; font-weight: 700; text-transform: uppercase;
    border: none; box-shadow: var(--shadow-sm);
}
.ref-activate-btn { font-weight: 800; white-space: nowrap; color: var(--brand-dark); }

/* share card */
.ref-share { display: flex; gap: 28px; padding: 28px 32px; align-items: center; flex-wrap: wrap; }
.ref-share-main { flex: 1 1 420px; min-width: 0; }
.ref-code-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; }
.ref-code-chip {
    background: rgba(255,255,255,.16); border: 1px dashed rgba(255,255,255,.5);
    padding: 4px 14px; border-radius: 8px; font-weight: 800; letter-spacing: .14em;
    font-size: 1.05rem;
}
.ref-channel-label {
    display: flex; align-items: center; gap: 7px;
    font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.85);
    margin: 14px 0 6px;
}
.ref-linkbox { display: flex; gap: 8px; }
.ref-linkbox .form-control {
    background: rgba(255,255,255,.95); border: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86rem; color: var(--brand-darker); text-overflow: ellipsis;
}
.ref-linkbox .copy-btn { font-weight: 700; white-space: nowrap; color: var(--brand-dark); }
.ref-linkbox .copy-btn.copied { background: #d6f5e6; color: #0d6b3f; }
.ref-linkbox .btn-outline-light { border-color: rgba(255,255,255,.5); }

/* QR */
.ref-share-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.ref-share-qr #ref-qr {
    background: #fff; padding: 12px; border-radius: 12px; box-shadow: var(--shadow);
    line-height: 0;
}
.ref-share-qr #ref-qr img, .ref-share-qr #ref-qr canvas { display: block; }

/* "how it works" steps */
.how-step { text-align: center; }
.how-ic {
    display: inline-flex; width: 52px; height: 52px; border-radius: 14px;
    align-items: center; justify-content: center; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand)); margin-bottom: 10px;
}
.how-title { font-weight: 800; color: var(--ink); }
.how-desc { color: var(--muted); font-size: .88rem; margin-top: 4px; }