:root {
  --azar-navy: #021c42;
  --azar-navy-light: #0a2c5c;
  --azar-gold: #e2c05c;
  --azar-cream: #f7f1e3;
  --azar-teal: #2f6f6b;
}

body {
  background-color: #f5f6f8;
  margin: 0;
}

.card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.table-actions a,
.table-actions button {
  margin-right: 0.25rem;
}

.line-items-table {
  table-layout: fixed;
  /* Bootstrap's .table sets width:100%, which combined with table-layout:
     fixed would otherwise squeeze the unset-width Description column to
     nothing on a narrow screen instead of letting the table overflow its
     .table-responsive wrapper and scroll horizontally. */
  min-width: 520px;
}

.line-items-table input,
.line-items-table select {
  width: 100%;
}

/* Floating textarea a description field expands into on double-click —
   see the dblclick handler in invoices/form.ejs. Positioned in JS to sit
   right over the field it came from. */
/* Timesheet status dropdown on the Timesheets history table — tinted to
   match the badge colors used elsewhere for the same statuses. */
.status-select {
  width: auto;
  font-weight: 600;
}

.status-select.status-pending {
  background-color: #e9ecef;
}

.status-select.status-checked {
  background-color: #cfe2ff;
}

.status-select.status-invoiced {
  background-color: #d1e7dd;
}

.description-expand {
  position: absolute;
  z-index: 2000;
  height: 160px;
  resize: vertical;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--azar-navy);
}

/* --- Sidebar layout --- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--azar-navy);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo img {
  max-width: 100%;
  max-height: 90px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
}

.sidebar-nav a i {
  font-size: 1.05rem;
  width: 1.2em;
  text-align: center;
}

.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

.sidebar-nav a.active {
  background: rgba(226, 192, 92, 0.14);
  border-left-color: var(--azar-gold);
  color: var(--azar-gold);
  font-weight: 600;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-user {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  word-break: break-all;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 48px;
}

/* --- Mobile top bar + off-canvas sidebar ---
   Hidden entirely above the breakpoint; below it, the sidebar becomes a
   slide-in panel toggled by a hamburger button in a fixed top bar. */

.mobile-topbar {
  display: none;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .app-shell {
    display: block;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--azar-navy);
    color: #fff;
    padding: 12px 16px;
  }

  .mobile-topbar img {
    max-height: 32px;
  }

  .mobile-topbar-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1060;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-nav {
    flex-direction: column;
  }

  .main-content {
    padding: 20px;
  }
}

/* --- Page hero: full-bleed cream band flush with the sidebar and top edge.
   Used at the top of every main section (dashboard, invoices, customers,
   timesheets, payments, expenses, settings, …) so they share one look. --- */

.page-hero {
  background: var(--azar-cream);
  border-bottom: 3px solid var(--azar-gold);
  margin: -28px -32px 24px;
  padding: 24px 32px 26px;
}

.page-hero label {
  color: var(--azar-navy);
  opacity: 0.75;
}

.page-hero-apply-btn {
  background: var(--azar-gold);
  border: none;
  color: var(--azar-navy);
  font-weight: 600;
}

.page-hero-apply-btn:hover {
  background: #d6ac3d;
  color: var(--azar-navy);
}

.dashboard-stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.stat-tile {
  flex: 1 1 160px;
  border-radius: 10px;
  padding: 8px 22px;
  color: white;
  background: var(--azar-teal);
}

.btn-timesheet-client {
  background: var(--azar-teal);
  border-color: var(--azar-teal);
  color: #fff;
}

.btn-timesheet-client:hover {
  background: #264f4c;
  border-color: #264f4c;
  color: #fff;
}

.stat-tile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-bottom: 2px;
}

.stat-tile-value {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .page-hero {
    margin: -20px -20px 20px;
    padding: 20px;
  }
}

/* --- Brand accents on buttons/links to tie into the navy/gold theme --- */

.btn-primary {
  background-color: var(--azar-navy);
  border-color: var(--azar-navy);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--azar-navy-light);
  border-color: var(--azar-navy-light);
}

.btn-outline-primary {
  color: var(--azar-navy);
  border-color: var(--azar-navy);
}

.btn-outline-primary:hover {
  background-color: var(--azar-navy);
  border-color: var(--azar-navy);
}

a {
  color: var(--azar-navy-light);
}