/* =========================================================
   SURFACES.CSS
   Shared page, card, panel, toolbar, and shell system.

   Goal:
   - Work Orders, Quotes, Schedule, and Settings should feel like
     the same app.
   - Page-specific CSS should handle layout only.
   - Resting surfaces should be soft; hover/active states should
     provide emphasis.
========================================================= */

/* =========================================================
   1. PAGE SHELLS
========================================================= */
.app-page,
.workorder-page,
.quotes-page,
.schedule-page,
.settings-page {
  color: var(--app-text);
}

.app-page {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.app-page-grid {
  display: grid;
  gap: 0.9rem;
}

.app-page-grid.two-column {
  grid-template-columns: 280px minmax(0, 1fr);
}

@media (max-width: 992px) {
  .app-page-grid.two-column {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   2. PAGE HEADERS
========================================================= */
.app-page-header,
.workorder-detail-header,
.schedule-page-header,
.schedule-title-card,
.schedule-controls-card,
.settings-header,
.quotes-header,
.navbar {
  background: var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 18%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  color: var(--app-text);
}

.app-page-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.15rem;
}

.app-page-title,
.app-page-header h1,
.app-page-header h2,
.schedule-page-title,
.workorder-detail-header h1,
.workorder-detail-header h2,
.settings-header h1,
.quotes-header h1 {
  color: var(--app-text);
  font-size: var(--brand-font-page-title);
  font-weight: var(--brand-weight-bold);
  line-height: 1.15;
  margin: 0;
}

.app-page-subtitle,
.app-page-header .text-muted,
.schedule-title-card .text-muted,
.workorder-header-note,
.settings-header .text-muted,
.quotes-header .text-muted {
  color: var(--app-text-muted) !important;
}

.app-page-toolbar,
.schedule-header-actions,
.workorder-actions,
.settings-save-bar {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

/* =========================================================
   3. SECTION CARDS / PANELS
========================================================= */
.app-section-card,
.app-panel,
.workorder-section,
.workorder-sidebar-header,
.workorder-sidebar-controls,
.workorder-sidebar-list,
.schedule-board-shell,
.unscheduled-panel,
.settings-section,
.settings-card,
.quote-section,
.quote-card {
  background: var(--app-surface);
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 20%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  color: var(--app-text);
}

.app-section-card,
.app-panel {
  padding: 1rem;
}

.app-section-title,
.workorder-section-title h3,
.schedule-board-titlebar h2,
.settings-section h2,
.settings-section h3,
.quote-section h2,
.quote-section h3 {
  color: var(--app-text);
  font-size: var(--brand-font-section-title);
  font-weight: var(--brand-weight-bold);
  line-height: 1.2;
  margin: 0;
}

.app-section-kicker,
.section-kicker {
  color: var(--app-text-muted);
  font-size: var(--brand-font-small);
  font-weight: var(--brand-weight-bold);
  text-transform: uppercase;
}

/* =========================================================
   4. SIDEBARS / LIST AREAS
========================================================= */
.app-sidebar,
.workorder-sidebar,
.schedule-left-panel,
.settings-sidebar {
  color: var(--app-text);
}

.app-sidebar-panel,
.workorder-sidebar-header,
.workorder-sidebar-controls,
.workorder-sidebar-list,
.unscheduled-panel,
.settings-sidebar {
  background: var(--app-sidebar-bg);
  border-color: color-mix(in srgb, var(--app-border), transparent 18%);
}

/* =========================================================
   5. CARD LIST ITEMS
========================================================= */
.app-list-card,
.workorder-list-item,
.unscheduled-wo-card,
.dispatch-wo-card,
.wo-badge {
  color: var(--app-text);
}

/* =========================================================
   6. TOOLBARS / BUTTON ROWS
========================================================= */
.app-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.app-toolbar-right {
  margin-left: auto;
}

/* =========================================================
   7. FORM SURFACES
========================================================= */
.app-form-surface,
.form-control,
.form-select {
  border-color: color-mix(in srgb, var(--app-border), transparent 10%);
}

.form-control,
.form-select {
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
}

.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 68%);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary), transparent 82%);
}

/* =========================================================
   8. BOOTSTRAP CARD NORMALIZATION
========================================================= */
.card,
.modal-content,
.dropdown-menu,
.list-group-item {
  background-color: var(--app-surface);
  border-color: color-mix(in srgb, var(--app-border), transparent 18%);
  color: var(--app-text);
}

.card-header,
.card-footer {
  background-color: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 6%);
  border-color: color-mix(in srgb, var(--app-border), transparent 18%);
  color: var(--app-text);
}

.dropdown-item {
  color: var(--app-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: color-mix(in srgb, var(--app-primary), var(--app-surface) 94%);
  color: var(--app-text);
}


/* =========================================================
   NAVBAR AUTH BUTTONS
   Shared rendering system for navbar auth actions.
========================================================= */
.navbar-auth-btn {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--app-border-strong), transparent 18%) !important;
  color: var(--app-text) !important;
}

.navbar-auth-btn:hover,
.navbar-auth-btn:focus {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 92%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border-strong) 42%) !important;
  color: var(--app-text) !important;
}

.navbar-auth-btn-danger {
  color: var(--bs-danger) !important;
}

.navbar-auth-btn-danger:hover,
.navbar-auth-btn-danger:focus {
  background: color-mix(in srgb, var(--bs-danger), transparent 92%) !important;
  border-color: color-mix(in srgb, var(--bs-danger), var(--app-border-strong) 50%) !important;
  color: var(--bs-danger) !important;
}


/* =========================================================
   9. OUTLINE BUTTON NORMALIZATION
========================================================= */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
  background: transparent !important;
}

.btn-outline-primary {
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 25%) !important;
  color: var(--app-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  color: var(--app-text-inverse) !important;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  border-color: color-mix(in srgb, var(--app-border), transparent 5%) !important;
  color: var(--app-text) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 94%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border) 52%) !important;
  color: var(--app-text) !important;
}

.btn-outline-danger:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  color: var(--app-text-inverse) !important;
}

body.theme-dark .btn-outline-dark,
body.theme-dark .btn-outline-light,
body.theme-dark .btn-outline-secondary {
  border-color: color-mix(in srgb, var(--app-border-strong), transparent 18%) !important;
  color: var(--app-text) !important;
}

body.theme-dark .btn-outline-dark:hover,
body.theme-dark .btn-outline-light:hover,
body.theme-dark .btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--app-primary), var(--app-surface) 88%) !important;
  border-color: color-mix(in srgb, var(--app-primary), var(--app-border-strong) 42%) !important;
  color: var(--app-text) !important;
}


body.theme-dark .btn-outline-primary,
body.theme-dark .btn-outline-danger {
  border-width: 1px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767.98px) {
  .app-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-page-toolbar,
  .app-toolbar,
  .schedule-header-actions,
  .workorder-actions,
  .settings-save-bar {
    justify-content: flex-start;
    width: 100%;
  }

  .app-toolbar-right {
    margin-left: 0;
  }
}

/* 🔥 MIGRATED FROM FINAL-POLISH: 1. GLOBAL MUTED TEXT SAFETY */
/* =========================================================
  1. GLOBAL MUTED TEXT SAFETY
========================================================= */
.text-muted,
.small.text-muted,
.form-text {
  color: var(--app-text-muted) !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 1. GLOBAL MUTED TEXT SAFETY */

/* 🔥 MIGRATED FROM FINAL-POLISH: 2. FORM CONTRAST POLISH */
/* =========================================================
  2. FORM CONTRAST POLISH
========================================================= */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border-strong) !important;
  color: var(--app-input-text) !important;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--app-primary-rgb), 0.18) !important;
  color: var(--app-input-text) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--app-placeholder) !important;
  opacity: 1;
}

.input-group-text {
  background-color: var(--app-surface-muted) !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 2. FORM CONTRAST POLISH */

/* 🔥 MIGRATED FROM FINAL-POLISH: 6. UNIFIED TABLE / GRID SURFACES */
/* =========================================================
  6. UNIFIED TABLE / GRID SURFACES
  Fixes dark navy table headers and inconsistent table hover.
========================================================= */
.table,
.material-entry-table,
.dispatch-board,
.calendar-grid {
  --app-local-table-header-bg: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 7%);
  --app-local-table-row-bg: var(--app-surface);
  --app-local-table-row-alt-bg: color-mix(in srgb, var(--app-surface), var(--app-page-bg) 4%);
  --app-local-table-hover-bg: rgba(var(--app-primary-rgb), 0.08);
  --app-local-table-hover-border: rgba(var(--app-primary-rgb), 0.34);
}

.table,
.table > :not(caption) > * > *,
.material-entry-table th,
.material-entry-table td {
  background-color: var(--app-local-table-row-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.table thead th,
.table thead td,
.material-entry-table thead th,
.material-entry-table th,
.dispatch-tech-header,
.dispatch-day-header,
.calendar-day-header,
.card-header,
.card-footer {
  background: var(--app-local-table-header-bg, var(--app-surface-muted)) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.material-entry-table td,
.dispatch-tech-name,
.dispatch-day-cell,
.calendar-day {
  background: var(--app-local-table-row-bg, var(--app-surface)) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.material-entry-table tbody tr:nth-child(even) td {
  background: var(--app-local-table-row-alt-bg) !important;
}

.table-hover tbody tr:hover > *,
.table tbody tr:hover > *,
.material-entry-table tbody tr:hover td,
.dispatch-day-cell:hover,
.calendar-day:hover {
  background: var(--app-local-table-hover-bg) !important;
  border-color: var(--app-local-table-hover-border) !important;
  color: var(--app-text) !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 6. UNIFIED TABLE / GRID SURFACES */