/* ===========================
   GLOBAL THEME VARIABLES
=========================== */
:root {
  --app-bg: #020617; /* overall background */
  --app-bg-soft: #030712;
  --app-surface: #020617; /* cards, tiles, modals */
  --app-surface-soft: #020617;
  --app-border: #1f2937;

  --app-text: #f9fafb; /* bright main text */
  --app-text-muted: #d1d5db; /* brighter muted text */

  --app-green: #16a34a; /* primary button green */
  --app-green-soft: #22c55e; /* lighter hover / accents */
  --app-green-dark: #166534; /* deeper hover */

  --app-danger: #ef4444;
}

/* ===========================
   BASE / BODY
=========================== */
body {
  background: radial-gradient(circle at top, #111827 0, #020617 45%, #000 100%);
  color: var(--app-text);
}

/* Fix Bootstrap's bg-light on dark theme */
.bg-light {
  background-color: var(--app-bg-soft) !important;
  color: var(--app-text);
}

/* ===========================
   TYPOGRAPHY & LINKS
=========================== */
body,
.btn,
.form-control,
.form-select,
.table {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a {
  color: var(--app-green-soft);
  text-decoration: none;
}
a:hover {
  color: var(--app-green);
  text-decoration: underline;
}

/* Make muted text actually readable on dark */
.text-muted {
  color: var(--app-text-muted) !important;
  opacity: 0.95;
}

/* ===========================
   NAVBAR
=========================== */
.navbar,
.navbar-dark,
.navbar.bg-dark {
  background-color: #020617 !important;
  border-bottom: 1px solid var(--app-border);
}

.navbar-brand,
.nav-link,
.navbar-text {
  color: var(--app-text-muted) !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--app-green-soft) !important;
}

/* ===========================
   CARDS / TILES
=========================== */
.card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.card .card-title {
  color: #ffffff;
}

/* Tile buttons (job view tiles) */
.btn.btn-light {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.btn.btn-light:hover {
  background-color: #111827;
  border-color: #374151;
  color: var(--app-text);
}

/* ===========================
   BUTTONS
=========================== */
/* Primary – dark green */
.btn-primary,
.btn-success {
  background-color: var(--app-green);
  border-color: var(--app-green-dark);
  color: #e5e7eb;
}

.btn-primary:hover,
.btn-success:hover {
  background-color: var(--app-green-dark);
  border-color: #14532d;
  color: #f9fafb;
}

/* Outline primary */
.btn-outline-primary {
  color: var(--app-green-soft);
  border-color: var(--app-green-soft);
}

.btn-outline-primary:hover {
  background-color: var(--app-green-soft);
  border-color: var(--app-green-soft);
  color: #0b1120;
}

/* Outline secondary */
.btn-outline-secondary {
  color: var(--app-text-muted);
  border-color: var(--app-border);
}

.btn-outline-secondary:hover {
  color: var(--app-text);
  border-color: #4b5563;
  background-color: #111827;
}

/* Danger */
.btn-danger {
  background-color: var(--app-danger);
  border-color: #b91c1c;
}

/* ===========================
   FORMS
=========================== */
.form-control,
.form-select {
  background-color: #020617 !important;
  border: 1px solid #374151;
  color: var(--app-text) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #020617 !important;
  border-color: var(--app-green-soft);
  box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.25);
  color: var(--app-text) !important;
}

.form-control::placeholder {
  color: #6b7280;
}

/* Form text / muted help text */
.form-text {
  color: var(--app-text-muted);
}

/* ===========================
   TABLES – FULL DARK THEME
=========================== */
.table {
  color: var(--app-text);
  background-color: transparent;
  border-color: var(--app-border);
}

/* Header row */
.table thead {
  background-color: #020617;
}

.table thead th {
  background-color: #020617 !important; /* override Bootstrap white header */
  color: #e5e7eb;
  border-bottom-color: var(--app-border);
}

/* Cells */
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--app-border);
}

/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #020617;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #030712;
}

/* Hover state */
.table-hover > tbody > tr:hover > * {
  background-color: #111827;
}

/* Table footer */
.table-secondary {
  background-color: #111827 !important;
  color: var(--app-text);
}

/* ===========================
   BADGES
=========================== */
.badge {
  border-radius: 999px;
}

/* Subtle success/green badges */
.bg-success-subtle {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: var(--app-green-soft) !important;
}

/* Subtle secondary */
.bg-secondary-subtle {
  background-color: rgba(148, 163, 184, 0.15) !important;
  color: #e5e7eb !important;
}

/* Subtle danger */
.bg-danger-subtle {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #fecaca !important;
}

/* ===========================
   MODALS
=========================== */
.modal-content {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.modal-header {
  border-bottom-color: var(--app-border);
}

.modal-footer {
  border-top-color: var(--app-border);
}

/* Backdrop a bit darker */
.modal-backdrop.show {
  opacity: 0.85;
}

/* Make modal close buttons white for better visibility */
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.btn-close:hover {
  opacity: 1;
}

/* ===========================
   NAV TABS — dark theme
=========================== */
.nav-tabs {
  border-bottom-color: var(--app-border);
}
.nav-tabs .nav-link {
  color: #94a3b8;
  border-color: transparent;
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--app-text);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.05);
}
.nav-tabs .nav-link.active {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
}

/* table-light override for dark theme (used in tfoot) */
.table-light,
.table-light > * > * {
  background-color: #111827 !important;
  color: var(--app-text) !important;
}

/* Past equipment bookings — dimmed row */
tr.booking-past > td {
  background-color: rgba(148, 163, 184, 0.05) !important;
  color: #6b7280 !important;
}

/* ===========================
   ALERTS
=========================== */
.alert {
  border-radius: 0.75rem;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

.alert-success {
  background-color: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.5);
  color: #bbf7d0;
}

.alert-warning {
  background-color: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.5);
  color: #facc15;
}

/* ===========================
   MISC
=========================== */
/* Make shadow-sm a bit more visible on dark */
.shadow-sm {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45) !important;
}

/* List-group on dark */
.list-group-item {
  background-color: #020617;
  border-color: #111827;
  color: var(--app-text);
}

/* Horizontal rule */
hr {
  border-color: var(--app-border);
}
/* Force all table text to be light on dark background */
.table,
.table th,
.table td {
  color: var(--app-text) !important;
}
.app-section-header {
  background: var(--app-bg-soft, #18181c);
  color: var(--app-text, #f2f2f5);
  border: 1px solid var(--app-border, #2a2a30);
  border-radius: 0.6rem 0.6rem 0 0;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.app-section-header .section-chevron {
  transition: transform 0.2s ease;
}

.app-section-header.collapsed .section-chevron {
  transform: rotate(180deg);
}

.app-section-body {
  background: var(--app-card-bg, #1c1c22);
  border: 1px solid var(--app-border, #2a2a30);
  border-top: none;
  border-radius: 0 0 0.6rem 0.6rem;
}

#addTaskCollapse .card.app-card {
  background: var(--app-card-bg, #1c1c22);
}

/* ================================
   Job view – section + accordion styling
   ================================ */

/* Generic app section header (if used in components) */
.app-section-header {
  background: var(--app-bg-soft, #18181c);
  color: var(--app-text, #f2f2f5);
  border: 1px solid var(--app-border, #2a2a30);
  border-radius: 0.6rem 0.6rem 0 0;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.app-section-header .section-chevron {
  transition: transform 0.2s ease;
}

.app-section-header.collapsed .section-chevron {
  transform: rotate(180deg);
}

.app-section-body {
  background: var(--app-card-bg, #1c1c22);
  border: 1px solid var(--app-border, #2a2a30);
  border-top: none;
  border-radius: 0 0 0.6rem 0.6rem;
}

/* Make accordion titles in all job modals stand out clearly */
#tasksModal .accordion-item,
#materialsModal .accordion-item,
#labourModal .accordion-item,
#equipmentModal .accordion-item,
#hireModal .accordion-item,
#faultsModal .accordion-item,
#machineryModal .accordion-item {
  background: transparent;
  border: 1px solid var(--app-border, #2a2a30);
  border-radius: 0.7rem;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

#tasksModal .accordion-button,
#materialsModal .accordion-button,
#labourModal .accordion-button,
#equipmentModal .accordion-button,
#hireModal .accordion-button,
#faultsModal .accordion-button,
#machineryModal .accordion-button {
  background: var(--app-bg-soft, #18181c);
  color: var(--app-text, #f2f2f5);
  font-weight: 600;
  border-bottom: 1px solid var(--app-border, #2a2a30);
}

#tasksModal .accordion-body,
#materialsModal .accordion-body,
#labourModal .accordion-body,
#equipmentModal .accordion-body,
#hireModal .accordion-body,
#faultsModal .accordion-body,
#machineryModal .accordion-body {
  background: var(--app-card-bg, #1c1c22);
}

/* Job cost report accordion – dark theme */
#jobCostAccordion .accordion-item {
  background: var(--app-bg-soft, #18181c);
  border-color: var(--app-border, #2a2a35) !important;
}
#jobCostAccordion .accordion-button {
  background: var(--app-bg-soft, #18181c);
  color: var(--app-text, #f1f5f9);
}
#jobCostAccordion .accordion-button:not(.collapsed) {
  background: var(--app-surface, #020617);
  color: var(--app-text, #f1f5f9);
}
#jobCostAccordion .accordion-body {
  background: var(--app-surface, #020617);
  color: var(--app-text, #f1f5f9);
}

/* Global accordion tweak – remove glow */
.accordion-button:not(.collapsed) {
  box-shadow: none;
}
/* Dashboard tiles – make app cards fill the column height */
.app-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-card .card-body {
  flex: 1 1 auto;
}
/* Job card status borders */
.job-card-upcoming {
  border-color: #e5e7eb !important; /* soft white */
}

.job-card-inprogress {
  border-color: var(--app-green-soft) !important;
}

.job-card-late {
  border-color: var(--app-danger) !important;
}
/* Inline Tasks – completed rows nice green highlight */
#tasksTable tbody tr.task-complete > td {
  background-color: rgba(25, 135, 84, 0.18) !important; /* soft green */
  transition: background-color 0.2s ease-in-out;
}

#tasksTable tbody tr.task-complete:hover > td {
  background-color: rgba(
    25,
    135,
    84,
    0.28
  ) !important; /* a bit brighter on hover */
}
/* Inline tasks table – action buttons layout */
#tasksTable .task-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap; /* keep buttons on one line */
}

#tasksTable .task-actions .btn {
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
}

/* On small screens: shrink "Assigned to" + "Due", grow Actions column */
@media (max-width: 576px) {
  #tasksTable th:nth-child(1),
  #tasksTable td:nth-child(1) {
    width: 18%;
    font-size: 0.8rem;
  }

  #tasksTable th:nth-child(3),
  #tasksTable td:nth-child(3) {
    width: 12%;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  #tasksTable th:nth-child(4),
  #tasksTable td:nth-child(4) {
    width: 40%;
  }

  #tasksTable .task-actions .btn {
    padding: 0.3rem 0.45rem;
    font-size: 0.75rem;
  }
}

/* ===========================
   MOBILE USABILITY FIXES
=========================== */

/* Touch target minimum sizes (44x44px) */
.btn {
  min-height: 44px;
  min-width: 44px;
}

.btn-sm {
  min-height: 36px;
  min-width: 36px;
}

/* Mobile card actions - always visible */
@media (max-width: 768px) {
  .card .mt-auto {
    margin-top: 0 !important;
  }

  .card-footer {
    display: flex !important;
    background-color: var(--app-surface);
    border-top: 1px solid var(--app-border);
    padding: 0.75rem;
  }

  .card-footer .btn {
    flex: 1;
    margin: 0 0.25rem;
  }
}

/* Spacing between action buttons in table rows */
.table .btn-group {
  gap: 0.25rem;
}

/* Mobile table card view */
.mobile-card-view {
  display: none;
}

@media (max-width: 768px) {
  #jobTasksPanel .table-responsive,
  #equipmentUsageModal .table-responsive,
  #tasksModal .table-responsive,
  #labourModal .table-responsive,
  #materialsModal .table-responsive,
  #hireModal .table-responsive,
  #faultsModal .table-responsive {
    display: none;
  }

  .mobile-card-view {
    display: block;
  }

  .mobile-card {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .mobile-card-title {
    font-weight: 600;
    color: var(--app-text);
    margin: 0;
  }

  .mobile-card-meta {
    font-size: 0.875rem;
    color: var(--app-text-muted);
  }

  .mobile-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .mobile-card-actions .btn {
    flex: 1;
    min-height: 40px;
  }

  .mobile-card.booking-past {
    opacity: 0.55;
    border-left: 3px solid #374151;
  }
}

/* Mobile search input */
@media (max-width: 576px) {
  .form-control[style*="min-width"] {
    min-width: auto !important;
  }
}

/* ===================================================
   MOBILE APP ENHANCEMENTS
   =================================================== */

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Reduce top padding on mobile (sticky header takes space) */
@media (max-width: 767px) {
  .container.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* Sticky mobile job header */
.mobile-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mobile-sticky-header .job-title-header {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Bottom tab bar */
.mobile-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}

.mobile-tab-bar .tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  border: none;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 0.65rem;
  gap: 0.15rem;
  min-height: 56px;
  cursor: pointer;
  transition: color 0.15s;
}

.mobile-tab-bar .tab-btn i {
  font-size: 1.3rem;
}

.mobile-tab-bar .tab-btn.tab-primary { color: var(--bs-primary); }
.mobile-tab-bar .tab-btn.tab-danger  { color: var(--bs-danger);  }
.mobile-tab-bar .tab-btn.tab-success { color: var(--bs-success); }
.mobile-tab-bar .tab-btn.tab-warning { color: var(--bs-warning); }

/* Mobile card status left border */
.mobile-card[data-status="open"]     { border-left: 4px solid var(--bs-warning); }
.mobile-card[data-status="complete"] { border-left: 4px solid var(--bs-success); }

/* Larger tap targets for mobile card actions */
.mobile-card-actions .btn {
  min-height: 48px;
}

/* Fullscreen modals — remove rounded corners */
@media (max-width: 575px) {
  .modal-fullscreen-sm-down .modal-content {
    border-radius: 0;
  }
}

/* ===========================
   MATERIAL AUTOCOMPLETE
=========================== */
.mat-ac-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1080;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}
.mat-ac-list.show { display: block; }
.mat-ac-list li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--app-border);
}
.mat-ac-list li:last-child { border-bottom: none; }
.mat-ac-list li:hover,
.mat-ac-list li.ac-active { background: rgba(255,255,255,0.07); }
.mat-ac-list .ac-supplier {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  margin-top: 0.1rem;
}

/* ===========================
   INVOICE — MOBILE
=========================== */

/* Extra-small text utility */
.x-small {
  font-size: 0.72rem;
}

/* Bottom padding so sticky footer doesn't overlap last card */
.inv-page-wrap {
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .inv-page-wrap {
    padding-bottom: 1.5rem;
  }
}

/* Individual line-item card on mobile */
.inv-mob-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--app-border);
}
.inv-mob-item:last-child {
  border-bottom: none;
}

.inv-mob-item .inv-mob-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-text-muted);
  margin-bottom: 0.25rem;
  display: block;
}

.inv-mob-item .inv-mob-meta {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  margin-top: 0.1rem;
}

.inv-mob-item .inv-mob-rate {
  font-size: 0.75rem;
  color: var(--app-text-muted);
  white-space: nowrap;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.inv-mob-item .inv-mob-line-total {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--app-text-muted);
  text-align: right;
}

/* Bigger inputs on mobile for easier tapping */
@media (max-width: 767px) {
  .inv-mob-item .form-control,
  .inv-mob-item .input-group-text {
    font-size: 1rem;
    min-height: 44px;
  }
}

/* Sticky save/send bar at bottom on mobile */
.inv-mob-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
}

.inv-mob-footer-total {
  line-height: 1.2;
}