/* Email Marketing Manager - admin theme. Bootstrap 5 is loaded first; this file overrides it. */
:root{
  --ink:#16222b; --ink-2:#5a6772; --line:#dce3e8; --canvas:#edf1f3; --surface:#fff;
  --side:#0d3a41; --side-2:#16505a; --side-text:#a8c6ca;
  --accent:#0b7a75; --accent-dk:#08615d; --accent-soft:#e3f1f0; --gold:#f2b134;
  --ok:#13683f; --ok-bg:#e1f3ea; --warn:#8a5a0b; --warn-bg:#fbefd2; --bad:#b53030; --bad-bg:#fbe4e4;
  --info:#1f5a99; --info-bg:#e2edf9; --mute:#4b5964; --mute-bg:#e8edf0;
  --bs-primary:#0b7a75; --bs-primary-rgb:11,122,117; --bs-link-color:#0b7a75; --bs-link-hover-color:#08615d;
  --bs-body-color:#16222b; --bs-body-bg:#edf1f3;
  --bs-body-font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-border-color:#dce3e8;
}
body{font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; background:var(--canvas); color:var(--ink)}
a{text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgba(242,177,52,.85); outline-offset:2px}

/* ---------- shell ---------- */
.shell{display:flex; min-height:100vh}
.side{width:236px; flex:none; background:var(--side); color:var(--side-text); display:flex; flex-direction:column;
  padding:1.1rem .8rem; position:sticky; top:0; height:100vh}
.brand{display:flex; align-items:center; gap:.65rem; color:#fff; font-weight:600; line-height:1.15; padding:.2rem .5rem 1.4rem; font-size:.95rem}
.brand:hover{text-decoration:none; color:#fff}
.mark{width:34px; height:34px; border-radius:9px; background:var(--gold); color:var(--side); display:grid; place-items:center; flex:none}
.side nav{display:flex; flex-direction:column; gap:.2rem}
.side nav a{display:flex; align-items:center; gap:.65rem; color:var(--side-text); padding:.55rem .7rem; border-radius:8px; font-weight:500; font-size:.93rem}
.side nav a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
.side nav a.active{background:var(--side-2); color:#fff; box-shadow:inset 3px 0 0 var(--gold)}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:.75rem; padding:.5rem}
.sched{font-size:.8rem; display:flex; gap:.5rem; align-items:flex-start; line-height:1.3}
.sched i{width:9px; height:9px; border-radius:50%; margin-top:.28rem; flex:none; background:#5ad19a}
.sched.warn i{background:var(--gold)}
.logout{background:none; border:1px solid rgba(255,255,255,.22); color:#dcecee; border-radius:8px; padding:.4rem .7rem; font-size:.85rem; width:100%}
.logout:hover{background:rgba(255,255,255,.08)}
.content{flex:1; min-width:0; max-width:1220px; padding:1.9rem 2.2rem 4rem}
.bare{max-width:430px; margin:11vh auto 3rem; padding:0 1rem}

@media (max-width:991.98px){
  .shell{display:block}
  .side{position:static; width:auto; height:auto; flex-direction:row; align-items:center; gap:.5rem; padding:.55rem .75rem; overflow-x:auto}
  .brand{padding:0 .5rem 0 0}
  .brand span:last-child{display:none}
  .side nav{flex-direction:row; flex:1}
  .side nav a{white-space:nowrap; padding:.5rem .65rem}
  .side nav a.active{box-shadow:inset 0 -3px 0 var(--gold)}
  .side nav a svg{display:none}
  .side-foot{margin:0; padding:0}
  .sched{display:none}
  .logout{width:auto; white-space:nowrap}
  .content{padding:1.25rem 1rem 3rem}
}

/* ---------- type ---------- */
main h1,.h4{font-size:1.45rem; font-weight:600; letter-spacing:-.012em}
main h2,.h5,.h6{font-weight:600}
.text-muted{color:var(--ink-2)!important}
.page-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:1.25rem}
.page-head h1{margin:0}

/* ---------- surfaces ---------- */
.card{border:1px solid var(--line); border-radius:10px; box-shadow:none; background:var(--surface)}
.card-header{background:#f6f8f9; border-bottom:1px solid var(--line); border-radius:10px 10px 0 0!important}
.alert{border-radius:10px; border-width:1px}
.alert-info{background:var(--info-bg); border-color:#c4d9f0; color:#143d6a}
.alert-success{background:var(--ok-bg); border-color:#bfe3cf; color:#0f4f30}
.alert-danger{background:var(--bad-bg); border-color:#f1c4c4; color:#7c2020}
.alert-warning{background:var(--warn-bg); border-color:#f0dba5; color:#6b4508}

/* KPI band: one panel, hairline-divided cells (1px gaps over a line-coloured ground) */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:1.5rem}
.kpi{background:var(--surface); padding:.85rem 1.05rem}
.kpi b{display:block; font-size:1.65rem; font-weight:600; line-height:1.1}
.kpi span{font-size:.8rem; color:var(--ink-2)}
.kpi.bad b{color:var(--bad)}

/* ---------- tables ---------- */
.table-responsive{background:var(--surface); border:1px solid var(--line); border-radius:10px}
.table{margin:0; --bs-table-bg:transparent; --bs-table-striped-bg:transparent; --bs-table-hover-bg:#f4f8f8; --bs-border-color:#e6ecef}
.table>thead th{background:#f6f8f9; color:var(--ink-2); font-size:.8rem; font-weight:600; border-bottom:1px solid var(--line); padding:.65rem .85rem; white-space:nowrap}
.table>tbody td{padding:.7rem .85rem}
.table-sm>tbody td{padding:.5rem .85rem}
.table>:not(caption)>*>*{border-bottom-color:#e9eef1}
.table>tbody tr:last-child>td{border-bottom:0}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:transparent}
.table a.name{font-weight:600; color:var(--ink)}
.table a.name:hover{color:var(--accent)}
.num-bad{color:var(--bad); font-weight:600}
.num-zero{color:#9aa6af}

/* ---------- pills, progress ---------- */
.pill{display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.18rem .65rem .18rem .55rem; font-size:.78rem; font-weight:600; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill-running{color:var(--ok); background:var(--ok-bg)}
.pill-scheduled{color:var(--info); background:var(--info-bg)}
.pill-paused{color:var(--warn); background:var(--warn-bg)}
.pill-completed{color:#07504d; background:var(--accent-soft)}
.pill-cancelled{color:var(--mute); background:var(--mute-bg)}
.pill-draft{color:var(--ink-2); background:transparent; box-shadow:inset 0 0 0 1px #c3ced5}
.seq{position:relative; height:8px; min-width:130px; background:#e4eaee; border-radius:4px; overflow:hidden}
.seq i{position:absolute; left:0; top:0; bottom:0; display:block}
.seq .e1{background:#a6d9d5} .seq .e2{background:#3da8a1} .seq .e3{background:#0b7a75}
.legend{display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.8rem; color:var(--ink-2); margin-top:.75rem}
.legend span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.4rem; vertical-align:-1px; background:var(--c)}

/* ---------- forms & buttons ---------- */
.form-control,.form-select{border-color:#c9d3da; border-radius:8px}
.form-control:focus,.form-select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,122,117,.18)}
.form-label{font-weight:500; font-size:.88rem; margin-bottom:.3rem}
.form-text{color:var(--ink-2)}
.btn{border-radius:8px; font-weight:500}
.btn-primary{--bs-btn-bg:#0b7a75; --bs-btn-border-color:#0b7a75; --bs-btn-hover-bg:#08615d; --bs-btn-hover-border-color:#08615d; --bs-btn-active-bg:#064e4b; --bs-btn-active-border-color:#064e4b; --bs-btn-disabled-bg:#0b7a75; --bs-btn-disabled-border-color:#0b7a75}
.btn-outline-primary{--bs-btn-color:#0b7a75; --bs-btn-border-color:#0b7a75; --bs-btn-hover-bg:#0b7a75; --bs-btn-hover-border-color:#0b7a75; --bs-btn-active-bg:#08615d}
.btn-success{--bs-btn-bg:#13683f; --bs-btn-border-color:#13683f; --bs-btn-hover-bg:#0f5633; --bs-btn-hover-border-color:#0f5633}
.btn-warning{--bs-btn-bg:#f2b134; --bs-btn-border-color:#f2b134; --bs-btn-hover-bg:#e0a024; --bs-btn-hover-border-color:#e0a024; --bs-btn-color:#2a1d00}
.btn-outline-secondary{--bs-btn-color:#3c4954; --bs-btn-border-color:#c3ced5; --bs-btn-hover-bg:#e8eef1; --bs-btn-hover-color:#16222b; --bs-btn-hover-border-color:#b2bfc8}
.dropdown-menu{border-radius:10px; border-color:var(--line); box-shadow:0 8px 24px rgba(13,58,65,.12); padding:.35rem}
.dropdown-item{border-radius:6px; font-size:.9rem}
.dropdown-item.danger{color:var(--bad)}
.dropdown-item.danger:hover{background:var(--bad-bg)}

/* ---------- tabs ---------- */
.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{border:0; border-bottom:2px solid transparent; color:var(--ink-2); font-weight:500; padding:.6rem 1rem; margin-bottom:-1px; background:none}
.nav-tabs .nav-link:hover{color:var(--ink); border-bottom-color:#c3ced5}
.nav-tabs .nav-link.active{color:var(--accent-dk); border-bottom-color:var(--accent); background:none; font-weight:600}

/* ---------- misc ---------- */
.empty{background:var(--surface); border:1px dashed #b9c6ce; border-radius:10px; padding:2.5rem 1.5rem; text-align:center}
.empty p{max-width:46ch; margin:.4rem auto 1.1rem; color:var(--ink-2)}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2rem}
.auth-card .mark{margin-bottom:1rem}
iframe.preview{width:100%; height:380px; border:1px solid var(--line); border-radius:8px; background:#fff}
textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem}
.pagination{--bs-pagination-color:#0b7a75; --bs-pagination-active-bg:#0b7a75; --bs-pagination-active-border-color:#0b7a75}