/* =====================================================================
   NITS Tech Business Administration — Shared page styles
   Used by every page loaded inside the dashboard iframe.
   Covers: page headers, cards, tables, forms, icons, status chips,
   graphs/charts, imports/exports, empty states, utility helpers.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Force white on the document shell only.
   Every other element keeps whatever background it declares.
   --------------------------------------------------------------------- */
html,
body{
  background-color:#ffffff !important;
  min-height:100vh;
}

:root{
  --c-blue:#1565c0;
  --c-blue-dark:#0d47a1;
  --c-blue-soft:#e3f2fd;
  --c-navy:#0d2b4e;
  --c-ink:#212121;
  --c-muted:#5f6368;
  --c-line:#e0e0e0;
  --c-line-soft:#f0f2f6;
  --c-bg:#f4f6f9;
  --c-white:#ffffff;

  --c-ok:#2e7d32;
  --c-ok-soft:#e8f5e9;
  --c-info:#0d47a1;
  --c-info-soft:#e3f2fd;
  --c-warn:#a14600;
  --c-warn-soft:#fff4e5;
  --c-danger:#b71c1c;
  --c-danger-soft:#fdecea;
  --c-muted-soft:#eef1f5;

  --c-radius:10px;
  --c-radius-lg:12px;
  --c-shadow:0 4px 12px rgba(13,43,78,.06);
}

/* =====================================================================
   1. Page wrapper
   ===================================================================== */
.page-wrap{
  padding:24px 28px 40px;
  max-width:1400px;
  margin:0 auto;
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--c-ink);
  background:#ffffff;
}

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 20px;
}
.page-head__titles{min-width:0}
.page-head__title{
  margin:0 0 4px;
  font-size:22px;
  font-weight:600;
  color:var(--c-navy);
  line-height:1.2;
}
.page-head__sub{
  margin:0;
  font-size:14px;
  color:var(--c-muted);
}
.page-head__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.section-title{
  margin:28px 0 12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
}

/* =====================================================================
   2. Cards & panels
   ===================================================================== */
.panel{
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius-lg);
  padding:20px;
}
.panel--flush{padding:0;overflow:hidden}
.panel--table{padding:8px 20px 20px}

.panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.panel__head h6{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--c-navy);
}
.panel__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* =====================================================================
   3. Stat cards
   ===================================================================== */
.stat-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius-lg);
  color:var(--c-ink);
  text-decoration:none;
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.stat-card:hover{
  box-shadow:var(--c-shadow);
  border-color:#cfd8e3;
  transform:translateY(-1px);
}
.stat-card__icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}
.stat-card__icon .material-icons{font-size:24px}
.stat-card__icon--blue{background:var(--c-blue)}
.stat-card__icon--green{background:var(--c-ok)}
.stat-card__icon--amber{background:#ef6c00}
.stat-card__icon--navy{background:var(--c-navy)}
.stat-card__icon--red{background:#c62828}

.stat-card__body{min-width:0}
.stat-card__label{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-muted);
}
.stat-card__value{
  font-size:26px;
  font-weight:700;
  color:var(--c-navy);
  margin-top:4px;
  line-height:1.1;
}
.stat-card__value--money{font-size:20px}

/* =====================================================================
   4. Buttons
   ===================================================================== */
.btn-nits,
.btn-nits-outline,
.btn-nits-ghost,
.btn-nits-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  padding:0 18px;
  border-radius:6px;
  border:1px solid transparent;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn-nits .material-icons{font-size:18px}

.btn-nits{
  background:var(--c-blue);
  color:#ffffff;
}
.btn-nits:hover{background:var(--c-blue-dark);box-shadow:0 2px 6px rgba(21,101,192,.25)}

.btn-nits-outline{
  background:#ffffff;
  color:var(--c-navy);
  border-color:var(--c-line);
}
.btn-nits-outline:hover{
  border-color:var(--c-blue);
  color:var(--c-blue);
  background:var(--c-blue-soft);
}

.btn-nits-ghost{
  background:transparent;
  color:var(--c-blue);
}
.btn-nits-ghost:hover{background:var(--c-blue-soft)}

.btn-nits-danger{
  background:#c62828;
  color:#ffffff;
}
.btn-nits-danger:hover{background:#b71c1c}

.btn-nits[disabled],
.btn-nits-outline[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Icon-only button */
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--c-muted);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.btn-icon:hover{background:var(--c-blue-soft);color:var(--c-blue)}
.btn-icon .material-icons{font-size:20px}

/* =====================================================================
   5. Tables — always behave like real tables, even on mobile.
   On narrow screens the wrapper scrolls horizontally; the table never
   collapses into stacked "squares".
   ===================================================================== */
.table-nits__wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-nits__wrap::-webkit-scrollbar{height:8px}
.table-nits__wrap::-webkit-scrollbar-thumb{
  background:#cfd8e3;
  border-radius:4px;
}

.table-nits{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  table-layout:auto;
}
.table-nits thead th{
  padding:12px 10px;
  text-align:left;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--c-muted);
  border-bottom:1px solid var(--c-line);
  background:#fafbfd;
  white-space:nowrap;
}
.table-nits tbody td{
  padding:12px 10px;
  border-bottom:1px solid var(--c-line-soft);
  color:var(--c-ink);
  vertical-align:middle;
}
.table-nits tbody tr:last-child td{border-bottom:0}
.table-nits tbody tr:hover{background:#fafbfd}

.table-nits .right-align{text-align:right}
.table-nits .center-align{text-align:center}
.table-nits .nowrap{white-space:nowrap}
.table-nits .w-40{width:40px}
.table-nits .w-80{width:80px}
.table-nits .w-120{width:120px}

/* Compact variant */
.table-nits--compact thead th,
.table-nits--compact tbody td{padding:8px 8px}

/* =====================================================================
   6. Forms
   ===================================================================== */
.form-nits .row{margin-bottom:0}
.form-nits .input-field{
  margin:0 0 18px;
}
.form-nits label{
  font-size:13px;
  color:var(--c-muted);
}
.form-nits input[type="text"],
.form-nits input[type="email"],
.form-nits input[type="password"],
.form-nits input[type="tel"],
.form-nits input[type="number"],
.form-nits input[type="date"],
.form-nits input[type="search"],
.form-nits input[type="url"],
.form-nits select,
.form-nits textarea{
  font-family:inherit;
  font-size:14px;
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:6px;
  padding:10px 12px;
  background:#ffffff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
  height:auto;
  box-sizing:border-box;
  margin:0;
}
.form-nits textarea{
  min-height:100px;
  resize:vertical;
  line-height:1.5;
}
.form-nits input:focus,
.form-nits select:focus,
.form-nits textarea:focus{
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}

/* Static label variant (above the field) */
.field{
  margin:0 0 18px;
}
.field label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--c-muted);
  margin-bottom:6px;
}
.field__help{
  font-size:12px;
  color:var(--c-muted);
  margin-top:4px;
}
.field__error{
  font-size:12px;
  color:var(--c-danger);
  margin-top:4px;
}

/* Checkbox / radio */
.check-nits{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--c-muted);
  cursor:pointer;
  user-select:none;
  margin:0 0 12px;
}
.check-nits input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--c-blue);
}

/* Form actions */
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-top:12px;
  border-top:1px solid var(--c-line-soft);
  margin-top:8px;
}

/* Input group: input + inline icon button */
.input-group{
  position:relative;
}
.input-group input{padding-right:42px}
.input-group .btn-icon{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
}

/* =====================================================================
   7. Icons
   ===================================================================== */
.icon-sm .material-icons{font-size:16px}
.icon-md .material-icons{font-size:20px}
.icon-lg .material-icons{font-size:28px}
.icon-blue .material-icons{color:var(--c-blue)}
.icon-navy .material-icons{color:var(--c-navy)}
.icon-muted .material-icons{color:var(--c-muted)}
.icon-ok .material-icons{color:var(--c-ok)}
.icon-danger .material-icons{color:var(--c-danger)}

.icon-tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--c-blue-soft);
  color:var(--c-blue);
}
.icon-tile .material-icons{font-size:20px}

/* =====================================================================
   8. Status chips & badges
   ===================================================================== */
.chip-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.4;
}
.chip-status--ok{background:var(--c-ok-soft);color:var(--c-ok)}
.chip-status--info{background:var(--c-info-soft);color:var(--c-info)}
.chip-status--warn{background:var(--c-warn-soft);color:var(--c-warn)}
.chip-status--danger{background:var(--c-danger-soft);color:var(--c-danger)}
.chip-status--muted{background:var(--c-muted-soft);color:#455a64}

.badge-nits{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:10px;
  background:var(--c-blue);
  color:#ffffff;
  font-size:11px;
  font-weight:600;
}

/* Status dot */
.dot-status{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  vertical-align:middle;
}
.dot-status--ok{background:var(--c-ok)}
.dot-status--info{background:var(--c-blue)}
.dot-status--warn{background:#ef6c00}
.dot-status--danger{background:#c62828}
.dot-status--muted{background:#90a4ae}
/* =====================================================================
   STAFF & USERS  (staff.php)
   Namespaced under .su- so it doesn't collide with anything else.
   ===================================================================== */

/* ---- Sortable header links ---- */
.su-sort{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.su-sort .material-icons{
  font-size:14px;
  opacity:.35;
  background:transparent;
}
.su-sort.is-active{ color:var(--c-blue); }
.su-sort.is-active .material-icons{ opacity:1; color:var(--c-blue); }
.su-sort:hover{ color:var(--c-blue); }

/* ---- Compact action pill ---- */
.su-act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:28px;
  padding:0 12px;
  border-radius:5px;
  border:1px solid var(--c-line);
  background:#ffffff;
  color:var(--c-navy);
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.su-act:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.su-act .material-icons{ font-size:14px; color:inherit; }

/* Actions cell — holds two pills side by side */
.su-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}

/* ---- User cell (avatar + name + email) ---- */
.su-user{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.su-user__avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--c-navy);
  color:#ffffff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.su-user__body{ min-width:0; }
.su-user__name{
  font-weight:600;
  line-height:1.3;
  color:var(--c-ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.su-user__email{
  font-size:11px;
  color:var(--c-muted);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- Column widths on the users table ---- */
.table-nits .col-user   { min-width:240px; }
.table-nits .col-role   { width:110px; white-space:nowrap; }
.table-nits .col-type   { width:110px; white-space:nowrap; }
.table-nits .col-status { width:110px; white-space:nowrap; }
.table-nits .col-login  { width:150px; white-space:nowrap; }
.table-nits .col-joined { width:130px; white-space:nowrap; }
.table-nits .col-act    { width:180px; white-space:nowrap; text-align:right; }

/* ---- Toolbar (search + selects + buttons) ---- */
.su-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.su-toolbar__search{ flex:1 1 240px; min-width:200px; }
.su-toolbar__select{ flex:0 0 160px; }
.su-toolbar__btn   { flex:0 0 auto; }

/* Reset Materialize's floating-label widget inside the toolbar */
.su-toolbar .input-field{ margin:0; padding:0; }
.su-toolbar .input-field input,
.su-toolbar .input-field select{
  height:38px;
  padding:8px 12px;
  margin:0;
  border:1px solid var(--c-line);
  border-radius:6px;
  background:#ffffff;
  box-sizing:border-box;
  width:100%;
  font-family:inherit;
  font-size:13px;
  color:var(--c-ink);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.su-toolbar .input-field input:focus,
.su-toolbar .input-field select:focus{
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}
.su-toolbar .input-field label{ display:none; }

/* Force native select visible — Materialize hides it by default */
.su-toolbar select{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='%235f6368' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
  cursor:pointer;
}
.select-wrapper{ display:contents; }

/* ---- Filter chip row ---- */
.su-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.su-chip{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:6px;
  border:1px solid var(--c-line);
  background:#ffffff;
  color:var(--c-navy);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.su-chip:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.su-chip.is-active{
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#ffffff;
}

/* ---- Pagination ---- */
.su-pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0 0;
  border-top:1px solid var(--c-line-soft);
  margin-top:12px;
  flex-wrap:wrap;
}
.su-pager__info{ font-size:12px; color:var(--c-muted); }
.su-pager__info strong{ color:var(--c-ink); }
.su-pager__nav{ display:flex; gap:4px; flex-wrap:wrap; }
.su-pager__btn{
  min-width:32px;
  height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-line);
  border-radius:6px;
  background:#ffffff;
  color:var(--c-ink);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  transition:border-color .15s, color .15s;
}
.su-pager__btn:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.su-pager__btn.is-active{
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#ffffff;
}
.su-pager__btn .material-icons{ font-size:16px; color:inherit; }

/* ---- Small helper for the "Reset" / "Apply" gap ---- */
.su-toolbar .btn-nits,
.su-toolbar .btn-nits-outline{ height:38px; }
/* =====================================================================
   9. Graphs & charts
   ===================================================================== */
.chart-box{
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius-lg);
  padding:20px;
}
.chart-box__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
  flex-wrap:wrap;
}
.chart-box__title{
  font-size:15px;
  font-weight:600;
  color:var(--c-navy);
  margin:0;
}
.chart-box__legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--c-muted);
}
.chart-box__legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chart-box__legend i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
}
.chart-canvas{
  position:relative;
  width:100%;
  height:280px;
}
.chart-canvas--sm{height:180px}
.chart-canvas--lg{height:360px}

/* Simple CSS bar chart (no JS dependency) */
.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:200px;
  padding:10px 0;
}
.bar-chart__bar{
  flex:1;
  background:var(--c-blue-soft);
  border-radius:4px 4px 0 0;
  position:relative;
  min-height:4px;
  transition:background .15s;
}
.bar-chart__bar:hover{background:var(--c-blue)}
.bar-chart__bar span{
  position:absolute;
  top:-20px;
  left:0;
  right:0;
  text-align:center;
  font-size:11px;
  color:var(--c-muted);
}
.bar-chart__labels{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.bar-chart__labels span{
  flex:1;
  text-align:center;
  font-size:11px;
  color:var(--c-muted);
}

/* Sparkline / mini trend blocks */
.mini-trend{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:600;
}
.mini-trend--up{color:var(--c-ok)}
.mini-trend--down{color:var(--c-danger)}
.mini-trend .material-icons{font-size:14px}

/* =====================================================================
   10. Imports & exports
   ===================================================================== */
.io-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.io-dropzone{
  border:2px dashed #cfd8e3;
  border-radius:var(--c-radius-lg);
  padding:32px 20px;
  text-align:center;
  background:#fafbfd;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.io-dropzone:hover{
  border-color:var(--c-blue);
  background:var(--c-blue-soft);
}
.io-dropzone.is-dragging{
  border-color:var(--c-blue);
  background:var(--c-blue-soft);
}
.io-dropzone .material-icons{
  font-size:36px;
  color:var(--c-blue);
  display:block;
  margin:0 auto 10px;
}
.io-dropzone__title{
  font-size:14px;
  font-weight:600;
  color:var(--c-navy);
  margin:0 0 4px;
}
.io-dropzone__hint{
  font-size:12px;
  color:var(--c-muted);
  margin:0;
}
.io-dropzone input[type="file"]{display:none}

.io-filelist{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
.io-filelist li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--c-line-soft);
  border-radius:8px;
  margin-bottom:6px;
  font-size:13px;
  background:#ffffff;
}
.io-filelist li .material-icons{font-size:18px;color:var(--c-muted)}
.io-filelist li .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.io-filelist li .size{font-size:12px;color:var(--c-muted)}

.io-progress{
  height:6px;
  background:var(--c-line-soft);
  border-radius:3px;
  overflow:hidden;
  margin-top:8px;
}
.io-progress__bar{
  height:100%;
  background:var(--c-blue);
  width:0;
  transition:width .25s ease;
}

/* =====================================================================
   11. Empty states
   ===================================================================== */
.empty-state{
  text-align:center;
  padding:36px 20px;
  color:var(--c-muted);
}
.empty-state .material-icons{
  font-size:42px;
  color:#c9d3e0;
  display:block;
  margin:0 auto 12px;
}
.empty-state__title{
  font-size:15px;
  font-weight:600;
  color:var(--c-navy);
  margin:0 0 4px;
}
.empty-state__text{
  font-size:13px;
  margin:0 0 16px;
}

/* =====================================================================
   12. Lists (activity feed, recent items)
   ===================================================================== */
.list-nits{
  list-style:none;
  margin:0;
  padding:0;
}
.list-nits__row{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--c-line-soft);
}
.list-nits__row:last-child{border-bottom:0}
.list-nits__body{min-width:0;flex:1}
.list-nits__title{
  font-size:14px;
  font-weight:500;
  color:var(--c-ink);
  line-height:1.4;
}
.list-nits__meta{
  font-size:12px;
  color:var(--c-muted);
  margin-top:2px;
}
.list-nits__time{
  font-size:11px;
  color:#9aa7b8;
  margin-top:4px;
}

/* =====================================================================
   13. Utilities
   ===================================================================== */
.mono{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:12px;
  color:var(--c-navy);
  letter-spacing:.02em;
}
.text-muted{color:var(--c-muted) !important}
.text-navy{color:var(--c-navy) !important}
.text-ok{color:var(--c-ok) !important}
.text-danger{color:var(--c-danger) !important}
.text-right{text-align:right !important}
.text-center{text-align:center !important}
.mt-0{margin-top:0 !important}
.mb-0{margin-bottom:0 !important}
.mb-8{margin-bottom:8px !important}
.mb-16{margin-bottom:16px !important}
.mb-24{margin-bottom:24px !important}
.hide{display:none !important}

/* =====================================================================
   14. Mobile
   ---------------------------------------------------------------------
   IMPORTANT: tables keep their tabular layout. The wrapper scrolls
   horizontally so cells never get squished into "squares".
   ===================================================================== */
@media screen and (max-width:991px){
  .page-wrap{padding:20px 16px 32px}
  .page-head__title{font-size:20px}
  .chart-canvas{height:240px}

  /* Tables remain tables — force a minimum width so columns stay
     readable and let the wrapper scroll instead of collapsing cells. */
  .table-nits{
    min-width:640px;
  }
  .table-nits--compact{
    min-width:520px;
  }
}

@media screen and (max-width:600px){
  .page-wrap{padding:16px 12px 28px}
  .page-head{flex-direction:column;align-items:stretch}
  .page-head__title{font-size:18px}
  .page-head__actions{justify-content:stretch}
  .page-head__actions .btn-nits,
  .page-head__actions .btn-nits-outline{flex:1}

  .stat-card{padding:16px}
  .stat-card__icon{width:42px;height:42px}
  .stat-card__value{font-size:22px}
  .stat-card__value--money{font-size:18px}

  .panel{padding:16px}
  .panel--table{padding:4px 16px 16px}
  .panel__head{flex-direction:column;align-items:flex-start}
  .panel__actions{width:100%}
  .panel__actions .btn-nits,
  .panel__actions .btn-nits-outline{flex:1}

  /* Tables: keep them as tables, don't stack them. Reduce the padding
     slightly, but keep the minimum width so the wrapper scrolls. */
  .table-nits{
    min-width:600px;
    font-size:12px;
  }
  .table-nits thead th,
  .table-nits tbody td{
    padding:10px 8px;
    font-size:12px;
  }
  .table-nits thead th{
    font-size:11px;
  }
  .table-nits--compact{
    min-width:480px;
  }
  .table-nits--compact thead th,
  .table-nits--compact tbody td{
    padding:8px 6px;
  }

  .form-actions{flex-direction:column-reverse}
  .form-actions .btn-nits,
  .form-actions .btn-nits-outline{width:100%}

  .chart-canvas{height:200px}
  .chart-box{padding:16px}
  .chart-box__head{flex-direction:column;align-items:flex-start}

  .io-toolbar{width:100%}
  .io-toolbar .btn-nits,
  .io-toolbar .btn-nits-outline{flex:1}
  .io-dropzone{padding:24px 14px}

  .empty-state{padding:28px 14px}
  .empty-state .material-icons{font-size:36px}

  .chip-status{font-size:10px;padding:2px 8px}
}