/* Internal Ops Console — additions on top of variables.css/components.css/layout.css
   (copied verbatim from the real ATO Executive System app, css/ folder). Everything
   reusable already exists there; this file only covers what's unique to this app:
   the login screen, toast/confirm-dialog primitives (ported from js/helpers.js's
   markup expectations), and a few layout patterns the main app doesn't have
   (lead pipeline columns, onboarding checklist grid). */

html, body { height: 100%; }

/* ── LOGIN ── */
.login-shell{
  width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,39,.08), transparent 55%), var(--bg);
}
.login-card{
  width:360px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--bdr2);border-radius:18px;padding:38px 34px;box-shadow:var(--shadow-lg);text-align:center;
  animation:fadeUp .3s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.login-logo{width:48px;height:48px;border-radius:11px;object-fit:contain;margin-bottom:16px}
.login-title{font-size:16px;font-weight:700;color:var(--tx);letter-spacing:-.01em}
.login-kicker{font-size:11px;font-weight:600;color:var(--gold-tx);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.login-sub{font-size:12px;color:var(--mt);line-height:1.6;margin:16px 0 24px}
.login-google-btn{
  width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--surf);color:var(--tx);border:1px solid var(--bdr2);border-radius:var(--r);
  font-size:13px;font-weight:600;cursor:pointer;transition:background .12s;font-family:inherit;
}
.login-google-btn:hover{background:var(--surf-h)}
.login-google-btn:disabled{opacity:.6;cursor:default}
.login-foot{font-size:10.5px;color:var(--ht);margin-top:16px}
.login-error{font-size:11.5px;color:var(--rd-tx);background:var(--rd-bg);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:8px 11px;margin-top:14px;text-align:left}

/* ── SIDEBAR BRAND (logo image instead of the real app's text-only mark) ── */
.sb-logo{display:flex;align-items:center;gap:9px}
.sb-logo img{width:28px;height:28px;border-radius:7px;object-fit:contain;flex-shrink:0}

/* ── TOAST (js/helpers.js expects these exact ids/classes) ── */
#toast-container{position:fixed;bottom:18px;right:18px;z-index:9998;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:var(--surf2);color:var(--tx);border:1px solid var(--bdr2);font-size:12px;padding:8px 14px;border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:260px;line-height:1.4;box-shadow:var(--shadow-md)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-left:3px solid var(--gn)}
.toast.error{border-left:3px solid var(--rd)}
.toast.info{border-left:3px solid var(--bl)}
.toast.warning{border-left:3px solid var(--am)}

/* ── CONFIRM DIALOG ── */
#confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9997;align-items:center;justify-content:center}
#confirm-overlay.open{display:flex}
.confirm-box{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--rl);padding:22px;width:320px;border:1px solid var(--bdr2);box-shadow:var(--shadow-lg)}
.confirm-box h4{font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--tx)}
.confirm-box p{font-size:12px;color:var(--mt);line-height:1.5;margin-bottom:16px}
.confirm-box .btns{display:flex;gap:7px;justify-content:flex-end}

/* ── STAT STRIP (Dashboard's 3-up KPI row already covered by .g3/.card/.kl/.kv/.ks) ── */

/* ── ATTENTION / ACTIVITY ROWS ── */
.att-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bdr)}
.att-row:last-child{border-bottom:none}
.att-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--bdr);font-size:12px}
.act-row:last-child{border-bottom:none}

/* ── SEARCH + FILTER TOOLBAR ── */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .sbar{width:240px;margin-bottom:0}
.toolbar select{height:29px;padding:0 8px;border:1px solid var(--bdr);border-radius:var(--r);background:var(--surf);color:var(--tx);font-size:11.5px;font-family:inherit}
.seg{display:flex;border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.seg button{height:29px;padding:0 12px;font-size:11.5px;font-weight:500;cursor:pointer;border:none;background:var(--surf);color:var(--mt);font-family:inherit}
.seg button+button{border-left:1px solid var(--bdr)}
.seg button.active{background:var(--surf2);color:var(--tx)}

/* ── LEAD PIPELINE (kanban-lite) ── */
.pipe-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.pipe-col{width:200px;flex-shrink:0}
.pipe-col-hd{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
.pipe-col-name{font-size:10.5px;font-weight:600;color:var(--mt);text-transform:uppercase;letter-spacing:.05em}
.pipe-col-count{font-size:10.5px;color:var(--ht);font-weight:600}
.pipe-cards{display:flex;flex-direction:column;gap:8px}
.pipe-card{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:11px 12px;cursor:pointer;box-shadow:var(--shadow-card)}
.pipe-card:hover{box-shadow:var(--shadow-md)}
.pipe-card-chapter{font-size:12px;font-weight:600;color:var(--tx)}
.pipe-card-uni{font-size:10.5px;color:var(--mt);margin-top:2px}
.pipe-card-contact{font-size:10.5px;color:var(--mt);margin-top:6px}
.pipe-card-date{font-size:10px;color:var(--ht);margin-top:4px}

/* ── DETAIL LAYOUT (Lead Detail / Ticket Detail) ── */
.detail-back{border:none;background:none;color:var(--mt);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;padding:0;margin-bottom:14px;font-family:inherit}
.detail-back:hover{color:var(--tx)}
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr}}
.detail-label{font-size:10px;font-weight:600;color:var(--mt);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.detail-value{font-size:12.5px;color:var(--tx);margin-bottom:8px}
.timeline{display:flex;flex-direction:column;gap:12px}
.timeline-row{display:flex;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--bdr)}
.timeline-row:last-child{border-bottom:none;padding-bottom:0}
.timeline-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.timeline-text{font-size:12.5px;color:var(--tx)}
.timeline-note{font-size:12px;color:var(--mt);margin-top:3px;line-height:1.5}
.timeline-when{font-size:10.5px;color:var(--ht);margin-top:3px}
.note-composer textarea{width:100%;border:1px solid var(--bdr);border-radius:var(--r);background:var(--surf2);color:var(--tx);font-size:12.5px;padding:9px;outline:none;resize:vertical;font-family:inherit}

/* ── ONBOARDING ── */
.onb-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--shadow-card)}
.onb-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.onb-progress-track{width:140px;height:5px;background:var(--surf2);border-radius:99px;margin-top:5px;overflow:hidden}
.onb-progress-fill{height:100%;background:var(--gn);border-radius:99px;transition:width .3s}
.onb-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.onb-cols{grid-template-columns:1fr}}
.onb-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;cursor:pointer}
.onb-item i{font-size:16px;margin-top:1px;flex-shrink:0}
.onb-item-label{font-size:12.5px;color:var(--tx)}
.onb-item-meta{font-size:10.5px;color:var(--ht);margin-top:1px}
.onb-item-admin{font-size:10.5px;color:var(--sky-tx);font-weight:600;white-space:nowrap;flex-shrink:0;margin-left:auto}

/* ── CHAPTERS ── */
.ch-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:14px 18px;box-shadow:var(--shadow-card);margin-bottom:12px}
.ch-hd{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.ch-hd-left{display:flex;align-items:center;gap:9px}
.ch-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--bdr);display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){.ch-detail{grid-template-columns:1fr}}
.ch-modules-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 12px;margin-bottom:14px}
.ch-modules-grid label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx);cursor:pointer}
.ch-pos-row{border:1px solid var(--bdr);border-radius:8px;padding:9px 10px;margin-bottom:7px}
.ch-pos-row-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.ch-user-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--bdr);gap:8px}
.ch-preapprove-box{background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:11px;margin-top:10px}

/* ── MOBILE: sidebar becomes an overlay drawer, same breakpoint as the real app ── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:59}
.sb-overlay.open{display:block}
@media (max-width:1100px){
  body{overflow:visible;height:auto}
  .sb{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;z-index:60;box-shadow:var(--shadow-lg)}
  .sb.open{transform:translateX(0)}
  .mobile-menu-btn{display:flex}
  .detail-grid,.onb-cols,.ch-detail{grid-template-columns:1fr}
}
.mobile-menu-btn{display:none;width:29px;height:29px;border-radius:7px;align-items:center;justify-content:center;cursor:pointer;color:var(--mt);border:none;background:transparent;font-size:16px}
.mobile-menu-btn:hover{background:var(--surf-h);color:var(--tx)}

/* ── MOBILE: phone-width polish, same breakpoints/treatment as the real app's responsive.css ── */
@media (max-width:768px){
  body{font-size:12.5px}
  .content{padding:12px 14px}
  .topbar{padding:0 12px}
  .tb-title{max-width:150px}
  .tb-date{display:none}
  .g3,.g2{grid-template-columns:1fr}
  .fr.c2,.fr.c3{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .sbar{width:100%}
  .btn,.seg button,.login-google-btn{min-height:38px}
  .fld input,.fld select,.fld textarea,.sbar input,.toolbar select{font-size:16px}
  #leads-table-wrap,#tickets-table-wrap{overflow-x:auto}
  #leads-table-wrap table,#tickets-table-wrap table{min-width:640px}
  .lead-view-toggle{width:100%}
}
@media (max-width:480px){
  .tb-title{max-width:100px}
  .pipe-col{width:170px}
}