/* Astraal DocuSphere(TM) - Brand Stylesheet
   Emerald Green / Aqua Blue / White / Silver-Grey
*/
:root{
  --ds-emerald:#0B6E4F;
  --ds-emerald-dk:#07452F;
  --ds-emerald-lt:#E4F2EC;
  --ds-aqua:#0E9AA7;
  --ds-aqua-lt:#E3F5F6;
  --ds-silver:#D9DEE3;
  --ds-silver-dk:#8C97A0;
  --ds-ink:#1A1F26;
  --ds-bg:#F4F7F6;
  --ds-white:#FFFFFF;
  --ds-danger:#C0392B;
  --ds-warning:#B7791F;
}

*{box-sizing:border-box;}
body{
  background:var(--ds-bg);
  color:var(--ds-ink);
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  font-size:15px;
}

a{color:var(--ds-aqua); text-decoration:none;}
a:hover{color:var(--ds-emerald);}

/* ---- Topbar ---- */
.ds-topbar{
  background:linear-gradient(90deg, var(--ds-emerald-dk), var(--ds-emerald));
  color:#fff;
  padding:10px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  position:sticky; top:0; z-index:100;
}
.ds-topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:#fff;letter-spacing:.2px;}
.ds-topbar .brand small{display:block;font-weight:400;font-size:11px;letter-spacing:1.5px;color:var(--ds-silver);text-transform:uppercase;}
.ds-topbar .user-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:30px;padding:5px 14px;}
.ds-topbar .user-chip .role-pill{background:var(--ds-aqua);color:#fff;font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;}
.ds-topbar a{color:#fff;}
.ds-topbar a:hover{color:var(--ds-silver);}

/* ---- Layout ---- */
.ds-shell{display:flex; min-height:calc(100vh - 54px);}
.ds-sidebar{
  width:238px; background:#fff; border-right:1px solid var(--ds-silver);
  padding:18px 0; flex-shrink:0;
}
.ds-sidebar .sect-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ds-silver-dk); padding:14px 20px 6px;}
.ds-sidebar a{
  display:flex; align-items:center; gap:10px;
  padding:9px 20px; color:var(--ds-ink); font-size:14px; font-weight:500;
  border-left:3px solid transparent;
}
.ds-sidebar a:hover{background:var(--ds-emerald-lt); color:var(--ds-emerald-dk);}
.ds-sidebar a.active{background:var(--ds-emerald-lt); color:var(--ds-emerald-dk); border-left-color:var(--ds-emerald); font-weight:700;}
.ds-main{flex:1; padding:26px 30px; max-width:100%; overflow-x:auto;}

/* ---- Cards ---- */
.ds-card{background:#fff;border:1px solid var(--ds-silver);border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.03);}
.ds-card h2, .ds-card h5{color:var(--ds-emerald-dk);}
.ds-page-title{color:var(--ds-emerald-dk); font-weight:700; margin-bottom:4px;}
.ds-page-sub{color:var(--ds-silver-dk); margin-bottom:22px; font-size:14px;}

.kpi{background:#fff;border-radius:10px;border:1px solid var(--ds-silver);padding:18px 20px;border-top:4px solid var(--ds-emerald);}
.kpi .num{font-size:28px;font-weight:700;color:var(--ds-emerald-dk);}
.kpi .lbl{font-size:12.5px;color:var(--ds-silver-dk);text-transform:uppercase;letter-spacing:.6px;}
.kpi.aqua{border-top-color:var(--ds-aqua);}
.kpi.warn{border-top-color:var(--ds-warning);}
.kpi.danger{border-top-color:var(--ds-danger);}

/* ---- Badges ---- */
.badge{font-weight:600; font-size:11px; padding:4px 9px; border-radius:20px;}
.badge-emerald{background:var(--ds-emerald); color:#fff;}
.badge-aqua{background:var(--ds-aqua); color:#fff;}
.badge-secondary{background:var(--ds-silver); color:var(--ds-ink);}
.badge-warning{background:#F5E3C3; color:var(--ds-warning);}
.badge-danger{background:#F6D5D0; color:var(--ds-danger);}
.badge-dark{background:var(--ds-ink); color:#fff;}

/* ---- Buttons ---- */
.btn-ds{background:var(--ds-emerald); border-color:var(--ds-emerald); color:#fff;}
.btn-ds:hover{background:var(--ds-emerald-dk); border-color:var(--ds-emerald-dk); color:#fff;}
.btn-ds-outline{background:#fff; border:1px solid var(--ds-emerald); color:var(--ds-emerald);}
.btn-ds-outline:hover{background:var(--ds-emerald-lt);}
.btn-aqua{background:var(--ds-aqua); border-color:var(--ds-aqua); color:#fff;}
.btn-aqua:hover{background:#0b7a85; border-color:#0b7a85; color:#fff;}

/* ---- Tables ---- */
.table thead th{background:var(--ds-emerald-dk); color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; border:none; font-weight:600;}
.table td{vertical-align:middle; font-size:14px;}
.table-hover tbody tr:hover{background:var(--ds-emerald-lt);}

/* ---- Login ---- */
.ds-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--ds-emerald-dk), var(--ds-emerald) 45%, var(--ds-aqua));}
.ds-login-card{background:#fff; border-radius:16px; padding:36px 40px; width:460px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,.25);}
.role-pick{border:1px solid var(--ds-silver); border-radius:8px; padding:10px 14px; margin-bottom:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:.15s;}
.role-pick:hover{border-color:var(--ds-aqua); background:var(--ds-aqua-lt);}
.role-pick.selected{border-color:var(--ds-emerald); background:var(--ds-emerald-lt);}

/* ---- Landing ---- */
.ds-hero{background:linear-gradient(120deg, var(--ds-emerald-dk), var(--ds-emerald) 55%, var(--ds-aqua)); color:#fff; padding:90px 8% 70px;}
.ds-hero h1{font-size:44px; font-weight:800;}
.ds-hero p.lead{color:#E9F6F1; font-size:18px; max-width:680px;}
.feature-icon{width:46px;height:46px;border-radius:10px;background:var(--ds-emerald-lt);color:var(--ds-emerald);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px;}

/* ---- Steps / Workflow chips ---- */
.wf-step{display:inline-flex;align-items:center;gap:8px;background:var(--ds-emerald-lt);color:var(--ds-emerald-dk);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;margin:4px 6px 4px 0;}
.wf-arrow{color:var(--ds-silver-dk); margin:0 2px;}

/* ---- Misc ---- */
.ds-hashchip{font-family:'Courier New',monospace; font-size:11.5px; background:var(--ds-ink); color:#8BFFC7; padding:2px 8px; border-radius:4px;}
.ds-footer{text-align:center; padding:18px; color:var(--ds-silver-dk); font-size:12.5px;}
.text-emerald{color:var(--ds-emerald);}
.text-aqua{color:var(--ds-aqua);}
.border-top-emerald{border-top:4px solid var(--ds-emerald) !important;}
code{background:var(--ds-silver); padding:2px 6px; border-radius:4px; color:var(--ds-emerald-dk);}