/* ============================================================
   AfterTrade KYC Mailer — Design System
   Navy / Green / Gold  •  clean, professional, minimalist
   ============================================================ */

:root{
  --navy:#13294B;        --navy-2:#1C3A66;     --navy-3:#21477C;
  --green:#22A24C;       --green-2:#1B8A3F;    --green-soft:#E7F5EC;
  --gold:#C6A24A;        --gold-soft:#F7EFD9;
  --bg:#F4F6FB;          --surface:#FFFFFF;    --surface-2:#FAFBFE;
  --ink:#1B2A41;         --muted:#6E7E96;      --faint:#9AA7BC;
  --line:#E7ECF3;        --line-2:#EEF2F8;
  --danger:#E5484D;      --danger-soft:#FCEBEC;
  --warn:#E1932B;        --warn-soft:#FBF1DF;
  --info:#3B82F6;        --info-soft:#E9F0FE;
  --sidebar-w:248px;
  --radius:14px;         --radius-sm:10px;
  --shadow:0 1px 2px rgba(19,41,75,.04), 0 6px 20px rgba(19,41,75,.06);
  --shadow-sm:0 1px 3px rgba(19,41,75,.07);
  --shadow-pop:0 12px 40px rgba(19,41,75,.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--green-2); text-decoration:none}
a:hover{color:var(--green)}
h1,h2,h3,h4,h5,h6{color:var(--navy); font-weight:700; letter-spacing:-.01em}
.text-muted{color:var(--muted)!important}
.text-faint{color:var(--faint)!important}
code{background:var(--line-2); color:var(--navy-3); padding:1px 6px; border-radius:6px; font-size:.85em}

/* ---------- Layout shell ---------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(185deg,#16305A 0%,#102544 100%);
  color:#cdd8ea; position:fixed; inset:0 auto 0 0; height:100vh;
  display:flex; flex-direction:column; z-index:1040;
  border-right:1px solid rgba(255,255,255,.05);
}
.sidebar__brand{
  display:block; padding:16px 16px 14px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar__brand .brand-img{display:block; width:100%; max-width:200px; height:auto; margin:0 auto; background:#fff; border-radius:10px; padding:7px 11px}
.sidebar__brand .brand-sub{display:block; margin-top:9px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8aa0c2; font-weight:600}

.sidebar__nav{padding:14px 12px; overflow-y:auto; flex:1}
.sidebar__label{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#67809f; padding:8px 12px 6px; font-weight:600}
.nav-link2{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin:2px 0;
  border-radius:10px; color:#c2cee2; font-weight:500; font-size:14px;
  position:relative; transition:background .15s,color .15s;
}
.nav-link2 i{font-size:17px; width:20px; text-align:center; color:#8ea4c6}
.nav-link2:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-link2:hover i{color:#fff}
.nav-link2.active{background:rgba(34,162,76,.16); color:#fff}
.nav-link2.active i{color:#3ED372}
.nav-link2.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px;
  background:var(--green); border-radius:0 4px 4px 0;
}
.nav-link2 .pill{margin-left:auto; background:rgba(255,255,255,.12); color:#dbe6f7; font-size:11px; padding:1px 8px; border-radius:20px; font-weight:600}

.sidebar__foot{padding:12px; border-top:1px solid rgba(255,255,255,.07)}
.sidebar__user{display:flex; align-items:center; gap:10px; padding:8px 10px}
.sidebar__user .av{width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px}
.sidebar__user .nm{font-size:13px; color:#e7eefb; font-weight:600; line-height:1.1}
.sidebar__user .rl{font-size:11px; color:#8aa0c2}
.sidebar__user a.out{margin-left:auto; color:#9fb2cf; font-size:17px}
.sidebar__user a.out:hover{color:#fff}

/* ---------- Main ---------- */
.main{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:1020; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:13px 26px;
}
.topbar .ham{display:none; background:none; border:0; color:var(--navy); font-size:22px}
.topbar h1{font-size:19px; margin:0}
.topbar .crumb{font-size:12.5px; color:var(--faint); margin-top:1px}
.topbar .sp{flex:1}
.content{padding:26px; max-width:1320px; width:100%}

/* ---------- Cards ---------- */
.card2{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.card2--pad{padding:20px}
.card2__head{display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--line)}
.card2__head h2,.card2__head h3{font-size:15px; margin:0}
.card2__body{padding:20px}

/* KPI / stat cards */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.kpi__top{display:flex; align-items:center; justify-content:space-between}
.kpi__ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px}
.kpi__v{font-size:27px; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin-top:12px; line-height:1}
.kpi__l{font-size:12.5px; color:var(--muted); margin-top:5px; font-weight:500}
.kpi__d{font-size:11.5px; margin-top:7px; font-weight:600}
.ic-blue{background:var(--info-soft); color:var(--info)}
.ic-green{background:var(--green-soft); color:var(--green-2)}
.ic-gold{background:var(--gold-soft); color:#A9842C}
.ic-navy{background:#E8EDF6; color:var(--navy)}
.ic-red{background:var(--danger-soft); color:var(--danger)}
.ic-purple{background:#F0E9FB; color:#7C4DD1}

/* ---------- Buttons ---------- */
.btn2{display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:10px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; line-height:1; white-space:nowrap}
.btn2 i{font-size:15px}
.btn2-sm{padding:7px 12px; font-size:13px; border-radius:9px}
.btn2-xs{padding:5px 10px; font-size:12px; border-radius:8px}
.btn2-primary{background:var(--green); color:#fff; box-shadow:0 2px 8px rgba(34,162,76,.25)}
.btn2-primary:hover{background:var(--green-2); color:#fff}
.btn2-navy{background:var(--navy); color:#fff}
.btn2-navy:hover{background:var(--navy-2); color:#fff}
.btn2-gold{background:var(--gold); color:#fff}
.btn2-gold:hover{background:#B8923D; color:#fff}
.btn2-outline{background:#fff; color:var(--navy); border-color:var(--line)}
.btn2-outline:hover{border-color:var(--navy); background:var(--surface-2); color:var(--navy)}
.btn2-ghost{background:transparent; color:var(--muted)}
.btn2-ghost:hover{background:var(--line-2); color:var(--navy)}
.btn2-danger{background:#fff; color:var(--danger); border-color:#F3CFD1}
.btn2-danger:hover{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn2:disabled{opacity:.55; cursor:not-allowed}

/* ---------- Badges ---------- */
.bdg{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:7px; line-height:1.4}
.bdg-green{background:var(--green-soft); color:var(--green-2)}
.bdg-red{background:var(--danger-soft); color:var(--danger)}
.bdg-gold{background:var(--gold-soft); color:#A9842C}
.bdg-blue{background:var(--info-soft); color:var(--info)}
.bdg-navy{background:#E8EDF6; color:var(--navy)}
.bdg-gray{background:var(--line-2); color:var(--muted)}
.bdg-dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.st-draft{background:var(--line-2); color:var(--muted)}
.st-scheduled{background:var(--info-soft); color:var(--info)}
.st-sending{background:var(--warn-soft); color:var(--warn)}
.st-sent{background:var(--green-soft); color:var(--green-2)}
.st-failed{background:var(--danger-soft); color:var(--danger)}

/* ---------- Tables ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl thead th{
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); font-weight:700; padding:11px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl tbody td{padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .num{font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto; border-radius:var(--radius)}
.empty{text-align:center; color:var(--muted); padding:38px 16px}
.empty i{font-size:34px; color:var(--faint); display:block; margin-bottom:10px}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field > label{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px}
.req{color:var(--danger)}
.inp,.sel,.ta{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 13px;
  font-size:14px; color:var(--ink); background:#fff; font-family:inherit; transition:border .15s,box-shadow .15s;
}
.inp:focus,.sel:focus,.ta:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(34,162,76,.12)}
.ta{resize:vertical; min-height:120px}
.hint{font-size:12px; color:var(--muted); margin-top:5px}
.inp-group{display:flex; gap:8px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
input[type=file].inp{padding:8px 13px; cursor:pointer}
.check{display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer}
.check input{width:16px; height:16px; accent-color:var(--green)}

/* ---------- Alerts / flash ---------- */
.flash{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-size:13.5px; font-weight:500; margin-bottom:18px; border:1px solid}
.flash i{font-size:18px}
.flash-success{background:var(--green-soft); border-color:#BfE6CC; color:var(--green-2)}
.flash-danger{background:var(--danger-soft); border-color:#F3CFD1; color:var(--danger)}
.flash-info{background:var(--info-soft); border-color:#CFE0FC; color:#2563EB}
.flash-warn{background:var(--warn-soft); border-color:#F0DCB4; color:#B57A1E}
.flash .x{margin-left:auto; background:none; border:0; color:inherit; opacity:.6; cursor:pointer; font-size:16px}
.flash .x:hover{opacity:1}

/* ---------- Progress ---------- */
.bar{height:8px; background:var(--line-2); border-radius:20px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--green); border-radius:20px; transition:width .6s ease}
.bar-lg{height:30px; border-radius:10px}
.bar-lg > i{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px}
.bar-stripe > i{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent); background-size:1rem 1rem; animation:stripe 1s linear infinite}
@keyframes stripe{from{background-position:0 0}to{background-position:1rem 0}}

/* ---------- Page header ---------- */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.page-head .ttl{font-size:21px; margin:0}
.page-head .sub{font-size:13px; color:var(--muted); margin-top:3px}

/* ---------- Misc ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-7-5{display:grid; grid-template-columns:7fr 5fr; gap:18px}
.grid-3-9{display:grid; grid-template-columns:3fr 9fr; gap:18px}
.grid-8-4{display:grid; grid-template-columns:8fr 4fr; gap:18px}
.stack > * + *{margin-top:14px}
.divider{height:1px; background:var(--line); margin:18px 0; border:0}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:8px; padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s}
.chip:hover{border-color:var(--navy); color:var(--navy)}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.tag-sub{background:#EAF1FB; color:#3461A6}
.tag-subsub{background:var(--gold-soft); color:#A9842C}
.preview-frame{width:100%; border:1px solid var(--line); border-radius:10px; background:#fff}
.muted-box{background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:14px}
.codeblock{background:#0F2240; color:#7FE0A0; border-radius:10px; padding:14px 16px; font-family:'SFMono-Regular',Menlo,monospace; font-size:12.5px; line-height:1.7; overflow-x:auto}

/* pagination */
.pager{display:flex; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap}
.pager a,.pager span{min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; font-size:13px; color:var(--navy); background:#fff; padding:0 9px}
.pager a:hover{border-color:var(--navy)}
.pager .on{background:var(--navy); color:#fff; border-color:var(--navy)}
.pager .off{color:var(--faint); background:var(--surface-2)}

/* spinner */
.spin{display:inline-block; width:15px; height:15px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
.spin-dark{border-color:var(--line); border-top-color:var(--green)}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--bg);
  background-image:radial-gradient(900px 500px at 50% -20%, rgba(32,67,124,.55) 0%, rgba(19,41,75,0) 60%);
}
.auth-card{width:100%; max-width:410px}
.auth-logo{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px}
.auth-logo img{width:72px; height:72px}
.auth-logo .auth-badge{width:180px; height:auto; max-width:74%}
.auth-logo .wm{margin-top:12px; font-size:24px; font-weight:800; letter-spacing:.02em; color:var(--navy)}
.auth-logo .wm .g{color:var(--green)}
.auth-logo .tg{font-size:12px; color:var(--muted); margin-top:2px; font-style:italic}
.auth-box{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:30px 28px}

/* responsive */
@media(max-width:992px){
  .grid-7-5,.grid-3-9,.grid-8-4,.grid-2,.grid-3{grid-template-columns:1fr}
  .row3{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-pop)}
  body.nav-open .sidebar{transform:translateX(0)}
  .main{margin-left:0}
  .topbar .ham{display:inline-flex}
  .content{padding:18px}
  .row2,.row3{grid-template-columns:1fr}
  .nav-scrim{display:none; position:fixed; inset:0; background:rgba(15,30,55,.45); z-index:1035}
  body.nav-open .nav-scrim{display:block}
}