@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* BAMFLOW light theme — applied to data-list pages only. */
body:not(.home-page) {
  --navy: #0b1633; --navy-2: #133c9f; --blue: #1d4ed8; --blue-soft: #eef4ff;
  --teal: #1d4ed8; --ink: #0b1420; --muted: #64748b; --line: #e2e8f0;
  --surface: #fff; --canvas: #f2f5fa; --shadow: 0 1px 2px rgba(11,20,32,.05), 0 14px 32px -18px rgba(0,60,120,.22); --radius: 18px;
  background: linear-gradient(180deg, #f8fbfe 0, #fff 420px); color: #42505f;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-weight: 500;
}
body:not(.home-page) .sidebar { background: rgba(255,255,255,.88); color: #475569; border-right: 1px solid #e2e8f0; box-shadow: 8px 0 32px -28px rgba(0,60,120,.35); backdrop-filter: blur(16px) saturate(160%); }
body:not(.home-page) .brand { color: #0b1633; } body:not(.home-page) .brand strong { color: #0b1633; } body:not(.home-page) .brand span { color: #64748b; }
body:not(.home-page) .brand-mark { background: linear-gradient(145deg,#2f63e6,#133c9f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -12px rgba(29,78,216,.65); }
body:not(.home-page) .brand strong { max-width: 150px; color: #0b1633; font-size: 13px; line-height: 1.25; letter-spacing: .015em; } body:not(.home-page) .brand span { margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.3; }
body:not(.home-page) .nav-item { color: #475569; } body:not(.home-page) .nav-item:hover { color: #1d4ed8; background: #f1f5f9; } body:not(.home-page) .nav-item.active { color: #1d4ed8; background: #eaf2ff; box-shadow: inset 3px 0 #1d4ed8; }
body:not(.home-page) .nav-group { display: grid; gap: 2px; } body:not(.home-page) .nav-toggle { justify-content: space-between; border: 0; cursor: pointer; font: inherit; } body:not(.home-page) .nav-toggle::after { content: "⌄"; color: #64748b; font-size: 15px; transition: transform .18s ease; } body:not(.home-page) .nav-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } body:not(.home-page) .nav-submenu { display: grid; gap: 2px; margin: -1px 0 4px 15px; padding-left: 13px; border-left: 1px solid #dbe3ee; } body:not(.home-page) .nav-submenu[hidden] { display: none; } body:not(.home-page) .nav-submenu a { padding: 7px 8px; border-radius: 8px; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.3; text-decoration: none; } body:not(.home-page) .nav-submenu a:hover, body:not(.home-page) .nav-submenu a.active { color: #1d4ed8; background: #eef4ff; }
body:not(.home-page) .sidebar-note { border-color: #bfdbfe; background: #eef4ff; } body:not(.home-page) .sidebar-note span, body:not(.home-page) .sidebar-note small { color: #64748b; } body:not(.home-page) .sidebar-note strong { color: #1d4ed8; }
body:not(.home-page) .topbar { border-bottom-color: rgba(11,20,32,.1); background: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(16px) saturate(160%); }
body:not(.home-page) .breadcrumbs, body:not(.home-page) .today, body:not(.home-page) .subtitle { color: #64748b; } body:not(.home-page) .breadcrumbs strong, body:not(.home-page) h1, body:not(.home-page) h2, body:not(.home-page) h3 { color: #0b1633; }
body:not(.home-page) .avatar { color: #fff; background: linear-gradient(180deg,#1d4ed8,#133c9f); } body:not(.home-page) .eyebrow { color: #1d4ed8; }
body:not(.home-page) .primary-button { border-color: transparent; color: #fff; background: linear-gradient(180deg,#1d4ed8,#133c9f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -8px rgba(29,78,216,.35); }
body:not(.home-page) .primary-button:hover { background: linear-gradient(180deg,#1a46c4,#0f3286); }
body:not(.home-page) .secondary-button, body:not(.home-page) .icon-button { border-color: #bfdbfe; color: #1d4ed8; background: #fff; } body:not(.home-page) .secondary-button:hover, body:not(.home-page) .icon-button:hover { border-color: #1d4ed8; background: #eef4ff; }
body:not(.home-page) .panel, body:not(.home-page) .metric-card { border-color: #e2e8f0; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 1px 2px rgba(11,20,32,.05), 0 14px 32px -18px rgba(0,60,120,.22), inset 0 1px 0 rgba(255,255,255,.95); }
body:not(.home-page) .metric-card:hover { border-color: #93c5fd; box-shadow: 0 20px 36px -26px rgba(29,78,216,.45); transform: translateY(-2px); } body:not(.home-page) .metric-card::after { background: #1d4ed8; } body:not(.home-page) .metric-card strong { color: #0b1633; } body:not(.home-page) .metric-card span, body:not(.home-page) .metric-card small, body:not(.home-page) .panel-heading p { color: #64748b; }
body:not(.home-page) .accent-blue, body:not(.home-page) .accent-violet, body:not(.home-page) .accent-amber, body:not(.home-page) .accent-green { color: #1d4ed8; }
body:not(.home-page) .filters input, body:not(.home-page) .filters select { border-color: #dbe3ee; border-radius: 10px; color: #0b1633; background: #f8fafc; } body:not(.home-page) .filters input:focus, body:not(.home-page) .filters select:focus { border-color: #1d4ed8; background: #fff; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
body:not(.home-page) .filter-chip { border-color: #dbe3ee; border-radius: 10px; color: #475569; background: #f8fafc; } body:not(.home-page) .filter-chip[aria-pressed="true"] { border-color: #1d4ed8; color: #1d4ed8; background: #eef4ff; } body:not(.home-page) .filter-chip span { background: #1d4ed8; }
body:not(.home-page) .table-wrap { border-color: #e2e8f0; } body:not(.home-page) th { border-color: #dbe3ee; color: #334155; background: #f2f5fa; } body:not(.home-page) td { border-color: #edf1f5; color: #42505f; background: #fff; } body:not(.home-page) tbody tr:hover td { background: #f1f5f9; }
body:not(.home-page) th.col-name { background: #eaf2ff; } body:not(.home-page) td.col-tt, body:not(.home-page) td.col-name { background: #fafcff; } body:not(.home-page) tbody tr:hover td.col-tt, body:not(.home-page) tbody tr:hover td.col-name { background: #eef4ff; }
body:not(.home-page) .edit-project-button, body:not(.home-page) .staff-edit-button { border-color: #bfdbfe; color: #1d4ed8; background: #fff; border-radius: 10px; } body:not(.home-page) .edit-project-button:hover, body:not(.home-page) .staff-edit-button:hover { border-color: #1d4ed8; background: #eef4ff; }
body:not(.home-page) .status-build, body:not(.home-page) .assessment.active, body:not(.home-page) .construction-ontrack { color: #1d4ed8; background: #eaf2ff; } body:not(.home-page) .status-plan, body:not(.home-page) .assessment.future, body:not(.home-page) .status-wait { color: #92400e; background: #fef3c7; } body:not(.home-page) .status-done, body:not(.home-page) .assessment.done { color: #15803d; background: #dcfce7; } body:not(.home-page) .construction-overdue, body:not(.home-page) .assessment.overdue { color: #dc2626; background: #fef2f2; } body:not(.home-page) .staff-role, body:not(.home-page) .sync-badge { color: #1d4ed8; background: #eef4ff; }
body:not(.home-page) .project-dialog, body:not(.home-page) .staff-dialog, body:not(.home-page) .detail-drawer { border: 1px solid rgba(255,255,255,.75); border-radius: 20px; box-shadow: 0 24px 48px -20px rgba(0,60,120,.3), inset 0 1px 0 rgba(255,255,255,.95); }
body:not(.home-page) .project-dialog::backdrop { background: rgba(6,12,20,.6); backdrop-filter: blur(20px) saturate(140%); } body:not(.home-page) .dialog-header > div > span, body:not(.home-page) .drawer-header span { color: #1d4ed8; } body:not(.home-page) .dialog-footer { background: #f8fafc; }
body:not(.home-page) .form-field input, body:not(.home-page) .form-field select, body:not(.home-page) .form-field textarea { border-color: #dbe3ee; border-radius: 10px; background: #f8fafc; } body:not(.home-page) .form-field input:focus, body:not(.home-page) .form-field select:focus, body:not(.home-page) .form-field textarea:focus { border-color: #1d4ed8; background: #fff; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
body:not(.home-page) :focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }
body:not(.home-page) .tracking-choice { margin-bottom: 18px; } .tracking-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 0 20px 20px; }
body:not(.home-page) .tracking-option { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid #dbe3ee; border-radius: 14px; background: #f8fafc; cursor: pointer; transition: .18s ease; } body:not(.home-page) .tracking-option:hover { border-color: #93c5fd; background: #eef4ff; } body:not(.home-page) .tracking-option input { position: absolute; opacity: 0; } body:not(.home-page) .tracking-check { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border: 1px solid #bfdbfe; border-radius: 6px; color: transparent; background: #fff; font-size: 13px; font-weight: 800; } body:not(.home-page) .tracking-option input:checked + .tracking-check { color: #fff; border-color: #1d4ed8; background: #1d4ed8; } body:not(.home-page) .tracking-option strong, body:not(.home-page) .tracking-option small { display: block; } body:not(.home-page) .tracking-option strong { color: #0b1633; font-size: 14px; } body:not(.home-page) .tracking-option small { margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.5; }
body:not(.home-page) .tracking-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } body:not(.home-page) .tracking-panel[hidden] { display: none; } body:not(.home-page) .tracking-panel .dashboard-empty { min-height: 150px; display: grid; place-items: center; padding: 24px; }
@media (max-width: 800px) { body:not(.home-page) .tracking-options, body:not(.home-page) .tracking-grid { grid-template-columns: 1fr; } }