/* Bedrock Ops Portal shared styles. Dark theme, extracted from prototype.
   Colors: charcoal #111417, card #1A1E23, panel #20262C, border #2A3037,
   Bedrock green #3DDC84, warn #F5C76B, info #8CC6FF, muted #A7B0B9. */

*{box-sizing:border-box}
body{margin:0;background:#111417;color:#F6F7F8;font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0}
h2{font-size:18px;font-weight:700}
a{color:#3DDC84}
a:hover{color:#7BE9AC}
button{font-family:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.muted{color:#A7B0B9}
.dim{color:#C9D2DA}
.eyebrow{font-size:12px;letter-spacing:1.2px;color:#A7B0B9;text-transform:uppercase}

/* Header */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:14px 28px;border-bottom:1px solid #2A3037;background:#151A1E}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .word{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:3px;font-size:18px}
.brand .sub{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:2.6px;font-size:10px;color:#3DDC84;margin-top:4px}
.mainnav{display:flex;flex-wrap:wrap;gap:6px}
.mainnav a{padding:10px 14px;border-radius:8px;color:#A7B0B9;text-decoration:none}
.mainnav a.active{background:#22282E;color:#F6F7F8;font-weight:600}
.topbar .spacer{flex:1 1 auto}
.topmeta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.userchip{display:inline-flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#2A3037;display:inline-flex;align-items:center;justify-content:center;font-weight:600}

/* Presence pill: status always color AND text */
.presence{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#1F252B}
.presence .dot{width:10px;height:10px;border-radius:50%}
.presence .lbl{font-weight:600}
.dot-ready{background:#3DDC84}.dot-onlead{background:#8CC6FF}.dot-break{background:#F5C76B}
.dot-offline{background:#6B747D}.dot-meeting{background:#C5A3FF}.dot-stale{background:#6B747D}

/* Page layout */
.page{max-width:1400px;margin:0 auto;padding:24px 28px 48px}
.cols{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.col-side{flex:1 1 300px;max-width:360px;display:flex;flex-direction:column;gap:20px;min-width:0}
.col-main{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.col-right{flex:1 1 280px;max-width:340px;display:flex;flex-direction:column;gap:20px;min-width:0}
.card{background:#1A1E23;border:1px solid #2A3037;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px}
.card.warn{border-color:#6B5320}
.row-between{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.divider{border-top:1px solid #2A3037;padding-top:12px;display:flex;flex-direction:column;gap:8px}

/* Buttons */
.btn{min-height:48px;padding:0 18px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent}
.btn-primary{background:#3DDC84;color:#0D1A12;border:0;font-weight:700}
.btn-primary.big{min-height:64px;font-size:20px;border-radius:12px}
.btn-dark{background:#22282E;color:#F6F7F8;border-color:#3A424A}
.btn-ghost{background:transparent;color:#C9D2DA;border-color:#3A424A}
.btn-green-outline{background:#1C3426;color:#7BE9AC;border-color:#2F7A4E}
.btn-warn{background:#F5C76B;color:#2A1E05;border:0;font-weight:700}
.btn-block{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:10px}
.btnrow .btn{flex:1 1 120px}

/* Pills and badges */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;font-weight:700;font-size:13px;letter-spacing:1px}
.tier-hot{background:#3DDC84;color:#0D1A12}
.tier-warm{background:#F5C76B;color:#2A1E05}
.tier-review{background:#3A424A;color:#F6F7F8}
.tag{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#20262C;color:#C9D2DA;font-size:13px}
.dispo{display:inline-flex;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #3A424A;background:#20262C;color:#F6F7F8}
.dispo.picked{background:#15301F;border-color:#2F7A4E;color:#7BE9AC}

/* Status panels inside the status card */
.panel{padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:4px}
.panel .big{font-weight:700;font-size:18px}
.panel.ready{background:#15301F;border:1px solid #2F7A4E}
.panel.ready .big{color:#7BE9AC}
.panel.break{background:#2E2614;border:1px solid #6B5320}
.panel.break .big{color:#F5C76B}
.panel.onlead{background:#13283A;border:1px solid #2C5C86}
.panel.onlead .big{color:#8CC6FF}
.panel.offline{background:#1F252B;border:1px solid #2A3037}
.checkline{display:flex;align-items:center;gap:10px;font-size:14px}
.checkline .why{color:#A7B0B9;font-size:13px;margin-left:auto;text-align:right}

/* Lead card */
.lead{border:1px solid #2F7A4E;border-radius:14px;overflow:hidden;background:#1A1E23}
.lead-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 22px;background:#15301F}
.lead-body{padding:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.lead-notes{padding:0 22px 18px;color:#C9D2DA;font-size:14px}
.lead-actions{padding:18px 22px;border-top:1px solid #2A3037;display:flex;flex-wrap:wrap;gap:10px}
.lead-dispo{padding:18px 22px;border-top:1px solid #2A3037;display:flex;flex-direction:column;gap:10px}
.accept-timer{font-family:'IBM Plex Mono',monospace;padding:6px 10px;border-radius:6px;background:#0F2418;color:#7BE9AC}
.accept-timer.urgent{background:#3A1F1F;color:#F5A3A3}
.empty{border:1px dashed #3A424A;border-radius:14px;padding:48px 28px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;background:#1A1E23}

/* Tables */
.tblwrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.grid th{color:#A7B0B9;text-align:left;padding:8px 6px;font-weight:500}
table.grid td{padding:10px 6px;border-top:1px solid #2A3037;vertical-align:middle}

/* Progress bars */
.bar{height:8px;border-radius:4px;background:#2A3037;overflow:hidden}
.bar > span{display:block;height:8px;border-radius:4px;background:#3DDC84}
.bar.thin{height:6px}.bar.thin > span{height:6px}
.goalrow{display:flex;flex-direction:column;gap:6px}

/* Task / reminder item */
.taskitem{padding:12px;border-radius:10px;background:#20262C;display:flex;flex-direction:column;gap:8px}
.taskitem .trow{display:flex;justify-content:space-between;gap:8px}
.taskitem .due{font-family:'IBM Plex Mono',monospace;font-size:13px}
.taskitem.overdue .due{color:#F5C76B}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{background:#1A1E23;border:1px solid #2A3037;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kpi .n{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700}

/* Funnel */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fstep{padding:14px;border-radius:10px;background:#20262C;display:flex;flex-direction:column;gap:8px}
.fstep .n{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700}

/* Filters */
.filterbtn{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #3A424A;background:transparent;color:#F6F7F8}
.filterbtn[aria-pressed="true"]{border-color:#2F7A4E;background:#22382B}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:#A7B0B9;font-weight:600}
.field input,.field select,.field textarea{background:#20262C;border:1px solid #3A424A;border-radius:10px;color:#F6F7F8;padding:12px 14px;font-size:15px;font-family:inherit;min-height:48px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #2F7A4E;border-color:#2F7A4E}
.formerr{color:#F5A3A3;font-size:14px;min-height:20px}

/* Modal */
.modalback{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modalback.open{display:flex}
.modal{background:#1A1E23;border:1px solid #2A3037;border-radius:14px;padding:24px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px}

/* Test mode badge */
.testbadge{position:fixed;bottom:12px;right:12px;background:#3A1F1F;border:1px solid #6B5320;color:#F5C76B;font-size:12px;padding:8px 12px;border-radius:8px;z-index:60}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#20262C;border:1px solid #3A424A;color:#F6F7F8;padding:12px 18px;border-radius:10px;z-index:70;display:none}
.toast.show{display:block}

/* Coverage heatmap */
.heat{display:flex;flex-direction:column;gap:6px;min-width:760px}
.heatrow{display:grid;grid-template-columns:56px repeat(12,minmax(0,1fr));gap:6px;align-items:center}
.heatcell{height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px}

/* Login */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.logincard{width:100%;max-width:400px;background:#1A1E23;border:1px solid #2A3037;border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:18px}

/* Responsive */
@media (max-width:1100px){
  .col-side,.col-right{max-width:none;flex-basis:100%}
}
@media (max-width:640px){
  .page{padding:16px 14px 40px}
  .topbar{padding:12px 14px}
  .btn{min-height:52px}
}