/* Sundarbans Management team portal: same tokens as sundarbans.management. */
:root{
  color-scheme:light dark;
  --brand:#273148;
  --bg:#F5F3EF;
  --surface:#FFFFFF;
  --surface-2:#FBFAF8;
  --text:#273148;
  --text-2:#5C6883;
  --text-3:#8A93A6;
  --line:#DCD8D0;
  --line-soft:#E6E2DA;
  --focus:#7C8DB0;

  --font-display:"STIX Two Text","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Avenir Next","Mulish","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:clamp(1.375rem,1.15rem + .9vw,1.75rem);
  --fs-2xl:clamp(1.75rem,1.35rem + 1.9vw,2.75rem);
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:clamp(16px,5vw,64px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141A26; --surface:#1C2431; --surface-2:#212A39;
    --text:#E9E6E0; --text-2:#A7B1C4; --text-3:#7C879C;
    --line:#2E3949; --line-soft:#28323F; --focus:#A9BADA;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1{margin:0;font-weight:400;line-height:1.14;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}

.display{font-family:var(--font-display);letter-spacing:-.012em}
.label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--text-3);line-height:1.4}
.lede{color:var(--text-2);margin-top:var(--s3);max-width:56ch}

/* brand lockup */
.brandlock{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.mark{width:40px;height:40px;flex:none}
.mark-sm{width:30px;height:30px}
.wordmark{display:flex;flex-direction:column;gap:2px;line-height:1}
.wordmark b{font-family:var(--font-display);font-weight:500;font-size:.9375rem;letter-spacing:.07em}
.wordmark span{font-size:.5rem;letter-spacing:.3em;color:var(--text-2);font-weight:500}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;text-decoration:none;
  padding:13px 24px;border-radius:2px;border:1px solid var(--text);background:var(--text);color:var(--bg);
  cursor:pointer;transition:opacity .18s ease;
}
.btn:hover{opacity:.86}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--text-2);opacity:1}
.btn-sm{padding:8px 14px;font-size:var(--fs-xs)}
.linkbtn{font:inherit;font-size:var(--fs-sm);color:var(--text-2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.linkbtn:hover{color:var(--text)}

/* fields */
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--text-3)}
.field input{
  font:inherit;font-size:var(--fs-base);color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:2px;padding:12px 14px;width:100%;
}
.field input::placeholder{color:var(--text-3)}
.field input:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.msg{font-size:var(--fs-sm);color:var(--text);border-left:2px solid var(--focus);padding:2px 0 2px var(--s3)}

/* loading */
.loading{min-height:100vh;display:grid;place-items:center;color:var(--text-3);font-size:var(--fs-sm)}

/* ── LOGIN ─────────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s7) var(--gutter)}
.login-card{
  width:100%;max-width:420px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;
  padding:var(--s7) var(--s6) var(--s6);
}
.login-card .brandlock{margin-bottom:var(--s7)}
.login-card h1{font-size:var(--fs-2xl);margin-top:var(--s3)}
.login-card form{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s6)}
.login-card .btn{width:100%}
.note{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--s5)}
.note + .note{margin-top:var(--s2)}
@media (max-width:480px){
  .login{padding:var(--s5) var(--s4);align-items:start}
  .login-card{padding:var(--s6) var(--s5) var(--s5)}
}

/* ── DASHBOARD ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--gutter);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.who{display:flex;align-items:center;gap:var(--s4);font-size:var(--fs-sm);color:var(--text-2);min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.who span{display:none}}

.sec{padding:var(--s7) var(--gutter) var(--s8);max-width:1200px}
.sec h1{font-size:var(--fs-2xl);margin-top:var(--s3)}

.stats{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s6)}
.stat{display:flex;flex-direction:column;gap:4px;padding-top:var(--s3);border-top:2px solid var(--text);min-width:110px}
.stat b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500}

.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-top:var(--s6)}
.search{flex:1 1 280px;max-width:420px}
.actions{display:flex;gap:var(--s3)}
#dash-msg{margin-top:var(--s5)}

.tablewrap{margin-top:var(--s5);border-top:1px solid var(--line);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--text-3)}
td{color:var(--text-2);overflow-wrap:anywhere}
td:first-child{color:var(--text);white-space:nowrap}
td a{color:var(--text)}
td a:hover{text-decoration-color:currentColor}
.count{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--s4)}

/* Phones: each row becomes a card */
@media (max-width:700px){
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .stat{min-width:0}
  .actions{width:100%}
  .actions .btn{flex:1}
  .search{max-width:none}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{padding:var(--s4) 0;border-bottom:1px solid var(--line-soft)}
  td{border:0;padding:3px 0;display:grid;grid-template-columns:96px 1fr;gap:var(--s3)}
  td::before{content:attr(data-label);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--text-3);padding-top:3px}
  td:first-child{white-space:normal}
}