/* ════════════════════════════════════════════════════════════════
   PROJECT & INVOICE TRACKER — Luxury 2026 Design System
   Dark · Glassmorphism · Depth · Motion
   NOTE: ancestors of .xf-dropdown / fixed elements (#page-content,
   main, #section-invoices, #section-invoices .card) must NOT use
   transform / filter / backdrop-filter (would break fixed dropdowns).
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Brand / accent — Blue & White */
  --accent:        #2563eb;
  --accent-2:      #1e3a8a;
  --accent-3:      #1d9bf0;
  --accent-grad:   linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #1d9bf0 100%);
  --accent-glow:   rgba(37, 99, 235, 0.30);

  /* Surfaces */
  --bg-0:          #eef3fb;
  --bg-1:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #eef3fb;
  --surface-strong:#ffffff;
  --border:        rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);

  /* Text */
  --text:          #0f172a;
  --text-soft:     #334155;
  --text-muted:    #4b5a70;

  /* Status */
  --success:       #059669;
  --warning:       #d97706;
  --danger:        #dc2626;
  --info:          #0284c7;

  /* FX */
  --radius:        18px;
  --radius-sm:     12px;
  --shadow-1:      0 1px 2px rgba(15,23,42,0.05), 0 6px 20px rgba(15,23,42,0.07);
  --shadow-2:      0 18px 50px rgba(15,23,42,0.16);
  --shadow-glow:   0 10px 36px -10px var(--accent-glow);
  --topbar-height: 64px;
  --primary:       var(--accent);
}

* { box-sizing: border-box; }

html, body { background: var(--bg-0); }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* ── Animated aurora / mesh background (fixed layer, behind everything) ── */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(168,85,247,0.16), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(34,211,238,0.10), transparent 55%),
    var(--bg-0);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.app-bg .aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.app-bg .a1 { width: 46vw; height: 46vw; left: -8vw;  top: -10vw; background: radial-gradient(circle, #6366f1, transparent 70%); animation: drift1 24s ease-in-out infinite; }
.app-bg .a2 { width: 40vw; height: 40vw; right: -6vw; top: 4vw;   background: radial-gradient(circle, #a855f7, transparent 70%); animation: drift2 28s ease-in-out infinite; }
.app-bg .a3 { width: 38vw; height: 38vw; left: 30vw;  bottom: -16vw; background: radial-gradient(circle, #22d3ee, transparent 70%); animation: drift3 32s ease-in-out infinite; }

/* faint grid for depth */
.app-bg .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 4vw) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw, 5vw) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw, -5vw) scale(1.15); } }

/* ── Scrollbars ── */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: content-box; }

#main-wrapper { min-height: 100vh; }

/* ════════════════ TOPBAR (frosted) ════════════════ */
#topbar {
  min-height: var(--topbar-height);
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

#topbar .brand { color: #fff; white-space: nowrap; }
#topbar .brand i {
  font-size: 1.4rem;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px var(--accent-glow));
}
#topbar .brand .brand-name {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #fff, #c7d2fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#topbar #nav-toggle { background: rgba(255,255,255,0.08); color: #fff; }

#topbar .main-nav { flex-direction: row; gap: 0.35rem; margin: 0 0 0 1.75rem; }

#topbar .main-nav .nav-link {
  color: var(--text-soft);
  padding: 0.5rem 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 12px;
  position: relative;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
#topbar .main-nav .nav-link i { font-size: 1.05rem; transition: transform 0.2s; }
#topbar .main-nav .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; transform: translateY(-1px); }
#topbar .main-nav .nav-link:hover i { transform: scale(1.12); }
#topbar .main-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(168,85,247,0.28));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 6px 18px -6px var(--accent-glow);
}

#topbar #user-name { color: #fff; }
#topbar .badge.bg-primary {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 500;
}
#user-avatar {
  background: var(--accent-grad) !important;
  box-shadow: 0 4px 14px -2px var(--accent-glow);
}
#topbar .btn-outline-secondary {
  color: #dfe3f1;
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.04);
}
#topbar .btn-outline-secondary:hover { background: rgba(255,255,255,0.12); border-color: var(--border-strong); color: #fff; }

#page-content { padding: 0.9rem 2.25rem 0.25rem; }

/* ── Section show/hide + entrance ── */
.page-section { display: none; }
.page-section.active { display: block; }

#section-home.active { animation: fadeUp 0.5s cubic-bezier(.2,.8,.2,1) both; }
/* invoices section: opacity-only (no transform — protects fixed dropdowns) */
#section-invoices.active { animation: fadeIn 0.45s ease both; }
#section-form.active { animation: fadeIn 0.4s ease both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseCard { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; } }

/* ════════════════ STAT CARDS ════════════════ */
.stat-card,
#section-home .stat-card.card.bg-white {
  border: 1px solid var(--border) !important;
  border-radius: 20px;
  padding: 1.4rem 1.55rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-1) !important;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 0.3s, border-color 0.3s;
  animation: riseCard 0.6s cubic-bezier(.2,.8,.2,1) both;
}
.row > [class*="col"]:nth-child(1) .stat-card { animation-delay: 0.04s; }
.row > [class*="col"]:nth-child(2) .stat-card { animation-delay: 0.10s; }
.row > [class*="col"]:nth-child(3) .stat-card { animation-delay: 0.16s; }
.row > [class*="col"]:nth-child(4) .stat-card { animation-delay: 0.22s; }
.row > [class*="col"]:nth-child(5) .stat-card { animation-delay: 0.28s; }

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at var(--mx, 70%) var(--my, 0%), rgba(255,255,255,0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.stat-card:hover { box-shadow: var(--shadow-2), var(--shadow-glow) !important; border-color: var(--border-strong) !important; }
.stat-card:hover::before { opacity: 1; }

.stat-card .fs-3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 2rem !important;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 18px rgba(124,131,255,0.25);
}
.stat-card .text-muted {
  text-transform: uppercase;
  font-size: 0.66rem !important;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-muted) !important;
}
.stat-card .icon-box {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem;
  color: #fff !important;
  flex-shrink: 0;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateZ(30px);
}
.stat-card .icon-box.text-info    { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; }
.stat-card .icon-box.text-success { background: linear-gradient(135deg, #34d399, #059669) !important; }
.stat-card .icon-box.text-danger  { background: linear-gradient(135deg, #fb7185, #e11d48) !important; }
.stat-card .icon-box.text-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; }

/* ════════════════ CARDS (generic) ════════════════ */
.card {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.card.bg-white { background: var(--surface-strong) !important; }

/* Dashboard cards may be fully frosted (no fixed descendants) */
#section-home .card {
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  overflow: hidden;
  animation: riseCard 0.55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 0.18s;
}
#section-home .card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--border-strong); }

.card-header,
#section-home .card-header,
.card-header.bg-white {
  background: rgba(255,255,255,0.03) !important;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
}

/* colour identity per dashboard panel (keyed off header icon colour) */
#section-home .card-header:has(> i.text-danger)  { box-shadow: inset 3px 0 0 #e11d48; }
#section-home .card-header:has(> i.text-warning) { box-shadow: inset 3px 0 0 #f59e0b; }
#section-home .card-header:has(> i.text-success) { box-shadow: inset 3px 0 0 #059669; }

/* ════════════════ TABLES ════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-soft);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(124,131,255,0.06);
  --bs-table-hover-color: inherit;
  color: var(--text-soft);
  margin-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}
.table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.875rem 0.75rem;
}
.table td {
  vertical-align: middle;
  border-color: var(--border);
  font-size: 0.9rem;
  padding: 1rem 0.75rem;
  font-weight: 500;
}
.table > :not(caption) > * > * { background-color: transparent; }

.table-light,
.table thead.table-light th,
.table .table-light th {
  background: rgba(255,255,255,0.035) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

#section-home .table thead th {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
#section-home .table tbody tr { transition: background 0.15s ease; }
#section-home .table tbody tr:hover td { background: rgba(124,131,255,0.08); }
#section-home .table td { border-color: rgba(255,255,255,0.05); color: var(--text-soft); }
#section-home .table .fw-semibold { color: var(--text); }

/* ════════════════ INVOICES TOOLBAR ════════════════ */
.todo-toolbar {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.4rem 0.7rem;
  position: sticky;
  top: calc(var(--topbar-height) + 6px);
  z-index: 1020;
  box-shadow: var(--shadow-1);
}
.todo-toolbar .input-group-text { background: rgba(255,255,255,0.05); border-color: var(--border); border-right: none; color: var(--text-muted); }
.todo-toolbar .form-control { border-left: none; background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text); }
.todo-toolbar .form-control::placeholder { color: var(--text-muted); }
.todo-toolbar .form-control:focus { box-shadow: none; border-color: var(--accent); background: rgba(255,255,255,0.07); }

.btn-clear-filters {
  color: #ffb3bd;
  background: rgba(251,113,133,0.10);
  border: 1px solid rgba(251,113,133,0.35);
  white-space: nowrap;
  border-radius: 10px;
}
.btn-clear-filters:hover { background: rgba(251,113,133,0.20); border-color: var(--danger); color: #fff; }

/* ════════════════ INVOICES TABLE ════════════════ */
/* IMPORTANT: #section-invoices and its .card must stay transform/filter-free */
#section-invoices .card {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
#section-invoices .table { font-size: 0.8rem; table-layout: auto; width: 100%; min-width: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; }
#section-invoices .table th,
#section-invoices .table td { padding: 0.5rem 0.6rem; }
#section-invoices .table th { letter-spacing: 0; font-size: 0.75rem; font-weight: 600; }
#section-invoices .table td { color: #1e293b; font-weight: 400; }
#section-invoices .table tbody tr { border-bottom: 1px solid var(--border); }
#section-invoices .table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: var(--text-soft);
  border-color: rgba(255,255,255,0.06);
}
#section-invoices .table tbody tr { transition: background 0.14s ease; }
#section-invoices .table tbody tr:hover td { background: rgba(124,131,255,0.09); }
#section-invoices .table .fw-semibold { color: var(--text); }
/* subtle zebra striping (skips Done rows; hover/Done rules below override it) */
#section-invoices .table tbody tr:nth-child(even):not(.inv-done) td { background: #f6f8fc; }

#section-invoices .table tbody tr { line-height: 1.2; }
#section-invoices .table-responsive {
  max-height: calc(100vh - var(--topbar-height) - 5rem);
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--radius);
}
#section-invoices .table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #14161f !important;
  box-shadow: inset 0 -1px 0 var(--border), 0 6px 14px rgba(0,0,0,0.35);
  color: var(--text-muted) !important;
}
#section-invoices .table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 9;
  background: #11131d !important;
  box-shadow: inset 0 1px 0 var(--border);
  color: var(--text);
}

/* Remarks columns */
#section-invoices .table td.remarks-cell { font-size: 0.78rem; line-height: 1.3; max-width: 220px; color: var(--text-muted); }

/* Hover-reveal cells */
#section-invoices .table td.hover-cell {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
#section-invoices .table td.hover-cell:hover {
  background: rgba(124,131,255,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(124,131,255,0.4);
  color: #fff !important;
}

/* Completed (Done) rows — struck through + dimmed, emerald accent */
#section-invoices .table tr.inv-done td { background: rgba(52,211,153,0.07); }
#section-invoices .table tr.inv-done td:not(:first-child):not(:last-child) { opacity: 0.5; text-decoration: line-through; }
#section-invoices .table tr.inv-done td:first-child { box-shadow: inset 3px 0 0 #34d399; }
#section-invoices .table tr.inv-done .badge { text-decoration: none; }

/* ════════════════ EXCEL-STYLE COLUMN FILTERS ════════════════ */
.xf-th { position: relative; white-space: nowrap; }
.xf-header { display: flex; align-items: center; gap: 4px; }
.xf-sort { cursor: pointer; flex: 1; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); transition: color 0.15s; }
.xf-sort:hover { color: var(--text); }
.xf-sort i { flex-shrink: 0; }
.xf-btn {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  color: var(--text-muted); font-size: 0.78rem; border-radius: 6px; line-height: 1.4; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.xf-btn:hover { color: var(--accent); background: rgba(124,131,255,0.14); }
.xf-btn.active { color: var(--accent); background: rgba(124,131,255,0.18); }

.xf-dropdown {
  display: none;
  position: fixed;
  z-index: 1060;
  background: rgba(17, 19, 29, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  min-width: 220px;
  font-size: 0.83rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  overflow: hidden;
}
.xf-dropdown.open { display: flex; flex-direction: column; animation: ddPop 0.16s ease both; }
@keyframes ddPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.xf-dd-head { padding: 9px 14px; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.03); }
.xf-dd-body { padding: 10px 14px; }
.xf-date-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.xf-date-row label { width: 32px; font-size: 0.78rem; color: var(--text-muted); margin: 0; flex-shrink: 0; }
.xf-date-row input[type="date"] { flex: 1; font-size: 0.8rem; padding: 4px 7px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; background: rgba(255,255,255,0.05); color: var(--text); }
.xf-dd-search { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.xf-dd-search input { width: 100%; padding: 6px 10px; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 8px; outline: none; background: rgba(255,255,255,0.05); color: var(--text); }
.xf-dd-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,131,255,0.18); }
.xf-dd-selall { padding: 7px 12px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.xf-dd-selall label { cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--text-soft); }
.xf-dd-items { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
.xf-item { padding: 5px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.12s; }
.xf-item:hover { background: rgba(124,131,255,0.12); }
.xf-item label { cursor: pointer; margin: 0; user-select: none; color: var(--text-soft); }
.xf-dd-foot { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.xf-dd-foot .text-danger { color: #ff9aa6 !important; }

/* form checkbox accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ════════════════ BADGES ════════════════ */
.badge { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2px; padding: 0.4em 0.85em; border-radius: 999px; }
.badge.bg-success { background: rgba(52,211,153,0.18) !important; color: #6ee7b7 !important; box-shadow: inset 0 0 0 1px rgba(52,211,153,0.35); }
.badge.bg-warning { background: rgba(251,191,36,0.16) !important; color: #fcd34d !important; box-shadow: inset 0 0 0 1px rgba(251,191,36,0.35); }
.badge.bg-primary { background: rgba(124,131,255,0.20) !important; color: #c7cbff !important; box-shadow: inset 0 0 0 1px rgba(124,131,255,0.4); }
.badge.bg-info    { background: rgba(56,189,248,0.16) !important; color: #7dd3fc !important; box-shadow: inset 0 0 0 1px rgba(56,189,248,0.35); }
.badge.bg-danger  { background: rgba(251,113,133,0.18) !important; color: #fda4af !important; box-shadow: inset 0 0 0 1px rgba(251,113,133,0.4); }
.badge.bg-dark    { background: rgba(255,255,255,0.08) !important; color: #d7dbe8 !important; box-shadow: inset 0 0 0 1px var(--border); }
.badge.bg-secondary { background: rgba(255,255,255,0.07) !important; color: #c3c8d6 !important; box-shadow: inset 0 0 0 1px var(--border); }
.badge.bg-light, .badge.bg-light.text-dark { background: rgba(255,255,255,0.06) !important; color: #c3c8d6 !important; border: 1px solid var(--border) !important; }

/* ════════════════ BUTTONS ════════════════ */
.btn { border-radius: 11px; font-weight: 600; letter-spacing: 0.2px; transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.2s, border-color 0.2s, color 0.2s; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  border: none;
  background: var(--accent-grad);
  box-shadow: 0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { background: var(--accent-grad); filter: brightness(1.08); box-shadow: 0 12px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); }

.btn-success { border: none; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 22px -8px rgba(16,185,129,0.5), inset 0 1px 0 rgba(255,255,255,0.25); color: #04130d; }
.btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); color: #04130d; }
.btn-danger { border: none; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 8px 22px -8px rgba(225,29,72,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-light { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text); }
.btn-light:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: var(--border-strong); }

.btn-outline-success, .btn-outline-primary, .btn-outline-secondary {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.btn-outline-success:hover { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.5); color: #6ee7b7; }
.btn-outline-primary:hover { background: rgba(124,131,255,0.16); border-color: rgba(124,131,255,0.5); color: #c7cbff; }
.btn-outline-secondary:hover { background: rgba(255,255,255,0.10); border-color: var(--border-strong); color: #fff; }
.btn-link { color: var(--accent); }

.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.btn-group .btn:last-child { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }

/* ════════════════ FORMS ════════════════ */
.form-label { color: var(--text-soft); }
.form-control, .form-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.07);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,131,255,0.20);
  color: var(--text);
}
.form-select option { background: #11131d; color: var(--text); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
textarea.form-control { resize: vertical; }

/* ════════════════ MODALS (frosted) ════════════════ */
.modal-content {
  background: rgba(15, 17, 26, 0.85);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-2);
  color: var(--text);
}
.modal { --bs-modal-bg: transparent; }
.modal-header {
  background: var(--accent-grad);
  color: #fff;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
}
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal-footer { border-top: 1px solid var(--border); }
.list-group-flush { --bs-list-group-bg: transparent; }
.list-group-item { background: transparent; color: var(--text-soft); border-color: var(--border); }
.modal .border { border-color: var(--border) !important; }

/* ════════════════ TOASTS ════════════════ */
#toast-container { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9999; }
.toast {
  border-radius: 14px;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  animation: toastIn 0.32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(30px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
.toast.bg-success { background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(5,150,105,0.92)) !important; }
.toast.bg-danger  { background: linear-gradient(135deg, rgba(244,63,94,0.95), rgba(190,18,60,0.92)) !important; }
.toast.bg-warning { background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(217,119,6,0.92)) !important; }
.toast.bg-primary { background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(139,92,246,0.92)) !important; }

/* ════════════════ EMPTY STATE ════════════════ */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 3.2rem; margin-bottom: 0.75rem; display: block; opacity: 0.6; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ════════════════ MODERN RICH TOOLTIP ════════════════ */
.tooltip.rich-tip { --bs-tooltip-bg: #1b1e2e; --bs-tooltip-max-width: 380px; --bs-tooltip-opacity: 1; }
.tooltip.rich-tip .tooltip-inner {
  max-width: 380px;
  padding: 0.8rem 1.05rem;
  text-align: left;
  white-space: pre-wrap;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(150deg, rgba(30,27,75,0.96), rgba(79,70,229,0.92));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,131,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ════════════════ SKELETON SHIMMER (utility) ════════════════ */
.skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 991.98px) {
  #topbar { flex-wrap: wrap; align-items: center; }
  #nav-collapse {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    border-top: 1px solid var(--border); padding-bottom: 0.5rem;
  }
  #nav-collapse.show { display: flex; }
  #topbar .main-nav { flex-direction: column; margin: 0.5rem 0 0 0; }
  #topbar .main-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--accent); }
  #page-content { padding: 1.25rem; }
}

@media (max-width: 575.98px) {
  #section-invoices .table { font-size: 0.76rem; }
  .stat-card .fs-3 { font-size: 1.6rem !important; }
}

/* ── Weekly billing: weeks panel (matches dark theme) ── */
.inv-weeks-list {
  background: var(--surface);
  border-color: var(--border) !important;
}
.inv-weeks-list .wk-row { color: var(--text); }
.inv-weeks-list .wk-row + .wk-row { border-top: 1px solid var(--border); }
.inv-weeks-list .wk-row .small { color: var(--text-soft); }
#inv-weeks-summary { color: var(--text-muted); }

/* Weekly rows are clickable → open the read-only weeks popup */
tr.wk-clickable { cursor: pointer; }
tr.wk-clickable:hover { background: var(--surface-2) !important; }
#weeksViewBody .table { --bs-table-color: var(--text-soft); color: var(--text-soft); }
#weeksViewBody .table th { color: var(--text-muted); }

/* Needs-Attention card: two stacked sections */
.attn-subhead {
  display: flex; align-items: center;
  padding: 0.6rem 1rem 0.5rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.attn-section + .attn-section.border-top { border-top: 1px solid var(--border) !important; }

/* Make the native date-picker icon visible on the dark theme */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }

/* Week-grouped popup: one section per week, members listed inside */
#weeksViewBody .week-group { background: var(--surface); border-color: var(--border) !important; overflow: hidden; }
#weeksViewBody .week-group-head {
  padding: 0.5rem 0.75rem;
  font-weight: 600; font-size: 0.85rem; color: var(--text);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
}
#weeksViewBody .week-group .table { margin-bottom: 0; }

/* Members panel (form) + member cards (popup) */
.member-row, .member-card { background: var(--surface); border-color: var(--border) !important; }
.member-row .member-weeks { border-top: 1px dashed var(--border); padding-top: 4px; }
.member-row .member-weeks .mwk-row + .mwk-row { border-top: 1px solid var(--border); }
#weeksViewBody .member-card .border-top, #weeksViewBody .border-top { border-color: var(--border) !important; }

/* ════════════════ MOTION ENHANCEMENTS ════════════════
   Premium screen transitions & micro-interactions.
   Compositor-only (transform/opacity). Invoices subtree stays transform-free
   (protects the position:fixed column-filter dropdowns) → opacity-only there. */
:root {
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out:        cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .25, 1);
}

/* Native cross-fade between screens (View Transitions API). Disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: var(--ease-out);
  }
}

/* Staggered entrance — invoice rows (opacity-only: transform is banned in this subtree) */
#inv-tbody.stagger-in tr { animation: rowFade var(--motion-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes rowFade { from { opacity: 0; } to { opacity: 1; } }

/* Staggered entrance — dashboard stat cards (transform OK in #section-home) */
#section-home.stagger-in .stat-card { animation: riseCard var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* Member rows rise in as the list (re)builds (not an ancestor of any fixed dropdown) */
.member-row { animation: memberIn var(--motion-base) var(--ease-out) both; }
@keyframes memberIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Add/Edit form panel reveal — opacity-only (#inv-form-panel is a banned .card) */
#inv-form-panel.panel-reveal { animation: panelFade var(--motion-slow) var(--ease-out) both; }
@keyframes panelFade { from { opacity: 0; } to { opacity: 1; } }

/* Modal: gentle scale + fade on open (Bootstrap toggles .show on .modal) */
.modal.fade .modal-dialog {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: transform var(--motion-base) var(--ease-emphasized), opacity var(--motion-base) ease;
}
.modal.show .modal-dialog { opacity: 1; transform: none; }

/* Loading skeleton line inside table cells */
.skeleton-line { height: 12px; margin: 4px 0; }
#inv-tbody tr.skeleton-row td { border-color: var(--border); }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .app-bg .aurora { animation: none; }
  .modal.fade .modal-dialog { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   LIGHT (BLUE & WHITE) THEME — overrides the dark-specific rules
   above so the whole app reads as white surfaces + blue/navy accents.
   ════════════════════════════════════════════════════════════════ */

/* Soft light backdrop instead of the dark aurora */
.app-bg {
  background:
    radial-gradient(1100px 760px at 12% -10%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(29,155,240,0.08), transparent 55%),
    var(--bg-0);
}
.app-bg .aurora { display: none; }
.app-bg .grid-overlay {
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}

/* Scrollbars */
*::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.20); }
*::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.34); }

/* Topbar — navy→blue gradient with light text */
#topbar {
  background: var(--accent-grad);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: 0 6px 22px -8px rgba(30,58,138,0.45);
}
#topbar .brand i { -webkit-text-fill-color: #fff; filter: none; }
#topbar .main-nav .nav-link { color: rgba(255,255,255,0.82); }
#topbar .main-nav .nav-link:hover { background: rgba(255,255,255,0.16); color: #fff; }
#topbar .main-nav .nav-link.active { background: rgba(255,255,255,0.20); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30); }
#topbar #nav-toggle { background: rgba(255,255,255,0.16); color: #fff; }
#topbar #user-name { color: #fff; }
#topbar .badge.bg-primary { background: rgba(255,255,255,0.16) !important; color: #fff; border-color: rgba(255,255,255,0.25); }
#topbar .btn-outline-secondary { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }
#topbar .btn-outline-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.6); }

/* Cards → solid white */
.stat-card, #section-home .stat-card.card.bg-white { background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.stat-card .fs-3 { color: var(--accent-2); text-shadow: none; }
.stat-card .icon-box { box-shadow: 0 8px 20px -8px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
#section-home .card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card-header, #section-home .card-header, .card-header.bg-white { background: #fff !important; }

/* Tables */
.table { --bs-table-hover-bg: rgba(37,99,235,0.08); --bs-table-hover-color: var(--text); }
.table-light, .table thead.table-light th, .table .table-light th { background: #f1f5fb !important; }
#section-home .table thead th { background: #f1f5fb; }
#section-home .table tbody tr:hover td { background: rgba(37,99,235,0.07); }
#section-home .table td { border-color: var(--border); }
#section-invoices .table td { border-color: var(--border); }
#section-invoices .table tbody tr:hover td { background: rgba(37,99,235,0.08); }
#section-invoices .table thead th { background: #eaf1fb !important; box-shadow: inset 0 -1px 0 var(--border), 0 6px 14px rgba(15,23,42,0.08); color: var(--text-muted) !important; }
#section-invoices .table tfoot td { background: #eaf1fb !important; color: var(--text); }
#section-invoices .table td.hover-cell:hover { background: rgba(37,99,235,0.12) !important; box-shadow: inset 0 0 0 1px rgba(37,99,235,0.35); color: var(--accent-2) !important; }
#section-invoices .table tr.inv-done td { background: rgba(5,150,105,0.08); }
#section-invoices .table tr.inv-done td:first-child { box-shadow: inset 3px 0 0 var(--success); }
tr.wk-clickable:hover { background: rgba(37,99,235,0.07) !important; }

/* Toolbar + inputs */
.todo-toolbar { background: #fff; }
.todo-toolbar .input-group-text { background: #f1f5fb; }
.todo-toolbar .form-control, .todo-toolbar .form-control:focus { background: #fff; }
.form-control, .form-select { background: #fff; }
.form-control:focus, .form-select:focus { background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.form-select option { background: #fff; color: var(--text); }

/* Buttons */
.btn-light { background: #eef2f8; border: 1px solid var(--border); color: var(--text); }
.btn-light:hover { background: #e2e8f2; color: var(--text); border-color: var(--border-strong); }
.btn-outline-success, .btn-outline-primary, .btn-outline-secondary { background: #fff; color: var(--text-soft); }
.btn-outline-primary:hover { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.5); color: var(--accent); }
.btn-outline-success:hover { background: rgba(5,150,105,0.10); border-color: rgba(5,150,105,0.5); color: #047857; }
.btn-outline-secondary:hover { background: #eef2f8; border-color: var(--border-strong); color: var(--text); }
.btn-clear-filters { color: #dc2626; background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.30); }
.btn-clear-filters:hover { background: rgba(220,38,38,0.16); border-color: var(--danger); color: #b91c1c; }

/* Column-filter dropdowns → white */
.xf-dropdown { background: rgba(255,255,255,0.98); border-color: var(--border-strong); }
.xf-dd-head { background: #f1f5fb; }
.xf-dd-selall, .xf-dd-foot { background: #f7f9fd; }
.xf-item:hover { background: rgba(37,99,235,0.10); }
.xf-date-row input[type="date"], .xf-dd-search input { background: #fff; }
.xf-dd-search input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.xf-btn:hover, .xf-btn.active { color: var(--accent); background: rgba(37,99,235,0.12); }
.xf-dd-foot .text-danger { color: #dc2626 !important; }

/* Badges — vivid solid pills */
.badge.bg-success   { background: #16a34a !important; color: #fff !important; box-shadow: none; }
.badge.bg-warning   { background: #f59e0b !important; color: #fff !important; box-shadow: none; }
.badge.bg-primary   { background: #2563eb !important; color: #fff !important; box-shadow: none; }
.badge.bg-info      { background: #0ea5e9 !important; color: #fff !important; box-shadow: none; }
.badge.bg-danger    { background: #dc2626 !important; color: #fff !important; box-shadow: none; }
.badge.bg-dark      { background: #334155 !important; color: #fff !important; box-shadow: none; }
.badge.bg-secondary { background: #64748b !important; color: #fff !important; box-shadow: none; }
.badge.bg-light, .badge.bg-light.text-dark { background: #e2e8f0 !important; color: #334155 !important; border: none !important; }
/* keep "text-dark" badges (e.g. Weekly type) legible on their solid fill */
.badge.bg-warning.text-dark, .badge.bg-info.text-dark, .badge.bg-light.text-dark { color: #fff !important; }
.badge.bg-light.text-dark { color: #334155 !important; }

/* Modals → white frosted (header keeps the navy→blue gradient + white close icon) */
.modal-content { background: rgba(255,255,255,0.97); border-color: var(--border-strong); color: var(--text); }

/* Keep the Add/Edit panel header (title + close) clear of the sticky top bar when scrolled to */
#inv-form-panel { scroll-margin-top: calc(var(--topbar-height) + 16px); }
/* Sticky header (title + close) on the Add/Edit Project screen */
#inv-form-panel .card-header {
  position: sticky;
  top: var(--topbar-height);
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Dashboard project rows are clickable → jump to Invoices */
#monthlist-tbody tr.ml-clickable,
#attn-due-tbody tr.ml-clickable,
#attn-ending-tbody tr.ml-clickable { cursor: pointer; }
/* highlight a dashboard row we returned to from Invoices */
#monthlist-tbody tr.dash-flash td, #overdue-tbody tr.dash-flash td,
#attn-due-tbody tr.dash-flash td, #attn-ending-tbody tr.dash-flash td { background: #dbeafe !important; }
#monthlist-tbody tr.dash-flash td:first-child, #overdue-tbody tr.dash-flash td:first-child,
#attn-due-tbody tr.dash-flash td:first-child, #attn-ending-tbody tr.dash-flash td:first-child { box-shadow: inset 4px 0 0 #2563eb; }
#monthlist-tbody tr.ml-clickable td.ml-status,
#attn-due-tbody tr.ml-clickable td.ml-status,
#attn-ending-tbody tr.ml-clickable td.ml-status { cursor: help; }
#overdue-tbody tr.ovd-clickable { cursor: pointer; }
#overdue-tbody tr.ovd-clickable td:nth-child(5) { cursor: help; }

/* Date field: read-only text shows dd-Mon-yyyy; a hidden native date input holds the
   real YYYY-MM-DD value and supplies the calendar picker */
.date-field { position: relative; }
.date-field .date-display { cursor: pointer; background-color: #fff; padding-right: 2rem; }
.date-field .date-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none;
}
.date-field-icon {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  color: #6b7280; pointer-events: none; font-size: .9rem;
}

/* Dashboard status-card hover tooltip — clean light card */
.stat-tip { opacity: 1 !important; }
.stat-tip .tooltip-inner {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 30px -8px rgba(15,23,42,0.25);
  padding: 0.7rem 1rem;
  max-width: none;
  text-align: center;
}
.stat-tip .tooltip-arrow::before { border-top-color: #ffffff !important; }
.stat-tip-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b; margin-bottom: 0.15rem;
}
.stat-tip-amount {
  font-size: 1.25rem; font-weight: 800; color: #0f172a;
  font-family: 'Sora', 'Inter', sans-serif; line-height: 1.1;
}
.stat-tip-count { font-size: 0.72rem; color: #94a3b8; margin-top: 0.1rem; }

/* Punchy status badge colors */
.badge.status-done { background-color: #10b981; color: white; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.badge.status-in-progress { background-color: #3b82f6; color: white; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.badge.status-pending { background-color: #f59e0b; color: white; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.badge.status-on-hold { background-color: #6b7280; color: white; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.badge.status-cancelled { background-color: #ef4444; color: white; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.badge.bg-light { font-size: 0.75rem; padding: 0.35rem 0.6rem; }

/* Highlight the row we arrived at from the dashboard — steady blue */
#section-invoices .table tr.row-flash td { background: #dbeafe !important; }
#section-invoices .table tr.row-flash td:first-child { box-shadow: inset 4px 0 0 #2563eb; }

/* Dashboard period badge — shows the month/year the data belongs to */
.dash-period-badge {
  display: inline-flex; align-items: center;
  background: var(--accent-grad); color: #fff;
  font-weight: 700; font-size: 0.85rem;
  padding: 4px 14px; border-radius: 999px;
  box-shadow: var(--shadow-1);
}

/* Dashboard month/year filter bar */
.dash-filter {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 12px;
  box-shadow: var(--shadow-1);
}
.dash-filter .form-select { border-color: var(--border); }

/* Add/Edit Project form — boxed sections */
.form-block {
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.form-block:last-of-type { margin-bottom: 18px; }
.form-block-title {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent-2);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.form-block-title i { font-size: 1rem; color: var(--accent); }
/* white sub-panel inside the billing block (members / milestones / weeks) */
.form-subpanel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.form-block .form-label { color: var(--text); }

/* Project-Manager tooltip on the Code cell — name highlighted */
.pm-tip .tooltip-inner {
  max-width: 260px; text-align: left;
  background: #0f172a; color: #fff; padding: 8px 10px; border-radius: 10px;
}
.pm-tip .tooltip-arrow::before { border-top-color: #0f172a; }
.pm-tip-label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 3px; }
.pm-tip-name { display: inline-block; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 9px; border-radius: 6px; }

/* Remarks tooltip on the Project Name cell */
.rmk-tip .tooltip-inner { max-width: 320px; text-align: left; background: #0f172a; color: #fff; padding: 8px 10px; border-radius: 10px; }
.rmk-tip .tooltip-arrow::before { border-top-color: #0f172a; }
.rmk-line { font-size: 0.78rem; line-height: 1.35; }
.rmk-line + .rmk-line { margin-top: 5px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 5px; }
.rmk-by { display: inline-block; font-weight: 700; color: #93c5fd; margin-right: 6px; }

/* Members tooltip on the Inv cell */
.inv-tip .tooltip-inner { max-width: 320px; text-align: left; background: #0f172a; color: #fff; padding: 8px 10px; border-radius: 10px; }
.inv-tip .tooltip-arrow::before { border-left-color: #0f172a; }
.inv-tip-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; line-height: 1.5; }
.inv-tip-line + .inv-tip-line { border-top: 1px solid rgba(255,255,255,0.12); }
.inv-tip-name { font-weight: 700; }
.inv-tip-meta { color: #93c5fd; white-space: nowrap; }

/* Custom components */
.week-group-head { background: #f1f5fb; }
.skeleton { background: linear-gradient(100deg, rgba(15,23,42,0.05) 30%, rgba(15,23,42,0.12) 50%, rgba(15,23,42,0.05) 70%); background-size: 200% 100%; }

/* Flat, crisp action buttons in the invoices table (no gradient/glow) */
#section-invoices .table td .btn { border-radius: 4px; box-shadow: none !important; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
#section-invoices .table td .btn-light { background: #f3f4f6; border: 1px solid #e5e7eb; }
#section-invoices .table td .btn-light:hover { background: #e5e7eb; }

/* Toolbar — clean white bar with consistent rounded controls */
.todo-toolbar { background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.todo-toolbar .btn { border-radius: 9px; }
.todo-toolbar .btn-group .btn { border-radius: 0; }
.todo-toolbar .btn-group .btn:first-child { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.todo-toolbar .btn-group .btn:last-child { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }

/* ── Readability: keep data text dark on the light theme ── */
body, .table, #section-invoices .table td, #section-home .table td { color: var(--text); }
#section-invoices .table td { color: #1e293b; font-size: 0.9rem; }
#section-invoices .table td.text-muted, #section-invoices .table .text-muted { color: #475569 !important; }
#section-home .table td { color: var(--text-soft); }
.table { --bs-table-color: var(--text-soft); }
.text-muted { color: var(--text-muted) !important; }
.small, small { color: inherit; }
.todo-toolbar .form-control, .form-control, .form-select { color: var(--text); }
/* Done rows: keep the strike-through but don't fade them out so much */
#section-invoices .table tr.inv-done td:not(:first-child):not(:last-child) { opacity: 0.82; }

/* Input-group "$" boxes, disabled/readonly fields and help text → light */
.input-group-text { background: #f1f5fb; border-color: var(--border); color: var(--text-soft); }
.form-control:disabled, .form-select:disabled,
.form-control[readonly], .form-select[readonly] {
  background: #eef2f8 !important; color: var(--text) !important; opacity: 1;
  -webkit-text-fill-color: var(--text);
}
.form-text { color: var(--text-muted) !important; }
.form-select option { background: #fff; color: var(--text); }