/* ==========================================================================
   Shared portal styling for geriatric.mypesara.com and tpa.mypesara.com.
   Tokens from staging.helloprimercherang.com src/assets/styles/main.css,
   layout from src/components/DoctorLayout.vue, components from care.css.
   ========================================================================== */
:root{
  --primary:175 77% 26%; --border:0 0% 89.8%; --muted-foreground:0 0% 45.1%;
  --color-primary:#0f766e; --color-primary-hover:#115e59; --color-primary-light:#e6f6f4;
  --color-primary-dark:#134e4a; --color-primary-soft:#ccfbf1;
  --color-success:#15803d; --color-success-light:#f0fdf4;
  --color-warning:#b45309; --color-warning-light:#fffbeb;
  --color-error:#dc2626;   --color-error-light:#fef2f2;
  --color-info:#0369a1;    --color-info-light:#f0f9ff;
  --accent-teal:#0f766e;   --accent-teal-bg:#e6f6f4;
  --accent-blue:#0369a1;   --accent-blue-bg:#e0f2fe;
  --accent-green:#15803d;  --accent-green-bg:#dcfce7;
  --accent-amber:#b45309;  --accent-amber-bg:#fef3c7;
  --accent-rose:#be185d;   --accent-rose-bg:#fce7f3;
  --accent-violet:#6d28d9; --accent-violet-bg:#ede9fe;
  --accent-orange:#ea580c; --accent-orange-bg:#fff7ed; --accent-orange-line:#fdba74;
  --color-bg:#f4f6f6; --color-surface:#fff;
  --radius-card:16px; --radius-control:12px; --radius-md:6px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-raised:0 8px 24px rgb(16 24 40 / .10);
  --gradient-brand:linear-gradient(135deg,#115e59 0%,#0f766e 55%,#0d9488 100%);
  --color-gray-100:#f4f4f5; --color-gray-200:#e4e4e7; --color-gray-300:#d4d4d8;
  --color-gray-400:#a1a1aa; --color-gray-500:#71717a; --color-gray-600:#52525b;
  --color-gray-700:#3f3f46; --color-gray-900:#18181b;
  --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-size-xs:.75rem; --font-size-sm:.875rem; --font-size-base:1rem; --font-size-lg:1.125rem;
  --spacing-2:.5rem; --spacing-4:1rem; --spacing-8:2rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-gray-900);min-height:100vh}

/* ---------------- shell ---------------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--color-surface);display:flex;flex-direction:column;
  border-right:1px solid var(--color-gray-200);position:fixed;inset:0 auto 0 0;z-index:100}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--font-size-base);padding:20px 20px 16px}
.brand img{width:28px;height:28px;object-fit:contain}
.brand small{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:var(--radius-pill);
  background:var(--color-primary-light);color:var(--color-primary);font-size:var(--font-size-xs);font-weight:600}
.sidebar-nav{flex:1;padding:4px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-control);
  color:var(--color-gray-600);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;border:0;
  background:none;font-family:inherit;cursor:pointer;width:100%;text-align:left}
.nav-item i{font-size:1rem;width:18px;text-align:center}
.nav-item:hover{background:var(--color-gray-100);color:var(--color-gray-900)}
.nav-item.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:600}
.sidebar-footer{padding:12px;border-top:1px solid var(--color-gray-200)}
.who{display:flex;align-items:center;gap:10px;padding:6px 4px}
.who .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.who b{font-size:var(--font-size-sm)}
.who small{font-size:var(--font-size-xs);color:var(--color-gray-500)}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-primary-light);color:var(--color-primary);font-weight:700;font-size:var(--font-size-sm);flex:none}
.main{flex:1;min-width:0;margin-left:248px;padding:var(--spacing-8)}
.page{max-width:1100px;margin:0 auto}
h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.lead{color:var(--color-gray-500);font-size:.9375rem;margin:0 0 20px}
h2{font-size:var(--font-size-base);font-weight:700;margin:0}
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--color-gray-600);
  font:inherit;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;margin-bottom:12px}

/* ---------------- components ---------------- */
.card{background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--spacing-4)}
.card + .card{margin-top:14px}
.row{display:flex;align-items:center;gap:var(--spacing-2);width:100%;background:var(--color-surface);border:0;
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:14px var(--spacing-4);text-align:left;
  font:inherit;color:inherit;cursor:pointer;margin-bottom:10px}
.row .grow{flex:1;min-width:0}
.row-title{font-weight:600;font-size:var(--font-size-sm)}
.sub{font-size:var(--font-size-sm);color:var(--color-gray-500)}
.ic{width:40px;height:40px;flex:none;border-radius:var(--radius-control);display:inline-flex;align-items:center;
  justify-content:center;background:hsl(var(--primary)/.1);color:var(--color-primary);font-size:1.1rem}
.ic.green{background:var(--accent-green-bg);color:var(--accent-green)}
.ic.blue{background:var(--accent-blue-bg);color:var(--accent-blue)}
.ic.amber{background:var(--accent-amber-bg);color:var(--accent-amber)}
.ic.rose{background:var(--accent-rose-bg);color:var(--accent-rose)}
.ic.oren{background:var(--accent-orange-bg);color:var(--accent-orange)}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--color-gray-100);color:var(--color-gray-700);white-space:nowrap}
.badge.ok{background:#ecfdf5;color:#065f46}
.badge.warn{background:#fef9c3;color:#854d0e}
.badge.bad{background:#fef2f2;color:#991b1b}
.badge.info{background:#eff6ff;color:#1e40af}
.badge.done{background:#f0fdf4;color:#166534}
/* the MyPesara tag the clinical team sees on a pensioner */
.tag-pesara{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:2px 9px;
  border-radius:var(--radius-pill);background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;
  font-size:var(--font-size-sm);font-weight:500;height:2.5rem;padding:0 1rem;border-radius:var(--radius-md);
  border:0;cursor:pointer;white-space:nowrap;background:var(--color-primary);color:#fff}
.btn:hover{background:var(--color-primary-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.lg{height:2.75rem;padding:0 1.5rem;font-size:var(--font-size-base)}
.btn.out{background:#fff;border:1px solid hsl(var(--border));color:var(--color-gray-900)}
.btn.out:hover{background:var(--color-gray-100)}
.btn.danger{background:#fff;border:1px solid #fecaca;color:var(--color-error)}
.full{width:100%}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid hsl(var(--border));background:#fff;border-radius:var(--radius-pill);padding:7px 14px;
  font:inherit;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;color:var(--color-gray-700)}
.pill.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-gray-200);margin-bottom:18px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font:inherit;font-size:var(--font-size-sm);font-weight:600;
  color:var(--color-gray-600);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--color-primary);border-bottom-color:var(--color-primary)}
label.lbl{display:flex;flex-direction:column;gap:6px;font-size:var(--font-size-sm);font-weight:600;
  color:var(--color-gray-700);margin-bottom:14px}
.inp,select.inp{width:100%;border:1px solid hsl(var(--border));border-radius:var(--radius-md);padding:10px 12px;
  font:inherit;font-size:.9375rem;background:#fff;color:var(--color-gray-900)}
.inp:focus{outline:2px solid hsl(var(--primary)/.35);border-color:var(--color-primary)}
.note{font-size:var(--font-size-sm);padding:10px 14px;border-radius:10px;background:#f8fafc;
  color:var(--color-gray-700);line-height:1.5}
.note.warn{background:#fffbeb;color:#78350f}
.note.bad{background:#fef2f2;color:#7f1d1d}
.note.ok{background:var(--color-success-light);color:#14532d}
table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--color-gray-100)}
th{color:var(--color-gray-500);font-weight:600;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.kv{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:var(--font-size-sm);
  border-bottom:1px solid var(--color-gray-100)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--color-gray-500)}
.kv span:last-child{font-weight:600;text-align:right}
.empty{background:#fff;border:1px dashed var(--color-gray-300);border-radius:var(--radius-control);
  padding:28px;color:var(--color-gray-500);font-size:var(--font-size-sm);text-align:center}

/* ---------------- login ---------------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--color-bg)}
.login{width:100%;max-width:400px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-raised);padding:28px}
.login .brand{padding:0 0 18px}
.login h1{font-size:1.25rem;margin-bottom:2px}
.login .lead{margin-bottom:20px;font-size:var(--font-size-sm)}
.demo-hint{margin-top:14px;font-size:var(--font-size-xs);color:var(--color-gray-500);line-height:1.6}

/* ---------------- demo ribbon ---------------- */
.ribbon{position:fixed;top:0;left:0;right:0;z-index:300;background:#7c2d12;color:#fff;font-size:12px;
  font-weight:600;text-align:center;padding:5px 12px;letter-spacing:.02em}
body.has-ribbon .sidebar{top:26px}
body.has-ribbon .main{padding-top:calc(var(--spacing-8) + 26px)}
body.has-ribbon .login-wrap{padding-top:50px}
@media(max-width:860px){
  .sidebar{position:static;width:100%;inset:auto;border-right:0;border-bottom:1px solid var(--color-gray-200)}
  .layout{flex-direction:column}
  .main{margin-left:0;padding:var(--spacing-4)}
  .sidebar-nav{flex-direction:row;overflow-x:auto}
}