/* Project-specific additions only */

/* Shrink receipt thumbnails in the table */
.receipt-thumb { max-width: 100px; }

/* Mobile optimizations */
@media (max-width: 576px) {
  .receipt-thumb { max-width: 64px; }
  /* Make filter row wrap nicely */
  .filters-row { flex-wrap: wrap; gap: .5rem; }
  .filters-row form { flex-wrap: wrap; gap: .5rem; }
  .filters-row label { white-space: nowrap; }
  .filters-row .form-control, .filters-row .form-select { min-width: 8.5rem; }
  /* Reduce input widths in table */
  table input[type="number"].form-control-sm { width: 5rem !important; }
  table input[type="month"].form-control-sm { width: 9rem !important; }
  /* Make filter actions jump below on small screens */
  .filters-row .filter-actions { flex-basis: 100%; display: flex; gap: .5rem; margin-top: .25rem; }
}

/* Hide number input spinners for custom UX */
input.no-spinner { -moz-appearance: textfield; }
input.no-spinner::-webkit-outer-spin-button,
input.no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Navbar hamburger dropdown matching screenshot style */
.menu-toggle { padding: .4rem .55rem; border-radius: .6rem; line-height: 1; }
.menu-toggle .navbar-toggler-icon { width: 1.25rem; height: 1.25rem; }
.menu-panel { min-width: 16rem; border-radius: .6rem; }
.menu-panel .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; font-size: 1.05rem; border-radius: .5rem; }
.menu-panel .dropdown-item + .dropdown-item { margin-top: .15rem; }

/* Ensure responsive wrappers and tables use full available width */
.table-responsive { width: 100% !important; }
.table { width: 100% !important; table-layout: auto; }

/* Tighter table cell padding on very small screens */
@media (max-width: 576px) {
  .table > :not(caption) > * > * { padding: .35rem .5rem; }
}

/* Subtle page-wide watermark; add your logo to static/logo.png (transparent PNG) */
.watermark-bg { position: relative; }
.watermark-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/static/logo.png") center center no-repeat;
  background-size: 40%;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

/* Keep the main navbar consistently at the top */
#main-navbar {
  z-index: 1030;
}
body { padding-top: 4.5rem; padding-bottom: 3.5rem; }
.app-footer { z-index: 1020; }
.toast-container { bottom: 3.75rem; }

/* Make cards slightly transparent so watermark shines through */
.card {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.15);
}
.card .card-body { background-color: transparent !important; }

/* Make tables translucent via Bootstrap variables; keeps .table-success/.table-striped working */
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-active-bg: rgba(255, 255, 255, 0.08);
}
.table thead th {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
.table > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Wizard: only highlight booked rows in green (avoid green zebra striping). */
.wizard-table.table-striped > tbody > tr:not(.table-success):nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.04);
}
.wizard-table.table-striped > tbody > tr:not(.table-success):nth-of-type(even) > * {
  background-color: transparent;
}
.wizard-table tr.table-success {
  --bs-table-bg: rgba(195, 247, 196, 0.85);
  --bs-table-striped-bg: rgba(195, 247, 196, 0.85);
  --bs-table-hover-bg: rgba(195, 247, 196, 0.92);
  --bs-table-active-bg: rgba(195, 247, 196, 0.92);
  --bs-table-color: #0a210a;
}
.wizard-table tr.table-success .form-select,
.wizard-table tr.table-success .form-control {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(10, 33, 10, 0.25);
  color: #0a210a;
}
.wizard-table tr.table-success .form-select:focus,
.wizard-table tr.table-success .form-control:focus {
  border-color: rgba(10, 33, 10, 0.4);
  box-shadow: 0 0 0 0.2rem rgba(10, 33, 10, 0.15);
}

/* Reisekosten Statusfarben (kräftiger als Bootstrap Defaults) */
tbody tr.trip-row-status-submitted > * { background-color: #c3f7c4 !important; color: #0a210a !important; }
tbody tr.trip-row-status-approved  > * { background-color: #c6d7ff !important; color: #0a1a3a !important; }
tbody tr.trip-row-status-rejected  > * { background-color: #f9c7c7 !important; color: #4a0a0a !important; }
tbody tr.trip-row-status-reimbursed> * { background-color: #e3e3ea !important; color: #1f1f2b !important; }
tbody tr.trip-row-status-draft     > * { background-color: #ffe2b8 !important; color: #4a2a00 !important; }

/* Dashboard tiles */
.dash-card { border: none; border-radius: 16px; }
.dash-icon { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; }
.dash-icon.travel { background: linear-gradient(135deg, #d1e9ff, #a6c8ff); }
.dash-icon.card { background: linear-gradient(135deg, #ffe8d9, #ffcca3); }
.dash-icon.admin { background: linear-gradient(135deg, #e9e3ff, #c9b9ff); }