/* ============================================================================
   Unity Surge - component polish for the admin pages
   The pages define these classes themselves, each with a slightly different
   take. This gives every one the same radius, border, surface, focus ring and
   hover, so the whole admin reads as one product. Design only: nothing here
   changes what is displayed or where. Scoped to html.us-shell like the shell.
   ========================================================================= */

/* ---------- surfaces: cards, tiles, panels ---------- */
.us-shell .qa-card, .us-shell .stat-card, .us-shell .app-card, .us-shell .home-tile,
.us-shell .item-card, .us-shell .table-card, .us-shell .hero-card, .us-shell .date-bar,
.us-shell .empty-state, .us-shell .absent-card, .us-shell .week-report, .us-shell .result-item {
  background: var(--us-surface) !important;
  border: 1px solid var(--us-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.us-shell .item-card, .us-shell .date-bar, .us-shell .result-item { border-radius: 14px !important; }

.us-shell .qa-card:hover, .us-shell .stat-card:hover, .us-shell .app-card:hover,
.us-shell .home-tile:hover, .us-shell .item-card:hover, .us-shell .result-item:hover {
  transform: translateY(-3px) !important;
  border-color: var(--us-primary-line) !important;
  box-shadow: var(--us-shadow), 0 0 0 1px var(--us-primary-soft) !important;
}

/* quick-access / app cards: the icon tile carries the brand gradient on hover */
.us-shell .qa-card .qa-icon, .us-shell .qa-card > i:first-child,
.us-shell .home-tile .tile-icon, .us-shell .app-card .app-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--us-primary-soft) !important; color: var(--us-primary-2) !important;
  font-size: 18px;
  transition: background .18s, color .18s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.us-shell .qa-card:hover .qa-icon, .us-shell .qa-card:hover > i:first-child,
.us-shell .home-tile:hover .tile-icon, .us-shell .app-card:hover .app-icon {
  background: var(--us-grad) !important; color: #fff !important; transform: scale(1.06);
}
.us-shell .app-card::before { height: 3px !important; opacity: 1 !important; }

/* hero banners: soft brand wash, tighter type */
.us-shell .hero-card { padding: 30px 34px !important; }
.us-shell .hero-card::before {
  background: radial-gradient(600px 220px at 0% 0%, var(--us-primary-soft), transparent 70%) !important;
}
.us-shell .hero-title { font-size: 24px !important; letter-spacing: -.02em; color: var(--us-text) !important; }
.us-shell .hero-sub { color: var(--us-text-2) !important; font-weight: 500; }

/* section labels: small accent bar */
.us-shell .section-label, .us-shell .date-bar label {
  color: var(--us-text-3) !important; letter-spacing: .1em !important; font-size: 10.5px !important;
}
.us-shell .section-label { display: flex; align-items: center; gap: 8px; }
.us-shell .section-label::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--us-primary); }

/* ---------- filters and inputs ---------- */
.us-shell .filter-btn, .us-shell .copy-btn, .us-shell .report-tab, .us-shell .action-btn {
  background: var(--us-surface-2) !important;
  border: 1px solid var(--us-border) !important;
  color: var(--us-text-2) !important;
  border-radius: 10px !important;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .2s !important;
}
.us-shell .filter-btn:hover, .us-shell .copy-btn:hover, .us-shell .report-tab:hover, .us-shell .action-btn:hover {
  color: var(--us-text) !important; border-color: var(--us-primary-line) !important;
  background: var(--us-primary-soft) !important; transform: translateY(-1px);
}
.us-shell .filter-btn.active, .us-shell .report-tab.active, .us-shell .filter-btn[aria-pressed="true"] {
  background: var(--us-grad) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(3,170,251,.28) !important;
}
.us-shell .filter-btn .dot { background: currentColor !important; }
.us-shell .filter-pill { border-radius: 999px !important; font-weight: 700 !important; }

.us-shell .filter-input, .us-shell .page-body .form-control, .us-shell .page-body .form-select,
.us-shell .page-body input[type="text"], .us-shell .page-body input[type="date"],
.us-shell .page-body input[type="search"], .us-shell .page-body input[type="number"],
.us-shell .page-body select, .us-shell .page-body textarea {
  background: var(--us-surface-2) !important;
  border: 1px solid var(--us-border) !important;
  color: var(--us-text) !important;
  border-radius: 10px !important;
  transition: border-color .18s, box-shadow .22s, background .18s !important;
}
.us-shell .filter-input:focus, .us-shell .page-body .form-control:focus, .us-shell .page-body .form-select:focus,
.us-shell .page-body input:focus, .us-shell .page-body select:focus, .us-shell .page-body textarea:focus {
  border-color: var(--us-primary) !important;
  box-shadow: var(--us-ring) !important;
  background: var(--us-surface) !important;
}

/* custom checkbox: gradient when checked */
.us-shell .custom-checkbox .checkmark { border-color: var(--us-border-strong) !important; border-radius: 5px !important; }
.us-shell .custom-checkbox input:checked + .checkmark,
.us-shell .custom-checkbox input:checked ~ .checkmark {
  background: var(--us-grad) !important; border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--us-primary-soft);
}

/* drop zone */
.us-shell .drop-zone { border: 2px dashed var(--us-border-strong) !important; border-radius: 14px !important; background: var(--us-surface-2) !important; }
.us-shell .drop-zone:hover, .us-shell .drop-zone.drag-over { border-color: var(--us-primary) !important; background: var(--us-primary-soft) !important; }
.us-shell .drop-zone.has-file { border-color: var(--us-success) !important; background: var(--us-success-soft) !important; }

/* ---------- tables ---------- */
.us-shell .table-card-header {
  background: var(--us-surface-2) !important; border-bottom: 1px solid var(--us-border) !important;
}
.us-shell .table-card-header h6, .us-shell .table-card-header h5 { color: var(--us-text) !important; letter-spacing: -.01em; }
.us-shell .table-container, .us-shell .tbl-wrap, .us-shell .freeze-pane-container { border-radius: 14px; }
/* Header type is unified, but colours are left to the page: reports like the
   payroll sheet colour-code header groups and explain them in a legend. */
.us-shell .page-body table thead th {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.us-shell .table-card thead th, .us-shell .freeze-table thead th:not([style*="background"]) {
  background: var(--us-surface-2) !important; color: var(--us-text-3) !important;
  border-bottom: 1px solid var(--us-border) !important;
}
.us-shell .page-body table tbody td { border-color: var(--us-border) !important; }
.us-shell .page-body table tbody tr { transition: background-color .15s; }
.us-shell .page-body table tbody tr:hover td { background: var(--us-primary-soft) !important; }

/* empty state: icon in a tinted ring */
.us-shell .empty-state { padding: 56px 20px !important; }
.us-shell .empty-state i {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--us-success-soft); font-size: 30px !important; margin-bottom: 14px !important;
}

/* ---------- modals and toasts ---------- */
.us-shell .modal-content { border-radius: 18px !important; border: 1px solid var(--us-border) !important; background: var(--us-surface) !important; }
.us-shell .modal-header, .us-shell .modal-footer { background: var(--us-surface-2) !important; border-color: var(--us-border) !important; }
.us-shell .toast-msg, .us-shell .toast { border-radius: 12px !important; box-shadow: var(--us-shadow-lg) !important; }

/* ---------- type ---------- */
.us-shell .page-body { font-size: 13.5px; }
.us-shell .page-body h1, .us-shell .page-body h2, .us-shell .page-body h3,
.us-shell .page-body h4, .us-shell .page-body h5, .us-shell .page-body h6 { letter-spacing: -.015em; }
.us-shell .page-body code, .us-shell .page-body .mono, .us-shell .page-body [style*="monospace"] {
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace !important;
}

@media (prefers-reduced-motion: reduce) {
  .us-shell .qa-card:hover, .us-shell .stat-card:hover, .us-shell .app-card:hover, .us-shell .home-tile:hover,
  .us-shell .item-card:hover, .us-shell .result-item:hover, .us-shell .filter-btn:hover { transform: none !important; }
}