/* ═══════════════════════════════════════════════════════════
   MK Insurance — Premium UI v1.0
   Non-invasive global design enhancement layer.
   Loaded last · zero breaking changes · 100% backward compat.
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   §1  DESIGN SYSTEM TOKENS
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Primary: deep corporate blue ── */
  --pui-primary:            #0f4c81;
  --pui-primary-hover:      #0b3b66;
  --pui-primary-active:     #07294a;
  --pui-primary-light:      #1d6fd1;
  --pui-primary-bg:         rgba(15,76,129,.06);
  --pui-primary-glow:       rgba(15,76,129,.28);
  --pui-primary-ring:       rgba(15,76,129,.35);

  /* ── Secondary ── */
  --pui-secondary:          #64748b;
  --pui-secondary-hover:    #475569;
  --pui-secondary-bg:       rgba(100,116,139,.06);

  /* ── Danger ── */
  --pui-danger:             #ef4444;
  --pui-danger-hover:       #dc2626;
  --pui-danger-active:      #b91c1c;
  --pui-danger-bg:          rgba(239,68,68,.06);
  --pui-danger-glow:        rgba(239,68,68,.28);

  /* ── Success / Warning / Info ── */
  --pui-success:            #10b981;
  --pui-success-bg:         rgba(16,185,129,.08);
  --pui-warning:            #f59e0b;
  --pui-warning-bg:         rgba(245,158,11,.08);
  --pui-info:               #3b82f6;
  --pui-info-bg:            rgba(59,130,246,.08);

  /* ── Neutral ── */
  --pui-text:               #1e293b;
  --pui-text-secondary:     #64748b;
  --pui-text-muted:         #94a3b8;
  --pui-white:              #ffffff;
  --pui-bg-subtle:          rgba(0,0,0,.03);
  --pui-bg-hover:           rgba(0,0,0,.04);
  --pui-border:             rgba(0,0,0,.10);
  --pui-border-hover:       rgba(0,0,0,.18);

  /* ── Radius ── */
  --pui-radius-sm:          6px;
  --pui-radius:             8px;
  --pui-radius-lg:          12px;
  --pui-radius-pill:        100px;

  /* ── Shadows ── */
  --pui-shadow-xs:          0 1px 2px rgba(0,0,0,.04);
  --pui-shadow-sm:          0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --pui-shadow:             0 4px 12px rgba(0,0,0,.08);
  --pui-shadow-md:          0 6px 16px rgba(0,0,0,.10);
  --pui-shadow-lg:          0 12px 32px rgba(0,0,0,.12);
  --pui-shadow-glow:        0 0 0 3px var(--pui-primary-ring);
  --pui-shadow-glow-danger: 0 0 0 3px var(--pui-danger-glow);

  /* ── Motion ── */
  --pui-ease:               cubic-bezier(.4,0,.2,1);
  --pui-ease-out:           cubic-bezier(.0,0,.2,1);
  --pui-ease-bounce:        cubic-bezier(.34,1.56,.64,1);
  --pui-dur:                180ms;
  --pui-dur-md:             220ms;
  --pui-dur-lg:             320ms;

  /* ── Typography ── */
  --pui-font:               'Inter', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}


/* ─────────────────────────────────────────────────────────
   §2  FONT RENDERING & UNIVERSAL BASE
   Zero-specificity via :where() — any existing rule wins.
   ───────────────────────────────────────────────────────── */
:where(
  button, [type="submit"], [type="button"], [type="reset"],
  .btn, a.btn, span.btn, div.btn,
  .btn-primary, a.btn-primary, div.btn-primary,
  .btn-secondary, a.btn-secondary,
  .btn-filter, .btn-add-user, .filter-pill,
  .send-email-btn, .mode-btn, .pw-toggle-btn,
  #bulk-apply-btn, .calendar-actions button,
  .manage-header button, .form-card button,
  .controls button
) {
  font-family: var(--pui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(button, [type="submit"], [type="button"], [type="reset"]) {
  transition:
    background-color var(--pui-dur) var(--pui-ease),
    color            var(--pui-dur) var(--pui-ease),
    border-color     var(--pui-dur) var(--pui-ease),
    box-shadow       var(--pui-dur-md) var(--pui-ease),
    transform        var(--pui-dur) var(--pui-ease),
    opacity          var(--pui-dur) var(--pui-ease);
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
}


/* ─────────────────────────────────────────────────────────
   §3  .btn — PRIMARY PROJECT BUTTON
   Used in: library, user, task, excel-editor
   ───────────────────────────────────────────────────────── */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 36px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn:hover {
  background: var(--pui-primary-hover);
  box-shadow:
    var(--pui-shadow-sm),
    0 0 20px rgba(99,102,241,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-1px);
}

.btn:active {
  background: var(--pui-primary-active);
  transform: translateY(0) scale(.985);
  box-shadow: var(--pui-shadow-xs);
}

/* ── .btn.danger ── */
.btn.danger {
  background: var(--pui-danger);
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn.danger:hover {
  background: var(--pui-danger-hover);
  box-shadow:
    var(--pui-shadow-sm),
    0 0 20px rgba(239,68,68,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.btn.danger:active {
  background: var(--pui-danger-active);
}

/* ── .btn.primary ── */
.btn.primary {
  background: var(--pui-primary);
}
.btn.primary:hover {
  background: var(--pui-primary-hover);
}

/* ── .btn.small ── */
.btn.small {
  padding: 5px 10px;
  font-size: .8rem;
  min-height: 28px;
  border-radius: var(--pui-radius-sm);
}

/* ── Disabled state ── */
.btn:disabled,
.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.15);
}


/* ─────────────────────────────────────────────────────────
   §4  .btn-primary — STANDALONE PRIMARY
   Used in: declare, accident-form, folder-management, send
   ───────────────────────────────────────────────────────── */
.btn-primary,
a.btn-primary,
div.btn.btn-primary,
span.btn.btn-primary {
  padding: 8px 22px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 36px;
}

.btn-primary:hover,
a.btn-primary:hover,
div.btn.btn-primary:hover,
span.btn.btn-primary:hover {
  background: var(--pui-primary-hover);
  box-shadow:
    var(--pui-shadow-sm),
    0 0 20px rgba(99,102,241,.12);
  transform: translateY(-1px);
  color: var(--pui-white);
}

.btn-primary:active,
a.btn-primary:active {
  background: var(--pui-primary-active);
  transform: translateY(0) scale(.985);
  box-shadow: var(--pui-shadow-xs);
}


/* ─────────────────────────────────────────────────────────
   §5  .btn-secondary — CANCEL / BACK
   Used in: declare, vehicle-repair, repair-detail
   ───────────────────────────────────────────────────────── */
.btn-secondary,
a.btn-secondary {
  padding: 8px 22px;
  border: 1.5px solid var(--pui-border);
  border-radius: var(--pui-radius);
  background: var(--pui-white);
  color: var(--pui-text);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--pui-shadow-xs);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 36px;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background: var(--pui-bg-subtle);
  border-color: var(--pui-primary);
  color: var(--pui-primary);
  box-shadow: var(--pui-shadow-sm);
  transform: translateY(-1px);
}

.btn-secondary:active,
a.btn-secondary:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--pui-shadow-xs);
}


/* ─────────────────────────────────────────────────────────
   §6  FORM SUBMIT BUTTONS
   Auth pages + form-card
   ───────────────────────────────────────────────────────── */
.container .wrapper [type="submit"] {
  padding: 11px 32px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.container .wrapper [type="submit"]:hover {
  background: var(--pui-primary-hover);
  box-shadow:
    var(--pui-shadow-sm),
    0 0 24px rgba(99,102,241,.14);
  transform: translateY(-1px);
}

.container .wrapper [type="submit"]:active {
  background: var(--pui-primary-active);
  transform: translateY(0) scale(.985);
}

.form-card button[type="submit"],
.form-card [type="submit"] {
  padding: 9px 24px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-card button[type="submit"]:hover,
.form-card [type="submit"]:hover {
  background: var(--pui-primary-hover);
  box-shadow: var(--pui-shadow-sm), 0 0 20px rgba(99,102,241,.12);
  transform: translateY(-1px);
}

.form-card button[type="submit"]:active,
.form-card [type="submit"]:active {
  background: var(--pui-primary-active);
  transform: translateY(0) scale(.985);
}


/* ─────────────────────────────────────────────────────────
   §7  .btn-filter — FILTER APPLY
   Used in: utilities, home, accident-list
   ───────────────────────────────────────────────────────── */
.btn-filter {
  padding: 8px 20px;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-filter:hover {
  background: var(--pui-primary-hover);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(99,102,241,.1);
  transform: translateY(-1px);
}

.btn-filter:active {
  transform: translateY(0) scale(.985);
}


/* ─────────────────────────────────────────────────────────
   §8  .btn-add-user — ADD USER BUTTON
   Used in: home, expired_contracts
   ───────────────────────────────────────────────────────── */
.btn-add-user {
  background: transparent;
  border: 1.5px dashed var(--pui-border);
  border-radius: var(--pui-radius);
  padding: 6px 14px;
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pui-primary);
  cursor: pointer;
  transition:
    all var(--pui-dur) var(--pui-ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  min-height: 34px;
}

.btn-add-user:hover {
  background: var(--pui-primary-bg);
  border-color: var(--pui-primary);
  border-style: solid;
  color: var(--pui-primary-hover);
  transform: translateY(-1px);
}

.btn-add-user:active {
  transform: translateY(0) scale(.985);
}


/* ─────────────────────────────────────────────────────────
   §9  #bulk-apply-btn — BULK ACTIONS
   ───────────────────────────────────────────────────────── */
#bulk-apply-btn {
  padding: 7px 20px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-secondary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 34px;
}

#bulk-apply-btn:not(:disabled):hover {
  background: var(--pui-secondary-hover);
  box-shadow: var(--pui-shadow-sm);
  transform: translateY(-1px);
}

#bulk-apply-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}


/* ─────────────────────────────────────────────────────────
   §10  TABLE ACTION BUTTONS
   Used in: home.php (delete/restore/final-delete)
   ───────────────────────────────────────────────────────── */
.right-side-wrapper .row .th.actions button,
.right-side-wrapper .row .th.actions a {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pui-radius-sm);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-width: 35px;
  min-height: 35px;
}

.right-side-wrapper .row .th.actions button:hover,
.right-side-wrapper .row .th.actions a:hover {
  background: var(--pui-bg-hover);
  transform: scale(1.08);
  box-shadow: var(--pui-shadow-xs);
}

.right-side-wrapper .row .th.actions button.delete-user-btn:hover,
.right-side-wrapper .row .th.actions button.final-delete-btn:hover {
  background: var(--pui-danger-bg);
}

.right-side-wrapper .row .th.actions button.restore-btn:hover {
  background: var(--pui-success-bg);
}

.right-side-wrapper .row .th.actions button img,
.right-side-wrapper .row .th.actions a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: filter var(--pui-dur) var(--pui-ease);
  opacity: .7;
}

.right-side-wrapper .row .th.actions button:hover img,
.right-side-wrapper .row .th.actions a:hover img {
  opacity: 1;
}

.right-side-wrapper .row .th.actions a > i,
.right-side-wrapper .row .th.actions button > i {
  font-size: 16px;
  color: var(--pui-text-secondary, #64748b);
  transition: color var(--pui-dur) var(--pui-ease),
              transform var(--pui-dur) var(--pui-ease);
}

.right-side-wrapper .row .th.actions a:hover > i {
  color: var(--pui-primary, #6366f1);
}

.right-side-wrapper .row .th.actions button.delete-user-btn:hover > i,
.right-side-wrapper .row .th.actions button.final-delete-btn:hover > i,
.right-side-wrapper .row .th.actions a.delete-accident:hover > i,
.right-side-wrapper .row .th.actions a.delete-repair:hover > i {
  color: var(--pui-danger, #ef4444);
}

.right-side-wrapper .row .th.actions button.restore-btn:hover > i {
  color: var(--pui-success, #22c55e);
}


/* ─────────────────────────────────────────────────────────
   §11  CALENDAR BUTTONS
   ───────────────────────────────────────────────────────── */
.calendar-actions button {
  padding: 7px 16px;
  border: none;
  border-radius: var(--pui-radius);
  font-family: var(--pui-font);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 32px;
}

#calendar-ok {
  background: var(--pui-primary);
  color: var(--pui-white);
  box-shadow: var(--pui-shadow-xs);
}
#calendar-ok:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm);
}

#calendar-cancel {
  background: transparent;
  color: var(--pui-text-secondary);
  border: 1px solid var(--pui-border);
}
#calendar-cancel:hover {
  background: var(--pui-bg-hover);
  border-color: var(--pui-border-hover);
  color: var(--pui-text);
}

.calendar-panel .header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: var(--pui-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--pui-dur) var(--pui-ease);
  color: var(--pui-text);
}
.calendar-panel .header button:hover {
  background: var(--pui-bg-hover);
  color: var(--pui-primary);
}


/* ─────────────────────────────────────────────────────────
   §12  FILTER PILLS
   Used in: library
   ───────────────────────────────────────────────────────── */
.filter-pill {
  padding: 5px 14px;
  border-radius: var(--pui-radius-pill);
  border: 1.5px solid var(--pui-border);
  background: var(--pui-white);
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--pui-font);
  color: var(--pui-text-secondary);
  cursor: pointer;
  transition: all var(--pui-dur) var(--pui-ease);
  user-select: none;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--pui-primary);
  color: var(--pui-primary);
  background: var(--pui-primary-bg);
  transform: translateY(-1px);
}

.filter-pill.active {
  background: var(--pui-primary);
  color: var(--pui-white);
  border-color: var(--pui-primary);
  box-shadow: 0 2px 8px rgba(99,102,241,.22);
}


/* ─────────────────────────────────────────────────────────
   §13  TASK MANAGER BUTTONS
   ───────────────────────────────────────────────────────── */
.manage-header button,
.form-card button,
#toAddFromReminders {
  padding: 9px 20px;
  background: var(--pui-primary);
  color: var(--pui-white);
  border: none;
  border-radius: var(--pui-radius);
  cursor: pointer;
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.manage-header button:hover,
.form-card button:hover,
#toAddFromReminders:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(99,102,241,.1);
}

.manage-header button:active,
.form-card button:active {
  transform: translateY(0) scale(.985);
}

.task-card button.delete {
  background: none;
  border: 1.5px solid var(--pui-danger);
  color: var(--pui-danger);
  padding: 6px 14px;
  border-radius: var(--pui-radius);
  cursor: pointer;
  font-family: var(--pui-font);
  font-weight: 500;
  font-size: .82rem;
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.task-card button.delete:hover {
  background: var(--pui-danger);
  color: var(--pui-white);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(239,68,68,.12);
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────
   §14  PERFORMANCE PAGE BUTTONS
   ───────────────────────────────────────────────────────── */
.controls button {
  padding: 8px 18px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs);
  transition:
    all var(--pui-dur) var(--pui-ease),
    box-shadow var(--pui-dur-md) var(--pui-ease);
  min-height: 36px;
}

.controls button:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm);
}

.controls button:active {
  transform: translateY(0) scale(.985);
}


/* ─────────────────────────────────────────────────────────
   §15  ADMIN SAVE BUTTON
   ───────────────────────────────────────────────────────── */
.rest .actions .btn.btn-primary {
  padding: 10px 22px;
  background: var(--pui-primary);
  color: var(--pui-white);
  border-radius: var(--pui-radius);
  cursor: pointer;
  font-family: var(--pui-font);
  font-weight: 500;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--pui-dur) var(--pui-ease);
  border: none;
}

.rest .actions .btn.btn-primary:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(99,102,241,.1);
}


/* ─────────────────────────────────────────────────────────
   §16  SEND EMAIL BUTTON
   ───────────────────────────────────────────────────────── */
.send-email-btn,
div.send-email-btn {
  padding: 10px 24px;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--pui-dur) var(--pui-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
}

.send-email-btn:hover,
div.send-email-btn:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 20px rgba(99,102,241,.12);
}


/* ─────────────────────────────────────────────────────────
   §17  RICH TEXT TOOLBAR
   ───────────────────────────────────────────────────────── */
#toolbar button {
  border: 0;
  background: transparent;
  padding: 5px 8px;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--pui-radius-sm);
  cursor: pointer;
  transition: all var(--pui-dur) var(--pui-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pui-text);
  font-size: .875rem;
}

#toolbar button:hover {
  background: var(--pui-bg-hover);
  color: var(--pui-primary);
}

#toolbar button:active {
  background: var(--pui-primary-bg);
}


/* ─────────────────────────────────────────────────────────
   §18  FOLDER MANAGEMENT BUTTONS
   ───────────────────────────────────────────────────────── */
.folder-management .btn-primary {
  background: var(--pui-primary);
  color: var(--pui-white);
  border: none;
  border-radius: var(--pui-radius);
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--pui-dur) var(--pui-ease);
}
.folder-management .btn-primary:hover {
  background: var(--pui-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(99,102,241,.1);
}

.folder-management .btn-danger {
  background: var(--pui-danger);
  color: var(--pui-white);
  border: none;
  border-radius: var(--pui-radius);
  box-shadow: var(--pui-shadow-xs), inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--pui-dur) var(--pui-ease);
}
.folder-management .btn-danger:hover {
  background: var(--pui-danger-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(239,68,68,.12);
}


/* ─────────────────────────────────────────────────────────
   §19  PASSWORD TOGGLE
   ───────────────────────────────────────────────────────── */
.pw-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--pui-radius-sm);
  transition: all var(--pui-dur) var(--pui-ease);
  color: var(--pui-text-muted);
  display: inline-flex;
  align-items: center;
}
.pw-toggle-btn:hover {
  color: var(--pui-primary);
  background: var(--pui-primary-bg);
}


/* ─────────────────────────────────────────────────────────
   §20  STANDALONE DANGER (utility scripts)
   ───────────────────────────────────────────────────────── */
button.danger:not(.btn) {
  background: var(--pui-danger);
  color: var(--pui-white);
  padding: 8px 18px;
  border: none;
  border-radius: var(--pui-radius);
  font-family: var(--pui-font);
  font-weight: 500;
  font-size: .875rem;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs);
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 36px;
}
button.danger:not(.btn):hover {
  background: var(--pui-danger-hover);
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm), 0 0 16px rgba(239,68,68,.1);
}


/* ═════════════════════════════════════════════════════════
   §21  GLOBAL FOCUS STATES — ACCESSIBILITY
   ═════════════════════════════════════════════════════════ */
:where(
  button, [type="submit"], [type="button"], [type="reset"],
  .btn, a.btn, .btn-primary, a.btn-primary,
  .btn-secondary, a.btn-secondary,
  .btn-filter, .btn-add-user, .filter-pill,
  #bulk-apply-btn, .send-email-btn
):focus-visible {
  outline: none;
  box-shadow: var(--pui-shadow-glow);
}

:where(.btn.danger, .btn-danger, button.danger):focus-visible {
  box-shadow: var(--pui-shadow-glow-danger);
}

:where(a):focus-visible {
  outline: 2px solid var(--pui-primary);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ═════════════════════════════════════════════════════════
   §22  LOADING STATE — .pui-loading
   Added via JS on form submit / async actions
   ═════════════════════════════════════════════════════════ */
.pui-loading {
  pointer-events: none !important;
  position: relative !important;
  color: transparent !important;
}

.pui-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: var(--pui-white);
  border-radius: 50%;
  animation: pui-spin .6s linear infinite;
}

.pui-loading.pui-loading--dark::after {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--pui-text);
}

@keyframes pui-spin {
  to { transform: rotate(360deg); }
}


/* ═════════════════════════════════════════════════════════
   §23  CONFIRM MODAL — .pui-confirm
   Premium replacement for native confirm()
   ═════════════════════════════════════════════════════════ */
.pui-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--pui-dur-lg) var(--pui-ease),
    visibility var(--pui-dur-lg) var(--pui-ease);
}

.pui-confirm-overlay.pui-visible {
  opacity: 1;
  visibility: visible;
}

.pui-confirm-dialog {
  background: var(--pui-white);
  border-radius: var(--pui-radius-lg);
  box-shadow: var(--pui-shadow-lg), 0 0 0 1px rgba(0,0,0,.05);
  padding: 28px 32px 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  transform: scale(.92) translateY(12px);
  transition: transform var(--pui-dur-lg) var(--pui-ease-bounce);
}

.pui-confirm-overlay.pui-visible .pui-confirm-dialog {
  transform: scale(1) translateY(0);
}

.pui-confirm-icon {
  font-size: 40px;
  margin-bottom: 12px;
  line-height: 1;
  filter: none;
}

.pui-confirm-title {
  margin: 0 0 8px;
  font-family: var(--pui-font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pui-text);
  letter-spacing: -.02em;
}

.pui-confirm-message {
  margin: 0 0 24px;
  font-family: var(--pui-font);
  font-size: .9rem;
  color: var(--pui-text-secondary);
  line-height: 1.5;
}

.pui-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pui-confirm-cancel {
  flex: 1;
  padding: 9px 18px;
  border: 1.5px solid var(--pui-border);
  border-radius: var(--pui-radius);
  background: var(--pui-white);
  color: var(--pui-text);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 38px;
}

.pui-confirm-cancel:hover {
  background: var(--pui-bg-subtle);
  border-color: var(--pui-border-hover);
}

.pui-confirm-ok {
  flex: 1;
  padding: 9px 18px;
  border: none;
  border-radius: var(--pui-radius);
  background: var(--pui-primary);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--pui-shadow-xs);
  transition: all var(--pui-dur) var(--pui-ease);
  min-height: 38px;
}

.pui-confirm-ok:hover {
  background: var(--pui-primary-hover);
  box-shadow: var(--pui-shadow-sm);
  transform: translateY(-1px);
}

.pui-confirm-ok.pui-danger {
  background: var(--pui-danger);
}
.pui-confirm-ok.pui-danger:hover {
  background: var(--pui-danger-hover);
}

.pui-prompt-wrapper {
  margin: 16px 0 8px;
}

.pui-prompt-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--pui-border, #e2e8f0);
  border-radius: var(--pui-radius-sm, 8px);
  font-size: .92rem;
  font-family: var(--pui-font, inherit);
  outline: none;
  transition: border-color var(--pui-dur, .2s) var(--pui-ease, ease),
              box-shadow var(--pui-dur, .2s) var(--pui-ease, ease);
  box-sizing: border-box;
  background: var(--pui-white, #fff);
  color: var(--pui-text, #1e293b);
}

.pui-prompt-input:focus {
  border-color: var(--pui-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.pui-prompt-error {
  color: var(--pui-danger, #ef4444);
  font-size: .8rem;
  font-family: var(--pui-font, inherit);
  margin-top: 6px;
  min-height: 1.2em;
}


/* ═════════════════════════════════════════════════════════
   §24  TOAST NOTIFICATIONS
   ═════════════════════════════════════════════════════════ */
#pui-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100vw - 40px);
}

.pui-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--pui-radius-lg);
  background: var(--pui-white);
  box-shadow: var(--pui-shadow-lg), 0 0 0 1px rgba(0,0,0,.04);
  font-family: var(--pui-font);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--pui-text);
  pointer-events: all;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--pui-dur-lg) var(--pui-ease-out),
              transform var(--pui-dur-lg) var(--pui-ease-out);
}

.pui-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.pui-toast--exit {
  opacity: 0;
  transform: translateX(40px) scale(.95);
}

.pui-toast--success { border-left: 4px solid var(--pui-success); }
.pui-toast--error   { border-left: 4px solid var(--pui-danger); }
.pui-toast--warning { border-left: 4px solid var(--pui-warning); }
.pui-toast--info    { border-left: 4px solid var(--pui-info); }

.pui-toast--success .pui-toast__icon { color: var(--pui-success); }
.pui-toast--error   .pui-toast__icon { color: var(--pui-danger); }
.pui-toast--warning .pui-toast__icon { color: var(--pui-warning); }
.pui-toast--info    .pui-toast__icon { color: var(--pui-info); }

.pui-toast__icon {
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}

.pui-toast__msg {
  flex: 1;
  word-break: break-word;
}

.pui-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--pui-text-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color var(--pui-dur) var(--pui-ease);
  min-width: auto;
  min-height: auto;
}
.pui-toast__close:hover { color: var(--pui-text); }

@media screen and (max-width: 480px) {
  #pui-toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
}

@media print {
  #pui-toast-container { display: none !important; }
}


/* ═════════════════════════════════════════════════════════
   §25  TOOLTIP — .pui-tooltip
   ═════════════════════════════════════════════════════════ */
.pui-tooltip {
  position: absolute;
  z-index: 99999;
  padding: 5px 10px;
  background: var(--pui-text);
  color: var(--pui-white);
  font-family: var(--pui-font);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--pui-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--pui-dur) var(--pui-ease),
    transform var(--pui-dur) var(--pui-ease);
  box-shadow: var(--pui-shadow-sm);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pui-tooltip.pui-visible {
  opacity: 1;
  transform: translateY(0);
}

.pui-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--pui-text);
}

.pui-tooltip.pui-tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--pui-text);
}


/* ═════════════════════════════════════════════════════════
   §25  ICON SYSTEM NORMALIZATION
   ═════════════════════════════════════════════════════════ */

/* ── FontAwesome base normalize ── */
.fa, .fas, .far, .fab, .fal, .fad {
  vertical-align: middle;
  line-height: 1;
}

/* FA5/6 → FA4 compatibility (if v4-shims not loaded) */
.fas {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Icon sizing consistency ── */
:where(.fa, .fas, .far) {
  font-size: 1em;
}

/* ── Button-internal icons ── */
:where(.btn, .btn-primary, .btn-secondary, button) > .fa,
:where(.btn, .btn-primary, .btn-secondary, button) > .fas,
:where(.btn, .btn-primary, .btn-secondary, button) > .far {
  font-size: .9em;
  opacity: .85;
  transition: opacity var(--pui-dur) var(--pui-ease);
}

:where(.btn, .btn-primary, .btn-secondary, button):hover > .fa,
:where(.btn, .btn-primary, .btn-secondary, button):hover > .fas,
:where(.btn, .btn-primary, .btn-secondary, button):hover > .far {
  opacity: 1;
}

/* ── Image icons (delete.png, edit.png, etc.) ── */
:where(button, a) > img[src*="icon"],
:where(button, a) > img[src*="delete"],
:where(button, a) > img[src*="restore"],
:where(button, a) > img[src*="edit"],
:where(button, a) > img[src*="repair"],
:where(button, a) > img[src*="accident"] {
  transition:
    transform var(--pui-dur) var(--pui-ease),
    filter var(--pui-dur) var(--pui-ease),
    opacity var(--pui-dur) var(--pui-ease);
  opacity: .72;
  vertical-align: middle;
}

:where(button, a):hover > img[src*="icon"],
:where(button, a):hover > img[src*="delete"],
:where(button, a):hover > img[src*="restore"],
:where(button, a):hover > img[src*="edit"],
:where(button, a):hover > img[src*="repair"],
:where(button, a):hover > img[src*="accident"] {
  opacity: 1;
  transform: scale(1.06);
}

/* ── Emoji icons in buttons ── */
:where(.btn, button) {
  text-rendering: optimizeLegibility;
}

/* ── SVG inline icons ── */
:where(button, .btn, a) > svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
  transition:
    color var(--pui-dur) var(--pui-ease),
    transform var(--pui-dur) var(--pui-ease);
}

/* ── Admin table icons ── */
.rest .tab-content .item .bot-area > .table .tbody .row .td .icon {
  cursor: pointer;
  border-radius: var(--pui-radius-sm);
  transition: all var(--pui-dur) var(--pui-ease);
  padding: 2px;
}

.rest .tab-content .item .bot-area > .table .tbody .row .td .icon:hover {
  background: rgba(255,255,255,.15);
  transform: scale(1.1);
}

/* ── Status colors for FA icons ── */
.fa-check-circle, .fa-check { color: var(--pui-success); }
.fa-exclamation-triangle, .fa-warning { color: var(--pui-warning); }
.fa-times-circle, .fa-ban { color: var(--pui-danger); }
.fa-info-circle { color: var(--pui-info); }
.fa-spinner { color: var(--pui-primary); }


/* ═════════════════════════════════════════════════════════
   §26  CUSTOM ALERT ENHANCEMENT
   ═════════════════════════════════════════════════════════ */
.custom-alert {
  border-radius: var(--pui-radius-lg);
  box-shadow: var(--pui-shadow-lg), 0 0 0 1px rgba(0,0,0,.05);
  animation: pui-slideIn var(--pui-dur-lg) var(--pui-ease-out);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.custom-alert.success {
  border-left: 4px solid var(--pui-success);
  background: linear-gradient(135deg, #fff 0%, rgba(16,185,129,.03) 100%);
}

.custom-alert.error {
  border-left: 4px solid var(--pui-danger);
  background: linear-gradient(135deg, #fff 0%, rgba(239,68,68,.03) 100%);
}

.custom-alert-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pui-radius-sm);
  transition: all var(--pui-dur) var(--pui-ease);
}

.custom-alert-close:hover {
  background: var(--pui-bg-hover);
}

@keyframes pui-slideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ═════════════════════════════════════════════════════════
   §27  LOADING OVERLAY ENHANCEMENT
   ═════════════════════════════════════════════════════════ */
.loading {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    opacity var(--pui-dur-lg) var(--pui-ease),
    z-index 0s var(--pui-dur-lg);
}

.loading.on {
  transition:
    opacity var(--pui-dur-lg) var(--pui-ease),
    z-index 0s;
}

.lds-ripple div {
  border-color: var(--pui-primary);
}


/* ═════════════════════════════════════════════════════════
   §28  LINK-BUTTONS & MISC CLICKABLES
   ═════════════════════════════════════════════════════════ */

/* Delete links in tables (accidents, repairs) */
a.delete-accident,
a.delete-repair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pui-radius-sm);
  transition: all var(--pui-dur) var(--pui-ease);
  min-width: 35px;
  min-height: 35px;
}
a.delete-accident:hover,
a.delete-repair:hover {
  background: var(--pui-danger-bg);
  transform: scale(1.05);
}

/* Pagination upgrade */
.pagination a {
  border-radius: var(--pui-radius);
  transition: all var(--pui-dur) var(--pui-ease);
  font-weight: 500;
}
.pagination a:hover {
  transform: translateY(-1px);
  box-shadow: var(--pui-shadow-sm);
}

/* Switch upgrade */
.switch .slider {
  transition: all var(--pui-dur-md) var(--pui-ease);
}
.switch .slider::before {
  transition: transform var(--pui-dur-md) var(--pui-ease-bounce);
  box-shadow: var(--pui-shadow-sm);
}
.switch input:checked + .slider {
  background-color: var(--pui-primary);
}

/* .btn-group spacing */
.btn-group {
  gap: 12px;
}


/* ═════════════════════════════════════════════════════════
   §29  ACCESSIBILITY ENHANCEMENTS
   ═════════════════════════════════════════════════════════ */

/* Min touch target 40x40 on mobile */
@media (pointer: coarse) {
  :where(
    button, [type="submit"], [type="button"],
    .btn, .btn-primary, .btn-secondary,
    .btn-add-user, .filter-pill,
    .right-side-wrapper .row .th.actions button,
    .right-side-wrapper .row .th.actions a,
    a.delete-accident, a.delete-repair
  ) {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast adjustments */
@media (prefers-contrast: high) {
  .btn, .btn-primary, .btn-filter, .send-email-btn,
  .manage-header button, .form-card button,
  .controls button, #bulk-apply-btn {
    border: 2px solid currentColor;
  }

  .btn-secondary, a.btn-secondary {
    border-width: 2px;
  }
}


/* ═════════════════════════════════════════════════════════
   §30  RESPONSIVE REFINEMENTS
   ═════════════════════════════════════════════════════════ */
@media screen and (max-width: 640px) {
  .btn, .btn-primary, .btn-secondary,
  .btn-filter, .send-email-btn,
  .manage-header button, .form-card button,
  .controls button, .calendar-actions button {
    font-size: .82rem;
    padding: 7px 14px;
  }

  .btn.small {
    padding: 4px 8px;
    font-size: .75rem;
  }

  .pui-confirm-dialog {
    padding: 24px 20px 20px;
    max-width: 340px;
    width: 92%;
  }

  .pui-confirm-actions {
    flex-direction: column;
  }
}


/* ═════════════════════════════════════════════════════════
   §31  PRINT
   ═════════════════════════════════════════════════════════ */
@media print {
  .pui-confirm-overlay,
  .pui-tooltip {
    display: none !important;
  }

  .btn, .btn-primary, .btn-secondary, .btn-filter,
  button, [type="submit"] {
    box-shadow: none !important;
    transform: none !important;
  }
}


/* ═════════════════════════════════════════════════════════
   §32  SUBTLE BUTTON RIPPLE EFFECT
   ═════════════════════════════════════════════════════════ */
@keyframes pui-ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

.pui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: pui-ripple var(--pui-dur-lg) var(--pui-ease-out);
  pointer-events: none;
  z-index: 0;
}


/* ═════════════════════════════════════════════════════════
   §33  UPLOAD PROGRESS ENHANCEMENT
   ═════════════════════════════════════════════════════════ */
#uploadProgress {
  position: relative;
  animation: pui-slideDown var(--pui-dur-lg, .32s) var(--pui-ease-out, cubic-bezier(.22,1,.36,1));
}

@keyframes pui-slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#uploadProgress .progress-fill {
  transition: width 0.4s cubic-bezier(.22,1,.36,1);
}

#uploadProgress.pui-processing .progress-fill::after {
  animation: shimmer 0.8s infinite;
}

@keyframes pui-pulse-text {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

#uploadProgress.pui-processing .progress-text {
  animation: pui-pulse-text 1.2s ease infinite;
  color: var(--pui-warning, #f59e0b);
  font-weight: 600;
}

#uploadProgress.pui-done .progress-fill {
  background: linear-gradient(90deg, var(--pui-success, #10b981), #34d399) !important;
}

#uploadProgress.pui-done .progress-fill::after {
  animation: none;
}

#uploadProgress.pui-done .progress-text {
  color: var(--pui-success, #10b981);
  font-weight: 600;
}

.pui-upload-cancel {
  margin-top: 8px;
  font-size: .78rem;
  padding: 4px 12px;
}


/* ═══════════════════════════════════════════════════════════
   §30  HEADER / SIDEBAR / FOOTER PREMIUM ENHANCEMENTS
   Non-invasive overlay. Original classes untouched.
   ═══════════════════════════════════════════════════════════ */

/* ── Skip-to-content link ─────────────────────────────── */
.pui-skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 10px 20px;
  background: var(--pui-primary);
  color: #fff;
  font-family: var(--pui-font);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 0 0 var(--pui-radius) var(--pui-radius);
  text-decoration: none;
  transition: top var(--pui-dur) var(--pui-ease);
  box-shadow: var(--pui-shadow-md);
}
.pui-skip-link:focus {
  top: 0;
  outline: 2px solid var(--pui-primary-light);
  outline-offset: 2px;
}

/* ── Header nav link icons ────────────────────────────── */
header .right-side .logout i,
header .right-side .logout .fa-solid {
  font-size: .8em;
  opacity: .7;
  margin-right: 4px;
  transition: opacity var(--pui-dur) var(--pui-ease);
}
header .right-side .logout:hover i,
header .right-side .logout:hover .fa-solid {
  opacity: 1;
}

/* ── Logout link special styling ──────────────────────── */
header .right-side .logout.pui-hdr-logout {
  color: rgba(255,255,255,.55);
  border-left: 1px solid rgba(255,255,255,.08);
  margin-left: 4px;
  padding-left: 18px;
}
header .right-side .logout.pui-hdr-logout:hover {
  color: var(--pui-danger);
}

/* ── Sidebar icon styling ─────────────────────────────── */
.sidebar .item .text-wrapper .text a i,
.sidebar .item .text-wrapper .text a .fa-solid {
  width: 18px;
  text-align: center;
  font-size: 13px;
  opacity: .55;
  flex-shrink: 0;
  transition: opacity var(--pui-dur) var(--pui-ease),
              color var(--pui-dur) var(--pui-ease);
}
.sidebar .item:hover .text-wrapper .text a i,
.sidebar .item:hover .text-wrapper .text a .fa-solid {
  opacity: .85;
}
.sidebar .item.active .text-wrapper .text a i,
.sidebar .item.active .text-wrapper .text a .fa-solid {
  opacity: 1;
  color: var(--pui-primary-light, #818cf8);
}

/* ── Burger dropdown link icons ───────────────────────── */
.b-dropdown-wrapper .item .text a i,
.b-dropdown-wrapper .item .text a .fa-solid {
  width: 18px;
  text-align: center;
  font-size: 12px;
  opacity: .55;
  margin-right: 8px;
  transition: opacity var(--pui-dur) var(--pui-ease);
}
.b-dropdown-wrapper .item:hover .text a i,
.b-dropdown-wrapper .item:hover .text a .fa-solid {
  opacity: 1;
}

/* ── Footer version badge (optional) ──────────────────── */
footer .copyright::before {
  content: '© ';
}

/* ── Sidebar section divider ──────────────────────────── */
.sidebar ul {
  position: relative;
}

/* ── Active indicator glow ────────────────────────────── */
.sidebar .item.active {
  box-shadow: inset 3px 0 12px -4px rgba(99,102,241,.15);
}

/* ── Smooth page transitions ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  header,
  .sidebar,
  footer {
    animation: pui-fade-in var(--pui-dur-lg) var(--pui-ease-out) both;
  }
  .sidebar { animation-delay: 60ms; }
  footer   { animation-delay: 120ms; }
}

@keyframes pui-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Focus-visible for keyboard nav ───────────────────── */
header .right-side .logout:focus-visible,
.sidebar .item .text-wrapper .text a:focus-visible,
.b-dropdown-wrapper .item .text a:focus-visible {
  outline: 2px solid var(--pui-primary-light);
  outline-offset: 2px;
  border-radius: var(--pui-radius-sm);
}

/* ── Calendar overlay premium styling ─────────────────── */
.calendar-overlay .calendar-panel {
  border-radius: var(--pui-radius-lg);
  box-shadow: var(--pui-shadow-lg);
  border: 1px solid var(--pui-border);
  font-family: var(--pui-font);
}

.calendar-overlay .calendar-panel .header {
  font-family: var(--pui-font);
}

/* ── Print tweaks — hide sidebar/header ───────────────── */
@media print {
  header, .sidebar, footer { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   §31  HOMEPAGE — TABLE / DASHBOARD PREMIUM ENHANCEMENTS
   Non-invasive. Original classes untouched.
   ═══════════════════════════════════════════════════════════ */

/* ── Table card container ─────────────────────────────── */
:where(#table-container .table) {
  background: #fff;
  border-radius: var(--pui-radius-lg, 12px);
  box-shadow: var(--pui-shadow-sm);
  border: 1px solid var(--pui-border, rgba(0,0,0,.06));
  overflow: hidden;
}

/* ── Group header row ─────────────────────────────────── */
:where(.group-header .th) {
  background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(99,102,241,.01) 100%) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
  font-family: var(--pui-font, inherit);
}
:where(.group-header .th strong) {
  color: #10182a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
}

/* ── Mobile group header ──────────────────────────────── */
:where(.mobile-group-header) {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, transparent 100%);
  border-bottom: 2px solid rgba(99,102,241,.12);
  font-family: var(--pui-font, inherit);
}
:where(.mobile-group-header strong) {
  color: var(--pui-primary, #6366f1);
  font-weight: 700;
  font-size: 13px;
}

/* ── Empty state ──────────────────────────────────────── */
.pui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 200px;
}
.pui-empty-icon {
  font-size: 42px;
  color: var(--pui-text-muted, #94a3b8);
  opacity: .4;
  margin-bottom: 12px;
}
.pui-empty-title {
  font-family: var(--pui-font, inherit);
  font-size: 15px;
  font-weight: 600;
  color: var(--pui-text, #1e293b);
  margin-bottom: 4px;
}
.pui-empty-subtitle {
  font-family: var(--pui-font, inherit);
  font-size: 13px;
  color: var(--pui-text-muted, #94a3b8);
}

/* ── Table row transitions ────────────────────────────── */
:where(.right-side-wrapper .row),
:where(.tbody .left-side .row) {
  transition: background-color 120ms ease;
}

/* ── Action buttons in table ──────────────────────────── */
:where(.right-side-wrapper .row .th.actions a),
:where(.right-side-wrapper .row .th.actions button) {
  border-radius: var(--pui-radius-sm, 6px);
  transition: all 150ms ease;
}
:where(.right-side-wrapper .row .th.actions a:hover) {
  background: var(--pui-primary-bg, rgba(99,102,241,.06));
}

/* ── Switch toggle premium ────────────────────────────── */
:where(.switch input:checked + .slider) {
  background-color: var(--pui-success, #10b981);
}

/* ── Scrollbar inside table ───────────────────────────── */
:where(.right-side),
:where(.left-side),
:where(.scrollable-theader) {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.08) transparent;
}

/* ── Main content fade-in ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  :where(.main-content) {
    animation: pui-content-in 350ms var(--pui-ease-out, ease-out) both;
    animation-delay: 80ms;
  }
}
@keyframes pui-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Body footer spacing ──────────────────────────────── */
:where(.body-footer) {
  font-family: var(--pui-font, inherit);
  margin-top: 8px;
}