/* wwwroot/css/theragen-shared.css
   Global tokens, base styles, and light utilities for TheraGen.
   NOTE: This is a NON-SCOPED stylesheet. Keep it import-free. */

/* ---------- Design tokens ---------- */
:root{
    --tg-primary:#2C727E;
    --tg-ink:#0c2d31;
    --tg-muted:#55757b;
    --tg-surface:#f7fbfc;

    --tg-card:#ffffff;
    --tg-line:#e7eef0;

    --tg-radius:18px;
    --tg-radius-sm:12px;

    --tg-shadow:0 12px 36px rgba(10,40,50,.10);
    --tg-shadow-sm:0 6px 18px rgba(10,40,50,.08);

    --tg-focus: 0 0 0 3px rgba(44,114,126,.25);
}

/* ---------- Base / reset-ish ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    background:var(--tg-surface);
    color:var(--tg-ink);
    font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Typography scale */
h1,h2,h3,h4{font-weight:800; color:var(--tg-ink); margin:.25rem 0}
h1{font-size: clamp(2rem, 3.6vw, 3rem); color:var(--tg-primary)}
h2{font-size: clamp(1.4rem, 2.2vw, 2rem)}
h3{font-size: clamp(1.15rem, 1.6vw, 1.5rem)}
h4{font-size: 1.1rem; font-weight:700}
p{margin:.5rem 0}
small,.text-sm{font-size:.9rem}
.muted,.text-muted{color:var(--tg-muted)}

/* Links */
a{color:var(--tg-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Focus ring (accessibility) */
:where(a, button, [role="button"], input, select, textarea):focus{
    outline:none;
    box-shadow: var(--tg-focus);
    border-radius: 10px;
}

/* ---------- Layout helpers ---------- */
.container{
    width:min(1100px, 92vw);
    margin-inline:auto;
}
.center{text-align:center}
.stack{display:flex; flex-direction:column; gap:1rem}
.inline{display:inline-flex; align-items:center; gap:.5rem}
.space-y-2 > * + *{margin-top:.5rem}
.space-y-3 > * + *{margin-top:.75rem}
.space-y-4 > * + *{margin-top:1rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.layer-1{position:relative; z-index:1}     /* sit above decorative canvases */
.layer-0{position:relative; z-index:0}

/* Screen-reader-only helper */
.sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Cards ---------- */
.card{
    background:var(--tg-card);
    border:1px solid var(--tg-line);
    border-radius:var(--tg-radius);
    box-shadow:var(--tg-shadow);
}
.card-sm{
    border-radius:var(--tg-radius-sm);
    box-shadow:var(--tg-shadow-sm);
}
.card-body{padding:1.25rem}
.card-title{margin:.1rem 0 .35rem; font-weight:800; color:var(--tg-primary)}
.card-subtitle{margin:0 0 1rem; color:var(--tg-muted)}

/* ---------- Buttons ---------- */
.btn{
    --pad-x:1rem; --pad-y:.62rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding: var(--pad-y) var(--pad-x);
    font-weight:800; border-radius:999px; border:1px solid transparent;
    text-decoration:none; cursor:pointer; user-select:none;
}
.btn:disabled{opacity:.65; cursor:not-allowed}

.btn-primary{
    background:var(--tg-primary); color:#fff; border-color:var(--tg-primary);
}
.btn-primary:hover{filter:brightness(1.05)}

.btn-outline{
    background:#fff; color:var(--tg-primary); border-color:var(--tg-primary);
}
.btn-outline:hover{background:rgba(44,114,126,.06)}

/* Google button (works for <a> or <button>) */
.btn-google{
    composes: btn btn-primary; /* if your build ignores 'composes', the rules below still apply */
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.65rem 1rem; border-radius:999px;
    background:var(--tg-primary); color:#fff; border:1px solid var(--tg-primary);
}
.btn-google img{width:20px; height:20px; display:block}

/* ---------- Header / hero defaults ---------- */
.site-header{
    display:grid; place-items:center;
    padding: clamp(18px, 2.4vh, 28px) 1rem 0;
}
.site-logo{height:40px; width:auto}

/* Generic hero with breathing room for decorative canvases above */
.hero{
    display:grid; place-items:center;
    padding-top: clamp(96px, 14vh, 160px);
    padding-bottom: .5rem;
}

/* ---------- Utility alerts ---------- */
.alert{
    padding:.65rem .8rem; border-radius:10px; border:1px solid transparent;
}
.alert-error{background:#fff2f2; border-color:#ffdede; color:#7b1c1c}
.alert-info{background:#eef7fb; border-color:#d7ebf6; color:#0b3a45}

/* ---------- Images & media ---------- */
img{max-width:100%; height:auto; border-style:none}

/* ---------- Tables (simple) ---------- */
table{border-collapse:collapse; width:100%}
th,td{padding:.6rem .75rem; border-bottom:1px solid var(--tg-line)}
th{text-align:left; color:var(--tg-muted); font-weight:700}

/* ---------- Forms (light touch) ---------- */
input,select,textarea{
    font:inherit; color:inherit; background:#fff; border:1px solid var(--tg-line);
    border-radius:10px; padding:.55rem .7rem;
}
input:focus,select:focus,textarea:focus{box-shadow:var(--tg-focus); outline:none}

/* ---------- Z-index helpers ---------- */
.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}

/* ---------- Print tweaks ---------- */
@media print{
    .no-print{display:none !important}
    body{background:#fff}
    a{text-decoration:underline}
}

/* ---------- Motion & accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Subtle elevate/press */
.elevate{ transition: transform .25s ease, box-shadow .25s ease }
.elevate:hover{ transform: translateY(-2px); box-shadow: var(--tg-shadow) }
.press:active{ transform: translateY(0) scale(.99) }

/* ---------- Unified type rhythm ---------- */
:root{
    --tg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --tg-h1: clamp(1.75rem, 2.6vw, 2.5rem);
    --tg-h2: clamp(1.35rem, 2vw, 1.8rem);
    --tg-h3: clamp(1.15rem, 1.6vw, 1.4rem);
    --tg-text: 16px;
    --tg-leading: 1.5;
    --tg-pad: clamp(14px, 1.8vw, 18px);
}
body{ font: var(--tg-text)/var(--tg-leading) var(--tg-font); letter-spacing:.2px }

/* Headings */
h1{ font-size:var(--tg-h1); color:var(--tg-primary); font-weight:800; }
h2{ font-size:var(--tg-h2); font-weight:800 }
h3{ font-size:var(--tg-h3); font-weight:800 }

/* ---------- Surfaces ---------- */
.surface{ background:var(--tg-card); border:1px solid var(--tg-line); border-radius:var(--tg-radius); box-shadow:var(--tg-shadow); }
.surface-sm{ border-radius:var(--tg-radius-sm); box-shadow:var(--tg-shadow-sm); }

/* ---------- Buttons (consolidated) ---------- */
.btn{ --pad-x:1rem; --pad-y:.62rem; display:inline-flex; align-items:center; gap:.55rem; padding:var(--pad-y) var(--pad-x); font-weight:800; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease, box-shadow .2s ease; }
.btn:focus-visible{ box-shadow: var(--tg-focus) }
.btn:active{ transform: translateY(1px) }
.btn-primary{ background:var(--tg-primary); color:#fff; border-color:var(--tg-primary); }
.btn-primary:hover{ filter:brightness(1.06) }
.btn-outline{ background:#fff; color:var(--tg-primary); border-color:var(--tg-primary) }
.btn-outline:hover{ background:rgba(44,114,126,.06) }
.btn-ghost{ background:transparent; color:var(--tg-primary) }

/* ---------- Badges / pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--tg-primary); border:1px solid var(--tg-line); padding:.35rem .6rem; border-radius:999px; font-weight:700; }

/* ---------- Sidebar pattern ---------- */
.tg-sidebar{ width:260px; background:var(--tg-primary); color:#fff; }
.tg-sidebar a{ color:#fff; }
.tg-sidebar .nav-link{ display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-radius:10rem; transition: background .2s ease, transform .2s ease; }
.tg-sidebar .nav-link:hover{ background:rgba(255,255,255,.08); transform: translateX(2px); }
.tg-sidebar .nav-link.active{ background:#04485D }

/* slide-in panel (account panel) */
.tg-panel{ position:fixed; inset:0 0 0 auto; width:min(360px, 92vw); background:var(--tg-primary); color:#fff; transform: translateX(100%); transition: transform .32s ease; z-index:1110; box-shadow: -12px 0 32px rgba(0,0,0,.2) }
.tg-panel.show{ transform: translateX(0) }
.tg-panel .panel-body{ height:100%; overflow:auto; padding:24px }

/* Backdrop for panels/modals */
.backdrop{ position:fixed; inset:0; background:rgba(2,16,20,.38); opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s step-end; z-index:1100 }
.backdrop.show{ opacity:1; visibility:visible; transition: opacity .25s ease, visibility 0s }

/* ---------- Header bar ---------- */
.tg-topbar{ height:56px; background:var(--tg-primary); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 var(--tg-pad); border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:10 }
.tg-topbar .logo{ height:34px }

/* ---------- Chat area ---------- */
.tg-chat{ height: calc(100vh - 56px - 86px); /* header + composer */ overflow:auto; padding: 12px clamp(12px,2vw,20px); }
.chat-row{ display:flex; gap:.75rem; margin:.5rem 0; align-items:flex-start; }
.chat-avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 40px; }
.chat-bubble{ max-width: min(720px, 70vw); background:#fff; border:1px solid var(--tg-line); border-radius:14px 14px 14px 6px; padding:.6rem .8rem; box-shadow:var(--tg-shadow-sm) }
.chat-bubble.user{ margin-left:auto; background:#dceef7; border-radius:14px 14px 6px 14px }

/* ---------- Composer ---------- */
.tg-composer{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--tg-line); padding:10px clamp(12px, 2vw, 20px); }
.compose{ position:relative; max-width:1200px; margin-inline:auto; }
.compose textarea{ width:100%; min-height:44px; max-height:160px; resize:vertical; padding:12px 56px 12px 14px; border-radius:999px; border:1px solid var(--tg-line) }
.compose .send{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--tg-primary); color:#fff; border:none; }
.compose .send:disabled{ background:#9dbdc3; cursor:not-allowed }

/* ---------- Cards used in subscriptions/account ---------- */
.plan-card{ border:1px solid var(--tg-line); background:#fff; border-radius:16px; padding:18px; width: min(300px, 92vw); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.plan-card:hover{ transform: translateY(-4px); box-shadow: var(--tg-shadow) }
.plan-card.active{ background:linear-gradient(180deg, #2C727E, #145F6D); color:#fff; border-color:transparent }
.plan-card h5{ margin:.25rem 0 .35rem; font-weight:800 }
.plan-card .price{ font-size:1.25rem; font-weight:800 }

/* ---------- Utilities ---------- */
.grid{ display:grid; gap:1rem }
.grid.auto-fit{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.round{ border-radius:999px }
.shadow{ box-shadow:var(--tg-shadow) }
.border{ border:1px solid var(--tg-line) }