/* Maps admin theme CSS variables to site components */

html,
body {
  color: var(--hm-text, #1e293b) !important;
  background: linear-gradient(
    145deg,
    var(--hm-bg-start, #dce3ed) 0%,
    var(--hm-bg-mid, #e4e9f2) 42%,
    var(--hm-bg-end, #d8e4e8) 100%
  ) !important;
  background-attachment: fixed !important;
}

.shell {
  background: transparent !important;
}

.sidebar {
  background: linear-gradient(
    180deg,
    var(--hm-sidebar-start, #151233) 0%,
    var(--hm-sidebar-end, #0c1222) 100%
  ) !important;
  color: var(--hm-sidebar-text, #d8dff0) !important;
}

.sidebar .brand h1,
.sidebar .brand p,
.sidebar .nav-section,
.sidebar nav a {
  color: var(--hm-sidebar-text, #d8dff0) !important;
}

.sidebar .nav-section {
  color: var(--hm-sidebar-section, #94a3b8) !important;
}

.sidebar nav a:hover {
  background: var(--hm-sidebar-hover-bg, rgba(99, 102, 241, 0.28)) !important;
}

.sidebar nav a.is-active,
.sidebar .nav-link.is-active {
  background: var(--hm-sidebar-active-bg, rgba(99, 102, 241, 0.42)) !important;
  color: var(--hm-sidebar-active-text, #fff) !important;
}

.brand-mark {
  background: linear-gradient(
    135deg,
    var(--hm-accent, #6366f1),
    var(--hm-btn-primary-bg, #2563eb),
    var(--hm-accent-light, #0ea5e9)
  ) !important;
}

.topbar {
  background: linear-gradient(
    118deg,
    var(--hm-topbar-start, #1d4ed8) 0%,
    var(--hm-topbar-mid, #2563eb) 48%,
    var(--hm-topbar-end, #0e7490) 100%
  ) !important;
  box-shadow: var(--hm-shadow-card, 0 4px 12px rgba(15, 23, 42, 0.12));
}

.muted,
.topbar p.muted {
  color: var(--hm-muted, #64748b) !important;
}

.topbar p.muted {
  color: var(--hm-topbar-muted, rgba(255, 255, 255, 0.88)) !important;
}

label {
  color: var(--hm-label, #334155) !important;
}

.page-head h1,
.current-page-head h1,
.topbar h2,
.section-head h3,
.card h3 {
  color: var(--hm-heading, #0f172a);
}

.topbar h2 {
  color: var(--hm-topbar-text, #fff) !important;
}

a:not(.btn):not(.nav-link) {
  color: var(--hm-link, #2563eb);
}

a:not(.btn):not(.nav-link):hover {
  color: var(--hm-link-hover, #1d4ed8);
}

.btn.primary,
.btn.btn-primary,
button.primary {
  background: var(--hm-btn-primary-bg, #2563eb) !important;
  color: var(--hm-btn-primary-text, #fff) !important;
  box-shadow: var(--hm-shadow-btn, 0 8px 22px rgba(37, 99, 235, 0.28));
}

.btn.primary:hover,
.btn.btn-primary:hover {
  background: var(--hm-btn-primary-hover, #1d4ed8) !important;
}

.btn:not(.primary):not(.btn-primary) {
  background: var(--hm-btn-secondary-bg, #f1f5f9);
  color: var(--hm-btn-secondary-text, #1e293b);
  border-color: var(--hm-btn-secondary-border, #cbd5e1);
}

.card,
.panel,
.machine-board-card,
.machine-card,
.hero-card,
.current-card,
.report-card,
.form-card,
.builder-panel,
.sheet-card,
.item-card,
.reports-v4-panel,
.inv-card {
  background: var(--hm-card-bg, #f8fafc) !important;
  border-color: var(--hm-card-border, #c8d3e0) !important;
  border-radius: var(--hm-card-radius, 14px);
  box-shadow: var(--hm-shadow-card, 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 22px rgba(15, 23, 42, 0.08));
}

.card:hover,
.panel:hover,
.inv-card:hover {
  box-shadow: var(--hm-shadow-card-hover, 0 4px 12px rgba(15, 23, 42, 0.1), 0 12px 24px rgba(15, 23, 42, 0.1));
}

.card::before,
.card::after {
  background: var(--hm-card-hover-line, #4f46e5) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--hm-input-bg, #fff) !important;
  border-color: var(--hm-input-border, #cbd5e1) !important;
  color: var(--hm-input-text, #1e293b) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--hm-input-placeholder, #94a3b8) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: var(--hm-input-focus, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-input-focus, #6366f1) 25%, transparent);
}

table.table thead th,
.inv-table thead th {
  background: var(--hm-table-header-bg, #f1f5f9) !important;
  color: var(--hm-table-header-text, #334155) !important;
}

table.table tbody tr:hover,
.inv-table tbody tr:hover {
  background: var(--hm-table-row-hover, #eef2ff) !important;
}

table.table tbody tr:nth-child(even),
.inv-table tbody tr:nth-child(even) {
  background: var(--hm-table-stripe-even, #f8fafc) !important;
}

.daily-quote-bar {
  background: linear-gradient(
    105deg,
    var(--hm-quote-start, #e8edf5),
    var(--hm-quote-end, #eef1f8)
  ) !important;
  border-left-color: var(--hm-quote-accent, #4f46e5) !important;
  color: var(--hm-quote-color, #1a2e4a) !important;
}

.daily-quote-ref,
.daily-quote-day {
  color: var(--hm-quote-muted, #5b6778) !important;
}

.ui-machine-name,
.compact-customer {
  color: var(--hm-machine-name, #1e3a8a) !important;
}

.ui-machine-job {
  color: var(--hm-machine-job, #0c6b7a) !important;
}

.messages .success,
.flash-success {
  background: var(--hm-flash-success-bg, #ecfdf5) !important;
  color: var(--hm-flash-success-text, #065f46) !important;
}

.messages .error,
.flash-error {
  background: var(--hm-flash-error-bg, #fef2f2) !important;
  color: var(--hm-flash-error-text, #991b1b) !important;
}

.messages .info,
.flash-info {
  background: var(--hm-flash-info-bg, #eff6ff) !important;
  color: var(--hm-flash-info-text, #1e40af) !important;
}

.messages .warning,
.flash-warning {
  background: var(--hm-flash-warning-bg, #fffbeb) !important;
  color: var(--hm-flash-warning-text, #92400e) !important;
}

.sidebar-user-meta strong {
  color: var(--hm-sidebar-user-name, #fff) !important;
}

.sidebar-user-meta span {
  color: var(--hm-sidebar-user-role, #c7d2fe) !important;
}

.sidebar-user-avatar {
  background-color: var(--hm-sidebar-avatar-bg, rgba(147, 197, 253, 0.25)) !important;
}

.stage-dormant-row,
.has-dormant-current > summary {
  border-left-color: var(--hm-stage-dormant, #94a3b8) !important;
}

#humble-notes-root {
  --hn-sky: var(--hm-notes-panel-bg, #e0f2fe);
  --hn-sky-accent: var(--hm-notes-star, #0ea5e9);
}

#humble-notes-launcher .humble-notes-star-btn {
  color: var(--hm-notes-star, #0ea5e9);
}

#humble-notes-launcher .humble-notes-star-btn:hover {
  color: var(--hm-notes-star-hover, #0369a1);
}

#humble-notes-panel {
  background: var(--hm-notes-panel-bg, #e0f2fe);
  border-color: var(--hm-notes-panel-border, #7dd3fc);
}

.humble-notes-card {
  background: var(--hm-notes-card-bg, #fff);
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  .btn,
  .topbar {
    transition-duration: var(--hm-transition-ms, 320ms);
  }
}

/* —— Override hardcoded polish layers (ui_enhanced / ui_elite / inventory) —— */
html,
body,
body.hm-app {
  color: var(--hm-text, #1e293b) !important;
}

.section-head h3,
.card h3,
.card h4,
.page-head h1,
.current-page-head h1,
.inv-page-head h1 {
  color: var(--hm-heading, #0f172a) !important;
}

.muted,
.metric span,
.inv-page-head p,
.inv-empty {
  color: var(--hm-muted, #64748b) !important;
}

.topbar p.muted {
  color: var(--hm-topbar-muted, rgba(255, 255, 255, 0.88)) !important;
}

.nav-section,
.sidebar .nav-section {
  color: var(--hm-sidebar-section, #94a3b8) !important;
}

.nav a.is-active,
.sidebar nav a.is-active {
  background: var(--hm-sidebar-active-bg, rgba(99, 102, 241, 0.42)) !important;
  color: var(--hm-sidebar-active-text, #fff) !important;
  border-color: color-mix(in srgb, var(--hm-sidebar-active-text, #fff) 28%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--hm-accent-light, var(--hm-accent, #6366f1)), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.nav a:hover:not(.is-active),
.nav .logout-btn:hover,
.sidebar nav a:hover:not(.is-active) {
  background: var(--hm-sidebar-hover-bg, rgba(99, 102, 241, 0.28)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hm-accent, #6366f1) 18%, transparent) !important;
}

.brand-mark {
  background: linear-gradient(
    135deg,
    var(--hm-accent, #6366f1),
    var(--hm-btn-primary-bg, #2563eb),
    var(--hm-accent-light, #0ea5e9)
  ) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hm-accent, #6366f1) 35%, transparent) !important;
}

.sidebar-user-card {
  background: color-mix(in srgb, var(--hm-sidebar-text, #e6eef9) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--hm-sidebar-text, #e6eef9) 18%, transparent) !important;
}

.topbar {
  background: linear-gradient(
    118deg,
    var(--hm-topbar-start, #1d4ed8) 0%,
    var(--hm-topbar-mid, #2563eb) 48%,
    var(--hm-topbar-end, #0e7490) 100%
  ) !important;
  box-shadow: var(--hm-shadow-card, 0 12px 32px rgba(15, 23, 42, 0.12)) !important;
}

.topbar .btn:not(.primary):not(.btn-primary) {
  background: var(--hm-topbar-btn-bg, rgba(255, 255, 255, 0.16)) !important;
  border-color: color-mix(in srgb, var(--hm-topbar-text, #fff) 28%, transparent) !important;
  color: var(--hm-topbar-text, #fff) !important;
}

.topbar .btn:not(.primary):not(.btn-primary):hover {
  background: var(--hm-topbar-btn-hover, rgba(255, 255, 255, 0.28)) !important;
}

.topbar .btn.primary,
.topbar .btn.btn-primary {
  background: var(--hm-btn-primary-bg, #2563eb) !important;
  border-color: color-mix(in srgb, var(--hm-btn-primary-text, #fff) 35%, transparent) !important;
  color: var(--hm-btn-primary-text, #fff) !important;
}

.topbar .btn.primary:hover,
.topbar .btn.btn-primary:hover {
  background: var(--hm-btn-primary-hover, #1d4ed8) !important;
  color: var(--hm-btn-primary-text, #fff) !important;
}

.btn.primary,
.btn.btn-primary,
button.btn-primary {
  background: var(--hm-btn-primary-bg, #2563eb) !important;
  border-color: transparent !important;
  color: var(--hm-btn-primary-text, #fff) !important;
  box-shadow: var(--hm-shadow-btn, 0 8px 22px rgba(37, 99, 235, 0.28)) !important;
}

.btn.primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
  background: var(--hm-btn-primary-hover, #1d4ed8) !important;
}

.card:hover,
.hero-card:hover,
.current-card:hover,
.report-card:hover,
.machine-card:hover,
.machine-board-card:hover,
.compact-queue-item:hover,
.list-row:hover,
.form-card:hover,
.order-card:hover,
.builder-panel:hover,
.sheet-card:hover,
.inv-card:hover {
  border-color: color-mix(in srgb, var(--hm-accent, #6366f1) 45%, var(--hm-card-border, #c8d3e0)) !important;
}

.card::before,
.hero-card::before,
.current-card::before,
.report-card::before,
.machine-card::before,
.machine-board-card::before,
.compact-queue-item::before,
.list-row::before,
.form-card::before,
.order-card::before {
  background: linear-gradient(
    90deg,
    var(--hm-accent, #6366f1),
    var(--hm-btn-primary-bg, #3b82f6),
    var(--hm-accent-light, #38bdf8)
  ) !important;
}

.card::after,
.hero-card::after,
.current-card::after,
.report-card::after,
.machine-card::after,
.machine-board-card::after,
.form-card::after,
.order-card::after {
  background: linear-gradient(180deg, var(--hm-accent, #6366f1), var(--hm-btn-primary-bg, #3b82f6)) !important;
}

.table thead th,
.reports-v4-table th {
  background: var(--hm-table-header-bg, #f1f5f9) !important;
  color: var(--hm-table-header-text, #334155) !important;
}

.table tbody tr:hover,
.current-table tbody tr:hover,
.compact-queue-row:hover,
.machine-job-row:hover {
  background: var(--hm-table-row-hover, #eef2ff) !important;
  box-shadow: inset 5px 0 0 var(--hm-accent, #3b82f6), 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

.compact-customer {
  color: var(--hm-machine-name, #1e40af) !important;
}

.ui-machine-name,
.compact-customer {
  color: var(--hm-machine-name, #1e40af) !important;
}

.ui-machine-job,
.compact-item {
  color: var(--hm-machine-job, #0c6b7a) !important;
}

.machine-card,
.machine-board-card {
  background: linear-gradient(
    180deg,
    var(--hm-card-bg, #fff) 0%,
    color-mix(in srgb, var(--hm-card-bg, #fff) 82%, var(--hm-bg-end, #f0f9ff)) 100%
  ) !important;
  border-color: var(--hm-card-border, #bae6fd) !important;
}

.daily-quote-bar {
  background: linear-gradient(
    105deg,
    var(--hm-quote-bg-start, var(--hm-quote-start, #e8edf5)),
    var(--hm-quote-bg-end, var(--hm-quote-end, #eef1f8))
  ) !important;
  border-color: var(--hm-card-border, #b8c5d8) !important;
  border-left-color: var(--hm-quote-accent, #4f46e5) !important;
  color: var(--hm-quote-text, var(--hm-quote-color, #1a2e4a)) !important;
}

.daily-quote-primary {
  color: var(--hm-quote-text, var(--hm-quote-color, #1a2e4a)) !important;
}

.daily-quote-urdu {
  color: var(--hm-text, #334155) !important;
}

.daily-quote-ref {
  color: var(--hm-quote-accent, var(--hm-accent, #4f46e5)) !important;
}

.daily-quote-ref,
.daily-quote-day {
  color: var(--hm-quote-muted, #5b6778) !important;
}

.toggle-chip.active {
  background: color-mix(in srgb, var(--hm-accent, #3b82f6) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--hm-accent, #3b82f6) 45%, #fff) !important;
  color: var(--hm-link-hover, #1d4ed8) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.inv-form-grid .input:focus,
.inv-form-grid select:focus,
.inv-form-grid textarea:focus {
  border-color: var(--hm-input-focus, #6366f1) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-input-focus, #6366f1) 22%, transparent) !important;
}

/* Inventory module — wire to theme tokens */
.inv-subnav,
.inv-segment,
.inv-picker-filter-btn,
.inv-po-chip {
  background: var(--hm-card-bg, #fff) !important;
  border-color: var(--hm-card-border, #e5e7eb) !important;
  color: var(--hm-text, #475569) !important;
}

.inv-subnav a:hover,
.inv-segment:hover,
.inv-picker-filter-btn:hover {
  background: color-mix(in srgb, var(--hm-accent, #2563eb) 8%, var(--hm-card-bg, #fff)) !important;
  color: var(--hm-link-hover, #1d4ed8) !important;
}

.inv-subnav a.active,
.inv-segment.active,
.inv-picker-filter-btn.active,
.inv-po-chip.active {
  background: color-mix(in srgb, var(--hm-accent, #2563eb) 14%, var(--hm-card-bg, #fff)) !important;
  border-color: color-mix(in srgb, var(--hm-accent, #2563eb) 35%, var(--hm-card-border, #bfdbfe)) !important;
  color: var(--hm-link-hover, #1d4ed8) !important;
}

.inv-metric {
  background: linear-gradient(
    180deg,
    var(--hm-card-bg, #fff),
    color-mix(in srgb, var(--hm-card-bg, #fff) 88%, var(--hm-bg-mid, #f8fbff))
  ) !important;
  border-color: var(--hm-card-border, #e5e7eb) !important;
}

.inv-metric strong,
.inv-po-chip strong,
.inv-item-picker-label {
  color: var(--hm-heading, #111827) !important;
}

.inv-table th {
  background: var(--hm-table-header-bg, #111827) !important;
  color: var(--hm-table-header-text, #fff) !important;
}

.inv-table td {
  border-bottom-color: var(--hm-table-border, #eef2f7) !important;
}

.inv-table tr:hover {
  background: var(--hm-table-row-hover, #f9fbff) !important;
}

.inv-form-grid label,
.inv-item-picker label {
  color: var(--hm-label, #64748b) !important;
}

.inv-item-picker-selected,
.inv-item-detail-card,
.inv-spec-panel {
  background: color-mix(in srgb, var(--hm-accent, #2563eb) 8%, var(--hm-card-bg, #fff)) !important;
  border-color: color-mix(in srgb, var(--hm-accent, #2563eb) 28%, var(--hm-card-border, #dbeafe)) !important;
}

.inv-item-picker-results {
  background: var(--hm-card-bg, #fff) !important;
  border-color: var(--hm-card-border, #dbeafe) !important;
}

.inv-item-picker-option {
  background: var(--hm-card-bg, #fff) !important;
  border-bottom-color: var(--hm-table-border, #eef2f7) !important;
}

.inv-item-picker-option:hover,
.inv-item-picker-option.active {
  background: var(--hm-table-row-hover, #eff6ff) !important;
}

.inv-pill.info {
  background: color-mix(in srgb, var(--hm-blue, #2563eb) 16%, #fff) !important;
  color: var(--hm-link-hover, #1d4ed8) !important;
}

.inv-pill.ok {
  background: color-mix(in srgb, var(--hm-green, #059669) 16%, #fff) !important;
  color: var(--hm-green, #166534) !important;
}

.inv-pill.warn {
  background: color-mix(in srgb, var(--hm-amber, #d97706) 16%, #fff) !important;
  color: var(--hm-amber, #92400e) !important;
}

.inv-pill.danger {
  background: color-mix(in srgb, var(--hm-red, #dc2626) 14%, #fff) !important;
  color: var(--hm-red, #991b1b) !important;
}

.inv-bar-fill {
  background: linear-gradient(
    90deg,
    var(--hm-topbar-start, #1d4ed8),
    var(--hm-accent-light, #0ea5e9)
  ) !important;
}

.responsibilities-launch {
  background: linear-gradient(
    135deg,
    var(--hm-resp-btn-start, #4f46e5),
    var(--hm-resp-btn-end, #2563eb)
  ) !important;
}

.alert-hub-btn.has-unread,
.order-alert-badge {
  background: var(--hm-alert-badge-bg, #dc2626) !important;
}

.login-body {
  background: linear-gradient(
    145deg,
    var(--hm-bg-start, #dce3ed) 0%,
    var(--hm-bg-mid, #e4e9f2) 42%,
    var(--hm-bg-end, #d8e4e8) 100%
  ) !important;
}

.login-card {
  background: var(--hm-card-bg, #fff) !important;
  border-color: var(--hm-card-border, #d8e2ee) !important;
  box-shadow: var(--hm-shadow-card, 0 8px 22px rgba(15, 23, 42, 0.08)) !important;
}