:root {
    --sc-primary: #2479c7;
    --sc-primary-dark: #175b9b;
    --sc-aqua: #1bb7b0;
    --sc-mint: #dbf7ed;
    --sc-sky: #eaf6ff;
    --sc-coral: #ff806f;
    --sc-amber: #f7b84b;
    --sc-ink: #18364d;
    --sc-muted: #647b8d;
    --sc-line: #d9e8f1;
    --sc-surface: #ffffff;
    --sc-canvas: #f5faff;
    --sc-radius: 18px;
    --sc-shadow: 0 12px 35px rgba(40, 101, 145, .09);
}

html { color-scheme: light; scroll-behavior: smooth; overflow-x:hidden; }
body.app-body {
    min-height: 100vh;
    color: var(--sc-admin-text, var(--sc-ink));
    background:
        radial-gradient(circle at 8% 2%, rgba(94, 199, 239, .14), transparent 24rem),
        radial-gradient(circle at 94% 17%, rgba(76, 214, 184, .11), transparent 23rem),
        var(--sc-canvas);
    font-family: "Sarabun", "Leelawadee UI", system-ui, sans-serif;
    overflow-x:hidden;
}

/* Admin-selectable colors; bright blue/white values are the defaults. */
.smartclinic-navbar {
    background:
        radial-gradient(circle at 88% -80%, rgba(255,255,255,.24), transparent 36%),
        linear-gradient(115deg, color-mix(in srgb,var(--sc-admin-menu,#258bd2) 78%,#fff 22%), var(--sc-admin-menu,#258bd2))!important;
    color:var(--sc-admin-menu-text,#fff);
}
.smartclinic-navbar .nav-link,
.smartclinic-navbar .smartclinic-brand,
.smartclinic-navbar .brand-copy strong,
.smartclinic-navbar .brand-copy small,
.smartclinic-navbar .theme-label { color:var(--sc-admin-menu-text,#fff)!important; }
.hero-panel {
    background:linear-gradient(135deg,color-mix(in srgb,var(--sc-admin-banner,#64bdf0) 76%,#fff 24%),var(--sc-admin-banner,#64bdf0))!important;
    color:var(--sc-admin-banner-text,#fff)!important;
}
.hero-panel h1,.hero-panel h2,.hero-panel h3,.hero-panel p,.hero-panel small,.hero-panel .lead { color:var(--sc-admin-banner-text,#fff)!important; }

.app-shell { max-width: 1920px; }
.app-main { min-height: calc(100vh - 190px); }
.page-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto 1rem;
    padding: .15rem .2rem;
}
.page-breadcrumb { display:flex; align-items:center; gap:.55rem; min-width:0; color:var(--sc-muted); font-size:.82rem; }
.page-breadcrumb a { color:var(--sc-primary); text-decoration:none; font-weight:750; }
.page-breadcrumb strong { overflow:hidden; color:var(--sc-ink); text-overflow:ellipsis; white-space:nowrap; }
.page-help-trigger {
    display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto; min-height:2.55rem; padding:.45rem .9rem;
    border:1px solid #b9d9ee; border-radius:999px; background:#fff; color:var(--sc-primary-dark); font-size:.82rem; font-weight:800;
    box-shadow:0 7px 20px rgba(44,108,154,.08); transition:.18s ease;
}
.page-help-trigger span { display:grid; width:1.45rem; height:1.45rem; place-items:center; border-radius:50%; background:var(--sc-sky); color:var(--sc-primary); }
.page-help-trigger:hover { transform:translateY(-1px); border-color:var(--sc-primary); background:var(--sc-sky); }
.page-help-trigger.is-new { border-color:#6fcbbd; box-shadow:0 0 0 4px rgba(60,190,169,.12),0 7px 20px rgba(44,108,154,.08); }

/* Replace cryptic two-letter navigation marks with recognizable pictograms. */
.smartclinic-navbar .nav-link::before { font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif; font-size:.82rem; }
.smartclinic-navbar .nav-link[data-nav-icon="DB"]::before { content:"⌂"; }
.smartclinic-navbar .nav-link[data-nav-icon="OV"]::before { content:"◫"; }
.smartclinic-navbar .nav-link[data-nav-icon="CL"]::before { content:"✚"; }
.smartclinic-navbar .nav-link[data-nav-icon="PT"]::before { content:"♙"; }
.smartclinic-navbar .nav-link[data-nav-icon="PI"]::before { content:"⌕"; }
.smartclinic-navbar .nav-link[data-nav-icon="OP"]::before { content:"♧"; }
.smartclinic-navbar .nav-link[data-nav-icon="IC"]::before { content:"≡"; }
.smartclinic-navbar .nav-link[data-nav-icon="RX"]::before { content:"✙"; }
.smartclinic-navbar .nav-link[data-nav-icon="AD"]::before { content:"☑"; }
.smartclinic-navbar .nav-link[data-nav-icon="WC"]::before { content:"✣"; }
.smartclinic-navbar .nav-link[data-nav-icon="MR"]::before { content:"▤"; }
.smartclinic-navbar .nav-link[data-nav-icon="SG"]::before { content:"✎"; }
.smartclinic-navbar .nav-link[data-nav-icon="RP"]::before { content:"▥"; }
.smartclinic-navbar .nav-link[data-nav-icon="DL"]::before { content:"⇩"; }
.smartclinic-navbar .nav-link[data-nav-icon="US"]::before { content:"♙"; }
.smartclinic-navbar .nav-link[data-nav-icon="PV"]::before { content:"◉"; }
.smartclinic-navbar .nav-link[data-nav-icon="SL"]::before { content:"▧"; }
.smartclinic-navbar .nav-link[data-nav-icon="MS"]::before { content:"✉"; }
.smartclinic-navbar .nav-link[data-nav-icon="MD"]::before { content:"◆"; }
.smartclinic-navbar .nav-link[data-nav-icon="NH"]::before { content:"✚"; }

/* Consistent hierarchy across legacy and new screens */
.app-main h1, .app-main .h1 { color:var(--sc-admin-text,#123c5a); font-weight:850; letter-spacing:-.025em; }
.app-main h2, .app-main .h2, .app-main .h3, .app-main .h4, .app-main .h5 { color:#204a67; font-weight:800; }
.text-body-secondary, .text-muted { color:var(--sc-muted)!important; }
.app-main p, .app-main small, .app-main td, .app-main a { overflow-wrap:anywhere; }
.card, .modal-content, .offcanvas {
    border-color:var(--sc-line)!important; border-radius:var(--sc-radius); background:rgba(255,255,255,.96); box-shadow:var(--sc-shadow);
}
.card-header { border-color:var(--sc-line); background:linear-gradient(135deg,#fafdff,#f1f9ff); }
.btn { min-height:2.55rem; border-radius:.75rem; font-weight:750; }
.btn-sm { min-height:2.15rem; border-radius:.65rem; }
.btn-primary { border-color:var(--sc-primary); background:linear-gradient(135deg,#2c8bd5,var(--sc-primary)); box-shadow:0 7px 16px rgba(36,121,199,.18); }
.btn-success { border-color:#13a38f; background:linear-gradient(135deg,#21bfa8,#119a89); }
.btn-outline-primary { color:var(--sc-primary-dark); border-color:#84b9df; background:#fff; }
.btn-outline-primary:hover { border-color:var(--sc-primary); background:var(--sc-sky); color:var(--sc-primary-dark); }
.btn-danger, .btn-outline-danger:hover { background:#df655c; border-color:#df655c; }
.badge { padding:.45em .7em; border-radius:999px; }
.alert { border:0; border-left:4px solid currentColor; border-radius:14px; }

.form-label { margin-bottom:.4rem; color:#385b70; font-size:.86rem; font-weight:750; }
.form-control, .form-select {
    min-height:2.75rem; border-color:#cbdde8; border-radius:.78rem; background-color:#fbfdff; color:var(--sc-ink);
}
.form-control:focus, .form-select:focus { border-color:#62a9dc; background:#fff; box-shadow:0 0 0 .22rem rgba(58,151,217,.13); }
textarea.form-control { min-height:6rem; }
.form-check-input:checked { border-color:var(--sc-aqua); background-color:var(--sc-aqua); }

.table-responsive { border:1px solid var(--sc-line); border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(39,91,128,.05); }
.table { margin-bottom:0; color:var(--sc-ink); }
.table > :not(caption) > * > * { padding:.78rem .85rem; border-bottom-color:#e7f0f5; vertical-align:middle; }
.table thead th { border-bottom:0; background:#edf7fc; color:#315c76; font-size:.77rem; font-weight:850; letter-spacing:.02em; white-space:nowrap; }
.table tbody tr:hover > * { background:#f6fbff; }
.opd-patient-identity { display:flex; align-items:center; gap:.65rem; min-width:9.5rem; }
.opd-patient-avatar { display:grid; width:2.35rem; height:2.35rem; flex:0 0 2.35rem; place-items:center; overflow:hidden; border:2px solid #fff; border-radius:50%; background:linear-gradient(145deg,#dff3ff,#dff8ef); color:#2878b7; box-shadow:0 3px 10px rgba(36,105,151,.16); font-size:.82rem; font-weight:850; }
.opd-patient-avatar img { width:100%; height:100%; object-fit:cover; }
.opd-patient-copy { min-width:0; }
.pagination .page-link { margin:0 .15rem; border-color:var(--sc-line); border-radius:.6rem!important; color:var(--sc-primary-dark); }

/* Contextual help */
.page-help-panel { width:min(440px,100vw)!important; border-left:0!important; border-radius:24px 0 0 24px; }
.page-help-panel .offcanvas-header { padding:1.3rem 1.35rem 1rem; border-bottom:1px solid var(--sc-line); }
.help-kicker { color:var(--sc-aqua); font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.help-visual { height:145px; margin:-.1rem 0 1.1rem; overflow:hidden; border-radius:16px; background:var(--sc-sky); }
.help-visual img { width:100%; height:100%; object-fit:cover; object-position:62% 37%; }
.help-summary { color:#426278; font-size:.96rem; line-height:1.7; }
.help-steps { display:grid; gap:.7rem; padding:0; list-style:none; counter-reset:guide; }
.help-steps li { position:relative; min-height:2.4rem; padding:.65rem .75rem .65rem 3rem; border:1px solid #e0edf4; border-radius:12px; background:#f9fcfe; color:#35566c; }
.help-steps li::before { content:counter(guide); counter-increment:guide; position:absolute; top:.58rem; left:.7rem; display:grid; width:1.75rem; height:1.75rem; place-items:center; border-radius:50%; background:var(--sc-mint); color:#087e70; font-weight:900; }
.help-tip { display:flex; gap:.75rem; margin:1rem 0; padding:.9rem; border-radius:14px; background:#fff8e8; color:#77551f; }
.help-tip span { font-size:1.35rem; }.help-tip p { margin:.15rem 0 0; font-size:.85rem; }

/* Generated visual, used subtly so data remains the focus */
.controller-home .dashboard-hero { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(105deg,rgba(255,255,255,.98) 0 48%,rgba(234,247,255,.78)); }
.controller-home .dashboard-hero::after { content:""; position:absolute; z-index:-1; top:0; right:0; width:min(44%,620px); height:100%; background:url('/img/smartclinic-welcome-v2.png') 64% 40%/cover no-repeat; opacity:.3; mask-image:linear-gradient(90deg,transparent,#000 28%); }

/* Wound-care hero uses a dark clinical gradient, so both lines need white contrast. */
.controller-woundcare .hero-panel h1,
.controller-woundcare .hero-panel p {
    color:var(--sc-admin-banner-text,#fff)!important;
    text-shadow:0 1px 2px rgba(76,28,37,.18);
}

/* Privacy notice always needs high contrast over its dark blue PDPA banner. */
.controller-home .pdpa-hero h1 {
    color:#fff!important;
    text-shadow:0 1px 2px rgba(9,48,82,.22);
}

.nav-color-button { min-height:2.42rem; white-space:nowrap; }
.theme-color-modal { overflow:hidden; }
.theme-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.theme-color-grid label { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem; border:1px solid var(--sc-line); border-radius:12px; background:#f8fcff; color:#35566c; font-weight:750; }
.theme-color-grid input[type="color"] { width:3.2rem; height:2.3rem; padding:.15rem; border:1px solid #bed5e3; border-radius:.6rem; background:#fff; cursor:pointer; }
.theme-color-wide { grid-column:1/-1; }
.theme-reset-form { padding:0 1rem 1rem; text-align:center; }

/* Mobile-first reports: readable cards on screen, original A4 layout when printing */
@media screen and (max-width: 767.98px) {
    .report-toolbar, .consent-toolbar, .profile-report-sheet + *, .d-print-none.d-flex.justify-content-between { position:sticky; z-index:20; top:.5rem; padding:.65rem; border:1px solid var(--sc-line); border-radius:14px; background:rgba(255,255,255,.94); box-shadow:var(--sc-shadow); backdrop-filter:blur(10px); }
    .amed-report-sheet, .profile-report-sheet {
        width:100%!important; min-width:0!important; margin:0!important; padding:1rem!important; border-radius:16px; box-shadow:none!important; font-size:.9rem!important;
    }
    .amed-report-header, .profile-form-header { display:grid!important; grid-template-columns:1fr!important; gap:.7rem!important; min-height:0!important; padding:.6rem!important; text-align:center; }
    .amed-clinic-logo, .amed-service-box { position:static!important; margin:auto; }
    .amed-patient-summary, .profile-form-patient-layout, .profile-form-grid, .amed-section, .profile-form-meta { grid-template-columns:1fr!important; flex-direction:column!important; gap:.55rem!important; }
    .amed-patient-photo-frame, .profile-form-patient-photo { width:100%!important; max-width:150px; margin:auto; }
    .profile-form-grid > div { grid-template-columns:1fr!important; gap:.2rem!important; min-height:0!important; }
    .amed-medicine-item { grid-template-columns:2rem minmax(0,1fr)!important; }
    .profile-form-signatures { grid-template-columns:1fr!important; gap:1rem!important; }
}

@media (max-width: 991.98px) {
    .app-shell { padding-right:.75rem!important; padding-left:.75rem!important; }
    .card-body { padding:1rem; }
    .row > [class*="col-"] { min-width:0; }
}

@media (max-width: 767.98px) {
    .page-context-bar { align-items:stretch; flex-direction:column; margin-bottom:.75rem; }
    .page-help-trigger { width:100%; justify-content:center; }
    .app-main h1, .app-main .h1 { font-size:clamp(1.45rem,7vw,2rem); }
    .app-main h2, .app-main .h2 { font-size:1.25rem; }
    .btn:not(.btn-close) { width:100%; justify-content:center; }
    .btn-group, .d-flex.gap-2, .d-flex.gap-3 { flex-wrap:wrap; }
    .btn-group > .btn { width:auto; flex:1 1 10rem; border-radius:.7rem!important; }
    .modal-dialog { margin:.5rem; }
    .modal-content { max-height:calc(100dvh - 1rem); border-radius:18px; }
    .modal-body { overflow:auto; }
    .table-responsive { overflow:visible; border:0; background:transparent; box-shadow:none; }
    .table-responsive table:not(.report-table) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
    .table-responsive table:not(.report-table), .table-responsive table:not(.report-table) tbody, .table-responsive table:not(.report-table) tr, .table-responsive table:not(.report-table) td { display:block; width:100%; }
    .table-responsive table:not(.report-table) tr { margin-bottom:.75rem; overflow:hidden; border:1px solid var(--sc-line); border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(37,91,128,.06); }
    .table-responsive table:not(.report-table) td { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.65rem .8rem; border-bottom:1px solid #edf3f6; overflow-wrap:anywhere; }
    .table-responsive table:not(.report-table) td:last-child { border-bottom:0; }
    .table-responsive table:not(.report-table) td::before { content:attr(data-label); flex:0 0 34%; color:var(--sc-muted); font-size:.75rem; font-weight:800; }
    .table-responsive table:not(.report-table) td:empty { display:none; }
    .page-help-panel { border-radius:0; }
}

@media (max-width: 420px) {
    .app-shell { padding-right:.55rem!important; padding-left:.55rem!important; }
    .card, .modal-content { border-radius:14px; }
    .card-body { padding:.85rem; }
}

@media print {
    .page-context-bar, .page-help-panel { display:none!important; }
    body.app-body { background:#fff!important; }
}