/* ═══════════════════════════════════════════════════════════════
   TechFinLens UI v2 — Premium Design System
   Drops onto every page via a single <link> tag.
   Enhances buttons, cards, tables, forms, badges, layout.
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --ui2-blue:    #2563EB;
  --ui2-blue-d:  #1D4ED8;
  --ui2-purple:  #7C3AED;
  --ui2-green:   #059669;
  --ui2-red:     #DC2626;
  --ui2-amber:   #D97706;
  --ui2-slate:   #64748B;
  --ui2-bg:      #F0F2F7;
  --ui2-card:    #FFFFFF;
  --ui2-border:  rgba(0,0,0,0.07);
  --ui2-shadow:  0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --ui2-shadow-md: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --ui2-shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  --ui2-radius:  12px;
  --ui2-radius-sm: 8px;
  --ui2-btn-h:   38px;
}

/* ── Body & Page ─────────────────────────────────────────────── */
body { background: var(--ui2-bg) !important; }

/* ── Page Headers ────────────────────────────────────────────── */
.page-header h1,
h1.page-title {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 60%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
}

/* ── Cards / Panels ─────────────────────────────────────────── */
.panel, .card, .mc-card, .vp-card, .metric-card {
  background: var(--ui2-card) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: var(--ui2-radius) !important;
  box-shadow: var(--ui2-shadow) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.panel:hover, .card:hover {
  box-shadow: var(--ui2-shadow-md) !important;
}

.panel-header {
  background: linear-gradient(180deg, #FAFBFE 0%, #F5F7FA 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  padding: 14px 20px !important;
}

.panel-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* ── Buttons — complete overhaul ─────────────────────────────── */
.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: var(--ui2-btn-h) !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
  letter-spacing: -0.1px !important;
}

/* Ripple effect on all buttons */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn:active::after { opacity: 1; }

/* Primary */
.btn.primary, .btn-primary, button.btn.primary {
  background: linear-gradient(135deg, #2563EB 0%, #3B5FDB 50%, #7C3AED 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.30), 0 1px 3px rgba(37,99,235,0.2) !important;
  border: none !important;
}
.btn.primary:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.40), 0 2px 6px rgba(37,99,235,0.25) !important;
}
.btn.primary:active:not(:disabled) {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.20) !important;
}

/* Ghost */
.btn.ghost, .btn-ghost, button.btn.ghost {
  background: rgba(255,255,255,0.9) !important;
  color: #475569 !important;
  border: 1.5px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.btn.ghost:hover:not(:disabled) {
  background: #fff !important;
  border-color: rgba(37,99,235,0.35) !important;
  color: #2563EB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.10) !important;
}

/* Danger */
.btn.danger, .btn-danger {
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2) !important;
  color: #DC2626 !important;
  border: 1.5px solid rgba(220,38,38,0.20) !important;
  box-shadow: 0 1px 4px rgba(220,38,38,0.08) !important;
}
.btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #FEE2E2, #FECACA) !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.20) !important;
  transform: translateY(-1px) !important;
}

/* Small */
.btn.sm {
  height: 30px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  gap: 5px !important;
}

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Action Buttons (inline table/list) ──────────────────────── */
button[onclick][style*="border:1px solid rgba(37,99,235"],
button[onclick][style*="border:1px solid rgba(220,38,38"] {
  border-radius: 7px !important;
  transition: all 0.15s ease !important;
  font-weight: 600 !important;
}

/* ── Form Controls ───────────────────────────────────────────── */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="url"], select, textarea {
  border: 1.5px solid rgba(0,0,0,0.10) !important;
  border-radius: 9px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  outline: none !important;
}
.form-control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10) !important;
  background: #fff !important;
}
.form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #94A3B8 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}
thead tr {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  border-bottom: 2px solid rgba(0,0,0,0.07) !important;
}
thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #94A3B8 !important;
  padding: 11px 14px !important;
  white-space: nowrap !important;
}
tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.045) !important;
  transition: background 0.12s ease !important;
}
tbody tr:hover {
  background: rgba(37,99,235,0.028) !important;
}
tbody td {
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: #334155 !important;
  vertical-align: middle !important;
}

/* ── Status / Risk Badges ────────────────────────────────────── */
.badge, .risk-badge, .status-badge, [class*="badge"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* ── Metric / KPI Cards ──────────────────────────────────────── */
.mc-card {
  border-radius: 14px !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.mc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563EB, #7C3AED);
  border-radius: 14px 14px 0 0;
}
.mc-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.mc-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: #94A3B8 !important;
  margin-bottom: 8px !important;
}

/* ── Topbar Enhancement ─────────────────────────────────────── */
.topbar {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.04) !important;
}

/* ── Sidebar Enhancement ─────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%) !important;
  box-shadow: 1px 0 0 rgba(0,0,0,0.06), 2px 0 12px rgba(0,0,0,0.03) !important;
}
.nav-item.active, .nav-item.on, .nav-a.active, .nav-a.on {
  background: linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(124,58,237,0.07) 100%) !important;
  color: #2563EB !important;
}
.nav-item .nav-ic, .nav-item .ni, .nav-a .nav-ic, .nav-a .ni {
  background: rgba(0,0,0,0.04) !important;
}
.nav-item.active .nav-ic, .nav-item.active .ni,
.nav-item.on .nav-ic, .nav-a.active .nav-ic {
  background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(124,58,237,0.12)) !important;
  color: #2563EB !important;
}

/* ── Sidebar consistency lock ──────────────────────────────────
   v22 update — making the icon backgrounds prominent and using a
   high-specificity selector (.sidebar .nav-item .nav-ic) so this
   wins over dashboard.html's own inline `background: var(--bg)`
   rule on line 260, regardless of style-sheet load order or any
   service-worker cache weirdness. Without this, MAIN-section
   icons render with a clearly visible gray box while
   MANAGEMENT-section icons appear flat (because their FA icon
   glyphs are denser and visually cover the faint fallback bg). ── */
.sidebar .nav-item .nav-ic,
.sidebar .nav-item .ni,
.sidebar .nav-a .nav-ic,
.sidebar .nav-a .ni,
.sidebar-foot .nav-ic,
aside.sidebar .nav-ic {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  background: #EEF2F7 !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s !important;
}

.sidebar .nav-item:hover .nav-ic,
.sidebar .nav-a:hover .nav-ic {
  background: #E0E7EF !important;
  border-color: rgba(37, 99, 235, 0.20) !important;
  color: #2563EB !important;
}

.sidebar .nav-item.active .nav-ic,
.sidebar .nav-item.on .nav-ic,
.sidebar .nav-a.active .nav-ic,
.sidebar .nav-a.on .nav-ic {
  background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(124,58,237,0.14)) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  color: #2563EB !important;
}

/* Sidebar nav geometry — SINGLE SOURCE OF TRUTH (head-loaded => first-frame
   paint; pinned so neither .active's old font-weight:600 nor any page's
   transition:all can resize a button). Do NOT re-add a geometry lock in tfl-ux.js. */
.sidebar .nav-item, .sidebar .nav-a {
  box-sizing: border-box !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background .15s, color .15s !important;
}
.sidebar .nav-item.active, .sidebar .nav-item.on,
.sidebar .nav-a.active,   .sidebar .nav-a.on {
  font-weight: 500 !important;
}

/* ── Vertical shrink lock (v5) ─────────────────────────────────
   .sidebar is `display:flex; flex-direction:column` with a fixed
   height (position:fixed; top:var(--tfl-th); bottom:0). Flex
   children default to flex-shrink:1, so the moment the nav list +
   .sidebar-foot are taller than the viewport — which happens on
   any account with AP + AR + admin nav items, or any laptop under
   ~900px tall — the browser COMPRESSES the buttons instead of
   scrolling. Result: items collapse to ~24-39px of rhythm instead
   of 44px, unevenly, and the icons get clipped.

   This is the vertical twin of the .main `flex:1` + no `min-width:0`
   trap already fixed in tfl-responsive.css. Pin every direct flex
   child of the sidebar to its natural height and let overflow-y:auto
   do its job. ── */
.sidebar > *,
.sidebar .nav-item, .sidebar .nav-a,
.sidebar .nav-section, .sidebar .nav-label,
.sidebar .nav-sec, .sidebar .nav-lbl {
  flex: 0 0 auto !important;
}
.sidebar .nav-item, .sidebar .nav-a {
  min-height: 44px !important;   /* 28px icon + 8px padding top/bottom */
}
/* The footer still needs to stick to the bottom, so it keeps
   margin-top:auto (set below) — flex:0 0 auto does not interfere. */

/* ── Sidebar footer: pin it, don't let it scroll away ──────────
   .sidebar-foot (usage bar + user card + Sign Out) previously
   relied on margin-top:auto inside the sidebar's own scrolling
   flex column. That only works while there's spare vertical
   room — once the nav list + usage widget are taller than the
   window (any laptop under ~900px tall, or once a user has
   admin-only nav items showing), Sign Out silently scrolls off
   the bottom with no visible scrollbar to hint at it. Making it
   sticky keeps it permanently visible and gives the sidebar a
   more solid, "always there" feel on every screen size. ── */
.sidebar-foot, .sb-foot, .sidebar-bottom {
  position: sticky !important;
  bottom: 0 !important;
  margin-top: auto !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%) !important;
  border-top: 1px solid var(--ui2-border) !important;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.05) !important;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  z-index: 2 !important;
}

/* ── Upload Zone ─────────────────────────────────────────────── */
.upload-zone, .drop-zone, [class*="upload-area"] {
  border: 2px dashed rgba(37,99,235,0.25) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.02), rgba(124,58,237,0.02)) !important;
  transition: all 0.2s ease !important;
}
.upload-zone:hover, .drop-zone:hover {
  border-color: rgba(37,99,235,0.50) !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(124,58,237,0.04)) !important;
}

/* ── Alert / Info Boxes ─────────────────────────────────────── */
.alert {
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  border: 1px solid !important;
}
.alert.error, .alert-error {
  background: rgba(220,38,38,0.06) !important;
  color: #DC2626 !important;
  border-color: rgba(220,38,38,0.18) !important;
}
.alert.success, .alert-success {
  background: rgba(5,150,105,0.06) !important;
  color: #059669 !important;
  border-color: rgba(5,150,105,0.18) !important;
}

/* ── Toast Enhancement ───────────────────────────────────────── */
.toast {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(20px) !important;
  background: rgba(255,255,255,0.98) !important;
  min-width: 280px !important;
  padding: 14px 16px !important;
}
.toast.success { border-left: 3px solid #059669 !important; }
.toast.error   { border-left: 3px solid #DC2626 !important; }
.toast.info    { border-left: 3px solid #2563EB !important; }
.toast.warning { border-left: 3px solid #D97706 !important; }

/* ── Modal Enhancement ───────────────────────────────────────── */
.modal-box {
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) !important;
}
.modal-overlay.open {
  background: rgba(15,23,42,0.50) !important;
  backdrop-filter: blur(10px) !important;
}
.modal-head {
  padding: 22px 24px 0 !important;
}
.modal-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
.modal-footer {
  padding: 16px 24px !important;
  background: #FAFBFC !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 0 0 18px 18px !important;
}

/* ── Security / Settings Items ───────────────────────────────── */
.security-item {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.045) !important;
}
.sec-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

/* ── Avatar / User Card ──────────────────────────────────────── */
.avatar-ring {
  box-shadow: 0 8px 32px rgba(37,99,235,0.28), 0 0 0 4px rgba(37,99,235,0.10) !important;
}

/* ── Quick Stat Cards ────────────────────────────────────────── */
.qs-card {
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 11px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.qs-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}
.qs-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
}

/* ── Sidebar User Card ───────────────────────────────────────── */
.sidebar-user, .sidebar-user-card, .sb-user {
  background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(124,58,237,0.04)) !important;
  border: 1px solid rgba(37,99,235,0.12) !important;
  border-radius: 10px !important;
}
/* Name + email stacked column — previously only defined locally inside
   profile.html, so this row rendered unstyled (or was simply missing)
   everywhere else. Centralized here so it's identical on every page. */
.sidebar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-name {
  font-size: 12px !important; font-weight: 600 !important; color: #0F172A !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-info .sidebar-email { font-size: 11px !important; color: #94A3B8 !important; }
.btn-signout {
  border-radius: 9px !important;
  font-weight: 600 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }

/* ── Code / Mono ─────────────────────────────────────────────── */
code {
  font-size: 12px !important;
  background: rgba(0,0,0,0.05) !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  color: #7C3AED !important;
}

/* ── Page Load Animation ─────────────────────────────────────── */
@keyframes ui2-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.panel:nth-child(1) { animation: ui2-fadeUp 0.30s ease both; }
.panel:nth-child(2) { animation: ui2-fadeUp 0.30s 0.05s ease both; }
.panel:nth-child(3) { animation: ui2-fadeUp 0.30s 0.10s ease both; }
.panel:nth-child(4) { animation: ui2-fadeUp 0.30s 0.15s ease both; }
.panel:nth-child(5) { animation: ui2-fadeUp 0.30s 0.18s ease both; }
.panel:nth-child(n+6) { animation: ui2-fadeUp 0.30s 0.20s ease both; }

/* ── Flagged Page specific ───────────────────────────────────── */
.flag-card {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: var(--ui2-shadow) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.flag-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ui2-shadow-md) !important;
}

/* ── Invoice Row Risk Colors ─────────────────────────────────── */
tr[data-risk="high"], .row-high {
  border-left: 3px solid #DC2626 !important;
}
tr[data-risk="medium"], .row-medium {
  border-left: 3px solid #D97706 !important;
}

/* ── Progress Bars ───────────────────────────────────────────── */
.progress-bar, [class*="progress"] {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* ── Vendor Portal Page ──────────────────────────────────────── */
.vp-card {
  border-radius: 16px !important;
  box-shadow: var(--ui2-shadow-md) !important;
}

/* ── Profile Avatar Card ─────────────────────────────────────── */
.avatar-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #F0F4FF 100%) !important;
}

/* ── API Key Box ─────────────────────────────────────────────── */
.api-key-box {
  background: linear-gradient(135deg, #0F172A, #1E293B) !important;
  border-radius: 11px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20) !important;
}

/* ── Utility: Smooth all transitions ─────────────────────────── */
a, button {
  -webkit-tap-highlight-color: transparent !important;
}

/* ── Checkbox / Toggle polish ────────────────────────────────── */
input[type="checkbox"] {
  accent-color: #2563EB;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ── Empty States ────────────────────────────────────────────── */
[style*="text-align:center"][style*="padding:16px"],
[style*="text-align:center"][style*="padding:20px"] {
  color: #94A3B8 !important;
}

/* ── Number / Amount display ─────────────────────────────────── */
.amount, .total-amount, [class*="amount"] {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.3px !important;
}