/* ===========================================================
   Codicom — Global styles + Auth pages + App shell
   Single source of truth for layout & components (mobile-first)
   =========================================================== */

/* ---------- Theme variables ---------- */
:root{
    --primary:#0aa3a3; --primary-ink:#ffffff;
    --bg:#0b1320; --bg-accent:#0f1d3a;
    --surface:#ffffff; --ink:#0b1220; --muted:#616b7a;
    --ring:rgba(10,163,163,.35);
    --danger:#c03540;
    --radius:16px;
    --shadow:0 10px 25px rgba(0,0,0,.12);
    --sidebar-w:270px; /* app shell */
}
@media (prefers-color-scheme:dark){
    :root{
        --surface:#0f1525; --ink:#e7ecf3; --muted:#96a0af;
        --bg:#060a14; --bg-accent:#0b1326;
        --shadow:0 12px 28px rgba(0,0,0,.35);
    }
}

/* ---------- Resets / base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; color:var(--ink);
    background:linear-gradient(120deg,var(--bg),var(--bg-accent));
    font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji'
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ===========================================================
   AUTH PAGES (login / 2FA)
   =========================================================== */
.auth-grid{
    min-height:100vh; display:grid; grid-template-columns:1.2fr 1fr; /* brand | form */
}
@media (max-width:1024px){ .auth-grid{grid-template-columns:1fr} .brand-footer{display:none} }

.brand-pane{
    position:relative; color:#cfe6ff; padding:48px;
    background:
            radial-gradient(1200px 600px at -10% -20%, rgba(255,255,255,.08), transparent 60%),
            radial-gradient(900px 500px at 120% 120%, rgba(255,255,255,.06), transparent 60%),
            linear-gradient(120deg,var(--bg),var(--bg-accent));
}
.brand-inner{max-width:560px}
.logo{height:48px;margin:0 0 20px 0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.brand-title{font-weight:700;letter-spacing:.2px;font-size:40px;margin:12px 0 8px 0;color:#eaf6ff}
.brand-tag{margin:0;color:#c6d6ea;max-width:40ch}
.brand-footer{position:absolute;left:48px;right:48px;bottom:32px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#b9c6d8}

.form-pane{
    display:flex;align-items:center;justify-content:center;padding:40px;
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.85)), url('/assets/img/login-texture.svg') center/cover no-repeat;
}
@media (prefers-color-scheme:dark){ .form-pane{background:linear-gradient(180deg,rgba(20,28,44,.86),rgba(16,22,38,.86))} }

.card{
    width:min(460px,100%); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:28px 28px 24px 28px; backdrop-filter:saturate(1.1) blur(6px);
}
.card-header{margin-bottom:10px}
.card-title{margin:0;font-weight:700;letter-spacing:.2px}
.card-sub{margin:4px 0 0 0;color:var(--muted)}

.alert{background:#feecef;color:#4a1117;border:1px solid #f5c2c7;border-radius:12px;padding:10px 12px;margin:12px 0}
.alert-ok{background:#e7f6ed;border:1px solid #b8e0c2;color:#0b3d24;border-radius:12px;padding:10px 12px}
.alert-err{background:#fff0f0;border:1px solid #ffd4d4;color:#7a1f1f;border-radius:12px;padding:10px 12px}

.field{display:block;margin:14px 0}
.label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600}
.label.with-action{gap:14px}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.input,
.field select,
.field textarea{
    width:100%; min-height:44px; border:1px solid #cfd6e4; background:#fff; color:#0d1422; border-radius:12px; padding:12px 14px; outline:none;
}
.input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
@media (prefers-color-scheme:dark){
    .input, .field select, .field textarea{background:#0e1428;border-color:#26304a;color:#e8f0ff}
}
.field textarea{min-height:90px}

.password-wrap{position:relative;display:flex;align-items:stretch}
.password-wrap .input{padding-right:84px}
.btn-tertiary{
    position:absolute;right:6px;top:6px;bottom:6px;border:1px dashed #cfd6e4;background:#f6f8fb;padding:0 12px;border-radius:10px;font-weight:600;cursor:pointer;
}
.btn-tertiary:focus{outline:2px solid var(--primary);outline-offset:2px}

.checkbox{display:flex;align-items:center;gap:10px;margin:6px 0 12px 0;color:#1b2333}
.checkbox input{width:18px;height:18px}

.btn-primary{border:none;background:linear-gradient(180deg,var(--primary),#088a8a);color:var(--primary-ink);border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn{border:none;background:linear-gradient(180deg,var(--primary),#088a8a);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none;display:inline-block}
.btn-outline{border:1px solid #cfd6e4;background:transparent;color:inherit;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none}
.btn-danger{border:1px solid var(--danger);color:var(--danger);background:transparent;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none}
.btn-primary:focus{outline:2px solid var(--primary);outline-offset:2px}

.w-100{width:100%} .mt{margin-top:14px} .small{font-size:13px} .muted{color:var(--muted)}
.link{font-weight:600}

/* ===========================================================
   APP SHELL (sidebar + topbar + page grid)
   =========================================================== */

/* Grid container (desktop) */
.page{
    min-height:100vh;
    display:grid;
    /* Prevent overlap: explicit minmax for sidebar + shrinkable main */
    grid-template-columns: minmax(260px, var(--sidebar-w)) 1fr;
    background:linear-gradient(120deg,var(--bg),var(--bg-accent));
    overflow-x:hidden;
    position:relative;
}
#nav-toggle{position:absolute;left:-9999px} /* hidden checkbox for off-canvas toggle */

/* Sidebar */
.sidebar{
    background:#0c1224; color:#dfe8ff; border-right:1px solid rgba(255,255,255,.06);
    display:flex; flex-direction:column; gap:10px; padding:18px;
    position:sticky; top:0; height:100vh; overflow:auto;
    z-index:10; /* sits above main content */
    min-width:0;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.brand img{height:36px}
.brand .title{font-weight:800;letter-spacing:.3px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#132042;color:#cfe1ff;font-size:12px;margin-top:6px}
nav.sidebar-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#e6eeff;text-decoration:none;border:1px solid transparent;background:transparent}
.nav-link:hover{background:#0f1833;border-color:#1e2c55}
.nav-link.active{background:#0a2244;border-color:#2c5ea6;box-shadow:inset 0 0 0 1px rgba(44,94,166,.35)}
.spacer{flex:1}

/* Main area */
.main{
    padding:20px;
    min-width:0;    /* allow shrinking; avoids sliding under sidebar */
    position:relative;
    z-index:1;
}
.topbar{
    display:flex;gap:10px;justify-content:space-between;align-items:center;
    background:var(--surface); border:1px solid #e6ebf2; border-radius:14px; padding:12px 14px
}
@media (prefers-color-scheme:dark){ .topbar{background:#0f1525;border-color:#26304a} }
.menu-btn{display:none;align-items:center;gap:8px;border:1px solid #cfd6e4;padding:8px 10px;border-radius:10px;background:transparent;color:inherit;font-weight:700;cursor:pointer}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Off-canvas behaviour on mobile */
@media (max-width:980px){
    .page{grid-template-columns:1fr}
    .sidebar{
        position:fixed; top:0; left:0; bottom:0;
        width:var(--sidebar-w);
        transform:translateX(-101%); /* hide fully */
        transition:transform .25s ease;
    }
    #nav-toggle:checked ~ .page .sidebar{ transform:translateX(0) }
    .backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9 }
    #nav-toggle:checked ~ .page .backdrop{ display:block }
    #nav-toggle:checked ~ .page{ overflow:hidden } /* stop background scroll under menu */
    .menu-btn{display:inline-flex}
}

/* Surfaces + containers */
.container{max-width:1120px;margin:16px auto 24px;padding:0 16px}
.card.app{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:18px}

/* 12-col responsive grid for content */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.span-12{grid-column:span 12} .span-8{grid-column:span 8} .span-6{grid-column:span 6}
.span-4{grid-column:span 4} .span-3{grid-column:span 3} .span-2{grid-column:span 2}
@media (max-width:980px){ .span-8,.span-6,.span-4,.span-3,.span-2{grid-column:span 12} }

/* Form controls inside app pages */
.field .label{display:block;font-weight:650;margin-bottom:6px}
.field .input, .field select, .field textarea{width:100%;min-height:44px;border-radius:10px;border:1px solid #cfd6e4;background:#fff;padding:10px 12px}
@media (prefers-color-scheme:dark){ .field .input, .field select, .field textarea{background:#0e1428;border-color:#26304a;color:#e8f0ff} }
.field textarea{min-height:90px}

/* Info blocks / key-values */
.kv{display:flex;flex-direction:column;border:1px solid #e6ebf2;border-radius:10px;padding:10px 12px}
@media (prefers-color-scheme:dark){.kv{border-color:#26304a}}
.kv .k{font-size:12px;color:var(--muted);margin-bottom:4px}
.kv .v{font-weight:700}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px}
.ok{background:#0e3f2b;color:#bff3d7;border:1px solid #2e8b57}
.warn{background:#3a1b1b;color:#ffd6d6;border:1px solid #8b2e2e}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Tables (lists) */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px 12px;border-bottom:1px solid #e6ebf2;text-align:left}
@media (prefers-color-scheme:dark){ th,td{border-color:#26304a} }
.pagination{display:flex;gap:6px;margin-top:12px}

/* Dividers */
hr{border:0;border-top:1px solid #e6ebf2}
@media (prefers-color-scheme:dark){ hr{border-top-color:#26304a} }


/* ===== FINAL overlap fix (grid-areas + shrinkable main) ===== */
.page{
    display:grid;
    grid-template-columns:minmax(260px,var(--sidebar-w)) minmax(0,1fr);
    grid-template-areas:"sidebar main";
    align-items:stretch;
    overflow-x:hidden;
    position:relative;
}

/* Pin children to named grid areas so auto-placement can't push main down */
.page > .sidebar{ grid-area:sidebar; z-index:10; min-width:0; }
.page > .main{ grid-area:main; min-width:0; position:relative; z-index:1; }

/* Backdrop should NOT participate in grid layout */
.backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9;
    /* If this label is (still) inside .page, keep it visually detached: */
    grid-column:1 / -1; grid-row:1 / -1;
}

/* Desktop sidebar stays in-grid; Mobile becomes off-canvas overlay */
@media (max-width:980px){
    .page{ grid-template-columns:1fr }
    .sidebar{
        position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
        transform:translateX(-101%); transition:transform .25s ease;
    }
    /* Toggle when checkbox is checked */
    #nav-toggle:checked ~ .page .sidebar{ transform:translateX(0) }
    /* Backdrop toggle works whether it's inside or outside .page */
    #nav-toggle:checked ~ .backdrop{ display:block }
    #nav-toggle:checked ~ .page .backdrop{ display:block }
    #nav-toggle:checked ~ .page{ overflow:hidden } /* prevent background scroll */
}

/* Optional hard fallback: add class="page force-fixed" if some page still misbehaves */
@media (min-width:981px){
    .page.force-fixed{ display:block }
    .page.force-fixed .sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w) }
    .page.force-fixed .main{ margin-left:var(--sidebar-w) }
}
/* Make app cards fill their container */
.card.app{ width:100%; }

/* Optional: wider content area for data-heavy pages */
.container.wide{ max-width:1400px; }   /* tweak to taste: 1280/1400/1600 */
@media (min-width:1600px){
    .container.wide{ max-width:1500px; } /* prevent super-wide lines on huge monitors */
}

/* Wider app container */
.container.wide{
    max-width: min(1600px, calc(100vw - var(--sidebar-w) - 40px));
}

/* Full-width search bar */
.searchbar{
    display:flex;
    gap:10px;
    align-items:flex-end;
}
.searchbar .grow{ flex:1; min-width: 240px; }

/* ===== Codicom responsive utilities (global) ===== */

/* Wider content wrap when needed */
.container.wide { max-width: 1100px; margin: 16px auto 24px; padding: 0 16px; }

/* Flexible search bar that stacks neatly on phones */
.searchbar{
    display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
}
.searchbar .field{ min-width:240px }
.searchbar .field.grow{ flex:1 1 360px } /* let the input expand */
.searchbar .label{ white-space:normal }  /* prevent letter-by-letter wrap */

/* Generic responsive table: turns into cards on small screens */
table.responsive{ width:100%; border-collapse:separate; border-spacing:0 }
table.responsive th, table.responsive td{ padding:10px 12px; text-align:left; }

/* Mobile rules */
@media (max-width: 760px){
    /* Keep topbar visible when scrolling lists */
    .topbar { position: sticky; top: 0; z-index: 10; }

    /* Searchbar stacks cleanly */
    .searchbar .field,
    .searchbar .field.grow { flex:1 1 100% }
    .searchbar .btn, .searchbar .btn-outline { width:100% }

    /* Table -> cards */
    table.responsive thead { display:none }
    table.responsive,
    table.responsive tbody,
    table.responsive tr,
    table.responsive td { display:block; width:100% }
    table.responsive tr{
        border:1px solid rgba(230,235,242,.15);
        border-radius:12px;
        padding:8px 10px;
        margin-bottom:10px;
        background:var(--surface,#0f1525);
    }
    table.responsive td{ border:none; padding:6px 8px }
    table.responsive td::before{
        content: attr(data-label);
        display:block;
        font-size:12px;
        color:var(--muted,#616b7a);
        margin-bottom:2px;
    }

    /* Small helper for action buttons inside mobile cards */
    .mobile-actions{ margin-top:6px }
}
/* Patient view helpers */
.mono-wrap{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-word; }
.badges{ display:flex; flex-wrap:wrap; gap:8px }
@media (max-width:760px){
    .actions .btn, .actions .btn-outline{ width:100% }
}


/* ===== Login layout tweaks ===== */

/* Give both panes generous space; left should be able to fill and grid its content */
.auth-grid{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr; /* left ~52%, right ~48% on desktop */
    gap: 0;
    min-height: 100vh;
}

/* Left: features use full width in a tidy 2-col grid */
.brand-inner{max-width:1100px;margin:0 auto;padding:28px 24px}
.features{
    display:grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap:14px;
    margin-top:16px;
}
.card.feature{
    padding:14px 16px;
    border-radius:16px;
}
.feature-title{
    margin:0 0 6px;
    font-size:18px;
    font-weight:800;
}
.feature-text{
    margin:0;
    font-size:14px;
    line-height:1.4;
}

/* Right: tiny legal banner sits at the top of the pane */
.form-pane{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:28px}
.legal-banner{
    font-size:13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding:10px 12px;
}

/* Password row */
.password-wrap{display:flex;gap:8px}
.password-wrap .btn-tertiary{white-space:nowrap}

/* Tablet: still two columns for features if possible */
@media (max-width: 1100px){
    .auth-grid{grid-template-columns: 1fr}        /* stack panes */
    .form-pane{padding:20px}
    .brand-inner{padding:20px}
}

/* Phone: stack everything, features become 1 column */
@media (max-width: 720px){
    .features{grid-template-columns: 1fr}
    .feature-title{font-size:16px}
    .feature-text{font-size:13px}
    .legal-banner{font-size:12px}
}