@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   Furniture ERP Manager Pro — WordPress Plugin Styles
   v3 — Theme-Isolated (works on ANY WordPress theme)
   All rules scoped under #ferp-root to avoid theme conflicts.
   Supports light & dark modes automatically.
   ============================================================ */

/* ============================================================
   THEME ISOLATION RESET — hardens ERP against hostile WP themes
   ============================================================
   Many WordPress themes inject aggressive global CSS for elements like
   button, input, h1-h6, table, a, p — sometimes with !important. To make
   sure the ERP looks identical regardless of the active theme, we reset
   every element inside #ferp-root to neutral defaults BEFORE our own
   styles cascade in. Selector specificity is high (body #ferp-root)
   so even theme rules like `body button { ... !important }` lose. */
body #ferp-root,
body #ferp-root * {
  /* Universal box-sizing — themes that set box-sizing: content-box on body
     would shrink our padded buttons. Force border-box for predictability. */
  box-sizing: border-box !important;
}
body #ferp-root {
  /* Anchor font + color + line-height at the root so child inheritance
     doesn't pick up theme defaults like serif fonts or huge line-heights. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ferp-text1) !important;
  background: var(--ferp-bg) !important;
  text-align: left !important;
  direction: ltr;
}

/* Reset every text node inside the ERP — themes love to add custom
   font-family / font-size to headings, table cells, list items, etc. */
body #ferp-root h1,
body #ferp-root h2,
body #ferp-root h3,
body #ferp-root h4,
body #ferp-root h5,
body #ferp-root h6,
body #ferp-root p,
body #ferp-root div,
body #ferp-root span,
body #ferp-root li,
body #ferp-root td,
body #ferp-root th,
body #ferp-root label,
body #ferp-root small {
  font-family: inherit !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: inherit;
}
/* Headings — themes often add big margins/border-bottoms. Strip them. */
body #ferp-root h1,
body #ferp-root h2,
body #ferp-root h3,
body #ferp-root h4,
body #ferp-root h5,
body #ferp-root h6 {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 600;
  line-height: 1.3;
}
body #ferp-root p {
  margin: 0;
  padding: 0;
}
/* Lists — many themes add bullets/numbering even where we don't want them */
body #ferp-root ul,
body #ferp-root ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Form controls — themes love to restyle these with weird borders, glow
   shadows, full-width inputs, etc. Reset to a clean baseline. */
body #ferp-root input,
body #ferp-root textarea,
body #ferp-root select,
body #ferp-root button {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit;
  margin: 0;
  text-transform: none !important;
  letter-spacing: normal !important;
  /* Don't strip background/border here — our own .ferp-* rules set those */
}
body #ferp-root input[type="text"],
body #ferp-root input[type="number"],
body #ferp-root input[type="email"],
body #ferp-root input[type="tel"],
body #ferp-root input[type="password"],
body #ferp-root input[type="date"],
body #ferp-root input[type="search"],
body #ferp-root textarea,
body #ferp-root select {
  /* Themes sometimes set 100% width on all inputs — keep our controls
     at their declared widths instead. */
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 0.5px solid var(--ferp-border2);
  border-radius: 6px;
  background: var(--ferp-bg1);
  color: var(--ferp-text1);
  box-shadow: none !important;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body #ferp-root input:focus,
body #ferp-root textarea:focus,
body #ferp-root select:focus {
  outline: 2px solid var(--ferp-brand);
  outline-offset: -1px;
  border-color: transparent;
}

/* Buttons — every theme styles <button> globally. We need to neutralise
   their background gradients, text-transform, borders, and shadows so our
   .ferp-btn rules can take over cleanly. */
body #ferp-root button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-shadow: none !important;
  /* Important: don't break our own .ferp-btn padding/borders applied below.
     Those rules use !important too, so they always win. */
}

/* Links inside the ERP — strip theme link styling */
body #ferp-root a {
  color: var(--ferp-brand);
  text-decoration: none;
  background: transparent;
  box-shadow: none;
}
body #ferp-root a:hover {
  color: var(--ferp-brand-hover);
  text-decoration: underline;
}

/* Tables — themes love to add zebra stripes, weird borders, captions, etc.
   Reset baseline so .ferp-tbl-wrap rules render predictably. */
body #ferp-root table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
  background: transparent;
  margin: 0;
  font-size: inherit;
}
body #ferp-root th,
body #ferp-root td {
  background: transparent;
  text-align: left;
  vertical-align: middle;
  border: none;
}

/* Images — Tabler icon SVGs etc. shouldn't get theme image styling */
body #ferp-root img,
body #ferp-root svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Block any theme animations from triggering inside our UI */
body #ferp-root * {
  animation: none;
}
/* …except those we explicitly want (ferp-fade-in, etc.) — re-allow our own */
body #ferp-root .ferp-fade-in,
body #ferp-root .ferp-slide-up,
body #ferp-root [class*="ferp-anim"] {
  animation-name: revert;
  animation-duration: revert;
}

/* Z-index isolation — the modal overlay needs to sit above any theme nav,
   header, or "back to top" buttons. Use a high z-index baseline. */
body #ferp-root #ferp-modal-overlay { z-index: 999999 !important; }
body #ferp-root #ferp-sidebar { z-index: 9999; }
body #ferp-root #ferp-header { z-index: 100; }

/* Hide WP admin bar push on the ERP container so layout stays clean */
body.admin-bar #ferp-root { /* no extra top offset; ERP draws its own header */ }

/* ---- Light Mode Tokens ---- */
#ferp-root {
  /* Brand */
  --ferp-brand:        #533AB7;
  --ferp-brand-hover:  #3C3489;
  --ferp-brand-tint:   #EEEDFE;
  --ferp-brand-text:   #534AB7;

  /* Backgrounds */
  --ferp-bg:           #f5f5f2;
  --ferp-bg1:          #ffffff;
  --ferp-bg2:          #f0eff8;

  /* Text */
  --ferp-text1:        #1a1a18;
  --ferp-text2:        #5c5b58;
  --ferp-text3:        #9a9896;

  /* Borders */
  --ferp-border:       rgba(0,0,0,0.10);
  --ferp-border2:      rgba(0,0,0,0.20);

  /* Radius */
  --ferp-radius:       8px;
  --ferp-radius-lg:    12px;

  /* Layout */
  --ferp-sidebar-w:    220px;
  --ferp-hdr-h:        52px;

  /* Semantic colours */
  --ferp-green-bg:     #EAF3DE;
  --ferp-green-fg:     #3B6D11;
  --ferp-green-bdr:    #C0DD97;
  --ferp-amber-bg:     #FAEEDA;
  --ferp-amber-fg:     #854F0B;
  --ferp-blue-bg:      #E6F1FB;
  --ferp-blue-fg:      #185FA5;
  --ferp-red-bg:       #FCEBEB;
  --ferp-red-fg:       #A32D2D;
  --ferp-red-bdr:      #F7C1C1;
  --ferp-grey-bg:      #F1EFE8;
  --ferp-grey-fg:      #5F5E5A;
  --ferp-purple-fg:    #534AB7;
  --ferp-tbl-hover:    #f5f4ff;

  /* Shadow / overlay */
  --ferp-shadow:       0 8px 48px rgba(0,0,0,0.18);
  --ferp-overlay-bg:   rgba(0,0,0,0.45);
  --ferp-mob-overlay:  rgba(0,0,0,0.40);
}

/* ---- Dark Mode Tokens ----
   Three ways to activate dark mode:
   1. OS-level preference via prefers-color-scheme (default below)
   2. data-theme="dark" attribute on #ferp-root (user-chosen, overrides #1)
   3. data-theme="light" forces light even if OS is dark
   The user's choice is saved to localStorage and reapplied on every load. */
@media (prefers-color-scheme: dark) {
  #ferp-root:not([data-theme="light"]) {
    --ferp-bg:          #1a1a1f;
    --ferp-bg1:         #26262e;
    --ferp-bg2:         #2e2e38;
    --ferp-text1:       #e8e8e6;
    --ferp-text2:       #a0a09c;
    --ferp-text3:       #666662;
    --ferp-border:      rgba(255,255,255,0.09);
    --ferp-border2:     rgba(255,255,255,0.18);
    --ferp-brand-tint:  rgba(83,58,183,0.22);
    --ferp-green-bg:    rgba(59,109,17,0.22);
    --ferp-green-fg:    #88c644;
    --ferp-green-bdr:   rgba(59,109,17,0.40);
    --ferp-amber-bg:    rgba(133,79,11,0.22);
    --ferp-amber-fg:    #e8a050;
    --ferp-blue-bg:     rgba(24,95,165,0.22);
    --ferp-blue-fg:     #6ab0ef;
    --ferp-red-bg:      rgba(163,45,45,0.22);
    --ferp-red-fg:      #f08080;
    --ferp-red-bdr:     rgba(163,45,45,0.40);
    --ferp-grey-bg:     rgba(95,94,90,0.22);
    --ferp-grey-fg:     #a8a7a2;
    --ferp-purple-fg:   #a090e8;
    --ferp-tbl-hover:   rgba(83,58,183,0.10);
    --ferp-shadow:      0 8px 48px rgba(0,0,0,0.55);
    --ferp-overlay-bg:  rgba(0,0,0,0.65);
    --ferp-mob-overlay: rgba(0,0,0,0.60);
  }
}

/* Explicit dark mode — user chose dark, applies even when OS is in light mode */
#ferp-root[data-theme="dark"] {
  --ferp-bg:          #1a1a1f;
  --ferp-bg1:         #26262e;
  --ferp-bg2:         #2e2e38;
  --ferp-text1:       #e8e8e6;
  --ferp-text2:       #a0a09c;
  --ferp-text3:       #666662;
  --ferp-border:      rgba(255,255,255,0.09);
  --ferp-border2:     rgba(255,255,255,0.18);
  --ferp-brand-tint:  rgba(83,58,183,0.22);
  --ferp-green-bg:    rgba(59,109,17,0.22);
  --ferp-green-fg:    #88c644;
  --ferp-green-bdr:   rgba(59,109,17,0.40);
  --ferp-amber-bg:    rgba(133,79,11,0.22);
  --ferp-amber-fg:    #e8a050;
  --ferp-blue-bg:     rgba(24,95,165,0.22);
  --ferp-blue-fg:     #6ab0ef;
  --ferp-red-bg:      rgba(163,45,45,0.22);
  --ferp-red-fg:      #f08080;
  --ferp-red-bdr:     rgba(163,45,45,0.40);
  --ferp-grey-bg:     rgba(95,94,90,0.22);
  --ferp-grey-fg:     #a8a7a2;
  --ferp-purple-fg:   #a090e8;
  --ferp-tbl-hover:   rgba(83,58,183,0.10);
  --ferp-shadow:      0 8px 48px rgba(0,0,0,0.55);
  --ferp-overlay-bg:  rgba(0,0,0,0.65);
  --ferp-mob-overlay: rgba(0,0,0,0.60);
}

/* ---- Dark-mode-only overrides for hard-coded colors in JS templates ----
   Many parts of the UI use inline style="color: #1a1a18" (hard-coded dark
   text) which would stay black even in dark mode and become unreadable on
   the dark backgrounds. These rules force such text to the dark-mode text
   color when in dark mode. Use [style*="..."] attribute selectors with a
   high-specificity #ferp-root + !important to win over inline styles. */
#ferp-root[data-theme="dark"] [style*="color:#1a1a18"],
#ferp-root[data-theme="dark"] [style*="color: #1a1a18"],
#ferp-root[data-theme="dark"] [style*="color:#333"],
#ferp-root[data-theme="dark"] [style*="color: #333"],
#ferp-root[data-theme="dark"] [style*="color:#444"],
#ferp-root[data-theme="dark"] [style*="color: #444"],
#ferp-root[data-theme="dark"] [style*="color:#555"],
#ferp-root[data-theme="dark"] [style*="color: #555"] {
  color: var(--ferp-text1) !important;
}
#ferp-root[data-theme="dark"] [style*="color:#666"],
#ferp-root[data-theme="dark"] [style*="color: #666"],
#ferp-root[data-theme="dark"] [style*="color:#888"],
#ferp-root[data-theme="dark"] [style*="color: #888"] {
  color: var(--ferp-text2) !important;
}
#ferp-root[data-theme="dark"] [style*="background:#fff"],
#ferp-root[data-theme="dark"] [style*="background: #fff"],
#ferp-root[data-theme="dark"] [style*="background:#FFF"],
#ferp-root[data-theme="dark"] [style*="background-color:#fff"] {
  background: var(--ferp-bg1) !important;
}

/* Same overrides when dark-mode is via OS preference (no data-theme="light") */
@media (prefers-color-scheme: dark) {
  #ferp-root:not([data-theme="light"]) [style*="color:#1a1a18"],
  #ferp-root:not([data-theme="light"]) [style*="color: #1a1a18"],
  #ferp-root:not([data-theme="light"]) [style*="color:#333"],
  #ferp-root:not([data-theme="light"]) [style*="color: #333"],
  #ferp-root:not([data-theme="light"]) [style*="color:#444"],
  #ferp-root:not([data-theme="light"]) [style*="color: #444"],
  #ferp-root:not([data-theme="light"]) [style*="color:#555"],
  #ferp-root:not([data-theme="light"]) [style*="color: #555"] {
    color: var(--ferp-text1) !important;
  }
  #ferp-root:not([data-theme="light"]) [style*="color:#666"],
  #ferp-root:not([data-theme="light"]) [style*="color: #666"],
  #ferp-root:not([data-theme="light"]) [style*="color:#888"],
  #ferp-root:not([data-theme="light"]) [style*="color: #888"] {
    color: var(--ferp-text2) !important;
  }
}

/* Theme toggle button — styled like the other header buttons */
#ferp-root .ferp-theme-toggle-icon { font-size: 16px; }

/* ================================================================
   HARD RESET — isolate from ANY WordPress theme
   ================================================================ */
#ferp-root,
#ferp-root *,
#ferp-root *::before,
#ferp-root *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Theme link styles */
#ferp-root a,
#ferp-root a:visited,
#ferp-root a:hover,
#ferp-root a:focus {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Theme button reset */
#ferp-root button {
  -webkit-appearance: none;
  appearance: none;
}

/* Theme input reset */
#ferp-root input,
#ferp-root select,
#ferp-root textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Heading resets (Twenty Twenty, Storefront, Divi etc.) */
#ferp-root h1, #ferp-root h2, #ferp-root h3,
#ferp-root h4, #ferp-root h5, #ferp-root h6 {
  color: var(--ferp-text1) !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}
#ferp-root h1::before, #ferp-root h1::after,
#ferp-root h2::before, #ferp-root h2::after { display: none !important; }

/* List resets */
#ferp-root ul, #ferp-root ol { list-style: none !important; }

/* Paragraph resets */
#ferp-root p { margin: 0 !important; }

/* HR resets */
#ferp-root hr {
  border: none !important;
  border-top: 0.5px solid var(--ferp-border) !important;
  margin: 12px 0 !important;
}

/* ================================================================
   FOUNDATIONAL RESET (applies at every screen size)
   These rules prevent overflow at the source rather than hiding it.
   ================================================================ */

/* 1. box-sizing on everything inside the plugin */
#ferp-root, #ferp-root *, #ferp-root *::before, #ferp-root *::after {
  box-sizing: border-box;
}

/* 1b. Break out of theme constraints — many WP themes wrap shortcode content
       inside .entry-content / article / .container which can have max-width,
       extra padding, or a sidebar. The plugin needs to escape that. */
#ferp-root {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  position: relative;
}
/* Allow nothing inside the plugin to push wider than the plugin itself.
   Scoped to #ferp-root only — does NOT touch the user's html/body. */
#ferp-root, #ferp-app, #ferp-main, #ferp-content, #ferp-header {
  max-width: 100%;
  overflow-x: clip; /* "clip" doesn't create scroll container, just clips */
}
/* Fallback for browsers without overflow-x: clip (older Safari) */
@supports not (overflow: clip) {
  #ferp-root, #ferp-app, #ferp-main, #ferp-content, #ferp-header {
    overflow-x: hidden;
  }
}

/* 2. THE critical fix: flex/grid children default to min-width: auto, which
      refuses to shrink below their content's intrinsic width. This is the
      root cause of nearly every horizontal-overflow bug on the web. */
#ferp-main, #ferp-content,
#ferp-root .ferp-card,
#ferp-root .ferp-stat-grid > *,
#ferp-root .ferp-chart-grid > *,
#ferp-root .ferp-form-grid > *,
#ferp-root .ferp-section-hdr > * {
  min-width: 0;
  min-height: 0;
}

/* 3. Replaced/embedded media should never escape its container */
#ferp-root img,
#ferp-root canvas,
#ferp-root svg:not(.ferp-svg-icon),
#ferp-root video,
#ferp-root iframe {
  max-width: 100%;
  height: auto;
}

/* 4. Long unbroken strings (URLs, big numbers) should wrap */
#ferp-root .ferp-card,
#ferp-root .ferp-stat-card,
#ferp-root .ferp-alert,
#ferp-root td, #ferp-root th {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* 5. Chart container — gives Chart.js a defined box so it doesn't
      render at its default ~640px before JS resize kicks in. */
#ferp-root .ferp-chart-box {
  position: relative;
  width: 100%;
  height: 280px;
}
#ferp-root .ferp-chart-box canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 6. Responsive 2-column utility (replaces inline grid-template-columns:1fr 1fr) */
#ferp-root .ferp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  #ferp-root .ferp-grid-2 { grid-template-columns: 1fr; }
}

/* Strong resets */
#ferp-root strong, #ferp-root b { color: inherit !important; }

/* ================================================================
   ROOT / SHELL
   ================================================================ */
#ferp-root {
  isolation: isolate;
  color-scheme: light dark;
  font-size: 14px !important;
  color: var(--ferp-text1) !important;
  line-height: 1.5 !important;
  background: var(--ferp-bg) !important;
}

#ferp-app {
  display: flex;
  min-height: 100vh;
  background: var(--ferp-bg);
  position: relative;
}

/* ---- Sidebar ---- */
#ferp-sidebar {
  width: var(--ferp-sidebar-w);
  background: var(--ferp-bg1);
  border-right: 0.5px solid var(--ferp-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
  transition: transform 0.25s ease;
}

#ferp-root .ferp-sidebar-logo {
  padding: 16px;
  border-bottom: 0.5px solid var(--ferp-border);
  display: flex; align-items: center; gap: 8px;
}

#ferp-root .ferp-logo-icon {
  width: 32px; height: 32px;
  background: var(--ferp-brand);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; flex-shrink: 0;
  overflow: hidden;
}
/* When the user has uploaded a custom logo, drop the brand-purple backdrop
   so an arbitrary logo (with its own colors and background) shows cleanly. */
#ferp-root .ferp-logo-icon.ferp-logo-custom {
  background: var(--ferp-bg1);
  border: 0.5px solid var(--ferp-border);
}

#ferp-root .ferp-logo-svg {
  width: 24px; height: 24px;
  display: block;
  object-fit: contain;
}

#ferp-root .ferp-logo-text { font-size: 13px; font-weight: 500; color: var(--ferp-text1); }
#ferp-root .ferp-logo-sub  { font-size: 11px; color: var(--ferp-text2); }

#ferp-root .ferp-nav-section { padding: 8px 0; }
#ferp-root .ferp-nav-label {
  font-size: 10px; font-weight: 500; color: var(--ferp-text3);
  letter-spacing: .06em; padding: 12px 16px 4px; text-transform: uppercase;
}

#ferp-root .ferp-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer;
  color: var(--ferp-text2); font-size: 13px;
  border-left: 3px solid transparent;
  transition: all .15s;
  line-height: 1.4 !important;
}
#ferp-root .ferp-nav-item:hover { background: var(--ferp-bg2); color: var(--ferp-text1); }
#ferp-root .ferp-nav-item.active {
  background: var(--ferp-brand-tint);
  color: var(--ferp-brand);
  border-left-color: var(--ferp-brand);
  font-weight: 500;
}
#ferp-root .ferp-nav-item i { font-size: 17px; min-width: 20px; }

/* ---- Main ---- */
#ferp-main {
  margin-left: var(--ferp-sidebar-w);
  flex: 1; display: flex; flex-direction: column;
  min-height: 100vh;
}

#ferp-header {
  height: var(--ferp-hdr-h);
  background: var(--ferp-bg1);
  border-bottom: 0.5px solid var(--ferp-border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 10px;
  position: sticky; top: 0; z-index: 50;
}

#ferp-header h1 {
  font-size: 16px !important; font-weight: 600 !important; flex: 1;
  color: var(--ferp-text1) !important;
  letter-spacing: -0.2px;
  border: none !important; background: none !important;
}

#ferp-root .ferp-menu-toggle {
  display: none;
  background: none !important; border: none !important;
  cursor: pointer; font-size: 20px; color: var(--ferp-text1);
  padding: 4px 6px; border-radius: 6px;
}
#ferp-root .ferp-menu-toggle:hover { background: var(--ferp-bg2) !important; }

#ferp-root .ferp-hdr-btn {
  padding: 6px 14px;
  border: 0.5px solid var(--ferp-border2) !important;
  border-radius: var(--ferp-radius) !important;
  background: transparent !important;
  font-size: 13px; color: var(--ferp-text1) !important;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; box-shadow: none !important;
}
#ferp-root .ferp-hdr-btn:hover { background: var(--ferp-bg2) !important; }
#ferp-root .ferp-hdr-btn.ferp-primary {
  background: var(--ferp-brand) !important; color: #fff !important;
  border-color: var(--ferp-brand) !important; font-weight: 500;
}
#ferp-root .ferp-hdr-btn.ferp-primary:hover { background: var(--ferp-brand-hover) !important; }

#ferp-content { padding: 20px; flex: 1; }

/* ---- Cards ---- */
#ferp-root .ferp-card {
  background: var(--ferp-bg1);
  border: 0.5px solid var(--ferp-border);
  border-radius: var(--ferp-radius-lg);
  padding: 16px; margin-bottom: 16px;
}

#ferp-root .ferp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 20px;
}

#ferp-root .ferp-stat-card {
  background: var(--ferp-bg2);
  border-radius: var(--ferp-radius);
  padding: 14px;
}

#ferp-root .ferp-stat-label {
  font-size: 11px; color: var(--ferp-text2);
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
#ferp-root .ferp-stat-value { font-size: 22px; font-weight: 500; }
#ferp-root .ferp-stat-card.blue   .ferp-stat-value { color: var(--ferp-blue-fg); }
#ferp-root .ferp-stat-card.green  .ferp-stat-value { color: var(--ferp-green-fg); }
#ferp-root .ferp-stat-card.amber  .ferp-stat-value { color: var(--ferp-amber-fg); }
#ferp-root .ferp-stat-card.red    .ferp-stat-value { color: var(--ferp-red-fg); }
#ferp-root .ferp-stat-card.purple .ferp-stat-value { color: var(--ferp-purple-fg); }

/* ---- Table ---- */
#ferp-root .ferp-tbl-wrap { overflow-x: auto; }
#ferp-root table { width: 100%; border-collapse: collapse; }
#ferp-root th {
  text-align: left; font-size: 11px !important; font-weight: 500 !important;
  color: var(--ferp-text2) !important; padding: 8px 12px !important;
  border-bottom: 0.5px solid var(--ferp-border) !important;
  background: var(--ferp-bg2) !important;
  text-transform: uppercase; letter-spacing: .05em;
  border-top: none !important; border-left: none !important; border-right: none !important;
}
#ferp-root td {
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--ferp-border) !important;
  font-size: 13px !important; vertical-align: middle !important;
  color: var(--ferp-text1) !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
}
#ferp-root tr:last-child td { border-bottom: none !important; }
#ferp-root tr:hover td { background: var(--ferp-tbl-hover) !important; }

/* ---- Badge ---- */
#ferp-root .ferp-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}
#ferp-root .ferp-badge.paid     { background: var(--ferp-green-bg); color: var(--ferp-green-fg); }
#ferp-root .ferp-badge.pending  { background: var(--ferp-amber-bg); color: var(--ferp-amber-fg); }
#ferp-root .ferp-badge.partial  { background: var(--ferp-blue-bg);  color: var(--ferp-blue-fg);  }
#ferp-root .ferp-badge.overdue  { background: var(--ferp-red-bg);   color: var(--ferp-red-fg);   }
#ferp-root .ferp-badge.active   { background: var(--ferp-green-bg); color: var(--ferp-green-fg); }
#ferp-root .ferp-badge.inactive { background: var(--ferp-grey-bg);  color: var(--ferp-grey-fg);  }

/* ---- Forms ---- */
#ferp-root .ferp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
#ferp-root .ferp-form-group { display: flex; flex-direction: column; gap: 5px; }
#ferp-root label { font-size: 12px !important; font-weight: 500 !important; color: var(--ferp-text2) !important; }

#ferp-root input,
#ferp-root select,
#ferp-root textarea {
  padding: 7px 10px !important;
  border: 0.5px solid var(--ferp-border2) !important;
  border-radius: var(--ferp-radius) !important;
  background: var(--ferp-bg1) !important;
  color: var(--ferp-text1) !important;
  font-size: 13px !important; width: 100%;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
#ferp-root input:focus,
#ferp-root select:focus,
#ferp-root textarea:focus {
  outline: none !important;
  border-color: var(--ferp-brand) !important;
  box-shadow: 0 0 0 2px rgba(83,58,183,0.15) !important;
}

/* Select dropdown arrow (theme-proof) */
#ferp-root select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

/* ---- Buttons ---- */
#ferp-root .ferp-btn {
  padding: 7px 16px;
  border: 0.5px solid var(--ferp-border2) !important;
  border-radius: var(--ferp-radius) !important;
  cursor: pointer; font-size: 13px;
  background: transparent !important; color: var(--ferp-text1) !important;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.4 !important;
  box-shadow: none !important; text-decoration: none !important;
}
#ferp-root .ferp-btn:hover { background: var(--ferp-bg2) !important; }
#ferp-root .ferp-btn.ferp-primary { background: var(--ferp-brand) !important; color: #fff !important; border-color: var(--ferp-brand) !important; }
#ferp-root .ferp-btn.ferp-primary:hover { background: var(--ferp-brand-hover) !important; }
#ferp-root .ferp-btn.ferp-danger  { background: var(--ferp-red-bg) !important;   color: var(--ferp-red-fg) !important;   border-color: var(--ferp-red-bdr) !important; }
#ferp-root .ferp-btn.ferp-success { background: var(--ferp-green-bg) !important; color: var(--ferp-green-fg) !important; border-color: var(--ferp-green-bdr) !important; }
#ferp-root .ferp-btn.ferp-sm { padding: 4px 10px; font-size: 12px; }

/* ---- Modal ---- */
#ferp-root .ferp-modal-overlay {
  position: fixed; inset: 0;
  background: var(--ferp-overlay-bg);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#ferp-root .ferp-modal {
  background: var(--ferp-bg1);
  border: 0.5px solid var(--ferp-border);
  border-radius: var(--ferp-radius-lg);
  width: 100%; max-width: 780px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--ferp-shadow);
}
#ferp-root .ferp-modal-hdr {
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--ferp-border);
  display: flex; align-items: center; justify-content: space-between;
}
#ferp-root .ferp-modal-hdr h2 {
  font-size: 16px !important; font-weight: 500 !important;
  color: var(--ferp-text1) !important;
  border: none !important; background: none !important;
}
#ferp-root .ferp-modal-body   { padding: 16px 20px; }
#ferp-root .ferp-modal-footer {
  padding: 14px 20px;
  border-top: 0.5px solid var(--ferp-border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ---- Vendor price table ---- */
#ferp-root .ferp-vprice-table {
  width: 100%; border: 0.5px solid var(--ferp-border);
  border-radius: 8px; overflow: hidden; margin-top: 8px;
}
#ferp-root .ferp-vprice-row {
  display: flex; align-items: center;
  padding: 8px 12px; border-bottom: 0.5px solid var(--ferp-border); gap: 12px;
  background: var(--ferp-bg1);
}
#ferp-root .ferp-vprice-row:last-child { border-bottom: none; }
#ferp-root .ferp-vprice-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--ferp-text1); }
#ferp-root .ferp-vprice-input { width: 120px; text-align: right; }

/* ---- Invoice items ---- */
#ferp-root .ferp-inv-items { width: 100%; border-collapse: collapse; margin: 12px 0; }
#ferp-root .ferp-inv-items th,
#ferp-root .ferp-inv-items td {
  padding: 9px 12px !important;
  border: 0.5px solid var(--ferp-border) !important;
  font-size: 12px !important;
}
#ferp-root .ferp-inv-items tfoot td { font-weight: 500; background: var(--ferp-bg2) !important; }
#ferp-root .ferp-inv-items tbody tr:hover td { background: var(--ferp-tbl-hover) !important; }

/* ---- Alert ---- */
#ferp-root .ferp-alert {
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
#ferp-root .ferp-alert.info    { background: var(--ferp-blue-bg);  color: var(--ferp-blue-fg);  }
#ferp-root .ferp-alert.warn    { background: var(--ferp-amber-bg); color: var(--ferp-amber-fg); }
#ferp-root .ferp-alert.success { background: var(--ferp-green-bg); color: var(--ferp-green-fg); }

/* ---- AI Chat ---- */
#ferp-root .ferp-ai-msg {
  background: var(--ferp-bg1);
  border-radius: 8px; padding: 10px;
  font-size: 13px; line-height: 1.6;
  border: 0.5px solid var(--ferp-border);
  white-space: pre-wrap; color: var(--ferp-text1);
}

/* ---- Charts ---- */
#ferp-root .ferp-chart-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
}
/* Canvas sizing is now handled by .ferp-chart-box; legacy fallback only */
#ferp-root canvas:not(.ferp-chart-box canvas) { max-height: 220px; }

/* ---- Misc ---- */
#ferp-root .ferp-section-hdr {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}
#ferp-root .ferp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ferp-brand-tint); color: var(--ferp-brand-text);
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}
#ferp-root .ferp-empty-state { text-align: center; padding: 40px; color: var(--ferp-text2); }
#ferp-root .ferp-empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }

#ferp-root .ferp-tabs {
  display: flex; gap: 2px;
  background: var(--ferp-bg2);
  border-radius: 8px; padding: 3px; margin-bottom: 16px;
}
#ferp-root .ferp-tab {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--ferp-text2);
  border: none !important; background: transparent !important;
}
#ferp-root .ferp-tab.active {
  background: var(--ferp-bg1) !important;
  color: var(--ferp-text1) !important;
  font-weight: 500;
}

/* ---- Sidebar overlay (mobile) ---- */
#ferp-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--ferp-mob-overlay); z-index: 199;
}

/* ==============================
   RESPONSIVE — APP-LIKE MOBILE
   ============================== */

/* Hide bottom-nav on desktop */
#ferp-root #ferp-bottom-nav { display: none; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  #ferp-root .ferp-stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile (phones + small tablets) ---- */
@media (max-width: 768px) {

  /* Account for iOS/Android safe areas (notch, home indicator) */
  #ferp-root {
    --ferp-safe-top:    env(safe-area-inset-top, 0px);
    --ferp-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Sidebar = slide-in drawer */
  #ferp-sidebar {
    transform: translateX(-100%);
    width: 82vw; max-width: 300px;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    padding-top: var(--ferp-safe-top);
  }
  #ferp-sidebar.open { transform: translateX(0); }
  #ferp-sidebar-overlay.open { display: block; }
  #ferp-main { margin-left: 0; }

  /* Hamburger still works (from More tab) but hidden in header — bottom nav is primary */
  #ferp-root .ferp-menu-toggle { display: none !important; }

  /* Compact, sticky header */
  #ferp-header {
    padding: 0 12px;
    padding-top: var(--ferp-safe-top);
    height: calc(var(--ferp-hdr-h) + var(--ferp-safe-top));
    gap: 6px;
  }
  #ferp-header h1 { font-size: 17px !important; }

  /* In header: hide the long primary button label, keep icon-only */
  #ferp-root .ferp-hdr-btn { padding: 8px 10px; font-size: 12px; }
  #ferp-root #ferp-hdr-action-label { display: none; }
  #ferp-root #ferp-hdr-action-btn { padding: 8px 10px; }

  /* Content gets bottom padding for the bottom-nav clearance */
  #ferp-content {
    padding: 14px;
    padding-bottom: calc(80px + var(--ferp-safe-bottom));
  }

  /* Stat grid — 2 columns, larger touch */
  #ferp-root .ferp-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #ferp-root .ferp-stat-card { padding: 12px; }
  #ferp-root .ferp-stat-value { font-size: 19px; }

  /* Charts always stack */
  #ferp-root .ferp-chart-grid { grid-template-columns: 1fr; }

  /* Printable invoice — stacks columns on mobile inside the modal */
  #ferp-root #ferp-invoice-print > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Invoice total rows use width:220px inline — let them fill width */
  #ferp-root #ferp-invoice-print [style*="width:220px"] {
    width: 100% !important;
  }

  /* Cards a bit tighter */
  #ferp-root .ferp-card { padding: 14px; border-radius: 14px; }

  /* Section headers wrap nicely */
  #ferp-root .ferp-section-hdr {
    flex-direction: column; align-items: stretch !important; gap: 10px;
  }
  #ferp-root .ferp-section-hdr > div { width: 100%; }
  #ferp-root .ferp-section-hdr input,
  #ferp-root .ferp-section-hdr select { width: 100% !important; }

  /* ===========================================================
     TABLES → CARD STACK on mobile (the app-like transformation)
     Every <tr> becomes a card; every <td> becomes a label/value row.
     ferpEnhanceTables() in app.js writes data-label="<th text>" onto
     each <td>, which the ::before below renders as the label.
     =========================================================== */
  #ferp-root .ferp-tbl-wrap {
    margin: 0;
    padding: 0;
    overflow-x: visible;
  }
  #ferp-root .ferp-rwd-table,
  #ferp-root .ferp-rwd-table thead,
  #ferp-root .ferp-rwd-table tbody,
  #ferp-root .ferp-rwd-table tr,
  #ferp-root .ferp-rwd-table td {
    display: block;
    width: 100%;
  }
  /* Hide table headers (the row already shows labels per cell) */
  #ferp-root .ferp-rwd-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  /* Each row = card */
  #ferp-root .ferp-rwd-table tbody tr {
    background: var(--ferp-bg1) !important;
    border: 0.5px solid var(--ferp-border) !important;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }
  #ferp-root .ferp-rwd-table tbody tr:hover td { background: transparent !important; }
  /* Each cell = label-value row */
  #ferp-root .ferp-rwd-table td {
    padding: 6px 0 !important;
    border: none !important;
    border-bottom: 0.5px dashed var(--ferp-border) !important;
    font-size: 13px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
    overflow-wrap: anywhere;
  }
  #ferp-root .ferp-rwd-table td:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
  /* Label rendered from the data-label attribute */
  #ferp-root .ferp-rwd-table td::before {
    content: attr(data-label);
    color: var(--ferp-text2);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  /* Cells without a data-label (e.g., the actions column) get no label */
  #ferp-root .ferp-rwd-table td:not([data-label])::before { content: ""; display: none; }
  /* Empty-state rows (colspan) shouldn't be card-styled.
     Uses :has() (supported in all evergreen browsers since 2023). */
  #ferp-root .ferp-rwd-table tbody tr.ferp-empty-row,
  #ferp-root .ferp-rwd-table tbody tr:has(td[colspan]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
  }
  #ferp-root .ferp-rwd-table tbody tr.ferp-empty-row td,
  #ferp-root .ferp-rwd-table tbody tr:has(td[colspan]) td {
    display: block !important;
    text-align: center;
    padding: 12px !important;
    border: none !important;
  }
  #ferp-root .ferp-rwd-table tbody tr.ferp-empty-row td::before,
  #ferp-root .ferp-rwd-table tbody tr:has(td[colspan]) td::before { display: none; }
  /* Make action button cell wrap properly, hide its "Actions" label */
  #ferp-root .ferp-rwd-table td[data-label="Actions"] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px !important;
  }
  #ferp-root .ferp-rwd-table td[data-label="Actions"]::before {
    display: none;
  }
  /* Inputs inside cells get full width */
  #ferp-root .ferp-rwd-table td input,
  #ferp-root .ferp-rwd-table td select {
    max-width: 60%;
  }
  /* The vendor-price-tags column wraps within available space */
  #ferp-root .ferp-rwd-table td .ferp-tag { font-size: 11px; }

  /* Form inputs: 16px to prevent iOS auto-zoom on focus, 44px tap target */
  #ferp-root input,
  #ferp-root select,
  #ferp-root textarea {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  #ferp-root .ferp-form-grid { grid-template-columns: 1fr !important; gap: 12px; }
  #ferp-root .ferp-form-group label { font-size: 12px; margin-bottom: 4px; }

  /* Buttons sized for fingers */
  #ferp-root .ferp-btn { min-height: 42px; padding: 10px 14px; font-size: 14px; border-radius: 10px !important; }
  #ferp-root .ferp-btn.ferp-sm { min-height: 36px; padding: 8px 12px; font-size: 12px; }

  /* MODAL becomes full-screen app sheet */
  #ferp-root .ferp-modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #ferp-root .ferp-modal {
    width: 100%; max-width: 100%;
    max-height: 100vh; min-height: 100vh;
    border-radius: 0;
    display: flex; flex-direction: column;
  }
  #ferp-root .ferp-modal-hdr {
    position: sticky; top: 0; z-index: 2;
    background: var(--ferp-bg1);
    padding: 14px 16px;
    padding-top: calc(14px + var(--ferp-safe-top));
  }
  #ferp-root .ferp-modal-body {
    flex: 1; overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }
  #ferp-root .ferp-modal-footer {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--ferp-bg1);
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--ferp-safe-bottom));
    flex-direction: column-reverse;
  }
  #ferp-root .ferp-modal-footer .ferp-btn { width: 100%; justify-content: center; }

  /* Vendor price row stacks */
  #ferp-root .ferp-vprice-row { flex-wrap: wrap; }
  #ferp-root .ferp-vprice-input { width: 100% !important; min-height: 40px; }

  /* Invoice items table inside modal — make scroll-x */
  #ferp-root .ferp-inv-items {
    display: block; overflow-x: auto; white-space: nowrap;
  }
  #ferp-root .ferp-inv-items thead, #ferp-root .ferp-inv-items tbody { display: table; width: 100%; min-width: 520px; }

  /* AI chat: leave room for bottom nav */
  #ferp-root .ferp-ai-input-wrap { padding-bottom: 12px; }

  /* ============================
     BOTTOM TAB BAR (the app feel)
     ============================ */
  #ferp-root #ferp-bottom-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr;
    align-items: center;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--ferp-bg1);
    border-top: 0.5px solid var(--ferp-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
    z-index: 200;
    padding: 6px 4px;
    padding-bottom: calc(6px + var(--ferp-safe-bottom));
  }
  #ferp-root .ferp-bnav-item {
    background: none !important;
    border: none !important;
    padding: 6px 4px !important;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--ferp-text2) !important;
    font-size: 10px !important; font-weight: 500;
    cursor: pointer;
    box-shadow: none !important;
    min-height: 52px;
    transition: color .15s;
  }
  #ferp-root .ferp-bnav-item .ferp-svg-icon { width: 22px; height: 22px; }
  #ferp-root .ferp-bnav-item span { line-height: 1; }
  #ferp-root .ferp-bnav-item.active { color: var(--ferp-brand) !important; }
  #ferp-root .ferp-bnav-item:active { transform: scale(.94); }

  /* Floating Action Button in the middle */
  #ferp-root .ferp-bnav-fab {
    background: var(--ferp-brand) !important;
    border: none !important;
    color: #fff !important;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(83,58,183,.4) !important;
    cursor: pointer;
    margin: -22px auto 0; /* float above the bar */
    transition: transform .15s;
  }
  #ferp-root .ferp-bnav-fab .ferp-svg-icon { width: 26px; height: 26px; }
  #ferp-root .ferp-bnav-fab:active { transform: scale(.92); }

  /* Sidebar should NOT cover the bottom nav when open — push it up */
  #ferp-sidebar { z-index: 250; padding-bottom: calc(80px + var(--ferp-safe-bottom)); }
  #ferp-sidebar-overlay { z-index: 240; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  #ferp-root .ferp-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #ferp-root .ferp-stat-card { padding: 10px; }
  #ferp-root .ferp-stat-value { font-size: 17px; }
  #ferp-root #ferp-content { padding: 10px; padding-bottom: calc(80px + var(--ferp-safe-bottom)); }
  #ferp-root .ferp-bnav-item span { font-size: 9px !important; }
}

@media print {
  #ferp-sidebar, #ferp-header, #ferp-root .ferp-modal-footer,
  #ferp-root .ferp-modal-hdr button { display: none !important; }
  #ferp-main { margin-left: 0; }
  #ferp-root .ferp-modal-overlay { position: static !important; background: none !important; padding: 0; }
  #ferp-root .ferp-modal { box-shadow: none !important; max-height: none !important; max-width: 100% !important; }
  #ferp-root .ferp-modal-hdr { border-bottom: 1px solid var(--ferp-border); }
  #ferp-invoice-print { font-size: 12px; }
}

/* ===== Inline SVG Icons (replaces Tabler webfont) ===== */
#ferp-root .ferp-svg-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

/* Slightly larger inside nav items and header buttons, like Tabler's default */
#ferp-root .ferp-nav-item .ferp-svg-icon { width: 18px; height: 18px; vertical-align: middle; }
#ferp-root .ferp-hdr-btn   .ferp-svg-icon { width: 16px; height: 16px; vertical-align: middle; }
#ferp-root .ferp-btn       .ferp-svg-icon { width: 14px; height: 14px; vertical-align: -0.15em; }
#ferp-root .ferp-menu-toggle .ferp-svg-icon { width: 20px; height: 20px; vertical-align: middle; }

/* Hide the original <i> tags by default — the JS replaces them with inline SVG.
   If JS fails entirely we'd rather show nothing than empty squares. */
#ferp-root i.ti { display: none !important; }

/* ===========================================================
   LOGIN PAGE — fills the entire viewport regardless of theme
   =========================================================== */
#ferp-root.ferp-login-mode {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--ferp-bg0);
  overflow-y: auto;
}
#ferp-root .ferp-login-wrap {
  min-height: 100vh;
  min-height: 100dvh; /* mobile-safe full height where supported */
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--ferp-bg0);
  box-sizing: border-box;
}
#ferp-root .ferp-login-card {
  background: var(--ferp-bg1);
  border: 0.5px solid var(--ferp-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  padding: 32px;
  width: 100%;
  max-width: 380px;
}
#ferp-root .ferp-login-logo { text-align: center; margin-bottom: 24px; }
#ferp-root .ferp-login-logo-icon {
  width: 64px; height: 64px;
  background: var(--ferp-brand);
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(83,58,183,0.25);
}
#ferp-root .ferp-login-title { font-size: 20px; font-weight: 600; color: var(--ferp-text1); }
#ferp-root .ferp-login-sub   { font-size: 13px; color: var(--ferp-text2); margin-top: 4px; }
#ferp-root .ferp-login-error {
  background: var(--ferp-red-bg, #FDECEA);
  color: var(--ferp-red-fg, #A32D2D);
  border: 0.5px solid rgba(163,45,45,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
}
#ferp-root .ferp-login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--ferp-text3);
}

/* Header user menu */
#ferp-root .ferp-user-menu {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ferp-bg2);
  font-size: 13px;
}
#ferp-root .ferp-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ferp-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
#ferp-root .ferp-user-info { line-height: 1.2; }
#ferp-root .ferp-user-name { font-weight: 500; color: var(--ferp-text1); }
#ferp-root .ferp-user-role { font-size: 10px; color: var(--ferp-text2); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 768px) {
  #ferp-root .ferp-login-card { padding: 24px 20px; }
  #ferp-root .ferp-user-info { display: none; }
}

/* ===========================================================
   CUSTOM CHECKBOX — visually consistent across themes & OSes
   Pattern: hide the native input, draw the box via .ferp-checkbox-box
   =========================================================== */
#ferp-root .ferp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ferp-text2);
  line-height: 1.4;
  /* Reset any theme styles that might leak in */
  margin: 0;
  padding: 0;
}
#ferp-root .ferp-checkbox input[type="checkbox"] {
  /* Hide the native checkbox but keep it accessible to screen readers
     and to keyboard focus (we draw focus on the wrapper box). */
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
  margin: 0;
}
#ferp-root .ferp-checkbox-box {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--ferp-border);
  border-radius: 5px;
  background: var(--ferp-bg1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
  color: #fff; /* the SVG checkmark inherits this */
  box-sizing: border-box;
}
#ferp-root .ferp-checkbox-box svg {
  width: 12px; height: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
/* Hover state */
#ferp-root .ferp-checkbox:hover .ferp-checkbox-box {
  border-color: var(--ferp-brand);
}
/* Checked state — purple fill + visible checkmark */
#ferp-root .ferp-checkbox input[type="checkbox"]:checked + .ferp-checkbox-box {
  background: var(--ferp-brand);
  border-color: var(--ferp-brand);
}
#ferp-root .ferp-checkbox input[type="checkbox"]:checked + .ferp-checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}
/* Keyboard focus ring */
#ferp-root .ferp-checkbox input[type="checkbox"]:focus-visible + .ferp-checkbox-box {
  outline: 2px solid var(--ferp-brand);
  outline-offset: 2px;
}
/* Active (mouse down) — subtle press */
#ferp-root .ferp-checkbox:active .ferp-checkbox-box {
  transform: scale(.94);
}
#ferp-root .ferp-checkbox-label {
  color: var(--ferp-text2);
}
#ferp-root .ferp-checkbox:hover .ferp-checkbox-label {
  color: var(--ferp-text1);
}

/* ===========================================================
   PARTIAL PAYMENT PANEL
   Uses --ferp-amber-bg / --ferp-amber-fg which already auto-adapt
   to light + dark mode (see CSS variables block at top of file).
   =========================================================== */
#ferp-root .ferp-partial-panel {
  background: var(--ferp-amber-bg);
  border: 0.5px solid var(--ferp-amber-fg);
  border-radius: 10px;
  padding: 14px;
  margin-top: 4px;
}
#ferp-root .ferp-partial-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ferp-amber-fg);
  font-size: 13px;
  font-weight: 600;
}
#ferp-root .ferp-partial-header .ferp-svg-icon,
#ferp-root .ferp-partial-header i {
  color: var(--ferp-amber-fg);
}
#ferp-root .ferp-partial-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
#ferp-root .ferp-partial-stat {
  background: var(--ferp-bg1);
  border: 0.5px solid var(--ferp-border);
  border-radius: 8px;
  padding: 10px 12px;
}
#ferp-root .ferp-partial-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ferp-text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
#ferp-root .ferp-partial-value {
  font-weight: 600;
  font-size: 15px;
  color: var(--ferp-text1);
}
#ferp-root .ferp-partial-value.ferp-pp-paid    { color: var(--ferp-green-fg, #1D9E75); }
#ferp-root .ferp-partial-value.ferp-pp-balance { color: var(--ferp-red-fg,   #D85A30); }
/* Light theme green/red fallbacks if those vars don't exist */
@media (prefers-color-scheme: light) {
  #ferp-root .ferp-partial-value.ferp-pp-paid    { color: #3B6D11; }
  #ferp-root .ferp-partial-value.ferp-pp-balance { color: #A32D2D; }
}
/* Panel form-group labels and textarea match the surrounding panel tone */
#ferp-root .ferp-partial-panel .ferp-form-group label {
  color: var(--ferp-amber-fg);
  font-weight: 500;
}
#ferp-root .ferp-partial-panel textarea {
  background: var(--ferp-bg1);
  color: var(--ferp-text1);
  border: 0.5px solid var(--ferp-border);
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}
#ferp-root .ferp-partial-panel textarea:focus {
  outline: 2px solid var(--ferp-amber-fg);
  outline-offset: -1px;
  border-color: transparent;
}

/* ============================================================
   BULK-SELECT CHECKBOX — square-icon style for multi-select
   ============================================================
   Targets the checkboxes in list tables (header "select all" + each row
   checkbox marked with data-ferp-bulk). Uses appearance:none to remove
   the native checkbox styling and paints a square that fills with a
   checkmark when :checked. Pure CSS, no JS or extra markup needed. */

/* ============================================================
   BULK-SELECT CHECKBOX — square-icon style for multi-select
   ============================================================
   Custom square checkbox with a crisp SVG checkmark when selected.
   Uses very high specificity (body #ferp-root .ferp-tbl-wrap) and
   !important on dimensions so that mobile form-input rules (which
   force 44px min-height for tap targets) don't stretch the checkbox
   into an oblong shape. */

body #ferp-root .ferp-tbl-wrap input[type="checkbox"],
body #ferp-root th input[type="checkbox"][onchange*="ferpBulkSelectAll"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* Force square dimensions — mobile form rules try to make this 44px tall */
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  min-width: 20px !important;
  max-height: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
  border: 1.5px solid var(--ferp-border2) !important;
  border-radius: 5px !important;
  background-color: var(--ferp-bg1) !important;
  background-image: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  cursor: pointer;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  outline: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 80ms ease;
}

/* Hover — subtle accent lift to show it's clickable */
body #ferp-root .ferp-tbl-wrap input[type="checkbox"]:hover,
body #ferp-root th input[type="checkbox"][onchange*="ferpBulkSelectAll"]:hover {
  border-color: var(--ferp-brand) !important;
  background-color: var(--ferp-brand-tint) !important;
}

/* Active press — tiny squeeze for tactile feedback */
body #ferp-root .ferp-tbl-wrap input[type="checkbox"]:active,
body #ferp-root th input[type="checkbox"][onchange*="ferpBulkSelectAll"]:active {
  transform: scale(0.9);
}

/* Checked state — fill with brand color, draw a centered SVG checkmark */
body #ferp-root .ferp-tbl-wrap input[type="checkbox"]:checked,
body #ferp-root th input[type="checkbox"][onchange*="ferpBulkSelectAll"]:checked {
  background-color: var(--ferp-brand) !important;
  border-color: var(--ferp-brand) !important;
  /* Inline SVG checkmark, centered. Using background-image keeps the
     checkmark a single rendered element — no ::after pseudo to fight with
     theme styles or get clipped. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5,8.5 6.5,11.5 12.5,5'/></svg>") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
}

/* Focus ring for keyboard nav — accessibility */
body #ferp-root .ferp-tbl-wrap input[type="checkbox"]:focus-visible,
body #ferp-root th input[type="checkbox"][onchange*="ferpBulkSelectAll"]:focus-visible {
  outline: 2px solid var(--ferp-brand) !important;
  outline-offset: 2px;
}

/* On mobile cards, the row checkbox gets a slightly larger size for tap UX.
   Override the 20×20 base size with 22×22 — still square thanks to !important. */
@media (max-width: 768px) {
  body #ferp-root .ferp-rwd-table input[type="checkbox"][data-ferp-bulk] {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    max-height: 22px !important;
    max-width: 22px !important;
    background-size: 16px 16px !important;
  }
}

/* ============================================================
   LANGUAGE SELECTOR — pill-shaped <select> in the header
   ============================================================
   The <select> is wrapped in a div with a globe icon on the left and
   the dropdown control on the right. Native select keeps full accessibility
   (keyboard nav, mobile picker UI) while looking like the other header
   buttons. On mobile, label collapses but the dropdown remains tappable. */
#ferp-root .ferp-hdr-lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0.5px solid var(--ferp-border2);
  border-radius: var(--ferp-radius);
  background: transparent;
  color: var(--ferp-text1);
  font-size: 13px;
  transition: background 150ms ease, border-color 150ms ease;
  position: relative;
}
#ferp-root .ferp-hdr-lang-wrap:hover {
  background: var(--ferp-bg2);
  border-color: var(--ferp-brand);
}
#ferp-root .ferp-hdr-lang-wrap > i,
#ferp-root .ferp-hdr-lang-wrap > .ferp-svg-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ferp-text1);
}

/* The <select> itself — strip native styling, inherit container's look */
#ferp-root #ferp-hdr-lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--ferp-text1);
  cursor: pointer;
  padding: 0 18px 0 0;
  min-width: 70px;
  /* Custom dropdown caret (CSS arrow) */
  background-image: linear-gradient(45deg, transparent 50%, var(--ferp-text2) 50%),
                    linear-gradient(135deg, var(--ferp-text2) 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
#ferp-root #ferp-hdr-lang-select option {
  /* Native option list — uses OS-styled dropdown. We theme the colors only. */
  background: var(--ferp-bg1);
  color: var(--ferp-text1);
  font-size: 14px;
  padding: 8px;
}

/* Mobile — keep the selector tappable but more compact */
@media (max-width: 768px) {
  #ferp-root .ferp-hdr-lang-wrap {
    padding: 6px 8px;
    gap: 4px;
  }
  #ferp-root .ferp-hdr-lang-wrap > i,
  #ferp-root .ferp-hdr-lang-wrap > .ferp-svg-icon {
    width: 14px;
    height: 14px;
  }
  #ferp-root #ferp-hdr-lang-select {
    font-size: 12px;
    min-width: 56px;
    padding-right: 14px;
  }
}

/* Very small phones — hide the globe icon, just show the language name */
@media (max-width: 380px) {
  #ferp-root .ferp-hdr-lang-wrap > i,
  #ferp-root .ferp-hdr-lang-wrap > .ferp-svg-icon { display: none; }
  #ferp-root #ferp-hdr-lang-select { min-width: 48px; }
}

/* ============================================================
   LEDGER TABLE — responsive layout
   ============================================================
   On mobile (≤640px), collapse the ledger table into stacked cards so all
   columns stay readable. Each row becomes its own card with label-value pairs.
   On desktop, default to normal table layout. */
@media (max-width: 640px) {
  #ferp-root .ferp-ledger-tbl table,
  #ferp-root .ferp-ledger-tbl thead,
  #ferp-root .ferp-ledger-tbl tbody,
  #ferp-root .ferp-ledger-tbl tfoot,
  #ferp-root .ferp-ledger-tbl tr,
  #ferp-root .ferp-ledger-tbl th,
  #ferp-root .ferp-ledger-tbl td {
    display: block;
    width: 100%;
  }
  #ferp-root .ferp-ledger-tbl thead {
    /* Hide table header — each cell will be labeled via ::before */
    display: none;
  }
  #ferp-root .ferp-ledger-tbl tbody tr,
  #ferp-root .ferp-ledger-tbl tfoot tr {
    background: var(--ferp-bg1);
    border: 0.5px solid var(--ferp-border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 10px;
  }
  #ferp-root .ferp-ledger-tbl td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
    text-align: right !important;
  }
  /* Generated labels for each cell using nth-child + data attributes */
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(1)::before { content: 'Date'; }
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(2)::before { content: 'Type'; }
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(3)::before { content: 'Reference'; }
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(4)::before { content: 'Debit'; }
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(5)::before { content: 'Credit'; }
  #ferp-root .ferp-ledger-tbl tbody td:nth-child(6)::before { content: 'Balance'; }
  #ferp-root .ferp-ledger-tbl tbody td::before {
    font-weight: 500;
    color: var(--ferp-text2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

/* ============================================================
   MOBILE — Bulk-select + Trash views responsive layout
   ============================================================
   In the mobile card layout, the bulk-select checkbox <td> needs special
   handling: an empty data-label would render as a confusing blank row.
   Style the checkbox cell as a tap-friendly toggle at the top of each card. */
@media (max-width: 768px) {
  /* Bulk-select cell — first column with the row checkbox.
     Identify it by its embedded data-ferp-bulk input. */
  #ferp-root .ferp-rwd-table td:has(input[data-ferp-bulk]) {
    /* Move to top of card, full-width tap target with a "Select" label */
    order: -1;
    background: var(--ferp-bg2) !important;
    margin: -12px -14px 8px !important;
    padding: 10px 14px !important;
    border-bottom: 0.5px solid var(--ferp-border) !important;
    border-radius: 12px 12px 0 0;
    justify-content: flex-start !important;
    gap: 10px;
  }
  /* Replace the empty data-label with a "Select" label */
  #ferp-root .ferp-rwd-table td:has(input[data-ferp-bulk])::before {
    content: 'Select' !important;
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    max-width: none !important;
    color: var(--ferp-text2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* Make the checkbox itself a bit larger on mobile for easier tapping */
  #ferp-root .ferp-rwd-table td input[data-ferp-bulk] {
    width: 22px !important;
    height: 22px !important;
  }

  /* "Select all" checkbox at the table header is hidden on mobile since
     each card has its own select toggle. The header itself is already
     hidden by the rwd-table thead rule above. */

  /* Bulk action bar — make it sticky at the top of the content area so it
     stays visible while the user scrolls through selected cards. Also make
     buttons full-width-ish so they're easier to tap. */
  #ferp-root [id^="ferp-bulk-bar-"] {
    position: sticky;
    top: 60px; /* sit just below the header */
    z-index: 50;
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #ferp-root [id^="ferp-bulk-bar-"] > * { width: 100%; }
  #ferp-root [id^="ferp-bulk-bar-"] button {
    justify-content: center;
    min-height: 42px;
  }
  /* But the count text and "Clear X" button shouldn't be full-width */
  #ferp-root [id^="ferp-bulk-bar-"] > span,
  #ferp-root [id^="ferp-bulk-bar-"] > i,
  #ferp-root [id^="ferp-bulk-bar-"] > div { width: auto; }

  /* Action button cell on mobile cards: keep buttons IN A ROW, not stacked.
     Icon-only buttons (View/Edit/Duplicate/Delete) fit comfortably on one
     line. The Restore button in trash view has text "Restore" so we let
     the row wrap to 2 lines if needed via flex-wrap. */
  #ferp-root .ferp-rwd-table td[data-label="Actions"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #ferp-root .ferp-rwd-table td[data-label="Actions"] button {
    /* Each button sized for touch but not greedy — width auto so multiple
       fit on one line. The icon-only buttons stay compact (~38px wide). */
    width: auto !important;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    justify-content: center;
  }
}

/* Very small screens — tighten further */
@media (max-width: 380px) {
  #ferp-root .ferp-rwd-table tbody tr {
    padding: 10px 12px;
  }
  #ferp-root .ferp-rwd-table td {
    font-size: 12.5px !important;
    padding: 5px 0 !important;
  }
}