/* ===========================================================================
   Assurance Group of America — console design system (message #46).
   ONE owner for every colour, size and pill in all four consoles. A screen that
   needs a new colour gets a token here, never a hex in a Blade file.
   =========================================================================== */

:root{
  --nav:#061A40; --primary:#0A2A5E; --hover:#0F3573;
  --gold:#D9B44A;              /* FILL ONLY — never gold text on white */
  --cream:#F8EFB2; --page:#F3F5F9;
  --card:#FFFFFF; --line:#DCE2EC; --radius:10px;
  --label:#5A6478; --body:#404040;
  --red:#B31942;   --red-bg:#FDE7EC;
  --amber:#B45309; --amber-bg:#FFF4D6;
  --green:#1E7B34; --green-bg:#E3F3E7;
  --info:#0A2A5E;  --info-bg:#E3EAF6;
  --nav-w:260px; --top-h:64px; --tap:44px;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed","Barlow",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:15px; line-height:1.5; color:var(--body);
  background:var(--page); overflow-x:hidden;
}
a{color:var(--primary)}
h1,h2,h3,h4,.cond{font-family:var(--cond); letter-spacing:.2px; margin:0}
h1{font-size:27px; font-weight:800; color:var(--primary)}
h2{font-size:20px; font-weight:700; color:var(--primary)}
h3{font-size:16px; font-weight:700; color:var(--primary); text-transform:uppercase}
.muted{color:var(--label)}
.small{font-size:13px}
.tiny{font-size:12px}

/* ---------- staff shell: 260px navy rail + 64px white bar ---------- */
.shell{display:flex; min-height:100vh}
.rail{
  width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--nav); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.rail-brand{padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.14)}
.rail-brand .mark{
  font-family:var(--cond); font-weight:800; font-size:19px; line-height:1.15;
  color:var(--cream); text-transform:uppercase; letter-spacing:.4px;
}
.rail-brand .cname{
  font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--gold); margin-top:5px;
}
.rail-nav{padding:10px 8px; flex:1; overflow-y:auto}
.rail-nav a{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  min-height:var(--tap); padding:9px 12px; margin:2px 0; border-radius:8px;
  color:#E8EDF6; text-decoration:none; font-family:var(--cond); font-weight:600;
  font-size:15.5px; letter-spacing:.3px;
}
.rail-nav a:hover{background:var(--hover); color:#fff}
.rail-nav a[aria-current="page"]{background:var(--primary); color:#fff; box-shadow:inset 3px 0 0 var(--gold)}
.rail-foot{
  /* the extra bottom padding is the height of the sample-data ribbon, which is fixed to
     the viewport bottom and was sitting on top of the Sign out button */
  padding:12px 16px 46px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px; color:#C8D2E4;
}
.rail-foot .who{font-family:var(--cond); font-weight:700; font-size:15px; color:#fff}
.chips{display:flex; flex-wrap:wrap; gap:4px; margin:7px 0}
.chip{
  font-family:var(--cond); font-weight:700; font-size:11.5px; letter-spacing:.6px;
  background:rgba(255,255,255,.14); color:#fff; border-radius:4px; padding:2px 6px;
}
.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  height:var(--top-h); background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 16px; position:sticky; top:0; z-index:20;
}
.search{flex:1; min-width:0; position:relative}
.search input{
  width:100%; height:40px; border:1px solid var(--line); border-radius:8px;
  padding:0 12px; font-family:var(--sans); font-size:14px; color:var(--body); background:#FBFCFE;
}
.search input:focus{outline:2px solid var(--primary); outline-offset:1px; background:#fff}
.tb-item{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); min-width:var(--tap); border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--primary); font-family:var(--cond); font-weight:700; font-size:13.5px;
  padding:0 10px; text-decoration:none; cursor:pointer;
}
.tb-item .dot{width:8px; height:8px; border-radius:50%; background:var(--label); flex:0 0 8px}
.tb-item svg{display:block}
.tb-item.live .dot{background:var(--green)}
.tb-item.off{color:var(--label)}
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--cond); font-weight:700; font-size:14px;
}
.burger{display:none}

.page{padding:18px 16px 64px; max-width:1480px; width:100%}
.page-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.page-head .spacer{flex:1}

/* ---------- pills, badges, cards ---------- */
.pill{
  display:inline-block; font-family:var(--cond); font-weight:700; font-size:12px;
  letter-spacing:.7px; text-transform:uppercase; padding:4px 9px; border-radius:999px;
}
.pill.green{background:var(--green-bg); color:var(--green)}
.pill.amber{background:var(--amber-bg); color:var(--amber)}
.pill.red{background:var(--red-bg); color:var(--red)}
.pill.info{background:var(--info-bg); color:var(--info)}
.pill.gold{background:var(--gold); color:#2A2000}
.pill.flat{background:#EEF1F7; color:var(--label)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.card + .card{margin-top:14px}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.card-head .spacer{flex:1}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.kpi .n{font-family:var(--cond); font-weight:800; font-size:28px; color:var(--primary); line-height:1.05}
.kpi .l{font-size:12px; color:var(--label); text-transform:uppercase; letter-spacing:.6px;
        font-family:var(--cond); font-weight:600; margin-top:3px}

/* ---------- banners ---------- */
.banner{border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; border:1px solid}
.banner.red{background:var(--red-bg); border-color:#F3C6D1; color:#7A0F2B}
.banner.amber{background:var(--amber-bg); border-color:#EBD8A4; color:#6B3D05}
.banner.info{background:var(--info-bg); border-color:#C6D3EA; color:var(--primary)}
.banner h2{color:inherit}
.banner ul{margin:8px 0 0; padding-left:20px}

/* ---------- tables ---------- */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:.7px;
  text-transform:uppercase; color:var(--label); padding:8px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:10px; border-bottom:1px solid #EEF1F7; vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap); padding:0 14px; border-radius:8px; border:1px solid var(--primary);
  background:var(--primary); color:#fff; font-family:var(--cond); font-weight:700;
  font-size:14.5px; letter-spacing:.4px; text-decoration:none; cursor:pointer;
}
.btn:hover{background:var(--hover); border-color:var(--hover)}
.btn.ghost{background:#fff; color:var(--primary)}
.btn.ghost:hover{background:#F2F5FB}
.btn.call{background:var(--green); border-color:var(--green)}
.btn.call:hover{background:#17652B; border-color:#17652B}
.btn.gold{background:var(--gold); border-color:#C49F33; color:#2A2000}
.btn[disabled],.btn.dead{
  background:#E7EBF2; border-color:#D5DBE6; color:#6B7488; cursor:not-allowed;
}
.btn.sm{min-height:34px; font-size:13px; padding:0 10px}
.btn-row{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- forms ---------- */
label.f{display:block; font-family:var(--cond); font-weight:700; font-size:12.5px;
        letter-spacing:.7px; text-transform:uppercase; color:var(--label); margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%; min-height:var(--tap); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; font-family:var(--sans); font-size:15px; color:var(--body); background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary); outline-offset:1px}
.err{background:var(--red-bg); border:1px solid #F3C6D1; color:#7A0F2B;
     border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:14px}
.ok{background:var(--green-bg); border:1px solid #BFE0C8; color:#14531F;
    border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:14px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
            background:linear-gradient(160deg,var(--nav),var(--primary) 70%); padding:24px 16px}
.login-card{width:100%; max-width:420px; background:#fff; border-radius:14px; padding:26px 24px 22px;
            box-shadow:0 18px 50px rgba(6,26,64,.35)}
.login-card .mark{font-family:var(--cond); font-weight:800; font-size:21px; text-transform:uppercase;
                  color:var(--primary); letter-spacing:.4px; line-height:1.15}
.login-card .cname{font-family:var(--cond); font-weight:700; font-size:12.5px; letter-spacing:1.4px;
                   text-transform:uppercase; color:#8A6F18; margin:4px 0 18px}
.login-foot{margin-top:18px; font-size:12.5px; color:var(--label); text-align:center}
.login-note{margin-top:14px; background:var(--info-bg); border-radius:8px; padding:10px 12px;
            font-size:12.5px; color:var(--primary)}

/* ---------- empty state for a screen that is not built yet ---------- */
.empty{
  background:#fff; border:1px dashed #C9D3E4; border-radius:var(--radius);
  padding:30px 24px; text-align:center;
}
.empty .ic{
  width:46px; height:46px; border-radius:12px; background:var(--info-bg); color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--cond);
  font-weight:800; font-size:20px; margin-bottom:12px;
}
.empty h2{margin-bottom:6px}
.empty p{max-width:52ch; margin:0 auto 14px; color:var(--label)}
.empty ul{display:inline-block; text-align:left; color:var(--label); font-size:14px; margin:0}

/* ---------- kanban ---------- */
.kan{display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; align-items:flex-start}
.kan-col{flex:0 0 206px; background:#EDF1F8; border:1px solid var(--line);
         border-radius:var(--radius); padding:9px}
.kan-col h3{font-size:12.5px; display:flex; justify-content:space-between; gap:6px; align-items:center}
.kan-col .n{font-family:var(--cond); font-weight:800; color:var(--label)}
.kcard{background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; margin-top:8px}
.kcard .nm{font-family:var(--cond); font-weight:700; font-size:14.5px; color:var(--primary);
           line-height:1.2; text-decoration:none; display:block}
.kcard .meta{font-size:12px; color:var(--label); margin-top:3px}
.kcard .btn{margin-top:8px; width:100%}
/* the side tray is its own full-width card under the board, not a ninth column */

/* ---------- two clocks ---------- */
.clocks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.clock{border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; background:#fff}
.clock .l{font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:.7px;
          text-transform:uppercase; color:var(--label)}
.clock .d{font-family:var(--cond); font-weight:800; font-size:30px; line-height:1.05; color:var(--primary)}
.clock .s{font-size:12.5px; color:var(--label); margin-top:3px}
.clock.red{background:var(--red-bg); border-color:#F3C6D1}
.clock.red .d{color:var(--red)}
.clock.amber{background:var(--amber-bg); border-color:#EBD8A4}
.clock.amber .d{color:var(--amber)}

/* ---------- sample-data ribbon ---------- */
.ribbon{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--gold); color:#2A2000; text-align:center;
  font-family:var(--cond); font-weight:700; font-size:12.5px; letter-spacing:1px;
  text-transform:uppercase; padding:6px 10px;
}

/* ---------- client center (phone-first) ---------- */
body.client{background:#fff; padding-bottom:72px}
.c-top{
  height:56px; background:var(--primary); color:#fff; display:flex; align-items:center;
  gap:10px; padding:0 14px; position:sticky; top:0; z-index:30;
}
.c-top .wordmark{font-family:var(--cond); font-weight:800; font-size:16px; text-transform:uppercase;
                 letter-spacing:.5px; color:#fff; line-height:1.1; text-decoration:none}
.c-top .spacer{flex:1}
.lang{display:inline-flex; border:1px solid rgba(255,255,255,.5); border-radius:999px; overflow:hidden}
.lang a{min-width:40px; min-height:30px; display:inline-flex; align-items:center; justify-content:center;
        font-family:var(--cond); font-weight:700; font-size:12.5px; color:#fff; text-decoration:none}
.lang a[aria-current]{background:#fff; color:var(--primary)}
.cart{min-width:var(--tap); min-height:var(--tap); display:inline-flex; align-items:center;
      justify-content:center; color:#fff; text-decoration:none; font-size:18px}
.c-page{padding:16px 16px 24px; max-width:620px; margin:0 auto}
.c-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff;
  border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr);
}
.c-tabs a{
  min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; color:var(--label); font-family:var(--cond); font-weight:700;
  font-size:11.5px; letter-spacing:.4px; text-transform:uppercase;
}
.c-tabs a[aria-current="page"]{color:var(--primary); box-shadow:inset 0 3px 0 var(--gold)}
.c-tabs .gi{display:block}
.agentcard{display:flex; gap:12px; align-items:center}
.agentcard .av{width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff;
               display:inline-flex; align-items:center; justify-content:center;
               font-family:var(--cond); font-weight:800; font-size:19px; flex:0 0 52px}

/* the four brand strips the client center carries */
.strips{display:grid; gap:10px; margin-top:14px}
.strip{border-radius:var(--radius); padding:13px 15px; color:#fff; text-decoration:none; display:block}
.strip .t{font-family:var(--cond); font-weight:800; font-size:15.5px; letter-spacing:.4px}
.strip .s{font-size:12.5px; opacity:.88; margin-top:2px}
.strip.assurance{background:var(--primary)}
.strip.dotsoa{background:#121417; border-left:5px solid #4FC1BE}
.strip.dotsoa .t{color:#4FC1BE}
.strip.sites{background:#1A1D21; border-left:5px solid #E8823C}
.strip.sites .t{color:#E8823C}
.strip.outpost{background:#6B4226; border-left:5px solid #E8B04B}
.strip.outpost .t{color:#E8B04B}
.legal{font-size:11.5px; color:var(--label); margin-top:10px; line-height:1.45}

/* ---------- responsive: no sideways page scroll at 390px ---------- */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .shell{display:block}
  .rail{
    position:static; width:auto; height:auto; flex:none;
  }
  .rail-nav{display:none; padding-bottom:14px}
  .rail.open .rail-nav{display:block}
  .rail-foot{display:none}
  .rail.open .rail-foot{display:block}
  .burger{
    display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap);
    min-height:var(--tap); border:1px solid var(--line); border-radius:8px; background:#fff;
    color:var(--primary); font-size:19px; cursor:pointer;
  }
  .g3,.g2{grid-template-columns:1fr}
  .clocks{grid-template-columns:1fr}
}
@media (max-width:620px){
  /* A phone keeps the table's column proportions and scrolls it inside its own card,
     rather than squeezing a carrier name down to one letter per line. The PAGE still has
     no sideways scroll — .tw is the only thing that moves. */
  .tw table{min-width:680px}
  .card{padding:13px}
  h1{font-size:23px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page{padding:14px 16px 64px}
  .topbar{gap:8px; padding:0 12px}
  .tb-item.hide-sm{display:none}
  .kan-col{flex:0 0 86vw}
}