/**
 * DoorForce Enterprise UI — clean light field-service design
 * Load LAST. CSS only. Applies to Office + Technician.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root,
html,
body,
body.light-theme,
body.dark-theme {
  --df-blue: #0f4c81;
  --df-blue-hover: #0c3d68;
  --df-bg: #ffffff;
  --df-bg-soft: #f5f7fa;
  --df-card: #ffffff;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --df-border: #d1d5db;
  --df-green: #15803d;
  --df-orange: #ea580c;
  --df-red: #dc2626;
  --df-gray: #6b7280;
  --df-radius: 14px;
  --df-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
  --df-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --df-control-h: 48px;
  --df-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --df-fs-body: 16px;
  --df-fs-title: 32px;
  --df-fs-section: 22px;
  --df-fs-label: 14px;
  --df-fs-button: 15px;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;

  --bg-main: var(--df-bg-soft);
  --bg-sidebar: var(--df-blue);
  --bg-card: var(--df-card);
  --bg-card-hover: #f3f4f6;
  --border-color: var(--df-border);
  --text-main: var(--df-text);
  --text-muted: var(--df-text-secondary);
  --accent-primary: var(--df-blue);
  --accent-primary-hover: var(--df-blue-hover);
  --accent-secondary: var(--df-red);
  --accent-secondary-hover: #b91c1c;
  --success: var(--df-green);
  --warning: var(--df-orange);
  --danger: var(--df-red);
  --radius: var(--df-radius);
  --shadow-sm: var(--df-shadow-sm);
  --shadow-md: var(--df-shadow);
  --shadow-lg: 0 10px 28px rgba(17, 24, 39, 0.12);
}

/* OS dark preference only applies when no explicit DoorForce theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-df-theme]) body:not([data-df-theme]),
  html:not([data-df-theme]) body:not([data-df-theme]) {
    --bg-main: var(--df-bg-soft);
    --bg-card: var(--df-card);
    --text-main: var(--df-text);
    --text-muted: var(--df-text-secondary);
  }
}

html, body {
  font-family: var(--df-font) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  background: var(--df-bg-soft) !important;
  color: var(--text-primary, var(--df-text)) !important;
  -webkit-font-smoothing: antialiased;
}

body.light-theme,
body.dark-theme,
.app-container,
.content-area,
.content-body,
.main-content,
.tab-panel {
  background: var(--df-bg-soft) !important;
  color: var(--df-text) !important;
}

/* ---------- Type (refined by doorforce-typography.css) ---------- */
h1, .page-header h1, .df-jobs-list-header h2 {
  font-family: var(--df-font) !important;
  font-size: var(--df-fs-title) !important;
  font-weight: 700 !important;
  color: var(--text-primary, var(--df-text)) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  opacity: 1 !important;
}

h2, .card-title, .page-header h2, .df-tech-home-group h2 {
  font-family: var(--df-font) !important;
  font-size: var(--df-fs-section) !important;
  font-weight: 700 !important;
  color: var(--text-primary, var(--df-text)) !important;
  opacity: 1 !important;
}

h3, h4, h5 {
  font-family: var(--df-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary, var(--df-text)) !important;
  opacity: 1 !important;
}

p, li, td, th, label, span, small, strong,
.df-eyebrow, .text-muted, .brand-subtitle {
  opacity: 1 !important;
}

p, li, td, .df-step-help, .df-jobs-empty, .df-timeline-empty {
  color: var(--text-secondary, var(--df-text-secondary)) !important;
  font-size: var(--df-fs-body) !important;
}

strong, b, th, .metric-value {
  color: var(--text-primary, var(--df-text)) !important;
}

.metric-info h3 {
  color: var(--text-muted, var(--df-text-muted)) !important;
  text-transform: none !important;
}

.df-eyebrow {
  color: var(--df-accent, var(--df-blue)) !important;
  font-size: 12px !important;
}

.text-muted, small, .brand-subtitle {
  color: var(--text-muted, var(--df-text-muted)) !important;
  font-size: var(--df-fs-label) !important;
}

/* ---------- Sidebar / nav: DoorForce blue only here ---------- */
.sidebar,
.df-tech-bottom-nav {
  background: var(--df-blue) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.sidebar .brand-name,
.sidebar .nav-link,
.sidebar .nav-link span,
.df-tech-bottom-nav button,
.sidebar .nav-section-title {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 0.95rem !important;
}

.sidebar .brand-subtitle {
  color: #dbeafe !important;
}

.sidebar .nav-link {
  min-height: 48px !important;
  border-radius: 10px;
  margin: 2px 8px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.df-tech-bottom-nav button.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.df-tech-bottom-nav {
  box-shadow: 0 -4px 20px rgba(17, 24, 39, 0.12);
}

.df-tech-bottom-nav button {
  min-height: 56px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

.df-tech-primary-nav button {
  min-height: 48px !important;
  background: #ffffff !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ---------- Cards ---------- */
.card,
.metric-card,
.df-wo-card,
.df-wo-stat,
.df-job-card,
.df-tech-work-card,
.df-photo-card,
.df-signature-card,
.df-job-summary-card,
.df-guided-workflow-card,
.df-checklist-card,
.df-door-summary-card,
.df-job-history-card,
.df-finish-card,
.df-more-link,
.df-destination-card,
.df-pause-modal-card,
.modal-content,
.df-modal-card,
.df-tech-home-icon {
  background: var(--df-card) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  color: var(--df-text) !important;
}

.card,
.metric-card {
  padding: 20px 22px !important;
}

.df-wo-stat span,
.df-wo-grid span,
.df-job-summary-grid span,
.df-job-card-meta span,
.df-drive-metrics span {
  color: var(--df-text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.df-wo-stat strong,
.df-wo-grid strong,
.df-job-summary-grid strong,
.df-job-card-meta strong,
.df-drive-metrics strong,
.df-wo-id,
.df-wo-customer,
.df-job-card-id,
.df-job-card-customer,
#mobile-job-title,
#mobile-job-customer,
.df-guided-step-title {
  color: var(--df-text) !important;
  opacity: 1 !important;
}

.df-guided-label,
.df-guided-step-help,
.df-mobile-job-action-status,
.df-job-header-address,
.df-job-prev-notes {
  color: var(--df-text-secondary) !important;
  font-size: 1rem !important;
  opacity: 1 !important;
}

.df-guided-workflow-card,
.df-sticky-primary,
.df-primary-action-card {
  background: #ffffff !important;
  border: 1px solid var(--df-border) !important;
  box-shadow: var(--df-shadow) !important;
}

/* Remove busy colored panel chrome */
.df-tech-command-card,
.df-tech-demo-grid,
.df-tech-quick-tabs,
.df-tech-flow-card {
  display: none !important;
}

/* ---------- Buttons ---------- */
.btn,
button.btn,
.df-guided-action-btn,
.df-complete-btn,
.df-upload-btn,
.df-job-open-btn,
.df-header-action-btn,
.df-navigate-btn,
.df-more-link,
.df-jobs-filter,
.df-job-tab,
.df-guided-secondary-btn,
.df-job-nav-btn,
.df-back-btn,
.df-retake-btn,
.df-clear-signature {
  font-family: var(--df-font) !important;
  font-size: var(--df-fs-button) !important;
  font-weight: 700 !important;
  min-height: var(--df-control-h) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  padding: 12px 18px !important;
}

.btn-primary,
.df-guided-action-btn,
.df-job-open-btn,
.df-complete-btn {
  background: var(--df-blue) !important;
  border: 1px solid var(--df-blue) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.df-guided-action-btn:hover,
.df-complete-btn:hover:not(:disabled) {
  background: var(--df-blue-hover) !important;
  border-color: var(--df-blue-hover) !important;
  color: #ffffff !important;
}

.btn-outline,
.btn-secondary,
.df-guided-secondary-btn,
.df-header-action-btn,
.df-navigate-btn,
.df-job-nav-btn,
.df-upload-btn,
.df-retake-btn,
.df-clear-signature,
.df-back-btn,
.df-jobs-filter,
.df-job-tab,
.df-more-link {
  background: #ffffff !important;
  border: 1px solid #9ca3af !important;
  color: var(--df-text) !important;
}

.df-jobs-filter.is-active,
.df-job-tab.is-active {
  background: var(--df-blue) !important;
  border-color: var(--df-blue) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: var(--df-red) !important;
  border: 1px solid var(--df-red) !important;
  color: #ffffff !important;
}

.btn:disabled,
.btn[disabled],
.df-complete-btn:disabled,
.df-guided-action-btn:disabled,
button:disabled {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

.btn:focus-visible,
.input-field:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(15, 76, 129, 0.45) !important;
  outline-offset: 2px;
}

/* ---------- Forms ---------- */
label,
.form-group > label,
.df-field-label,
.df-signature-name-label,
.df-check-row span,
.df-signature-approval {
  color: var(--df-text) !important;
  font-size: var(--df-fs-label) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.input-field,
input.input-field,
select.input-field,
textarea.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
  font-family: var(--df-font) !important;
  font-size: 1.0625rem !important;
  color: var(--df-text) !important;
  background: #ffffff !important;
  border: 1.5px solid #9ca3af !important;
  border-radius: 12px !important;
  min-height: var(--df-control-h) !important;
  padding: 12px 14px !important;
  opacity: 1 !important;
}

.input-field:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--df-blue) !important;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.2) !important;
  background: #ffffff !important;
  color: var(--df-text) !important;
}

.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

.df-check-row {
  min-height: 48px;
  align-items: center;
}

.df-check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--df-blue);
}

/* Signature stays white */
.signature-pad,
#mobile-sig-pad,
.df-signature-pad-container,
.signature-pad-container {
  background: #ffffff !important;
  border: 1.5px solid var(--df-border) !important;
}

/* ---------- Tables ---------- */
.table-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--df-border) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow-sm) !important;
  overflow: auto;
}

table {
  font-size: 1rem !important;
  color: var(--df-text) !important;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f4f6 !important;
  color: var(--df-text) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--df-border) !important;
  padding: 14px 16px !important;
}

tbody tr:nth-child(even) {
  background: #f9fafb !important;
}

tbody tr:hover {
  background: #eef5fb !important;
}

td {
  color: var(--df-text-secondary) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

td strong, td b {
  color: var(--df-text) !important;
}

/* ---------- Status badges ---------- */
.badge,
.df-wo-badge,
.df-job-status-badge,
.df-job-card-status {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 12px !important;
  min-height: 28px;
  opacity: 1 !important;
  border: 0 !important;
}

/* Gray = Pending / Assigned / Accepted */
.status-assigned,
.status-accepted,
.status-unscheduled,
.status-scheduled,
.df-wo-badge.status-assigned,
.df-wo-badge.status-accepted,
.df-job-status-badge.status-assigned,
.df-job-status-badge.status-accepted,
.df-job-card-status.status-assigned,
.df-job-card-status.status-accepted,
.badge-gray,
.badge-blue {
  background: #6b7280 !important;
  color: #ffffff !important;
}

/* Orange = In Progress / Paused / Driving / Arrived / Working */
.status-driving,
.status-arrived,
.status-working,
.status-paused,
.df-wo-badge.status-driving,
.df-wo-badge.status-arrived,
.df-wo-badge.status-working,
.df-wo-badge.status-paused,
.df-job-status-badge.status-driving,
.df-job-status-badge.status-arrived,
.df-job-status-badge.status-working,
.df-job-status-badge.status-paused,
.df-job-card-status.status-driving,
.df-job-card-status.status-arrived,
.df-job-card-status.status-working,
.df-job-card-status.status-paused,
.badge-gold {
  background: #ea580c !important;
  color: #ffffff !important;
}

/* Green = Completed */
.status-completed,
.df-wo-badge.status-completed,
.df-job-status-badge.status-completed,
.df-job-card-status.status-completed,
.badge-green {
  background: #15803d !important;
  color: #ffffff !important;
}

/* Red = Emergency / Overdue / Cancelled / Rejected */
.status-cancelled,
.status-canceled,
.status-rejected,
.status-overdue,
.status-emergency,
.df-wo-badge.status-cancelled,
.df-wo-badge.status-rejected,
.df-job-status-badge.status-cancelled,
.df-job-status-badge.status-rejected,
.badge-red {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.df-wo-stat.is-overdue,
.df-wo-card.is-paused,
.df-paused-job-card {
  border-color: rgba(234, 88, 12, 0.45) !important;
  background: #fff7ed !important;
}

.df-wo-pause-banner {
  background: #ffedd5 !important;
  border: 1px solid #fdba74 !important;
  color: #9a3412 !important;
}

.df-wo-activity {
  background: #f9fafb !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
}

.df-wo-activity span,
.df-wo-activity p,
.df-wo-activity li {
  color: var(--df-text-secondary) !important;
}

.df-wo-activity li strong {
  color: var(--df-text) !important;
}

/* ---------- Finish checklist ---------- */
.df-completion-checklist li {
  background: #f9fafb !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
  min-height: 48px;
}

.df-completion-checklist li.is-ok {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
}

.df-completion-checklist li.is-missing {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

.df-completion-checklist strong {
  color: var(--df-text) !important;
  font-size: 1rem !important;
}

.df-completion-checklist small {
  color: var(--df-text-secondary) !important;
}

.df-completion-checklist small.is-missing {
  color: #b91c1c !important;
}

.df-photo-upload-status { color: var(--df-text-muted) !important; }
.df-photo-upload-status.is-ok { color: #15803d !important; }
.df-photo-upload-status.is-error { color: #dc2626 !important; }

.df-photo-preview {
  background: #f3f4f6 !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text-secondary) !important;
  min-height: 160px;
}

.df-save-pill {
  background: #eef2f7 !important;
  color: var(--df-text) !important;
  border: 1px solid var(--df-border);
  font-size: 0.8rem !important;
}

.df-job-toast {
  background: #111827 !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.df-job-toast.is-error {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.df-timeline-item strong { color: var(--df-text) !important; }
.df-timeline-item span,
.df-timeline-item small { color: var(--df-text-secondary) !important; }
.df-timeline-dot {
  background: var(--df-blue) !important;
  box-shadow: 0 0 0 1px var(--df-blue) !important;
  border-color: #ffffff !important;
}

/* ---------- Office spacing ---------- */
.content-body {
  padding: 24px 28px 40px !important;
}

.page-header {
  margin-bottom: 22px !important;
}

.metrics-grid {
  gap: 16px !important;
}

/* ---------- Technician surfaces ---------- */
.df-jobs-shell,
.df-more-shell,
.df-tech-home,
.df-job-detail,
#panel-mobile,
#panel-tech-home {
  background: var(--df-bg-soft) !important;
  color: var(--df-text) !important;
}

.df-job-sticky-header {
  background: linear-gradient(180deg, #f5f7fa 85%, rgba(245, 247, 250, 0)) !important;
}

.df-jobs-list-header h2,
.df-more-shell h2,
.df-tech-home-brand h1,
#mobile-job-title {
  color: var(--df-text) !important;
}

.df-tech-home-brand p,
.df-job-header-address {
  color: var(--df-text-secondary) !important;
}

.df-tech-home-icon svg {
  stroke: var(--df-blue) !important;
}

.df-tech-home-icon.is-accent svg {
  stroke: var(--df-red) !important;
}

.df-tech-home-tile span {
  color: var(--df-text) !important;
  font-size: 0.8rem !important;
}

/* One clear primary action */
.df-guided-action-btn {
  width: 100% !important;
  min-height: 56px !important;
  font-size: 1.125rem !important;
}

.df-guided-secondary-btn {
  width: 100% !important;
  min-height: 48px !important;
}

.df-secondary-tools {
  display: none !important;
}

/* ---------- Modals ---------- */
.modal,
.df-modal-backdrop,
.df-pause-modal {
  background: rgba(17, 24, 39, 0.45) !important;
}

.modal-header h2,
.df-modal-header h2,
.df-pause-modal-card h3 {
  color: var(--df-text) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  html, body { font-size: 15px !important; }
  .content-body,
  .tab-panel,
  .df-jobs-shell,
  .df-tech-home {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 100px !important;
  }
  .df-photo-grid,
  .df-job-summary-grid,
  .df-wo-grid,
  .df-material-entry,
  .df-step-action-stack {
    display: flex !important;
    flex-direction: column !important;
  }
  .btn, .df-guided-action-btn, .df-complete-btn, .df-upload-btn {
    width: 100%;
  }
  h1 { font-size: 1.5rem !important; }
}

@media (min-width: 1100px) {
  .content-body { max-width: 1400px; }
}

/* ---------- Login overlays (enterprise light; keep logo) ---------- */
.df-tech-login-overlay,
.df-login-overlay,
#login-overlay,
.login-overlay {
  background: #f5f7fa !important;
}

.df-login-flag {
  display: none !important;
}

.df-tech-login-card,
.df-login-card,
.login-card {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
}

.df-tech-login-title,
.df-login-title,
.login-card h1,
.login-card h2 {
  color: #111827 !important;
}

.df-login-title-door { color: #0f4c81 !important; }
.df-login-title-force { color: #dc2626 !important; }

.df-tech-login-subtitle,
.df-login-subtitle {
  color: #4b5563 !important;
}

.df-login-label,
.df-tech-login-field label {
  color: #374151 !important;
  font-size: 0.9rem !important;
}

.df-login-input,
.df-tech-login-field input,
.df-tech-login-panel input {
  background: #ffffff !important;
  border: 1.5px solid #9ca3af !important;
  color: #111827 !important;
  min-height: 48px !important;
  font-size: 17px !important;
}

.df-login-input:focus,
.df-tech-login-field input:focus {
  border-color: #0f4c81 !important;
}

.df-login-btn,
.df-tech-login-primary,
.df-tech-login-secondary {
  min-height: 48px !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

.df-login-btn-primary,
.df-tech-login-primary {
  background: #0f4c81 !important;
  border: 1px solid #0f4c81 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.df-login-btn-google,
.df-tech-login-secondary {
  background: #ffffff !important;
  border: 1px solid #9ca3af !important;
  color: #111827 !important;
}

.df-login-link,
.df-tech-login-link {
  color: #0f4c81 !important;
  min-height: 48px !important;
}

.df-login-error,
.df-tech-login-error {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.df-tech-login-tabs {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
}

.df-tech-login-tab {
  color: #4b5563 !important;
  min-height: 48px !important;
}

.df-tech-login-tab.active {
  background: #0f4c81 !important;
  color: #ffffff !important;
}

.df-tech-login-footer {
  color: #4b5563 !important;
}

.df-tech-home-brand {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08) !important;
}