/* ==========================================================================
   Evode Premium Theme — shared stylesheet
   Fully custom, no Bootstrap/Vuexy dependency. Linked from every redesigned
   page as a single <link>. Source of truth: MainSite/REDESIGN_PROGRESS.md
   ========================================================================== */

:root {
  --ev-bg: #fbf7f1; --ev-card: #ffffff; --ev-fill: #fdf3e7;
  --ev-border: rgba(60,45,20,.12); --ev-border-h: rgba(60,45,20,.24);
  --ev-text1: #241a12; --ev-text2: #6b5643; --ev-text3: #9c8468;
  --ev-orange: #e8730e; --ev-orange-700: #c25a08; --ev-orange-100: #fdebd8;
  --ev-blue: #2f6fe0; --ev-blue-700: #1f52ae; --ev-blue-100: #e4edfb;
  --ev-ink: #241a12; --ev-ink-2: #3a2c1f;
  --ev-green: #3c8c5e; --ev-green-bg: #e7f3ec;
  --ev-red: #c1432e; --ev-red-bg: #fbeae5;
  --ev-amber: #c98a2b; --ev-amber-bg: #fbf0dc;
  --ev-r-sm: 8px; --ev-r-md: 12px; --ev-r-lg: 16px; --ev-r-xl: 20px; --ev-r-2xl: 28px; --ev-r-full: 9999px;
  --ev-sh-sm: 0 2px 10px rgba(36,26,18,.07);
  --ev-sh-md: 0 8px 24px rgba(36,26,18,.10);
  --ev-sh-lg: 0 24px 60px rgba(36,26,18,.22);
  --ev-sh-accent: 0 6px 22px rgba(232,115,14,.30);
  --ev-t: 220ms cubic-bezier(.34,1.56,.64,1);
  --ev-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-w: 264px; --topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--ev-font); background: var(--ev-bg); color: var(--ev-text1);
  line-height: 1.55; margin: 0;
}
a { color: var(--ev-orange); text-decoration: none; }
a:hover { color: var(--ev-orange-700); }
button, input, select, textarea { font-family: var(--ev-font); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 700; color: var(--ev-text1); letter-spacing: -0.01em; margin: 0; }

/* ── App shell: sidebar + topbar ─────────────────────────── */
.admin-body { display: flex; min-height: 100vh; background: var(--ev-bg); }

.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh;
  background: var(--ev-card); border-right: 1px solid var(--ev-border);
  display: flex; flex-direction: column; z-index: 200;
  overflow-y: auto; overflow-x: hidden; transition: transform var(--ev-t);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--ev-border-h); border-radius: 4px; }

.sb-logo { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--ev-border); flex-shrink: 0; }
.sb-logo img { height: 34px; object-fit: contain; }

/* ── Brand wordmark (replaces the raster logo in the sidebar/login) ──
   Plain typography, no icon-box/gradient-letter cliché. The only motion is a thin
   underline beneath "ERP" that breathes slowly — restrained, not a shimmer sweep. */
.sb-brand { display: flex; align-items: baseline; gap: 7px; text-decoration: none; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sb-brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: var(--ev-text1); }
.sb-brand-name .accent {
  color: var(--ev-orange); position: relative; padding-bottom: 2px;
  border-bottom: 2px solid var(--ev-orange-100);
}
.sb-brand-name .accent::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--ev-orange); transform-origin: left; animation: sb-underline 4s ease-in-out infinite;
}
@keyframes sb-underline { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sb-brand-sub { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ev-text3); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sb-brand-name .accent::after { animation: none; }
}

.sb-nav { flex: 1; padding: 10px 0 16px; overflow-y: auto; }
.nav-section { padding: 0 12px; margin-bottom: 2px; }
.nav-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ev-text3); padding: 14px 8px 5px; display: block; }

.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--ev-r-md);
  color: var(--ev-text2); font-size: .845rem; font-weight: 600; transition: all .15s ease;
  cursor: pointer; position: relative; text-decoration: none;
}
.nav-item:hover { background: var(--ev-fill); color: var(--ev-text1); }
.nav-item.active { background: var(--ev-blue-100); color: var(--ev-blue-700); font-weight: 700; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: var(--ev-blue); border-radius: 0 3px 3px 0;
}
.nav-item i { width: 18px; text-align: center; font-size: .85rem; flex-shrink: 0; }

.ng-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--ev-r-md);
  color: var(--ev-text2); font-size: .845rem; font-weight: 600; transition: all .15s ease;
  cursor: pointer; background: none; border: none; text-align: left;
}
.ng-toggle:hover, .ng-toggle.open { background: var(--ev-fill); color: var(--ev-text1); }
.ng-toggle i:first-child { width: 18px; text-align: center; font-size: .85rem; }
.ng-arrow { margin-left: auto; font-size: .7rem; transition: transform .2s ease; }
.ng-toggle.open .ng-arrow { transform: rotate(180deg); }
.nav-sub { padding-left: 27px; overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.nav-sub.open { max-height: 800px; }
.nav-sub .nav-item { font-size: .8rem; padding: 7px 10px; }

.sb-footer { padding: 12px; border-top: 1px solid var(--ev-border); flex-shrink: 0; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(36,26,18,.45); z-index: 190; backdrop-filter: blur(2px); }

.topbar {
  position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h);
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--ev-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 199; gap: 16px;
}
.sb-toggle {
  display: none; width: 36px; height: 36px; border-radius: var(--ev-r-md); align-items: center; justify-content: center;
  color: var(--ev-text2); background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.sb-toggle:hover { background: var(--ev-fill); }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); padding-top: var(--topbar-h); min-height: 100vh; }
.page-body { padding: 22px 28px 48px; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; margin-bottom: 4px; }
.page-head p { font-size: 12.5px; color: var(--ev-text3); margin: 0; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ev-text3); font-weight: 600; margin-bottom: 6px; }
.breadcrumb a { color: var(--ev-text3); }
.breadcrumb a:hover { color: var(--ev-orange); }
.breadcrumb .sep { color: var(--ev-border-h); }
.breadcrumb .current { color: var(--ev-text1); font-weight: 700; }

/* ── Topbar right side: profile / dropdown ───────────────── */
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--ev-r-full); position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--ev-fill); border: 1px solid var(--ev-border); color: var(--ev-text2);
  font-size: 14.5px; cursor: pointer; transition: all .15s ease;
}
.icon-btn:hover { background: var(--ev-border-h); color: var(--ev-text1); }
.profile-trigger {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: var(--ev-r-full);
  border: 1px solid var(--ev-border); background: var(--ev-fill); cursor: pointer; transition: all .15s ease;
}
.profile-trigger:hover { background: var(--ev-border-h); }
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ev-blue), var(--ev-orange));
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
}
.profile-meta { text-align: left; line-height: 1.25; }
.profile-name { font-size: 12.5px; font-weight: 700; color: var(--ev-text1); }
.role-badge {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--ev-blue-700);
  background: var(--ev-blue-100); border-radius: 5px; padding: 1px 6px; margin-top: 1px;
}
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 210px; background: var(--ev-card);
  border: 1px solid var(--ev-border); border-radius: var(--ev-r-lg); box-shadow: var(--ev-sh-lg); padding: 8px;
  opacity: 0; pointer-events: none; transform: translateY(-6px); transition: all .15s ease; z-index: 600;
}
.dropdown-wrap.open .dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--ev-r-md);
  font-size: 12.5px; font-weight: 600; color: var(--ev-text2); cursor: pointer; transition: all .15s ease;
}
.dropdown-item i { width: 15px; color: var(--ev-text3); }
.dropdown-item:hover { background: var(--ev-fill); color: var(--ev-text1); }
.dropdown-item.danger { color: var(--ev-red); }
.dropdown-item.danger:hover { background: var(--ev-red-bg); }

/* ── Cards / panels ───────────────────────────────────────── */
.card {
  background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: var(--ev-r-xl);
  box-shadow: var(--ev-sh-sm);
}
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ev-border); gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 700; }
.card-sub { font-size: 11.5px; color: var(--ev-text3); margin-top: 2px; }
.card-body { padding: 18px 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.hero-card {
  background: radial-gradient(130% 160% at 0% 0%, var(--ev-blue-100), transparent 60%),
              radial-gradient(130% 160% at 100% 100%, var(--ev-orange-100), transparent 60%),
              var(--ev-card);
  color: var(--ev-text1); border: 1px solid var(--ev-border); border-radius: var(--ev-r-xl);
  padding: 22px 24px; box-shadow: var(--ev-sh-md);
}
.hero-card h3 { color: var(--ev-text1); font-size: 19px; margin-bottom: 8px; }
.hero-card p { color: var(--ev-text2); font-size: 13px; line-height: 1.6; margin: 0 0 14px; }

.stat-card {
  background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: var(--ev-r-xl);
  padding: 18px 20px; box-shadow: var(--ev-sh-sm); position: relative; overflow: hidden;
}
.stat-ico {
  width: 42px; height: 42px; border-radius: var(--ev-r-md); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.stat-num { font-size: 24px; font-weight: 800; color: var(--ev-text1); margin-top: 10px; line-height: 1; }
.stat-label { font-size: 11.5px; color: var(--ev-text3); font-weight: 600; margin-top: 4px; }

/* ── Buttons — compact rounded-rect, NOT full pill. A pill shape + wide
   padding is the generic "AI SaaS" tell (flagged by user 2026-09-05, same
   critique as the earlier gradient-icon logo rejection) — kept tight and
   squared-off like Linear/Stripe/Vercel controls instead. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--ev-r-sm); font-size: 12.5px; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; transition: all var(--ev-t); white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn.dark { background: var(--ev-ink); color: #fff; box-shadow: 0 2px 8px rgba(36,26,18,.16); }
.btn.dark:hover { background: var(--ev-ink-2); }
.btn.accent { background: var(--ev-orange); color: #fff; box-shadow: 0 2px 8px rgba(232,115,14,.22); }
.btn.accent:hover { background: var(--ev-orange-700); }
.btn.blue { background: var(--ev-blue); color: #fff; box-shadow: 0 2px 8px rgba(47,111,224,.2); }
.btn.blue:hover { background: var(--ev-blue-700); }
.btn.outline { background: var(--ev-card); color: var(--ev-text2); border-color: var(--ev-border); }
.btn.outline:hover { border-color: var(--ev-border-h); color: var(--ev-text1); }
.btn.ghost { background: var(--ev-fill); color: var(--ev-text2); border-color: var(--ev-border); }
.btn.ghost:hover { background: var(--ev-border-h); }
.btn.danger { background: var(--ev-red); color: #fff; box-shadow: 0 2px 8px rgba(193,67,46,.18); }
.btn.danger:hover { background: #a3381f; }
.btn.green { background: var(--ev-green); color: #fff; box-shadow: 0 2px 8px rgba(60,140,94,.18); }
.btn.green:hover { background: #2f7249; }
.btn.sm { padding: 6px 10px; font-size: 11.5px; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--ev-r-sm); }

/* ── Forms — compact, not oversized ──────────────────────── */
.form-row { margin-bottom: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ev-text3); margin-bottom: 7px; }
.form-input, .input, select.input, textarea.input {
  width: 100%; background: var(--ev-fill); border: 1.5px solid var(--ev-border); border-radius: var(--ev-r-sm);
  padding: 8px 12px; font-size: 13px; color: var(--ev-text1); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
/* Single-line fields (text/number/date/select) get a sane max width so a short search/filter
   box never stretches to fill a wide grid column — the classic "input too long" look. Multi-line
   textareas are deliberately excluded: those genuinely benefit from the extra width. */
.form-input:not(textarea), .input:not(textarea), select.input { max-width: 360px; }
.form-input:focus, .input:focus { border-color: var(--ev-orange); background: var(--ev-card); box-shadow: 0 0 0 3px rgba(232,115,14,.14); }
.input-wrap { position: relative; }
.input-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ev-text3); font-size: 13px; }
.input-wrap .form-input { padding-left: 38px; }

/* ── Tables — dense, like a real data-grid, not a loose document.
   Row height used to balloon because table cells inherited body's 1.55
   line-height, so any multi-line stacked cell (address, two-contact block)
   read as airy/empty next to short neighbor cells — flagged by user
   2026-09-05 ("tables still crappy looking") after the column-width/
   hierarchy fixes above. Tightened line-height + padding here, plus zebra
   striping for scannability — applies to every data-table everywhere. ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; line-height: 1.4; }
table.data-table th {
  text-align: left; padding: 9px 14px; font-size: 12px; font-weight: 700;
  color: var(--ev-text2); background: var(--ev-fill);
  border: 1px solid var(--ev-border); white-space: nowrap;
}
table.data-table td { padding: 9px 14px; border: 1px solid var(--ev-border); color: var(--ev-text2); vertical-align: middle; }
table.data-table tbody tr { transition: background .15s ease; }
table.data-table tbody tr:nth-child(even) { background: rgba(60,45,20,.02); }
table.data-table tbody tr:hover { background: var(--ev-fill); }
.cell-strong { color: var(--ev-text1); font-weight: 700; }
.cell-muted { color: var(--ev-text3); font-size: 11.5px; }
.cell-empty { color: var(--ev-border-h); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .btn + .btn { margin-left: 6px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  padding: 4px 10px; border-radius: var(--ev-r-full); border: 1px solid transparent; white-space: nowrap;
  vertical-align: middle; line-height: 1.4;
}
.badge i { line-height: 1; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.blue { color: var(--ev-blue-700); background: var(--ev-blue-100); }
.badge.orange { color: var(--ev-orange-700); background: var(--ev-orange-100); }
.badge.green { color: var(--ev-green); background: var(--ev-green-bg); }
.badge.red { color: var(--ev-red); background: var(--ev-red-bg); }
.badge.amber { color: var(--ev-amber); background: var(--ev-amber-bg); }
.badge.gray { color: var(--ev-text2); background: var(--ev-fill); }

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(36,26,18,.45); z-index: 900; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.modal-backdrop.open { display: flex; }
.modal-box { width: 100%; max-width: 440px; background: var(--ev-card); border-radius: var(--ev-r-xl); box-shadow: var(--ev-sh-lg); padding: 28px 26px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--ev-fill); border: none; color: var(--ev-text2); cursor: pointer; }
.modal-close:hover { background: var(--ev-border-h); }

/* ── Footer text ──────────────────────────────────────────── */
.page-footer { text-align: center; padding: 20px; font-size: 11px; color: var(--ev-text3); }

/* ── select2 blend (kept as a real plugin where a page needs free-text
   tagging, e.g. vendor category — not part of the skin being removed) ── */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  background: var(--ev-fill); border: 1.5px solid var(--ev-border) !important; border-radius: var(--ev-r-sm) !important;
  min-height: 36px; font-family: var(--ev-font); font-size: 13px; color: var(--ev-text1);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ev-orange) !important; box-shadow: 0 0 0 3px rgba(232,115,14,.14);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ev-text1); line-height: 33px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 4px 8px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--ev-orange-100); color: var(--ev-orange-700); border: none; border-radius: var(--ev-r-full);
  padding: 3px 10px; font-size: 11.5px; font-weight: 700; margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ev-orange-700); margin-right: 5px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ev-orange); }
.select2-dropdown { border-color: var(--ev-border) !important; border-radius: var(--ev-r-md); overflow: hidden; font-family: var(--ev-font); }
.select2-search--dropdown .select2-search__field { border: 1.5px solid var(--ev-border); border-radius: var(--ev-r-sm); font-family: var(--ev-font); }

/* ── flatpickr blend (kept as a real plugin where a page needs a genuine
   date picker, e.g. user-log date-range filter — not part of the skin being
   removed). Centralized 2026-09-05 from a page-local stopgap. ── */
.flatpickr-calendar {
  font-family: var(--ev-font); box-shadow: var(--ev-sh-lg); border: 1px solid var(--ev-border); border-radius: var(--ev-r-md);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--ev-orange); border-color: var(--ev-orange); }
.flatpickr-day.today { border-color: var(--ev-orange); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ev-text1); }
.flatpickr-day:hover { background: var(--ev-orange-100); }

/* ── Tabs (plain replacement for Bootstrap nav-tabs) — page-agnostic, added
   2026-09-05 for createprojectprocess.aspx's multi-tab project workspace;
   reusable by any future page needing simple tab switching via a small
   showTab(group, key) toggle in the page's own script. ── */
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--ev-border); margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: none; background: none;
  font-family: var(--ev-font); font-size: 12.5px; font-weight: 700; color: var(--ev-text3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s ease;
}
.tab-btn:hover { color: var(--ev-text1); }
.tab-btn.active { color: var(--ev-orange-700); border-bottom-color: var(--ev-orange); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Progress bar (plain replacement for Bootstrap .progress/.progress-bar) —
   page-agnostic, added 2026-09-05 for financepaymententryallocation.aspx's
   "amount allocated" indicator; reusable by any future page needing a simple
   percentage bar. ── */
.progress-track { width: 100%; height: 10px; background: var(--ev-fill); border: 1px solid var(--ev-border); border-radius: var(--ev-r-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--ev-green); border-radius: var(--ev-r-full); transition: width .3s ease; }

/* ── Accordion (plain replacement for Bootstrap .accordion) — page-agnostic,
   added 2026-09 for viewprojectprocess.aspx's SOW-editor collapsible sections;
   toggled via a small page-local toggleAccordion(el) helper (same convention
   as .tab-nav's page-local showTab). Reusable by any future page needing
   simple collapsible sections. ── */
.acc-item { border: 1px solid var(--ev-border); border-radius: var(--ev-r-md); margin-bottom: 10px; overflow: hidden; }
.acc-head { width: 100%; text-align: left; background: var(--ev-fill); border: none; padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--ev-text1); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--ev-font); }
.acc-head i { transition: transform .2s ease; color: var(--ev-text3); }
.acc-head.open i { transform: rotate(180deg); }
.acc-body { display: none; padding: 16px; border-top: 1px solid var(--ev-border); }
.acc-body.open { display: block; }

/* ── Legacy badge/utility shim for JS-generated markup on view/process pages —
   viewprojectprocess.aspx (and its still-to-be-rebuilt Phase-2 siblings, which
   share the same JS) build several table rows in JS using a handful of
   Bootstrap-style badge/utility class names inline. Rather than hand-edit
   dozens of template-literal strings scattered through thousands of lines of
   business logic (risking transcription errors in code that must not change),
   these class names are given real styling here so the existing JS output
   renders correctly, unmodified. Additive only, existing tokens. ── */
.badge-light-secondary, .badge-light-danger, .badge-light-success, .badge-light-dark {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  padding: 4px 10px; border-radius: var(--ev-r-full); white-space: nowrap;
}
.badge-light-secondary { color: var(--ev-text2); background: var(--ev-fill); }
.badge-light-danger { color: var(--ev-red); background: var(--ev-red-bg); }
.badge-light-success { color: var(--ev-green); background: var(--ev-green-bg); }
.badge-light-dark { color: #fff; background: var(--ev-ink); }
.d-inline-flex { display: inline-flex; }
.d-inline-flex.bg-danger { background: var(--ev-red) !important; }
.d-inline-flex.bg-info { background: var(--ev-blue) !important; }
.d-inline-flex .dropdown-item { padding: 6px 10px; color: #fff !important; }
.d-inline-flex .dropdown-item:hover { background: transparent; opacity: .85; }
.text-primary { color: var(--ev-blue) !important; }
.text-danger { color: var(--ev-red) !important; }

/* ── blockUI loading-message shim — nearly every rebuilt page's $.blockUI({message:...})
   reuses a handful of Bootstrap utility/spinner classes (p-1, bg-dark, text-light/text-white,
   text-center, justify-content-center, align-items-center, spinner-grow, spinner-border) inside
   the loading overlay's message div. None of these existed once Bootstrap was dropped, so every
   "PLEASE WAIT"/"FETCHING DATA" overlay across the folder rendered as unstyled plain text with no
   dark box and no spinner at all — found 2026-09-05 while auditing all 33 pages for visual
   consistency. Additive, page-agnostic, existing tokens only — same pattern as the select2/
   flatpickr/legacy-badge blends above; do not fork per page. ── */
.p-1.bg-dark, .bg-dark.p-1 {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 22px 30px; background: var(--ev-ink) !important; border-radius: var(--ev-r-lg); box-shadow: var(--ev-sh-lg);
}
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.text-light, .text-white { color: #f7f1e9 !important; }
.bg-dark h5 { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.spinner-grow {
  display: inline-block; border-radius: 50%; background-color: currentColor;
  opacity: 0; animation: ev-spinner-grow .9s linear infinite;
}
@keyframes ev-spinner-grow { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.spinner-border {
  display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom;
  border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ev-spinner-border .75s linear infinite;
}
@keyframes ev-spinner-border { to { transform: rotate(360deg); } }