/* ==========================================================================
   QZONE OMS — BRIDGE
   Maps Bootstrap components and the legacy `qzone-*` vocabulary onto the new
   command-console design system.

   Bootstrap's grid, flex and spacing utilities are left alone — they are
   layout primitives and still do useful work. Everything that carries a
   *look* is re-pointed at the new tokens here, so the ~330 views that were
   never touched individually still render in the new language.

   Loaded AFTER the new system so it can override, and it deliberately uses
   the same specificity discipline (no !important unless Bootstrap uses one).
   ========================================================================== */

/* ==========================================================================
   INLINE LIGHT-GREY BORDERS
   Some views hard-code Bootstrap's light greys in `style` attributes. The
   *background* cases were rewritten to tokens directly in the views (a CSS
   attribute selector can't tell `background: #e9ecef` from `color: #e9ecef`,
   so doing it here would have recoloured text too).

   What remains are border declarations, and those are safe to normalise
   blind: re-pointing the colour never invents a fill the element didn't have.
   ========================================================================== */

[style*="#f8f9fa"], [style*="#F8F9FA"],
[style*="#e9ecef"], [style*="#E9ECEF"],
[style*="#dee2e6"], [style*="#DEE2E6"] {
  border-color: var(--qz-line) !important;
}

/* ==========================================================================
   CARDS  →  surface
   ========================================================================== */

.card,
.qzone-card,
.portal-card,
.portal-card-search,
.portal-card-overview {
  position: relative;
  border: 0 !important;
  border-radius: var(--qz-r-lg) !important;
  background: var(--qz-surface-2) !important;
  box-shadow: var(--qz-ring) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--qz-text);
  transition: background-color var(--qz-dur-fast) var(--qz-ease),
              box-shadow var(--qz-dur-fast) var(--qz-ease);
}

/* No lift, no glow — the old hover moved every card on the page. */
.card:hover,
.qzone-card:hover,
.portal-card:hover,
.portal-card-search:hover,
.portal-card-overview:hover {
  transform: none !important;
  box-shadow: var(--qz-ring) !important;
}

.clickable-card,
.qzone-hover-card,
a.card,
.card.clickable-card {
  cursor: pointer;
}
.clickable-card:hover,
.qzone-hover-card:hover,
a.card:hover {
  background: var(--qz-surface-3) !important;
  box-shadow: var(--qz-ring-strong) !important;
  transform: none !important;
}

.portal-card-overview { border-left: 2px solid var(--qz-accent) !important; }

/* Card header was a saturated gradient band. It becomes a ruled caption with
   an accent-glass fill — the same treatment .qz-surface__head carries, so the
   422 legacy headers and the 19 new ones read as one component. */
.card-header,
.qzone-card-header,
.qzone-header-gradient,
.portal-card .card-header,
.portal-card-search .card-header,
.portal-card-overview .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-3);
  flex-wrap: wrap;
  min-height: 44px;
  padding: var(--qz-s-3) var(--qz-s-4) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qz-line-soft) !important;
  border-radius: var(--qz-r-lg) var(--qz-r-lg) 0 0 !important;
  background: linear-gradient(180deg, var(--qz-head-fill-hi) 0%, var(--qz-head-fill-lo) 100%) !important;
  box-shadow: inset 0 1px 0 var(--qz-head-sheen);
  color: var(--qz-text) !important;
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.card-header::after, .qzone-card-header::after { content: none !important; }
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  margin: 0;
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  color: var(--qz-text);
}
.card-header .text-white,
.card-header .text-white-50 { color: var(--qz-text-mute) !important; }

.card-body { padding: var(--qz-s-4); color: var(--qz-text-dim); }
.card-title { font-family: var(--qz-font-display); font-size: var(--qz-fs-base); font-weight: 600; color: var(--qz-text); }
.card-subtitle, .card-text { color: var(--qz-text-dim); font-size: var(--qz-fs-sm); }
.card-footer {
  padding: var(--qz-s-3) var(--qz-s-4);
  border: 0;
  border-top: 1px solid var(--qz-line-soft);
  background: var(--qz-surface-inset);
  border-radius: 0 0 var(--qz-r-lg) var(--qz-r-lg);
}

/* Stat card → metric tile.
   The legacy markup is always: .qzone-stat-card.text-center wrapping a large
   centred .qzone-icon-box, then an <h4> holding the figure, then a <small>
   label. That inverts the hierarchy — the decorative icon shouts while the
   number, at h4 size, whispers. Re-scale and re-align in place so all ~51
   usages read as proper metric tiles without touching the views. */
.qzone-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qz-s-2);
  padding: var(--qz-s-4) !important;
  border: 0 !important;
  border-radius: var(--qz-r-lg) !important;
  background: var(--qz-surface-2) !important;
  box-shadow: var(--qz-ring) !important;
  backdrop-filter: none !important;
  text-align: left !important;
  transition: background-color var(--qz-dur-fast) var(--qz-ease);
}
.qzone-stat-card::before { content: none !important; }
.qzone-stat-card:hover { transform: none !important; box-shadow: var(--qz-ring) !important; }

/* `.system-status` is the same metric-tile pattern under a different name —
   icon, then an <h4> figure, then a <small> label — used 27 times across 25
   views. It gets the identical treatment. */
.system-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qz-s-2);
  text-align: left !important;
}
.system-status > .qzone-icon-box {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  font-size: 11px !important;
}
.system-status h1, .system-status h2, .system-status h3,
.system-status h4, .system-status h5, .system-status h6 {
  margin: 0;
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--qz-text) !important;
}
.system-status small, .system-status p {
  margin: 0;
  font-size: var(--qz-fs-2xs) !important;
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute) !important;
}

/* Icon steps back to a small marker, and stops centring itself via .mx-auto */
.qzone-stat-card > .qzone-icon-box {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  font-size: 11px !important;
}

/* The figure becomes the dominant element, in the tabular mono face.
   Inline `style="color:#28a745"` on these headings is overridden on purpose:
   in this design the figure stays neutral and the label carries the state,
   so a column of tiles reads as one system rather than a set of traffic lights. */
.qzone-stat-card h1, .qzone-stat-card h2, .qzone-stat-card h3,
.qzone-stat-card h4, .qzone-stat-card h5, .qzone-stat-card h6 {
  margin: 0;
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--qz-text) !important;
}

.qzone-stat-card small,
.qzone-stat-card p {
  margin: 0;
  font-size: var(--qz-fs-2xs) !important;
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute) !important;
}

@media (max-width: 575.98px) {
  .qzone-stat-card h1, .qzone-stat-card h2, .qzone-stat-card h3,
  .qzone-stat-card h4, .qzone-stat-card h5, .qzone-stat-card h6 {
    font-size: var(--qz-fs-xl);
  }
}

/* Round gradient icon bubble → square glyph tile */
.qzone-icon-box,
.section-icon,
.submit-icon {
  display: grid !important;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: var(--qz-r-md) !important;
  background: var(--qz-accent-weak) !important;
  box-shadow: inset 0 0 0 1px var(--qz-accent-line) !important;
  color: var(--qz-accent) !important;
  font-size: 13px !important;
  filter: none !important;
  animation: none !important;
  transition: none;
}
.qzone-icon-box:hover, .section-icon:hover { transform: none !important; }
.submit-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qz-s-2);
  height: var(--qz-control-h);
  padding: 0 var(--qz-s-4);
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface-3);
  box-shadow: var(--qz-ring);
  color: var(--qz-text);
  font-family: var(--qz-font-body);
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--qz-dur-fast) var(--qz-ease),
              color var(--qz-dur-fast) var(--qz-ease),
              box-shadow var(--qz-dur-fast) var(--qz-ease);
}
.btn:hover { background: var(--qz-surface-4); color: var(--qz-text); box-shadow: var(--qz-ring-strong); transform: none; }
.btn:active, .btn.active { transform: none; box-shadow: var(--qz-ring-strong) !important; opacity: 1; }
.btn:disabled, .btn.disabled { opacity: 0.45; }
.btn-sm { height: var(--qz-control-h-sm); padding: 0 var(--qz-s-3); font-size: var(--qz-fs-xs); }
.btn-lg { height: var(--qz-control-h-lg); padding: 0 var(--qz-s-5); font-size: var(--qz-fs-base); }

/* Solid accent — the single loud control */
.btn-primary,
.qzone-btn-primary,
.qzone-btn-login,
.qzone-login-btn,
.submit-btn,
.action-btn,
.schedule-action-btn {
  background: var(--qz-accent) !important;
  border: 0 !important;
  border-radius: var(--qz-r-pill) !important;
  box-shadow: none !important;
  color: var(--qz-on-accent) !important;
  font-family: var(--qz-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color var(--qz-dur-fast) var(--qz-ease) !important;
}
.btn-primary:hover,
.qzone-btn-primary:hover,
.qzone-btn-login:hover,
.qzone-login-btn:hover,
.submit-btn:hover,
.action-btn:hover,
.schedule-action-btn:hover {
  background: var(--qz-accent-hi) !important;
  color: var(--qz-on-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
.submit-btn::before, .qzone-btn-login::after { content: none !important; }

/* The old login button was a full-width uppercase pill */
.qzone-btn-login, .qzone-login-btn { width: 100%; height: var(--qz-control-h-lg); }
.action-btn, .schedule-action-btn { display: flex; height: auto; padding: var(--qz-s-3) var(--qz-s-4); text-align: left; }

/* Tinted status buttons */
.btn-success, .qzone-btn-success { background: var(--qz-ok-weak) !important;   box-shadow: inset 0 0 0 1px var(--qz-ok-line) !important;   color: var(--qz-ok) !important;   border: 0 !important; }
.btn-danger,  .qzone-btn-danger,
.qzone-logout-btn                { background: var(--qz-crit-weak) !important; box-shadow: inset 0 0 0 1px var(--qz-crit-line) !important; color: var(--qz-crit) !important; border: 0 !important; }
.btn-warning, .qzone-btn-warning { background: var(--qz-warn-weak) !important; box-shadow: inset 0 0 0 1px var(--qz-warn-line) !important; color: var(--qz-warn) !important; border: 0 !important; }
.btn-info,    .qzone-btn-info    { background: var(--qz-info-weak) !important; box-shadow: inset 0 0 0 1px var(--qz-info-line) !important; color: var(--qz-info) !important; border: 0 !important; }
.btn-secondary, .qzone-btn-secondary { background: var(--qz-surface-3) !important; box-shadow: var(--qz-ring) !important; color: var(--qz-text-dim) !important; border: 0 !important; }

.btn-success:hover, .qzone-btn-success:hover { background: var(--qz-ok) !important;   color: var(--qz-text-invert) !important; transform: none !important; box-shadow: none !important; }
.btn-danger:hover,  .qzone-btn-danger:hover,
.qzone-logout-btn:hover                      { background: var(--qz-crit) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.btn-warning:hover, .qzone-btn-warning:hover { background: var(--qz-warn) !important; color: var(--qz-text-invert) !important; transform: none !important; box-shadow: none !important; }
.btn-info:hover,    .qzone-btn-info:hover    { background: var(--qz-info) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.btn-secondary:hover, .qzone-btn-secondary:hover { background: var(--qz-surface-4) !important; color: var(--qz-text) !important; transform: none !important; }

/* Outline variants collapse to the quiet style */
.btn-outline-primary, .qzone-btn-outline-primary,
.btn-outline-secondary, .btn-outline-warning, .btn-outline-danger,
.btn-outline-success, .btn-outline-info, .btn-outline-light, .btn-outline-dark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: var(--qz-ring) !important;
  border-radius: var(--qz-r-pill) !important;
}
.btn-outline-primary, .qzone-btn-outline-primary { color: var(--qz-accent) !important; }
.btn-outline-secondary { color: var(--qz-text-dim) !important; }
.btn-outline-warning   { color: var(--qz-warn) !important; }
.btn-outline-danger    { color: var(--qz-crit) !important; }
.btn-outline-success   { color: var(--qz-ok) !important; }
.btn-outline-info      { color: var(--qz-info) !important; }
.btn-outline-light, .btn-outline-dark { color: var(--qz-text-dim) !important; }
[class*="btn-outline-"]:hover {
  background: var(--qz-surface-3) !important;
  box-shadow: var(--qz-ring-strong) !important;
  transform: none !important;
}

/* Bootstrap's own pill utility already agrees with the house style */
.rounded-pill.btn, .btn.rounded-pill { border-radius: var(--qz-r-pill) !important; }

/* Legacy back-link */
.qzone-back-home { position: static; margin-bottom: var(--qz-s-4); }
.qzone-back-home a {
  display: inline-flex;
  align-items: center;
  gap: var(--qz-s-2);
  padding: 0 var(--qz-s-3);
  height: var(--qz-control-h-sm);
  border: 0;
  border-radius: var(--qz-r-md);
  background: transparent;
  box-shadow: var(--qz-ring);
  backdrop-filter: none;
  color: var(--qz-text-dim);
  font-size: var(--qz-fs-xs);
  font-weight: 600;
}
.qzone-back-home a:hover { background: var(--qz-surface-3); color: var(--qz-text); transform: none; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control,
.form-select,
.modern-input,
.qzone-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="datetime-local"], input[type="month"],
textarea, select {
  min-height: var(--qz-control-h);
  padding: 0 var(--qz-s-3) !important;
  border: 0 !important;
  border-radius: var(--qz-r-md) !important;
  background: var(--qz-surface-inset) !important;
  box-shadow: var(--qz-ring) !important;
  color: var(--qz-text) !important;
  font-family: var(--qz-font-body);
  font-size: var(--qz-fs-sm);
  line-height: var(--qz-control-h);
  transition: box-shadow var(--qz-dur-fast) var(--qz-ease),
              background-color var(--qz-dur-fast) var(--qz-ease);
}

textarea, textarea.form-control {
  padding: var(--qz-s-2) var(--qz-s-3) !important;
  line-height: var(--qz-lh-snug);
  min-height: 84px;
  resize: vertical;
}

.form-control:focus, .form-select:focus, .modern-input:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  background: var(--qz-bg) !important;
  box-shadow: inset 0 0 0 1px var(--qz-accent), 0 0 0 3px var(--qz-accent-weak) !important;
  color: var(--qz-text) !important;
  transform: none !important;
}
.form-control:hover:not(:focus), .modern-input:hover:not(:focus) { box-shadow: var(--qz-ring-strong) !important; }

.form-control::placeholder, .modern-input::placeholder, textarea::placeholder {
  color: var(--qz-text-faint) !important;
  font-style: normal !important;
}

input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"] {
  font-family: var(--qz-font-mono);
  font-variant-numeric: tabular-nums;
  color-scheme: inherit;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  filter: none;
  transition: opacity var(--qz-dur-fast) var(--qz-ease);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.form-select, select {
  padding-right: var(--qz-s-8) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c737f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--qz-s-3) center !important;
  background-size: 15px !important;
  cursor: pointer;
}

.form-label, label, .modern-label {
  margin-bottom: 6px;
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute);
}
.form-text, .form-hint { color: var(--qz-text-mute) !important; font-size: var(--qz-fs-xs); }
.label-icon { color: var(--qz-accent); filter: none !important; }
.required-star { color: var(--qz-crit); }
.invalid-feedback, .is-invalid ~ .invalid-feedback { color: var(--qz-crit); font-size: var(--qz-fs-xs); }
.is-invalid { box-shadow: inset 0 0 0 1px var(--qz-crit) !important; }
.is-valid   { box-shadow: inset 0 0 0 1px var(--qz-ok-line) !important; }

/* The animated underline and floating-label machinery are gone */
.input-underline { display: none !important; }
.qzone-form-floating { margin-bottom: var(--qz-s-4); transform: none !important; }
.qzone-form-floating > label,
.form-floating > label {
  position: static;
  padding: 0;
  height: auto;
  transform: none !important;
  opacity: 1 !important;
  color: var(--qz-text-mute);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  pointer-events: auto;
}
/* Floating labels are flipped to sit above their control. Bootstrap paints a
   white `::after` block behind the floating label to mask the input border —
   with the label now on top that block reads as a white bar across the field,
   so it goes. */
.form-floating { display: flex; flex-direction: column-reverse; }
.form-floating > label::after { content: none !important; display: none !important; background: none !important; }
.form-floating > label { position: static !important; height: auto !important; }
.form-floating > .form-control,
.form-floating > .form-select {
  padding: 0 var(--qz-s-3) !important;
  height: var(--qz-control-h) !important;
  min-height: var(--qz-control-h) !important;
  line-height: var(--qz-control-h) !important;
}
.form-floating > .form-select { padding-right: var(--qz-s-8) !important; }
.form-floating > textarea.form-control { height: auto !important; line-height: var(--qz-lh-snug) !important; padding: var(--qz-s-2) var(--qz-s-3) !important; }

/* Form sections */
.form-section, .qzone-modern-form .form-section {
  padding: var(--qz-s-5) !important;
  border: 0 !important;
  border-radius: var(--qz-r-lg) !important;
  background: var(--qz-surface-2) !important;
  box-shadow: var(--qz-ring) !important;
  backdrop-filter: none !important;
  animation: none !important;
  margin-bottom: var(--qz-s-4);
}
.form-section:hover { box-shadow: var(--qz-ring) !important; }
.section-header {
  padding-bottom: var(--qz-s-3);
  margin-bottom: var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line) !important;
}
.section-header::after { content: none !important; }
.section-title { font-family: var(--qz-font-display); font-size: var(--qz-fs-base); font-weight: 600; color: var(--qz-text); }
.section-subtitle { font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }
.section-number { display: none; }
.form-group-modern { margin-bottom: var(--qz-s-4); }
.submit-section { margin-top: var(--qz-s-6); animation: none !important; }

/* Checkbox / radio */
.form-check-input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border: 0;
  border-radius: var(--qz-r-xs);
  background-color: var(--qz-surface-inset);
  box-shadow: inset 0 0 0 1px var(--qz-line-strong);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--qz-accent); border-color: var(--qz-accent); box-shadow: none; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--qz-accent-weak); }
.form-check-label { text-transform: none; letter-spacing: 0; font-size: var(--qz-fs-sm); font-weight: 400; color: var(--qz-text-dim); }
.form-switch .form-check-input { width: 34px; height: 19px; border-radius: 99px; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--qz-text-dim);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--qz-surface-3);
  --bs-table-border-color: var(--qz-line-soft);
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--qz-text-dim) !important;
  font-size: var(--qz-fs-sm);
  font-variant-numeric: tabular-nums;
}

.table > thead { border-bottom: 1px solid var(--qz-line); }
.table > thead > tr > th {
  height: 34px;
  padding: 0 var(--qz-s-4) !important;
  vertical-align: middle;
  background: var(--qz-surface-inset) !important;
  border-color: var(--qz-line) !important;
  color: var(--qz-text-mute) !important;
  font-family: var(--qz-font-body) !important;
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Vertical padding matched to .qz-table — see the note there. The !important
   is required because the views pass Bootstrap's own py-* utilities (py-3 on
   most of these tables), which would otherwise win and reintroduce a second,
   inconsistent rhythm. */
.table > tbody > tr > td {
  height: var(--qz-row-h);
  padding: var(--qz-s-2) var(--qz-s-4) !important;
  vertical-align: middle;
  border-color: var(--qz-line-soft) !important;
  color: var(--qz-text-dim);
}
.table > tbody > tr:hover > td { background: var(--qz-surface-3) !important; color: var(--qz-text) !important; }
.table > tbody > tr > td:first-child { color: var(--qz-text); font-weight: 500; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent !important; }

.table > tfoot > tr > td, .table > tfoot > tr > th {
  background: var(--qz-surface-inset);
  border-top: 1px solid var(--qz-line);
  font-weight: 600;
  font-family: var(--qz-font-mono);
  color: var(--qz-text);
}

.clickable-row { cursor: pointer; }

/* Bootstrap's own scroll wrapper gets the same treatment as .qz-table-wrap */
.table-responsive {
  border-radius: var(--qz-r-lg);
  background: var(--qz-surface-2);
  box-shadow: var(--qz-ring);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* A table inside a scroll container must be free to exceed it. Several views
   carry an inline `overflow: hidden` on the <table> itself (added under the
   old theme to clip its rounded corners), which clips the nowrap header cells
   mid-word instead of letting the wrapper scroll them into view. */
.table-responsive > .table,
.qz-table-wrap > .table {
  overflow: visible !important;
  min-width: max-content;
}
/* …but a stacked table is already card-per-row on mobile and must not force
   its parent wide. */
@media (max-width: 767.98px) {
  .table-responsive > .qz-table--stack,
  .qz-table-wrap > .qz-table--stack { min-width: 0; }
}
.card .table-responsive, .qzone-card .table-responsive,
.card-body > .table-responsive { background: transparent; box-shadow: none; border-radius: 0; }

/* ==========================================================================
   LIST GROUPS, BREADCRUMBS, INPUT GROUPS
   Bootstrap components the views use that default to a white background.
   ========================================================================== */

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--qz-text-dim);
  --bs-list-group-border-color: var(--qz-line-soft);
  --bs-list-group-action-hover-bg: var(--qz-surface-3);
  --bs-list-group-action-hover-color: var(--qz-text);
  --bs-list-group-active-bg: var(--qz-accent);
  --bs-list-group-active-border-color: var(--qz-accent);
  --bs-list-group-active-color: var(--qz-on-accent);
  border-radius: var(--qz-r-md);
}
.list-group-item {
  background-color: transparent;
  border-color: var(--qz-line-soft);
  color: var(--qz-text-dim);
  font-size: var(--qz-fs-sm);
}
.list-group-item + .list-group-item { border-top-width: 1px; }
.list-group-item-action:hover,
.list-group-item-action:focus { background-color: var(--qz-surface-3); color: var(--qz-text); }
.list-group-item.active { background: var(--qz-accent); border-color: var(--qz-accent); color: var(--qz-on-accent); }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--qz-text-faint);
  --bs-breadcrumb-item-active-color: var(--qz-text);
  margin-bottom: var(--qz-s-3);
  font-size: var(--qz-fs-xs);
}
.breadcrumb-item, .breadcrumb-item a { color: var(--qz-text-mute); }
.breadcrumb-item a:hover { color: var(--qz-text); }
.breadcrumb-item.active { color: var(--qz-text); font-weight: 600; }

.input-group { border-radius: var(--qz-r-md); }
.input-group-text {
  border: 0;
  border-radius: var(--qz-r-md);
  background: var(--qz-surface-4);
  color: var(--qz-text-mute);
  font-size: var(--qz-fs-sm);
}
/* Segments inside a group share one silhouette. */
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ==========================================================================
   BADGES + COLOR UTILITIES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 0;
  border-radius: var(--qz-r-sm);
  font-family: var(--qz-font-body);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.badge.rounded-pill { border-radius: var(--qz-r-sm); }

.bg-primary   { background: var(--qz-accent-weak) !important; box-shadow: inset 0 0 0 1px var(--qz-accent-line); color: var(--qz-accent) !important; }
.bg-success   { background: var(--qz-ok-weak) !important;     box-shadow: inset 0 0 0 1px var(--qz-ok-line);     color: var(--qz-ok) !important; }
.bg-danger    { background: var(--qz-crit-weak) !important;   box-shadow: inset 0 0 0 1px var(--qz-crit-line);   color: var(--qz-crit) !important; }
.bg-warning   { background: var(--qz-warn-weak) !important;   box-shadow: inset 0 0 0 1px var(--qz-warn-line);   color: var(--qz-warn) !important; }
.bg-info      { background: var(--qz-info-weak) !important;   box-shadow: inset 0 0 0 1px var(--qz-info-line);   color: var(--qz-info) !important; }
.bg-secondary { background: var(--qz-idle-weak) !important;   box-shadow: inset 0 0 0 1px var(--qz-idle-line);   color: var(--qz-idle) !important; }
.bg-dark      { background: var(--qz-surface-inset) !important; box-shadow: var(--qz-ring); color: var(--qz-text-dim) !important; }
.bg-light     { background: var(--qz-surface-3) !important;   box-shadow: var(--qz-ring); color: var(--qz-text-dim) !important; }
.bg-white     { background: var(--qz-surface-2) !important;   color: var(--qz-text) !important; }
.qzone-bg-primary { background: var(--qz-accent-weak) !important; color: var(--qz-accent) !important; }

/* `.text-white` is used on gradient headers that no longer exist */
.text-white      { color: var(--qz-text) !important; }
.text-white-50   { color: var(--qz-text-mute) !important; }
.text-muted      { color: var(--qz-text-mute) !important; }
.text-dark       { color: var(--qz-text) !important; }
.text-body       { color: var(--qz-text-dim) !important; }
.text-primary,
.qzone-text-primary { color: var(--qz-accent) !important; }

/* …except on headings. Many views tag their page title `.text-primary`, which
   under the old theme just meant "brand coloured". In this design the accent
   carries state and interaction, so a page full of orange headings would spend
   the loudest colour on the quietest information. Headings stay neutral; the
   accent still applies to icons, links and inline emphasis. */
h1.text-primary, h2.text-primary, h3.text-primary,
h4.text-primary, h5.text-primary, h6.text-primary,
h1.qzone-text-primary, h2.qzone-text-primary, h3.qzone-text-primary,
h4.qzone-text-primary, h5.qzone-text-primary, h6.qzone-text-primary,
.card-header .text-primary, .qzone-admin-header .text-primary {
  color: var(--qz-text) !important;
}
.text-success    { color: var(--qz-ok) !important; }
.text-danger     { color: var(--qz-crit) !important; }
.text-warning    { color: var(--qz-warn) !important; }
.text-info       { color: var(--qz-info) !important; }
.text-secondary  { color: var(--qz-text-mute) !important; }

/* Decorative gradients are flattened to tinted surfaces */
.bg-gradient-primary, .bg-gradient-info { background: var(--qz-accent-weak) !important; color: var(--qz-accent) !important; }
.bg-gradient-success   { background: var(--qz-ok-weak) !important;   color: var(--qz-ok) !important; }
.bg-gradient-warning   { background: var(--qz-warn-weak) !important; color: var(--qz-warn) !important; }
.bg-gradient-danger    { background: var(--qz-crit-weak) !important; color: var(--qz-crit) !important; }
.bg-gradient-secondary { background: var(--qz-idle-weak) !important; color: var(--qz-idle) !important; }
.bg-brown, .bg-ocean   { background: var(--qz-accent-weak) !important; color: var(--qz-accent) !important; }
.bg-purple, .qzone-bg-indigo { background: rgba(176, 124, 255, 0.13) !important; color: #b07cff !important; }
.bg-highlight, .qzone-bg-teal { background: var(--qz-ok-weak) !important; color: var(--qz-ok) !important; }
.qzone-bg-orange { background: var(--qz-accent-weak) !important; color: var(--qz-accent) !important; }

.pending-badge { animation: none !important; }

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  margin-bottom: var(--qz-s-4);
  border: 0 !important;
  border-left: 2px solid var(--qz-idle) !important;
  border-radius: var(--qz-r-md);
  background: var(--qz-idle-weak) !important;
  backdrop-filter: none !important;
  color: var(--qz-text-dim) !important;
  font-size: var(--qz-fs-sm);
  font-weight: 400;
}
.alert-success { border-left-color: var(--qz-ok) !important;   background: var(--qz-ok-weak) !important;   color: var(--qz-text-dim) !important; }
.alert-danger  { border-left-color: var(--qz-crit) !important; background: var(--qz-crit-weak) !important; color: var(--qz-text-dim) !important; }
.alert-warning { border-left-color: var(--qz-warn) !important; background: var(--qz-warn-weak) !important; color: var(--qz-text-dim) !important; }
.alert-info    { border-left-color: var(--qz-info) !important; background: var(--qz-info-weak) !important; color: var(--qz-text-dim) !important; }
.alert .btn-close { margin-left: auto; }

/* ==========================================================================
   TABS / NAV
   ========================================================================== */

.nav-tabs { gap: var(--qz-s-1); border-bottom: 1px solid var(--qz-line) !important; }
.nav-tabs .nav-link {
  position: relative;
  padding: var(--qz-s-3) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--qz-text-mute) !important;
  font-size: var(--qz-fs-sm);
  font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--qz-text) !important; background: transparent !important; }
.nav-tabs .nav-link.active { color: var(--qz-text) !important; background: transparent !important; font-weight: 600; text-shadow: none !important; }
.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  right: var(--qz-s-2);
  bottom: -1px;
  left: var(--qz-s-2);
  height: 2px;
  background: var(--qz-accent);
}

.qzone-tab-btn {
  padding: 5px var(--qz-s-3) !important;
  border: 0 !important;
  border-radius: var(--qz-r-pill) !important;
  background: transparent !important;
  color: var(--qz-text-mute) !important;
  font-size: var(--qz-fs-xs);
  font-weight: 600;
}
.qzone-tab-btn:hover { background: var(--qz-surface-3) !important; color: var(--qz-text) !important; }
.qzone-tab-btn.active {
  background: var(--qz-surface-4) !important;
  color: var(--qz-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.progress {
  height: 5px;
  border-radius: 99px;
  background: var(--qz-surface-4) !important;
  overflow: hidden;
}
.progress-bar {
  background: var(--qz-accent) !important;
  border-radius: 99px;
  box-shadow: none !important;
  transition: width var(--qz-dur-slow) var(--qz-ease-out);
}
.progress-bar.bg-success { background: var(--qz-ok) !important; }
.progress-bar.bg-warning { background: var(--qz-warn) !important; }
.progress-bar.bg-danger  { background: var(--qz-crit) !important; }
.progress-bar.bg-info    { background: var(--qz-info) !important; }

.kpi-progress-list .kpi-progress-item { display: flex; align-items: center; gap: var(--qz-s-3); margin-bottom: var(--qz-s-3); }
.kpi-progress-list .kpi-name { min-width: 150px; font-size: var(--qz-fs-sm); color: var(--qz-text-dim); }
.kpi-progress-list .progress-container { flex: 1; height: 5px; border-radius: 99px; background: var(--qz-surface-4); position: relative; overflow: visible; }
.kpi-progress-list .progress-bar { height: 5px; background: var(--qz-accent); border-radius: 99px; }
.kpi-progress-list .progress-text {
  position: static;
  transform: none;
  margin-left: var(--qz-s-3);
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-xs);
  font-weight: 600;
  color: var(--qz-text);
}

/* ==========================================================================
   LEGACY STATUS PANELS + PERFORMANCE EDGES
   ========================================================================== */

.system-status, .system-status-card, .system-status-system, .system-status-account,
.system-status-year, .system-status-safety, .announcement-card,
.quick-actions, .scorecard-card, .kpi-result-card, .nav-toolbar,
.calendar-container {
  padding: var(--qz-s-4) !important;
  border: 0 !important;
  border-radius: var(--qz-r-lg) !important;
  background: var(--qz-surface-2) !important;
  box-shadow: var(--qz-ring) !important;
  backdrop-filter: none !important;
}
.system-status-system  { border-left: 2px solid var(--qz-crit) !important; }
.system-status-account { border-left: 2px solid var(--qz-accent) !important; }
.announcement-card     { border-left: 2px solid var(--qz-warn) !important; }
.scorecard-card:hover, .nav-toolbar:hover { transform: none !important; box-shadow: var(--qz-ring) !important; }

.performance-outstanding      { border-left: 2px solid var(--qz-info) !important; }
.performance-excellent        { border-left: 2px solid var(--qz-ok) !important; }
.performance-good             { border-left: 2px solid var(--qz-accent) !important; }
.performance-satisfactory     { border-left: 2px solid var(--qz-warn) !important; }
.performance-needs-improvement{ border-left: 2px solid var(--qz-crit) !important; }

.scorecard-card.rating-excellent         { border-left: 2px solid var(--qz-ok) !important;   background: var(--qz-surface-2) !important; }
.scorecard-card.rating-good              { border-left: 2px solid var(--qz-info) !important; background: var(--qz-surface-2) !important; }
.scorecard-card.rating-satisfactory      { border-left: 2px solid var(--qz-warn) !important; background: var(--qz-surface-2) !important; }
.scorecard-card.rating-needs-improvement,
.scorecard-card.rating-poor              { border-left: 2px solid var(--qz-crit) !important; background: var(--qz-surface-2) !important; }

.score-number { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xl); font-weight: 600; color: var(--qz-text); letter-spacing: -0.02em; }
.rating-badge { padding: 2px 7px; border-radius: var(--qz-r-sm); font-size: var(--qz-fs-2xs); font-weight: 600; letter-spacing: 0.04em; }

/* Attention animations removed — motion is reserved for state changes. */
.attention-btn, .confirmation-icon, .today-indicator, .today-badge { animation: none !important; }

/* ==========================================================================
   CALENDAR (legacy markup)
   ========================================================================== */

.row-cols-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.row-cols-7 > * { flex: none; max-width: none; }
.min-h-cell { min-height: 104px; background: transparent !important; }
.qzone-day-cell {
  border: 0 !important;
  border-right: 1px solid var(--qz-line-soft) !important;
  border-bottom: 1px solid var(--qz-line-soft) !important;
  transition: background-color var(--qz-dur-fast) var(--qz-ease);
}
.qzone-day-cell:hover { background: var(--qz-surface-3) !important; transform: none !important; }
.weekend-cell, .bg-soft-gray { background: var(--qz-surface-inset) !important; opacity: 1; }
.today-cell { background: transparent !important; box-shadow: inset 0 0 0 1px var(--qz-accent-line) !important; border: 0 !important; }
.date-number { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xs); font-weight: 600; color: var(--qz-text-mute); }
.today-indicator { color: var(--qz-accent) !important; text-shadow: none !important; }
.schedule-item {
  border-left: 2px solid var(--qz-accent);
  border-radius: var(--qz-r-xs);
  font-size: var(--qz-fs-2xs);
}
.schedule-item:hover:not(.dragging) { transform: none; box-shadow: none; }
.qzone-day-cell.drag-over { background: var(--qz-accent-weak) !important; box-shadow: inset 0 0 0 1px var(--qz-accent) !important; border: 0 !important; transform: none !important; }
.drop-indicator { background: var(--qz-accent-weak); border: 1px dashed var(--qz-accent-line); border-radius: var(--qz-r-md); color: var(--qz-accent); }
.nav-circle { width: 30px; height: 30px; border-radius: var(--qz-r-md); }
.nav-btn:hover .nav-circle { background: var(--qz-surface-3) !important; color: var(--qz-text) !important; box-shadow: none !important; }

/* ==========================================================================
   RETIRED CHROME — old shell, hero and auth decoration
   These selectors still appear in views that were built against the QZONE
   structure. Neutralise them so nothing from the old shell leaks through.
   ========================================================================== */

.qzone-hero,
.qzone-stats-section {
  padding: var(--qz-s-8) 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--qz-text) !important;
}
.qzone-hero::before, .qzone-hero::after { content: none !important; }

.qzone-auth-bg, .qzone-auth-overlay, .qzone-auth-container,
.qzone-auth-card, .qzone-auth-header, .qzone-auth-body,
.qzone-logo-container, .qzone-navbar, .qzone-navbar-brand,
.qzone-admin-sidebar, .qzone-admin-nav, .qzone-admin-content,
.qzone-admin-header, .qzone-admin-logo, .qzone-admin-sidebar-footer,
.qzone-mobile-header, .qzone-mobile-header-left, .qzone-mobile-header-center,
.qzone-mobile-header-right, .qzone-mobile-title, .qzone-mobile-theme-btn,
.qzone-hamburger-btn, .sidebar-overlay {
  background: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  animation: none !important;
}
.qzone-auth-bg::before, .qzone-auth-bg::after,
.qzone-auth-card::before, .qzone-auth-header::before, .qzone-auth-header::after,
.qzone-admin-sidebar::before, .qzone-admin-content::before,
.qzone-admin-header::after { content: none !important; }

/* The page header block many views still render */
.qzone-admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qz-s-4);
  flex-wrap: wrap;
  padding: 0 0 var(--qz-s-4) !important;
  margin-bottom: var(--qz-s-6);
  border: 0 !important;
  border-bottom: 1px solid var(--qz-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Most views wrap the title and the page action in a single `d-flex
   justify-content-between` child. As a flex item that wrapper is sized by its
   content, so the space-between has nothing to distribute and the action ends
   up glued to the title. Let a lone child own the full width instead — that
   pushes the action back out to the right edge, and does no harm to the
   headers whose title and action are direct children. */
.qzone-admin-header > :only-child { flex: 1 1 100%; min-width: 0; }
.qzone-admin-header > .row:only-child { width: 100%; }

/* Headers that put the action alongside the title keep it hard right. Scoped
   to things that are actually actions so a trailing subtitle stays put. */
.qzone-admin-header > :last-child:not(:only-child):is(
  a, button, [class*="btn"], .d-flex, .qz-row, div:has(> a), div:has(> button)
) {
  margin-left: auto;
}

.qzone-admin-header h1, .qzone-admin-header h2, .qzone-admin-header h3 {
  margin: 0;
  font-size: var(--qz-fs-xl);
  font-weight: 600;
  letter-spacing: var(--qz-track-tight);
}
.qzone-admin-header p, .qzone-admin-header small { margin: var(--qz-s-1) 0 0; font-size: var(--qz-fs-sm); color: var(--qz-text-mute); }
.qzone-admin-content { padding: 0 !important; min-height: 0 !important; }

/* Turbo frames must not introduce a box of their own */
turbo-frame { display: block; }

/* Bootstrap containers inside the new content well are redundant */
.qz-content > .container,
.qz-content > .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }