/* Extracted from admin.html on 2026-09-02 (Phase 3 of PLAN_95).
   Same rules, same cascade order; only the location changed. Link order in the page
   preserves the original document order, which was verified by proving that the
   component blocks share no selector with the main or hardening blocks. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#0f1620;--bg3:#111f2e;--bg4:#132030;
  --border:#1a2d45;--border2:#1e3a55;
  --gold:#0088dd;--gold2:#33aaff;
  --blue:#0077cc;--bluelt:#33aaff;
  --green:#3a7a50;--greenlt:#5ab87a;
  --red:#8c3a3a;--redlt:#d45a3a;
  --text:#b8cce0;--text2:#7a9ab8;--text3:#6d87a6;
  --mono:'Inconsolata',monospace;--head:'Exo 2',sans-serif;
}
body.day{
  --bg:#f5f7fa;--bg2:#ffffff;--bg3:#eef1f5;--bg4:#e6ebf3;
  --border:#d0d6e0;--border2:#b9c4d4;
  --gold:#0077cc;--gold2:#0066bb;
  --blue:#0077cc;--bluelt:#0066bb;
  --green:#1e8a4a;--greenlt:#2eb06a;
  --red:#b03030;--redlt:#d4482e;
  --text:#1a2030;--text2:#4a5a75;--text3:#5f7189;
}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;min-height:100vh;}

/* TOPBAR */
.topbar{
  background:var(--bg2);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.topbar-inner{
  max-width:1000px;margin:0 auto;
  display:flex;align-items:stretch;
}
.topbar-logo{
  display:flex;align-items:center;gap:10px;
  padding:0 18px;border-right:1px solid var(--border);
  text-decoration:none;background:var(--bg3);
}
.logo-hex{
  width:36px;height:36px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.logo-text{font-family:var(--head);font-weight:800;font-size:14px;color:var(--bluelt);}
.logo-sub-text{font-size:8px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;}
.topbar-center{
  flex:1;display:flex;align-items:center;padding:0 18px;
  font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:1px;color:var(--text2);
}
.topbar-right{
  display:flex;align-items:center;gap:10px;padding:0 18px;
  border-left:1px solid var(--border);
}
.topbar-company{font-size:11px;color:var(--text3);letter-spacing:1px;}
.btn-signout{
  background:transparent;border:1px solid var(--border);color:var(--text3);
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;transition:all 0.15s;
}
.btn-signout:hover{border-color:var(--redlt);color:var(--redlt);}
.btn-app{
  background:var(--blue);color:#fff;
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;border:none;text-decoration:none;display:inline-block;transition:background 0.15s;
}
.btn-app:hover{background:var(--bluelt);}

/* LAYOUT */
.page{max-width:1000px;margin:0 auto;padding:24px 16px 80px;}
.page-title{
  font-family:var(--head);font-weight:800;font-size:22px;
  letter-spacing:0.5px;color:var(--text);margin-bottom:4px;
}
.page-sub{font-size:11px;color:var(--text3);letter-spacing:1px;margin-bottom:28px;}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto;}
.tab{
  padding:10px 18px;cursor:pointer;white-space:nowrap;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;
}
.tab:hover{color:var(--text2);}
.tab.active{color:var(--bluelt);border-bottom-color:var(--blue);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* SECTION */
.section{background:var(--bg2);border:1px solid var(--border);margin-bottom:16px;}
.section-header{
  background:var(--bg3);border-bottom:1px solid var(--border);
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
}
.section-title{
  font-family:var(--head);font-weight:700;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);
}
.section-body{padding:16px;}

/* TABLE */
.data-table{width:100%;border-collapse:collapse;font-size:12px;}
.data-table th{
  background:var(--bg3);color:var(--text3);
  font-size:8px;letter-spacing:2px;text-transform:uppercase;
  padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{
  padding:8px 10px;border-bottom:1px solid rgba(30,45,74,0.5);
  font-family:var(--mono);vertical-align:middle;
}
.data-table tr:hover td{background:rgba(22,32,51,0.5);}
.data-table tr:last-child td{border-bottom:none;}

/* BADGES */
.badge{
  display:inline-block;padding:2px 8px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--mono);border:1px solid;
}
.badge-emt{color:#5b8fc8;border-color:#3d6fa8;background:rgba(61,111,168,0.1);}
.badge-admin{color:var(--gold2);border-color:var(--gold);background:rgba(200,146,42,0.1);}
.badge-superadmin{color:#c87ae8;border-color:#7a3ab0;background:rgba(122,58,176,0.1);}
.badge-active{color:var(--greenlt);border-color:var(--green);background:rgba(58,122,80,0.1);}
.badge-inactive{color:var(--text3);border-color:var(--border);background:transparent;}
.badge-pending{color:#d4a83a;border-color:#8c6a1a;background:rgba(140,106,26,0.1);}
.badge-expired{color:var(--redlt);border-color:var(--red);background:rgba(140,58,58,0.1);}

/* FORM FIELDS */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);}
.field input,.field select{
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  padding:9px 12px;font-family:var(--mono);font-size:13px;
  outline:none;width:100%;border-radius:0;-webkit-appearance:none;transition:border-color 0.2s;
}
.field input:focus,.field select:focus{border-color:var(--gold);background:var(--bg4);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.field-row{grid-template-columns:1fr;}}

/* BUTTONS */
.btn{
  border:none;padding:9px 18px;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  transition:all 0.15s;border-radius:0;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--bluelt);}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text2);}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--redlt);}
.btn-danger:hover{background:rgba(140,58,58,0.15);}
.btn-sm{padding:5px 10px;font-size:9px;letter-spacing:1.5px;}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* INLINE LIST (units/bases) */
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tag{
  display:flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  padding:4px 10px;font-size:11px;color:var(--text2);
}
.tag-rm{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:14px;line-height:1;padding:0;transition:color 0.15s;
}
.tag-rm:hover{color:var(--redlt);}
.add-row{display:flex;gap:8px;margin-top:8px;}
.add-row input{
  flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;font-family:var(--mono);font-size:12px;outline:none;border-radius:0;
}
.add-row input:focus{border-color:var(--gold);}

/* MESSAGES */
.msg{padding:10px 12px;font-size:11px;margin-bottom:14px;display:none;}
.msg.show{display:block;}
.msg-err{background:rgba(140,58,58,0.15);border:1px solid var(--red);border-left:3px solid var(--redlt);color:var(--redlt);}
.msg-ok{background:rgba(58,122,80,0.15);border:1px solid var(--green);border-left:3px solid var(--greenlt);color:var(--greenlt);}

/* INVITE MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:200;display:none;align-items:center;justify-content:center;padding:16px;}
.overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--blue);width:100%;max-width:440px;}
.modal-header{background:var(--bg3);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;}
.modal-title{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}
.modal-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px;}

/* EMPTY STATE */
.empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:11px;letter-spacing:1px;}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:0.4;}

/* SPINNER */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FORM BUILDER ─────────────────────────────────────────── */
.fb-section{
  background:var(--bg2);border:1px solid var(--border);
  margin-bottom:10px;border-radius:0;
}
.fb-section-header{
  background:var(--bg3);border-bottom:1px solid var(--border);
  padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;
}
.fb-section-drag{color:var(--text3);cursor:grab;font-size:16px;user-select:none;}
.fb-section-icon{font-size:18px;flex-shrink:0;}
.fb-section-name{
  flex:1;font-family:var(--head);font-weight:700;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--text);
}
.fb-section-badge{
  font-size:9px;letter-spacing:1px;padding:2px 8px;
  border:1px solid var(--border);color:var(--text3);
  text-transform:uppercase;
}
.fb-section-badge.published{border-color:var(--green);color:var(--greenlt);}
.fb-section-badge.draft{border-color:var(--blue);color:var(--bluelt);}
.fb-section-actions{display:flex;gap:6px;}
.fb-section-body{padding:12px 14px;display:none;}
.fb-section-body.open{display:block;}

/* Items list */
.fb-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid var(--border);
  margin-bottom:6px;background:var(--bg3);font-size:12px;
}
.fb-item-drag{color:var(--text3);cursor:grab;font-size:14px;user-select:none;}
.fb-item-label{flex:1;color:var(--text);}
.fb-item-type{
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text3);padding:2px 8px;border:1px solid var(--border);
  white-space:nowrap;
}
.fb-item-type.status{color:#5b8fc8;border-color:#3d6fa8;}
.fb-item-type.checkbox{color:var(--greenlt);border-color:var(--green);}
.fb-item-type.yesno{color:#d4a83a;border-color:#8c6a1a;}
.fb-item-type.text{color:var(--text2);border-color:var(--border2);}
.fb-item-type.number{color:var(--text2);border-color:var(--border2);}
.fb-item-type.qty{color:#c87ae8;border-color:#7a3ab0;}
.fb-item-type.expiry{color:var(--redlt);border-color:var(--red);}
.fb-item-type.dropdown{color:var(--bluelt);border-color:var(--blue);}
.fb-item-type.heading{color:var(--gold2);border-color:var(--gold);}

/* Add item row */
.fb-add-item{
  display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;
}
.fb-add-item input,.fb-add-item select{
  background:var(--bg4);border:1px solid var(--border);color:var(--text);
  padding:7px 10px;font-family:var(--mono);font-size:12px;
  outline:none;border-radius:0;flex:1;min-width:120px;
}
.fb-add-item input:focus,.fb-add-item select:focus{border-color:var(--blue);}

/* Preview panel */
.fb-preview{
  background:var(--bg);border:1px solid var(--border);
  border-top:2px solid var(--blue);padding:16px;margin-top:16px;
}
.fb-preview-title{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--text3);margin-bottom:14px;
}
.fb-preview-section{margin-bottom:16px;}
.fb-preview-section-name{
  font-family:var(--head);font-weight:700;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--bluelt);
  border-left:3px solid var(--blue);padding-left:8px;margin-bottom:8px;
}
.fb-preview-item{
  display:flex;align-items:center;gap:10px;
  padding:5px 8px;border-bottom:1px solid rgba(26,45,69,0.5);
  font-size:11px;
}
.fb-preview-item:last-child{border-bottom:none;}
.fb-preview-label{flex:1;color:var(--text2);}
.fb-preview-input{
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text3);padding:4px 8px;font-size:10px;
  font-family:var(--mono);pointer-events:none;min-width:80px;text-align:center;
}

/* Publish bar */
.fb-publish-bar{
  background:var(--bg3);border:1px solid var(--border);
  border-left:3px solid var(--blue);
  padding:14px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:20px;
  flex-wrap:wrap;
}
.fb-publish-status{font-size:11px;color:var(--text3);}
.fb-publish-status strong{color:var(--text);}

/* Edit modal fields */
.edit-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.edit-field label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);}
.edit-field input,.edit-field select,.edit-field textarea{
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;font-family:var(--mono);font-size:12px;
  outline:none;border-radius:0;width:100%;
}
.edit-field input:focus,.edit-field select:focus,.edit-field textarea:focus{border-color:var(--blue);}
.edit-field textarea{min-height:70px;resize:vertical;}


/* ── BILLING ──────────────────────────────────────────────── */
.billing-card{
  background:var(--bg2);border:1px solid var(--border);
  border-top:2px solid var(--blue);
  margin-bottom:12px;padding:0;overflow:hidden;
}
.billing-card-header{
  background:var(--bg3);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;
}
.billing-company-name{
  font-family:var(--head);font-weight:700;font-size:13px;
  letter-spacing:1px;color:var(--text);
}
.billing-status{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  padding:3px 10px;border:1px solid;
}
.billing-status.paid{color:#5ab87a;border-color:#3a7a50;background:rgba(58,122,80,0.1);}
.billing-status.unpaid{color:#d45a3a;border-color:#8c3a3a;background:rgba(140,58,58,0.1);}
.billing-status.free{color:var(--text3);border-color:var(--border);}
.billing-card-body{padding:14px 18px;font-size:12px;}
.billing-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 0;border-bottom:1px solid rgba(26,45,69,0.4);
  gap:8px;flex-wrap:wrap;
}
.billing-row:last-child{border-bottom:none;}
.billing-label{color:var(--text3);letter-spacing:1px;font-size:11px;}
.billing-value{color:var(--text);font-weight:600;}
.billing-amount{
  font-family:var(--head);font-size:20px;font-weight:800;
  color:var(--bluelt);
}
.billing-actions{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;}
.billing-summary{
  background:var(--bg3);border:1px solid var(--border);
  padding:16px 20px;margin-bottom:20px;
  display:flex;gap:24px;flex-wrap:wrap;
}
.billing-summary-stat{text-align:center;}
.billing-summary-stat .num{font-family:var(--head);font-size:28px;font-weight:800;color:var(--bluelt);}
.billing-summary-stat .lbl{font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;}

@media (max-width:700px){
  #analyticsTab > div[style*="grid-template-columns:1fr 1fr"]{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;-webkit-overflow-scrolling:touch}
  #analyticsTab > div[style*="grid-template-columns:1fr 1fr"] > .section{min-width:86vw;scroll-snap-align:center}
  #analyticsKpis{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  #analyticsKpis > *{min-width:130px;scroll-snap-align:start;flex:0 0 auto}
}
.kpi-pop{animation:kpiPop .5s ease}
@keyframes kpiPop{0%{transform:scale(.85);opacity:.4}100%{transform:scale(1);opacity:1}}

/* Retained from the shared hardening block: the crew app dropped these in the 2026-09-02
   header rebuild, the admin console still needs them. Nothing in the shared file targets
   .header-controls, so placing them here does not change the cascade. */
@media (max-width: 700px){
  .header-controls{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;row-gap:6px}
}
@media (min-width: 701px){
  .header-controls{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
}