/* ============================================================
   Soulciolab — Laboratory module theme
   Palette: deep navy sidebar, teal primary, clean clinical greys
   ============================================================ */

:root {
    --lab-navy: #10283f;
    --lab-navy-2: #0c1f31;
    --lab-teal: #0e7c86;
    --lab-teal-dark: #0a6169;
    --lab-accent: #14b8a6;
    --lab-bg: #f1f5f9;
    --lab-card: #ffffff;
    --lab-border: #dfe7ee;
    --lab-text: #1e293b;
    --lab-muted: #64748b;
    --lab-success: #15803d;
    --lab-success-bg: #dcfce7;
    --lab-danger: #b91c1c;
    --lab-danger-bg: #fee2e2;
    --lab-warn: #b45309;
    --lab-warn-bg: #fef3c7;
    --lab-info: #1d4ed8;
    --lab-info-bg: #dbeafe;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--lab-bg);
    color: var(--lab-text);
}

/* ---------- shell ---------- */
.lab-shell { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */
.lab-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--lab-navy) 0%, var(--lab-navy-2) 100%);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lab-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lab-brand:hover { color: #fff; }
.lab-brand-mark {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lab-teal), var(--lab-accent));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem; color: #fff;
}
.lab-brand strong { display: block; font-size: 1rem; letter-spacing: .02em; }
.lab-brand small { color: #8fa8bf; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

.lab-nav { padding: .75rem .75rem 1.5rem; flex: 1; }
.lab-nav-heading {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6f8aa5;
    padding: 1rem .75rem .35rem;
}
.lab-nav-link {
    display: block;
    padding: .5rem .8rem;
    margin: .1rem 0;
    border-radius: 8px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s, color .15s;
}
.lab-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lab-nav-link.active {
    background: linear-gradient(90deg, var(--lab-teal), var(--lab-teal-dark));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(14, 124, 134, .35);
}
.lab-nav-link.disabled-link { color: #5b7289; pointer-events: none; font-style: italic; }

.lab-sidebar-foot {
    padding: .9rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.lab-sidebar-foot a { color: #8fa8bf; text-decoration: none; }
.lab-sidebar-foot a:hover { color: #fff; }

/* ---------- main / topbar ---------- */
.lab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.lab-topbar {
    background: var(--lab-card);
    border-bottom: 1px solid var(--lab-border);
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.lab-page-title { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--lab-navy); }
.lab-page-sub { font-size: .78rem; color: var(--lab-muted); }

.lab-user-chip {
    display: flex; align-items: center; gap: .6rem;
    font-size: .85rem; font-weight: 600; color: var(--lab-text);
    background: var(--lab-bg);
    border: 1px solid var(--lab-border);
    border-radius: 999px;
    padding: .35rem .9rem .35rem .4rem;
}
.lab-user-chip small { color: var(--lab-muted); font-weight: 400; }
.lab-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--lab-teal); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
}

.lab-content { padding: 1.5rem 1.75rem 3rem; }

/* ---------- alerts ---------- */
.lab-alert {
    border-radius: 10px;
    padding: .8rem 1.1rem;
    margin-bottom: 1.1rem;
    font-size: .9rem;
    border: 1px solid transparent;
}
.lab-alert-success { background: var(--lab-success-bg); color: var(--lab-success); border-color: #bbf7d0; }
.lab-alert-danger { background: var(--lab-danger-bg); color: var(--lab-danger); border-color: #fecaca; }

/* ---------- cards ---------- */
.lab-card {
    background: var(--lab-card);
    border: 1px solid var(--lab-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 40, 63, .06);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.lab-card-header {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--lab-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.lab-card-header h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--lab-navy); }
.lab-card-body { padding: 1.25rem; }
.lab-card-body.flush { padding: 0; }

/* ---------- stat cards ---------- */
.lab-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.lab-stat {
    background: var(--lab-card);
    border: 1px solid var(--lab-border);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    position: relative;
    overflow: hidden;
}
.lab-stat::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 4px;
    background: var(--lab-teal);
}
.lab-stat.warn::before { background: var(--lab-warn); }
.lab-stat.danger::before { background: var(--lab-danger); }
.lab-stat.info::before { background: var(--lab-info); }
.lab-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--lab-navy); line-height: 1.1; }
.lab-stat-label { font-size: .75rem; color: var(--lab-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .25rem; }

/* ---------- tables ---------- */
.lab-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lab-table thead th {
    background: #f8fafc;
    color: var(--lab-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--lab-border);
    text-align: left;
    white-space: nowrap;
}
.lab-table tbody td {
    padding: .7rem 1.1rem;
    border-bottom: 1px solid #eef3f7;
    vertical-align: middle;
}
.lab-table tbody tr:last-child td { border-bottom: none; }
.lab-table tbody tr:hover { background: #f8fbfd; }
.lab-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lab-table .neg { color: var(--lab-danger); font-weight: 600; }
.lab-table .pos { color: var(--lab-success); font-weight: 600; }

/* ---------- badges ---------- */
.lab-badge {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.lab-badge-green { background: var(--lab-success-bg); color: var(--lab-success); }
.lab-badge-red { background: var(--lab-danger-bg); color: var(--lab-danger); }
.lab-badge-amber { background: var(--lab-warn-bg); color: var(--lab-warn); }
.lab-badge-blue { background: var(--lab-info-bg); color: var(--lab-info); }
.lab-badge-grey { background: #e2e8f0; color: #475569; }
.lab-badge-teal { background: #ccfbf1; color: #0f766e; }

/* ---------- forms ---------- */
.lab-form .form-label { font-weight: 600; font-size: .82rem; color: var(--lab-text); }
.lab-form .form-control,
.lab-form .form-select {
    border: 1px solid var(--lab-border);
    border-radius: 9px;
    font-size: .9rem;
    padding: .55rem .8rem;
}
.lab-form .form-control:focus,
.lab-form .form-select:focus {
    border-color: var(--lab-teal);
    box-shadow: 0 0 0 3px rgba(14, 124, 134, .15);
}
.lab-form .field-note { font-size: .75rem; color: var(--lab-muted); margin-top: .25rem; }

/* ---------- buttons ---------- */
.lab-btn {
    display: inline-block;
    border: none;
    border-radius: 9px;
    padding: .55rem 1.15rem;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.lab-btn:active { transform: translateY(1px); }
.lab-btn-primary { background: var(--lab-teal); color: #fff; }
.lab-btn-primary:hover { background: var(--lab-teal-dark); color: #fff; }
.lab-btn-navy { background: var(--lab-navy); color: #fff; }
.lab-btn-navy:hover { background: var(--lab-navy-2); color: #fff; }
.lab-btn-outline {
    background: transparent;
    border: 1px solid var(--lab-border);
    color: var(--lab-text);
}
.lab-btn-outline:hover { background: #f1f5f9; color: var(--lab-text); }
.lab-btn-danger { background: var(--lab-danger); color: #fff; }
.lab-btn-success { background: var(--lab-success); color: #fff; }
.lab-btn-sm { padding: .3rem .7rem; font-size: .78rem; border-radius: 7px; }

/* ---------- misc ---------- */
.lab-toolbar {
    display: flex; flex-wrap: wrap; gap: .75rem;
    align-items: end;
    margin-bottom: 1.25rem;
}
.lab-toolbar .form-label { font-size: .75rem; font-weight: 600; color: var(--lab-muted); margin-bottom: .2rem; }
.lab-toolbar .form-control, .lab-toolbar .form-select {
    border: 1px solid var(--lab-border);
    border-radius: 9px;
    font-size: .85rem;
    padding: .45rem .7rem;
}

.lab-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.lab-detail dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lab-muted); margin-bottom: .15rem; }
.lab-detail dd { font-size: .95rem; font-weight: 600; margin: 0; }

.lab-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--lab-muted);
    font-size: .9rem;
}

.lab-mono { font-family: "Consolas", monospace; font-size: .82rem; color: var(--lab-muted); }

/* ---------- test picker ---------- */
.test-check { display: block; cursor: pointer; margin: 0; }
.test-check input { position: absolute; opacity: 0; pointer-events: none; }
.test-check-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .9rem .6rem 2.2rem;
    border: 1px solid var(--lab-border);
    border-radius: 10px;
    background: #fbfdff;
    position: relative;
    transition: border-color .15s, background .15s, box-shadow .15s;
    font-size: .88rem;
}
.test-check-body::before {
    content: "";
    position: absolute;
    left: .75rem; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border: 2px solid #94a3b8;
    border-radius: 5px;
    background: #fff;
}
.test-check input:checked + .test-check-body {
    border-color: var(--lab-teal);
    background: #effcfd;
    box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}
.test-check input:checked + .test-check-body::before {
    background: var(--lab-teal);
    border-color: var(--lab-teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.2 3.1 8.1l1.1-1.1 2 2 4.7-4.7 1.1 1.1z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.test-check-body small { color: var(--lab-muted); font-weight: 400; }

/* ---------- sub-test picker ---------- */
.subtest-panel {
    margin: .35rem 0 .5rem;
    border: 1px solid var(--lab-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #fbfdff;
    padding: .5rem .8rem .6rem;
    font-size: .82rem;
}
.panel-check input:checked + .test-check-body { border-radius: 10px; }
.subtest-panel + .test-check { }
.subtest-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .4rem;
    border-bottom: 1px dashed var(--lab-border);
    margin-bottom: .4rem;
}
.sub-all { font-weight: 700; color: var(--lab-navy); cursor: pointer; display: flex; gap: .4rem; align-items: center; }
.sub-hint { color: var(--lab-muted); font-size: .72rem; }
.subtest-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .15rem .8rem;
}
.subtest-item label {
    display: flex; gap: .4rem; align-items: center;
    cursor: pointer; font-weight: 400; color: var(--lab-text);
    margin: 0;
}
.sub-check { accent-color: var(--lab-teal); }
.sub-all-check { accent-color: var(--lab-navy); }
.sub-count-badge {
    position: absolute;
    right: .7rem;
    top: .7rem;
    background: var(--lab-teal);
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .55rem;
    line-height: 1.4;
}
.sub-count-badge.sub-count-partial { background: #b45309; }

/* ---------- admin: permission picker & breadcrumb ---------- */
.perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.perm-check input { accent-color: var(--lab-teal); }
.lab-breadcrumb {
    font-size: .82rem;
    color: var(--lab-muted);
    margin-bottom: .9rem;
}
.lab-breadcrumb a { color: var(--lab-teal); text-decoration: none; }
.lab-breadcrumb a:hover { text-decoration: underline; }

/* ---------- auth pages ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lab-navy) 0%, #123a52 55%, var(--lab-teal-dark) 100%);
    padding: 1.5rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--lab-card);
    border-radius: 14px;
    padding: 2rem 2.25rem;
    box-shadow: 0 18px 45px rgba(6, 18, 30, .35);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.4rem;
    color: var(--lab-navy);
}
.auth-brand strong { display: block; font-size: 1.05rem; }
.auth-brand small { color: var(--lab-muted); font-size: .78rem; }
.auth-foot {
    margin-top: 1.1rem;
    font-size: .82rem;
    color: var(--lab-muted);
    text-align: center;
}
.auth-foot a { color: var(--lab-teal); }
.auth-demo {
    margin-top: 1.2rem;
    border-top: 1px dashed var(--lab-border);
    padding-top: .9rem;
    font-size: .74rem;
    color: var(--lab-muted);
}
.auth-demo-grid { display: grid; gap: .15rem; margin-top: .35rem; font-family: Consolas, monospace; }
.lab-signout { background: none; border: none; padding: 0; cursor: pointer;
    color: var(--lab-teal); font-size: .78rem; }
.lab-signout:hover { text-decoration: underline; }

.lab-stock-pill {
    display: inline-flex; align-items: baseline; gap: .3rem;
    font-variant-numeric: tabular-nums;
}
.lab-stock-pill strong { font-size: 1rem; }
.lab-stock-pill small { color: var(--lab-muted); }

@media (max-width: 900px) {
    .lab-shell { flex-direction: column; }
    .lab-sidebar { width: 100%; height: auto; position: static; }
    .lab-topbar { position: static; }
}