:root {
  --brand-primary: #3a4b8d;
  --brand-primary-dark: #2c3a6e;
}

body {
  background: #f4f6fb;
}

.auth-page {
  background: linear-gradient(135deg, #eef1fb 0%, #f4f6fb 100%);
  min-height: 100vh;
}

.app-navbar {
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 70%);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.12);
  min-height: 58px;
}
.app-brand { gap: .55rem; margin-right: .75rem; font-weight: 700; letter-spacing: .2px; font-size: 1.05rem; }
.app-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; }
.app-brand-name { white-space: nowrap; max-width: 36vw; }
.app-brand-logo { background: #fff; border-radius: 10px; padding: 0; overflow: hidden; display: inline-flex; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.app-brand-logo img { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@media (max-width: 575.98px) { .app-brand-logo img { height: 34px; max-width: 110px; } .app-brand-name { max-width: 30vw; } }
.app-nav-btn { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.app-nav-btn:hover, .app-nav-btn:focus { color: #fff; background: rgba(255,255,255,.24); }
.app-search { max-width: 380px; }
.app-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.75); font-size: .85rem; pointer-events: none; }
.app-search-input.form-control { height: 38px; padding: 0 2.2rem 0 2.35rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: .9rem; transition: background .15s, box-shadow .15s; }
.app-search-input.form-control::placeholder { color: rgba(255,255,255,.72); }
.app-search-input.form-control:focus { background: #fff; color: #212529; border-color: #fff; box-shadow: 0 0 0 .22rem rgba(255,255,255,.28); }
.app-search-input.form-control:focus::placeholder { color: #8a90a0; }
.app-search:focus-within .app-search-icon { color: #6c7384; }
.app-search-hint { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.2); color: #fff; border-radius: 6px; padding: .05rem .4rem; font-size: .72rem; pointer-events: none; }
.app-search:focus-within .app-search-hint { display: none !important; }
.app-biz-chip { align-items: center; gap: .45rem; max-width: 220px; padding: .32rem .8rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); font-size: .84rem; white-space: nowrap; }
.app-biz-chip i { opacity: .85; font-size: .8rem; }
.app-user-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .22rem .6rem .22rem .25rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: .86rem; max-width: 220px; }
.app-user-btn:hover, .app-user-btn:focus-visible, .app-user-btn.show { background: rgba(255,255,255,.26); outline: 0; }
.app-user-name { max-width: 120px; }
.app-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #fff; color: var(--brand-primary); font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; }
.app-avatar-lg { width: 42px; height: 42px; flex-basis: 42px; font-size: .95rem; background: var(--brand-primary); color: #fff; }
.app-user-menu { min-width: 250px; padding: .4rem; border: 0; border-radius: 14px; margin-top: .55rem !important; }
.app-user-head { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; }
.app-user-menu .dropdown-item { border-radius: 8px; padding: .5rem .65rem; font-size: .9rem; }
.app-user-menu .dropdown-item i { width: 1.1rem; text-align: center; opacity: .75; }
.app-user-menu .dropdown-divider { margin: .3rem 0; }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) { .app-navbar { min-height: 54px; } .app-search { max-width: none; } }

.app-body {
  min-height: calc(100vh - 56px);
}

.app-sidebar {
  width: 230px;
  min-height: calc(100vh - 56px);
}

.app-sidebar .nav-link,
.offcanvas-body .nav-link {
  color: #333;
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
}

.app-sidebar .nav-link:hover,
.offcanvas-body .nav-link:hover {
  background: #eef1fb;
}

.app-sidebar .nav-link.active,
.offcanvas-body .nav-link.active {
  background: var(--brand-primary);
  color: #fff;
}

.app-content {
  flex: 1;
  padding: 1.5rem;
  min-width: 0; /* prevents flex children (esp. wide tables) from forcing page-wide horizontal scroll */
  overflow-x: hidden;
}

@media (max-width: 767.98px) {
  .app-content {
    padding: 1rem 0.75rem;
  }
}

/* Horizontally scrollable wrapper for content too wide to shrink (e.g. the printable invoice) */
.scroll-x-mobile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stat-card {
  border-left: 4px solid var(--brand-primary);
}

.stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(58, 75, 141, 0.1);
  color: var(--brand-primary);
}
.stat-card.stat-success { border-left-color: #198754; }
.stat-card.stat-success .stat-icon { background: rgba(25, 135, 84, 0.1); color: #198754; }
.stat-card.stat-danger { border-left-color: #dc3545; }
.stat-card.stat-danger .stat-icon { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.stat-card.stat-warning { border-left-color: #ffc107; }
.stat-card.stat-warning .stat-icon { background: rgba(255, 193, 7, 0.15); color: #b8860b; }
.stat-card.stat-info { border-left-color: #0dcaf0; }
.stat-card.stat-info .stat-icon { background: rgba(13, 202, 240, 0.12); color: #0aa2c0; }
.stat-card.stat-primary { border-left-color: var(--brand-primary); }

.dashboard-chart-card canvas {
  max-height: 280px;
}

.min-w-0 {
  min-width: 0;
}

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

.btn-primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

/* =====================================================================
   Responsive + mobile app layer
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, canvas, svg { max-width: 100%; }

/* Installed-app / notched-phone safe areas (needs viewport-fit=cover) */
.app-navbar,
.admin-navbar {
  padding-top: env(safe-area-inset-top);
  padding-left: max(0.5rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
  position: sticky; top: 0; z-index: 1030;
}
.auth-page { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.app-sidebar { position: sticky; top: 56px; align-self: flex-start; max-height: calc(100vh - 56px); overflow-y: auto; }
.offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
  /* 16px inputs stop iOS Safari zooming in on focus; taller tap targets */
  .form-control, .form-select, .input-group-text { font-size: 16px; min-height: 42px; }
  .form-control-sm, .form-select-sm { font-size: 16px; min-height: 36px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .dropdown-item { padding: .6rem 1rem; }
  .nav-link, .offcanvas-body .nav-link { padding-top: .7rem; padding-bottom: .7rem; }

  /* Page headings with action buttons wrap instead of overflowing */
  .app-content > .d-flex.justify-content-between,
  .app-content .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
  .app-content h4 { font-size: 1.15rem; }
  .app-content .card-body { padding: .85rem; }

  /* Wide tables inside cards scroll sideways rather than stretching the page */
  .card-body:has(> table), .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table > :not(caption) > * > * { padding: .5rem .5rem; }
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Modals use the full width, forms inside scroll */
  .modal-dialog { margin: .5rem; }
  .modal-dialog-scrollable .modal-body { -webkit-overflow-scrolling: touch; }

  /* Global search: results span the whole screen width under the navbar */
  #globalSearchResults {
    position: fixed !important; left: 8px; right: 8px; width: auto !important;
    top: calc(env(safe-area-inset-top) + 54px) !important;
    max-height: 60vh !important;
  }

  /* Document line-item editor: each row becomes a compact card */
  #itemsTable { min-width: 0 !important; table-layout: auto !important; }
  #itemsTable thead { display: none; }
  #itemsTable, #itemsTable tbody { display: block; width: 100%; }
  #itemsTable tr.item-row {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem;
    padding: .75rem; margin-bottom: .75rem;
    border: 1px solid #dfe3ee; border-radius: .6rem; background: #fff;
  }
  #itemsTable td { display: block; padding: 0; border: 0; width: auto !important; grid-column: span 2; min-width: 0; }
  #itemsTable td:has(.item-select), #itemsTable td:has(.spec-input) { grid-column: 1 / -1; }
  #itemsTable td.tax-col.d-none, #itemsTable td.tax-col[style*="display: none"] { display: none; }
  #itemsTable td.amount-cell { grid-column: span 4; align-self: center; font-weight: 700; text-align: left !important; }
  #itemsTable td:has(.remove-row-btn) { grid-column: span 2; text-align: right; }
  #itemsTable td:has(.qty-input)::before,
  #itemsTable td:has(.rate-input)::before,
  #itemsTable td:has(.tax-input)::before {
    display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; margin-bottom: 2px;
  }
  #itemsTable td:has(.qty-input)::before { content: "Qty"; }
  #itemsTable td:has(.rate-input)::before { content: "Rate"; }
  #itemsTable td:has(.tax-input)::before { content: "Tax %"; }
  #itemsTable td.amount-cell::before { content: "Amount  "; font-size: .7rem; font-weight: 600; text-transform: uppercase; color: #6b7280; }

  /* Totals boxes: a little tighter */
  .app-content .fs-5 { font-size: 1.05rem !important; }

  /* Sticky save bar for long forms */
  .stat-card .fs-4, .stat-card .h4 { font-size: 1.15rem !important; }
  .dashboard-chart-card canvas { max-height: 220px; }
}

/* ---------- Small tablets ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .app-content { padding: 1.25rem; }
}

/* Never print the app chrome */
@media print {
  .app-navbar, .app-sidebar, .offcanvas { display: none !important; }
}

/* Installed (standalone) app: no text selection on chrome, smoother taps */
@media (display-mode: standalone) {
  .app-navbar { -webkit-user-select: none; user-select: none; }
  body { overscroll-behavior-y: contain; }
}

/* Dashboard stat cards on phones: drop the icon and let labels/values use the full card */
@media (max-width: 575.98px) {
  .stat-card .stat-icon { display: none; }
  .stat-card .card-body { padding: .7rem .75rem !important; }
  .stat-card .text-truncate { white-space: normal; overflow: visible; text-overflow: clip; }
  .stat-card .small { font-size: .74rem; line-height: 1.2; }
  .stat-card .fs-5 { font-size: 1.02rem !important; overflow-wrap: anywhere; }
}

/* Phones: list tables keep each cell on one line and scroll sideways, instead of squashing into 1-word columns */
@media (max-width: 767.98px) {
  .table-responsive > .table:not(#itemsTable) th,
  .table-responsive > .table:not(#itemsTable) td,
  .card:has(> table.table) > table.table th,
  .card:has(> table.table) > table.table td { white-space: nowrap; }
}

/* Action-button rows on document view pages wrap on small screens */
.app-content .d-flex.gap-2:has(> .btn) { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .app-content .no-print > .d-flex.gap-2:not(.align-items-center) { width: 100%; }
  .app-content .no-print > .d-flex.gap-2:not(.align-items-center) > .btn { flex: 1 1 auto; white-space: nowrap; }
}

/* "Business" submenu chevron + plan card */
.nav-chevron { transition: transform .15s; }
[aria-expanded="true"] > .nav-chevron { transform: rotate(180deg); }
.plan-status-card { background: var(--bs-tertiary-bg, #f8f9fa); }