:root {
    --bg-color:      #f1f5f9;
    --card-bg:       #ffffff;
    --text-primary:  #1e293b;
    --text-secondary:#64748b;
    --primary:       #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #eff6ff;
    --border-color:  #e2e8f0;
    --sidebar-bg:    #ffffff;
    --error-color:   #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color:  #ef4444;
    --danger-hover:  #dc2626;
    --radius:        8px;
    --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
}

*  { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-color); color:var(--text-primary); font-size:14px; line-height:1.5; }

/* ── Layout ───────────────────────────────────────────────── */
.app-container { display:flex; min-height:100vh; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { width:260px; background:var(--sidebar-bg); border-right:1px solid var(--border-color); display:flex; flex-direction:column; flex-shrink:0; }
.logo    { padding:24px 20px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:12px; }
.logo-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-name  { display:block; font-size:15px; font-weight:700; color:var(--text-primary); }
.logo-sub   { display:block; font-size:11px; color:var(--text-secondary); }

.nav-label { font-size:11px; font-weight:600; color:var(--text-secondary); letter-spacing:.7px; padding:20px 20px 8px; }
.nav-menu ul { list-style:none; }
.nav-menu li a {
    display:flex; align-items:center; gap:10px;
    padding:10px 20px; color:var(--text-secondary); text-decoration:none;
    font-weight:500; border-radius:0 var(--radius) var(--radius) 0; margin-right:12px;
    transition:all .2s;
}
.nav-menu li a:hover  { background:#f8fafc; color:var(--primary); }
.nav-menu li a.active { background:var(--primary-light); color:var(--primary); font-weight:600; border-right:3px solid var(--primary); }
.nav-menu li a svg    { flex-shrink:0; }

/* ── Main ─────────────────────────────────────────────────── */
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; }

.top-header {
    height:68px; background:var(--card-bg); border-bottom:1px solid var(--border-color);
    display:flex; align-items:center; justify-content:space-between; padding:0 32px;
    position:sticky; top:0; z-index:10; box-shadow:var(--shadow);
}
.header-title h1 { font-size:19px; font-weight:600; }
.header-user { display:flex; align-items:center; gap:10px; }
.avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.header-user-name { display:block; font-weight:600; font-size:13px; color:var(--text-primary); line-height:1.3; }
.header-user-role { display:block; font-size:11px; color:var(--text-secondary); }

.content-body { padding:28px 32px; flex:1; }

/* ── Card ─────────────────────────────────────────────────── */
.card { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border-color); }
.card-header {
    padding:20px 24px; border-bottom:1px solid var(--border-color);
    display:flex; justify-content:space-between; align-items:center;
}
.card-header h2    { font-size:17px; font-weight:600; }
.card-subtitle     { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.card-body         { padding:24px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; padding:9px 18px; border-radius:var(--radius); font-weight:500; font-size:13.5px; text-decoration:none; cursor:pointer; border:none; transition:all .2s; }
.btn-primary  { background:var(--primary); color:#fff; }
.btn-primary:hover  { background:var(--primary-hover); }
.btn-outline  { background:#fff; border:1px solid var(--border-color); color:var(--text-primary); }
.btn-outline:hover  { background:#f8fafc; }
.btn-danger   { background:var(--danger-color); color:#fff; }
.btn-danger:hover   { background:var(--danger-hover); }
.btn-sm       { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* ── Table ────────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; }
.table-info-bar   { display:flex; justify-content:flex-end; margin-bottom:12px; }
.table-count      { font-size:12px; color:var(--text-secondary); }

.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.data-table th  { font-weight:600; font-size:12px; color:var(--text-secondary); background:#f8fafc; text-transform:uppercase; letter-spacing:.4px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#fafbfc; }
.text-center { text-align:center; }

/* Loading spinner */
.loading-text { color:var(--text-secondary); padding:40px; }
.spinner { display:inline-block; width:18px; height:18px; border:2px solid var(--border-color); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Badges */
.badge         { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:500; }
.badge-active  { background:#dcfce7; color:#166534; }
.badge-inactive{ background:#fee2e2; color:#991b1b; }
.badge-pending { background:#fef9c3; color:#854d0e; }

/* Role chips */
.role-chip     { display:inline-block; padding:3px 9px; border-radius:4px; font-size:12px; font-weight:500; background:#f1f5f9; color:var(--text-secondary); }

/* Action buttons in table */
.action-btns   { display:flex; gap:8px; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination-wrap { display:flex; justify-content:flex-end; margin-top:20px; }
.pagination-container { display:flex; gap:4px; align-items:center; }
.page-btn { min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border-color); background:#fff; border-radius:var(--radius); cursor:pointer; font-size:13px; font-weight:500; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.page-btn:hover   { background:#f8fafc; color:var(--primary); border-color:var(--primary); }
.page-btn.active  { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ── Forms ────────────────────────────────────────────────── */
.form-wrapper        { max-width:860px; }
.form-section-label  { font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border-color); }
.form-row    { display:flex; gap:24px; margin-bottom:20px; }
.form-group  { flex:1; min-width:0; }
.form-group label { display:block; margin-bottom:7px; font-weight:500; font-size:13.5px; color:var(--text-primary); }

.required { color:var(--error-color); margin-left:2px; }

.form-control {
    width:100%; padding:10px 14px; border:1px solid var(--border-color);
    border-radius:var(--radius); outline:none; font-size:14px; font-family:inherit;
    transition:border-color .2s, box-shadow .2s; background:#fff; color:var(--text-primary);
}
.form-control:focus    { border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.form-control.is-invalid { border-color:var(--error-color) !important; box-shadow:0 0 0 3px rgba(239,68,68,.1) !important; }
select.form-control    { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

.error-msg { color:var(--error-color); font-size:12px; margin-top:5px; display:block; min-height:18px; }

/* Password input wrapper */
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-control { padding-right:44px; }
.toggle-pw { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-secondary); padding:2px; display:flex; align-items:center; }
.toggle-pw:hover { color:var(--text-primary); }

/* Password strength */
.pw-strength { height:4px; background:#e2e8f0; border-radius:4px; margin-top:8px; overflow:hidden; }
.pw-strength-fill { height:100%; width:0; border-radius:4px; transition:width .3s, background .3s; }
.pw-strength-label { font-size:11.5px; color:var(--text-secondary); display:block; margin-top:4px; }

/* Info box */
.form-info-box {
    display:flex; align-items:flex-start; gap:10px;
    background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--radius);
    padding:12px 16px; color:#1d4ed8; font-size:13px; margin-bottom:8px;
}
.form-info-box svg { flex-shrink:0; margin-top:1px; }

.form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:28px; }

.general-msg { margin-top:16px; padding:12px 16px; border-radius:var(--radius); display:none; font-size:14px; }
.general-msg.success { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; display:block; }
.general-msg.error   { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; display:block; }

/* ── Modals ───────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal { background:#fff; border-radius:12px; padding:36px 32px; width:90%; max-width:460px; text-align:center; box-shadow:var(--shadow-md); animation:slideUp .25s ease; }
.modal-lg  { max-width:700px; text-align:left; padding:32px; }
.modal-xl  { max-width:860px; text-align:left; padding:32px; max-height:90vh; overflow-y:auto; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-icon { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.modal-icon-danger { background:#fee2e2; color:var(--danger-color); }
.modal-title  { font-size:18px; font-weight:700; margin-bottom:8px; }
.modal-desc   { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.modal-actions{ display:flex; justify-content:center; gap:12px; margin-top:28px; }
.modal-lg .modal-actions, .modal-xl .modal-actions { justify-content:flex-end; }

.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-close  { background:none; border:none; cursor:pointer; font-size:24px; color:var(--text-secondary); line-height:1; padding:2px; }
.modal-close:hover { color:var(--text-primary); }

/* ── Patient-specific ─────────────────────────────────────── */
/* Report Reference ID banner */
.ref-id-banner {
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#eff6ff,#e0f2fe);
    border:1px solid #bae6fd; border-radius:var(--radius);
    padding:12px 18px; font-size:13px; color:#0369a1; margin-bottom:24px;
}
.ref-id-banner svg { flex-shrink:0; }

/* Ref ID chip in table */
.ref-chip {
    display:inline-block; padding:3px 8px;
    background:#f0f9ff; border:1px solid #bae6fd;
    border-radius:4px; font-size:12px; font-weight:600; color:#0369a1;
    font-family: monospace;
}

/* Textarea */
textarea.form-control { resize:vertical; min-height:72px; line-height:1.6; }

/* ══════════════════════════════════════════════════════════════
   HEALTH DASHBOARD
   ══════════════════════════════════════════════════════════════ */

/* Patient Banner */
.pat-dash-banner {
    display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1px solid var(--border-color);
    border-radius:var(--radius); padding:20px 24px; margin-bottom:24px;
    box-shadow:var(--shadow);
}
.pat-dash-banner-left  { display:flex; align-items:center; gap:16px; }
.pat-dash-banner-right { display:flex; align-items:center; gap:16px; }
.pat-dash-avatar {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    color:#fff; font-size:18px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pat-dash-name { font-size:18px; font-weight:700; margin-bottom:6px; }
.pat-dash-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pat-dash-meta-item {
    display:flex; align-items:center; gap:5px;
    font-size:12.5px; color:var(--text-secondary);
}
.dash-save-status { font-size:12px; color:var(--success-color); }

/* Overview row */
.dash-overview-row {
    display:flex; gap:20px; margin-bottom:24px; align-items:stretch;
}
.dash-overview-card {
    background:#fff; border:1px solid var(--border-color);
    border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; align-items:center; min-width:260px;
}
.dash-overview-score-wrap { display:flex; align-items:center; gap:28px; }
.dash-overview-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin-top:14px; text-transform:uppercase; letter-spacing:.4px; }

/* Ring chart */
.dash-overall-ring { position:relative; width:110px; height:110px; flex-shrink:0; }
.ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg   { fill:none; stroke:#f1f5f9; stroke-width:10; }
.ring-fill {
    fill:none; stroke:#10b981; stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:0 314;
    transition:stroke-dasharray .6s ease, stroke .4s ease;
}
.ring-label {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-score { font-size:26px; font-weight:800; color:var(--text-primary); line-height:1; }
.ring-sub   { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* Stats next to ring */
.dash-overview-stats { display:flex; flex-direction:column; gap:10px; }
.overview-stat { display:flex; flex-direction:column; align-items:center; }
.stat-num { font-size:22px; font-weight:700; line-height:1; }
.stat-lbl { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* Legend */
.dash-status-legend {
    flex:1; background:#fff; border:1px solid var(--border-color);
    border-radius:var(--radius); padding:20px 24px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.status-legend-item {
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--text-secondary);
}
.status-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.optimal-dot { background:#10b981; }
.monitor-dot { background:#f59e0b; }
.action-dot  { background:#ef4444; }

/* Domain Grid */
.domain-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:20px;
}

/* Domain Card */
.domain-card {
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow); border:1px solid var(--border-color);
    display:flex; flex-direction:column;
    transition:transform .2s, box-shadow .2s;
}
.domain-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

.domain-card-header {
    padding:18px 20px; display:flex; align-items:center; gap:14px;
}
.domain-icon-wrap {
    width:44px; height:44px; border-radius:10px;
    background:rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.domain-header-right { flex:1; min-width:0; }
.domain-label { font-size:14px; font-weight:700; color:#fff; margin-bottom:6px; }

/* Status cycle button */
.status-cycle-btn {
    background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.35);
    border-radius:20px; padding:3px 10px; cursor:pointer;
    transition:background .2s; display:inline-flex; align-items:center;
}
.status-cycle-btn:hover { background:rgba(255,255,255,0.35); }

.status-badge-inner {
    font-size:11px; font-weight:600; color:#fff; white-space:nowrap;
}

/* Domain card body */
.domain-card-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:14px; }

/* Rating section */
.rating-section { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rating-label { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; min-width:90px; }

/* Star rating */
.star-rating { display:flex; gap:2px; }
.star-btn {
    background:none; border:none; cursor:pointer;
    font-size:22px; color:#e2e8f0; padding:0 2px;
    transition:color .15s, transform .1s; line-height:1;
}
.star-btn:hover, .star-btn.star-hover { color:#f59e0b; transform:scale(1.15); }
.star-btn.star-filled { color:#f59e0b; }
.star-btn.star-empty  { color:#e2e8f0; }

.rating-value-label { font-size:12px; color:var(--text-secondary); font-style:italic; }

/* Notes */
.notes-section .form-control {
    font-size:13px; padding:8px 12px; min-height:56px; resize:none;
}

/* Save row */
.domain-save-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.domain-saved-msg { font-size:12px; }
.saved-ok  { color:var(--success-color); font-weight:500; }
.saved-err { color:var(--error-color); }

/* ── User Dropdown ────────────────────────────────────────── */
.header-user { position: relative; cursor: pointer; user-select: none; }
.user-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    min-width: 200px;
    z-index: 50;
    margin-top: 10px;
    overflow: hidden;
}
.user-dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease;
}
.dropdown-header {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-all;
}
.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}
.dropdown-item:hover {
    background: #f1f5f9;
}
.text-danger {
    color: var(--danger-color);
}
.text-danger:hover {
    color: var(--danger-hover);
    background: #fee2e2;
}