/* ==========================================================================
   Five Four Financial — vendor portal theme
   Load AFTER style.css and colors/default.css (see base_header_includes.html).
   Every rule is scoped to body.fff so it wins over the old theme without
   touching it, and can be removed by deleting one <link>.
   ========================================================================== */

:root {
  --fff-blue: #0B4BB7;
  --fff-blue-hover: #08398C;
  --fff-blue-tint: #EEF3FC;
  --fff-blue-line: #C9D6EE;
  --fff-green: #8BE67D;
  --fff-ink: #191919;
  --fff-text: #3A3A3A;
  --fff-muted: #5A6270;
  --fff-faint: #8A93A2;
  --fff-bg: #F5F7FA;
  --fff-surface: #FFFFFF;
  --fff-subtle: #FAFBFD;
  --fff-line: #E3E8EF;
  --fff-line-soft: #EEF1F6;
  --fff-field: #D5DCE6;
  --fff-ok-bg: #EAF9E6;  --fff-ok: #23631A;
  --fff-warn-bg: #FFF4E0; --fff-warn: #8A5300; --fff-warn-line: #F1D29A;
  --fff-err-bg: #FDECEA;  --fff-err: #B42318;  --fff-err-line: #F4C4BE;
  --fff-radius: 10px;
  --fff-radius-sm: 7px;
  --fff-focus: 0 0 0 3px rgba(11, 75, 183, 0.14);
  --fff-head: "Instrument Sans", system-ui, sans-serif;
  --fff-body: "IBM Plex Sans", system-ui, sans-serif;
  --fff-sidebar-w: 256px;
}

/* ---------- Base ---------- */
body.fff {
  margin: 0;
  background: var(--fff-bg);
  color: var(--fff-text);
  font-family: var(--fff-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
body.fff *, body.fff *::before, body.fff *::after { box-sizing: border-box; }
body.fff h1, body.fff h2, body.fff h3, body.fff h4, body.fff h5, body.fff h6 {
  font-family: var(--fff-head);
  color: var(--fff-ink);
  letter-spacing: -0.01em;
}
:where(body.fff) a { color: var(--fff-blue); text-underline-offset: 3px; }
:where(body.fff) a:hover, :where(body.fff) a:focus { color: var(--fff-blue-hover); }
body.fff :focus-visible { outline: 3px solid var(--fff-blue); outline-offset: 2px; }
body.fff .fff-num { font-variant-numeric: tabular-nums; }
body.fff .fff-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The old theme's full-screen loader. Keep the element (custom.min.js fades
   it out) but make it quiet. */
body.fff .preloader { background: var(--fff-bg); }
body.fff .preloader .cssload-speeding-wheel { border-color: var(--fff-blue) transparent; }

/* ---------- Shell ---------- */
.fff-shell { min-height: 100vh; display: grid; grid-template-columns: var(--fff-sidebar-w) minmax(0, 1fr); }
.fff-shell > .fff-sidebar { grid-column: 1; grid-row: 1; }
.fff-shell > .fff-main { grid-column: 2; grid-row: 1; }
.fff-nav-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fff-scrim { display: none; }

.fff-sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 40;
  width: var(--fff-sidebar-w);
  background: var(--fff-surface);
  border-right: 1px solid var(--fff-line);
  display: flex; flex-direction: column;
}
.fff-brand { padding: 22px 22px 18px; border-bottom: 1px solid var(--fff-line-soft); }
.fff-brand-logo { display: block; height: 38px; width: auto; }
.fff-org { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--fff-bg); }
.fff-org-mark {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 7px;
  background: var(--fff-blue); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fff-head); font-weight: 600; font-size: 14px; text-transform: uppercase;
}
.fff-org-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--fff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fff-org-sub { margin: 0; font-size: 12px; color: var(--fff-muted); }

.fff-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.fff-nav-list, .fff-nav-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fff-nav-link, .fff-nav-group > summary {
  width: 100%; min-height: 42px; padding: 0 12px;
  border-radius: 7px; border: 0; background: transparent;
  color: var(--fff-text); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500; cursor: pointer; list-style: none;
}
.fff-nav-group > summary::-webkit-details-marker { display: none; }
.fff-nav-link:hover, .fff-nav-group > summary:hover { background: var(--fff-bg); color: var(--fff-ink); text-decoration: none; }
.fff-nav-link > i, .fff-nav-group > summary > i { width: 19px; font-size: 17px; color: var(--fff-muted); text-align: center; }
.fff-nav-label { flex: 1; }
.fff-nav-link[aria-current="page"] { background: var(--fff-blue-tint); color: var(--fff-blue); font-weight: 600; }
.fff-nav-link[aria-current="page"] > i { color: var(--fff-blue); }
.fff-chev { width: 16px; height: 16px; color: var(--fff-faint); transition: transform 0.15s; }
.fff-nav-group[open] > summary .fff-chev { transform: rotate(90deg); }
.fff-nav-group.is-current > summary { color: var(--fff-ink); font-weight: 600; }
.fff-nav-sub { margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid var(--fff-line); gap: 1px; }
.fff-nav-sub a {
  min-height: 36px; padding: 0 12px; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--fff-text); font-size: 14px; text-decoration: none;
}
.fff-nav-sub a:hover { background: var(--fff-bg); text-decoration: none; }
.fff-nav-sub a[aria-current="page"] { background: var(--fff-blue-tint); color: var(--fff-blue); font-weight: 600; }
.fff-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--fff-blue); color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.fff-sidebar-foot { padding: 12px; border-top: 1px solid var(--fff-line-soft); }
.fff-signout:hover { background: var(--fff-err-bg) !important; color: var(--fff-err) !important; }

.fff-main { min-width: 0; display: flex; flex-direction: column; }
.fff-topbar {
  position: sticky; top: 0; z-index: 20; height: 64px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fff-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fff-topbar-left, .fff-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fff-icon-btn {
  position: relative; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--fff-line); border-radius: 7px; background: var(--fff-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fff-text);
  list-style: none;
}
.fff-icon-btn::-webkit-details-marker { display: none; }
.fff-icon-btn:hover { background: var(--fff-bg); }
.fff-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #D64545; border: 2px solid #FFF; }

.fff-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fff-crumbs a { color: var(--fff-muted); text-decoration: none; white-space: nowrap; }
.fff-crumbs a:hover { color: var(--fff-blue); }
.fff-crumbs .fff-crumb-sep { width: 14px; height: 14px; color: var(--fff-faint); flex-shrink: 0; }
.fff-crumbs [aria-current="page"] { color: var(--fff-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fff-pop { position: relative; }
.fff-pop > summary { list-style: none; }
.fff-pop > summary::-webkit-details-marker { display: none; }
.fff-pop-panel {
  position: absolute; top: 52px; right: 0; width: min(360px, 90vw);
  background: var(--fff-surface); border: 1px solid var(--fff-line); border-radius: var(--fff-radius);
  box-shadow: 0 16px 40px rgba(25, 25, 25, 0.14); overflow: hidden; z-index: 50;
}
.fff-pop-title { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--fff-line-soft); font-family: var(--fff-head); font-size: 15px; font-weight: 600; color: var(--fff-ink); }
.fff-pop-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--fff-line-soft); color: inherit; text-decoration: none; }
.fff-pop-item:hover { background: var(--fff-bg); text-decoration: none; }
.fff-pop-item i { flex-shrink: 0; margin-top: 3px; color: var(--fff-blue); }
.fff-pop-item strong { display: block; font-size: 15px; font-weight: 600; color: var(--fff-ink); }
.fff-pop-item span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--fff-muted); }
.fff-pop-empty { margin: 0; padding: 18px; font-size: 14px; color: var(--fff-muted); }

.fff-user { height: 42px; padding: 0 12px 0 5px; border: 1px solid var(--fff-line); border-radius: 21px; background: var(--fff-surface); display: flex; align-items: center; gap: 9px; cursor: pointer; }
.fff-user:hover { background: var(--fff-bg); }
.fff-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #DCE6F7; display: block; }
.fff-user-name { font-size: 14px; font-weight: 600; color: var(--fff-ink); white-space: nowrap; }
.fff-pop-panel.fff-pop-panel--sm { width: 220px; }
.fff-pop-panel a.fff-pop-link { display: block; padding: 12px 18px; font-size: 15px; color: var(--fff-text); text-decoration: none; }
.fff-pop-panel a.fff-pop-link:hover { background: var(--fff-bg); }

.fff-content { flex: 1; width: 100%; max-width: 1440px; padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 36px) 56px; }
.fff-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fff-page-title { margin: 0; font-family: var(--fff-head); font-weight: 600; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.02em; color: var(--fff-ink); line-height: 1.15; }
.fff-page-sub { margin: 6px 0 0; font-size: 16px; color: var(--fff-muted); }
.fff-stack { display: flex; flex-direction: column; gap: 20px; }

.fff-footer {
  padding: 20px clamp(16px, 3vw, 36px); border-top: 1px solid var(--fff-line);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: 13px; color: var(--fff-muted);
}
.fff-footer a { color: var(--fff-muted); }
.fff-footer-links { display: flex; gap: 16px; }

@media (max-width: 959px) {
  .fff-shell { grid-template-columns: minmax(0, 1fr); }
  .fff-shell > .fff-main { grid-column: 1; }
  .fff-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform 0.2s ease; }
  .fff-nav-toggle:checked ~ .fff-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(25, 25, 25, 0.2); }
  .fff-scrim { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(25, 25, 25, 0.4); }
  .fff-nav-toggle:checked ~ .fff-scrim { display: block; }
  .fff-user-name { display: none; }
}

/* Desktop: the same button collapses the sidebar and gives the content the full width. */
@media (min-width: 960px) {
  .fff-nav-toggle:checked ~ .fff-sidebar { display: none; }
  .fff-shell:has(.fff-nav-toggle:checked) { grid-template-columns: minmax(0, 1fr); }
  .fff-nav-toggle:checked ~ .fff-main { grid-column: 1; }
}

/* ---------- Cards ---------- */
.fff-card { background: var(--fff-surface); border: 1px solid var(--fff-line); border-radius: var(--fff-radius); }
.fff-card-head { padding: 16px 20px; border-bottom: 1px solid var(--fff-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fff-card-title { margin: 0; font-family: var(--fff-head); font-weight: 600; font-size: 18px; color: var(--fff-ink); }
.fff-card-body { padding: clamp(20px, 3vw, 28px); }
.fff-card-foot { padding: 16px clamp(20px, 3vw, 28px); border-top: 1px solid var(--fff-line-soft); background: var(--fff-subtle); border-radius: 0 0 var(--fff-radius) var(--fff-radius); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.fff-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.fff-stat { padding: 20px 22px; }
.fff-stat-label { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--fff-muted); }
.fff-stat-value { margin: 0; font-family: var(--fff-head); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; color: var(--fff-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fff-stat-value small { font-size: 18px; color: var(--fff-muted); font-weight: 500; margin-right: 6px; }
.fff-stat-note { margin: 12px 0 0; font-size: 14px; color: var(--fff-muted); }
.fff-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: start; }

.fff-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--fff-line-soft); color: inherit; text-decoration: none; }
.fff-list-row:last-child { border-bottom: 0; }
.fff-list-row:hover { background: var(--fff-subtle); text-decoration: none; }
.fff-list-row strong { font-size: 15px; font-weight: 600; color: var(--fff-ink); }
.fff-list-row .fff-meta { font-size: 13px; color: var(--fff-muted); }

.fff-dl { margin: 0; padding: 4px 20px 8px; }
.fff-dl-row { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fff-line-soft); }
.fff-dl-row:last-child { border-bottom: 0; }
.fff-dl dt { font-size: 14px; font-weight: 400; color: var(--fff-muted); }
.fff-dl dd { margin: 0; font-size: 15px; color: var(--fff-ink); word-break: break-word; }

/* ---------- Pills ---------- */
.fff-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #F1F4F9; color: #4A5261; }
.fff-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.fff-pill--ok { background: var(--fff-ok-bg); color: var(--fff-ok); }
.fff-pill--warn { background: var(--fff-warn-bg); color: var(--fff-warn); }
.fff-pill--info { background: var(--fff-blue-tint); color: var(--fff-blue); }
.fff-pill--err { background: var(--fff-err-bg); color: var(--fff-err); }

/* ---------- Buttons: new classes ---------- */
.fff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--fff-radius-sm);
  border: 1px solid var(--fff-field); background: var(--fff-surface); color: var(--fff-ink);
  font-family: var(--fff-body); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.fff-btn:hover { background: var(--fff-bg); color: var(--fff-ink); text-decoration: none; }
.fff-btn--primary { background: var(--fff-blue); border-color: var(--fff-blue); color: #FFF; font-family: var(--fff-head); }
.fff-btn--primary:hover, .fff-btn--primary:focus { background: var(--fff-blue-hover); border-color: var(--fff-blue-hover); color: #FFF; }
.fff-btn--danger { color: var(--fff-err); border-color: var(--fff-err-line); }
.fff-btn--danger:hover { background: var(--fff-err-bg); color: var(--fff-err); }
.fff-btn--block { width: 100%; height: 50px; font-size: 17px; }
.fff-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }

/* ---------- Buttons: the old Bootstrap classes the views still emit ---------- */
body.fff .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: 42px; padding: 0 16px; margin: 0;
  border-radius: var(--fff-radius-sm); border: 1px solid var(--fff-field);
  background: var(--fff-surface); color: var(--fff-ink);
  font-family: var(--fff-body); font-size: 14px; font-weight: 600; line-height: 1.2;
  text-transform: none; letter-spacing: 0; box-shadow: none; text-shadow: none;
  float: none;
}
body.fff .btn:hover, body.fff .btn:focus { background: var(--fff-bg); color: var(--fff-ink); box-shadow: none; }
body.fff .btn h5 { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; }
body.fff .btn-primary, body.fff .btn-info {
  background: var(--fff-blue); border-color: var(--fff-blue); color: #FFF;
}
body.fff .btn-primary:hover, body.fff .btn-primary:focus,
body.fff .btn-info:hover, body.fff .btn-info:focus { background: var(--fff-blue-hover); border-color: var(--fff-blue-hover); color: #FFF; }
body.fff .btn-success { background: var(--fff-ok); border-color: var(--fff-ok); color: #FFF; }
body.fff .btn-success:hover, body.fff .btn-success:focus { background: #1A4D13; border-color: #1A4D13; color: #FFF; }
body.fff .btn-warning { background: var(--fff-warn); border-color: var(--fff-warn); color: #FFF; }
body.fff .btn-warning:hover, body.fff .btn-warning:focus { background: #6B4000; border-color: #6B4000; color: #FFF; }
body.fff .btn-danger { background: var(--fff-err); border-color: var(--fff-err); color: #FFF; }
body.fff .btn-danger:hover { background: #8F1B12; border-color: #8F1B12; color: #FFF; }
body.fff .btn-inverse, body.fff .btn-default { background: var(--fff-surface); border-color: var(--fff-field); color: var(--fff-ink); }
body.fff .btn-inverse:hover, body.fff .btn-default:hover { background: var(--fff-bg); color: var(--fff-ink); }
body.fff .btn-lg, body.fff .btn-block { min-height: 50px; font-size: 17px; }
body.fff .btn-block { display: flex; width: 100%; }
body.fff .btn-rounded { border-radius: 999px; }
body.fff .btn[disabled], body.fff .btn.disabled, body.fff a.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
body.fff .text-uppercase.btn { text-transform: none; }
body.fff .waves-effect .waves-ripple { display: none; }

/* ---------- Page actions (actions_dict) and approval bar ---------- */
.fff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fff-actions .btn { margin: 0 !important; float: none !important; }
.fff-actions .fff-chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--fff-field); background: var(--fff-surface);
  color: var(--fff-text); font-size: 14px; font-weight: 600; text-decoration: none;
}
.fff-actions .fff-chip:hover { border-color: var(--fff-blue); color: var(--fff-blue); }
.fff-actions .fff-chip--add { margin-left: auto; background: var(--fff-blue); border-color: var(--fff-blue); color: #FFF; border-radius: var(--fff-radius-sm); height: 44px; font-family: var(--fff-head); font-size: 15px; }
.fff-actions .fff-chip--add:hover { background: var(--fff-blue-hover); color: #FFF; }

.fff-approve-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--fff-blue-tint); border: 1px solid var(--fff-blue-line); border-radius: var(--fff-radius);
}
.fff-approve-bar p { margin: 0; font-size: 14px; font-weight: 600; color: var(--fff-blue); }
.fff-approve-bar .fff-approve-actions { display: flex; gap: 8px; }
.fff-approve-bar .btn { float: none !important; min-height: 38px; }
.fff-approve-bar .btn-warning { background: var(--fff-surface); border-color: var(--fff-err-line); color: var(--fff-err); }
.fff-approve-bar .btn-warning:hover { background: var(--fff-err-bg); color: var(--fff-err); }

/* ---------- Messages and alerts ---------- */
body.fff ul.messages { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.fff ul.messages li {
  padding: 12px 16px; border-radius: 8px;
  background: var(--fff-blue-tint); border: 1px solid var(--fff-blue-line); color: var(--fff-ink);
}
body.fff ul.messages li strong { font-weight: 500; color: inherit !important; }
body.fff ul.messages li.error { background: var(--fff-err-bg); border-color: var(--fff-err-line); color: #7A1A10; }
body.fff ul.messages li.warning { background: var(--fff-warn-bg); border-color: var(--fff-warn-line); color: #5C3A00; }
body.fff ul.messages li.success { background: var(--fff-ok-bg); border-color: #BFE6B6; color: #1A4D13; }

body.fff .alert { padding: 12px 16px; margin-bottom: 16px; border-radius: 8px; border: 1px solid; font-size: 15px; box-shadow: none; text-shadow: none; }
body.fff .alert strong { font-weight: 500; }
body.fff .alert-danger { background: var(--fff-err-bg); border-color: var(--fff-err-line); color: #7A1A10; }
body.fff .alert-info { background: var(--fff-blue-tint); border-color: var(--fff-blue-line); color: #0A3A8C; }
body.fff .alert-success { background: var(--fff-ok-bg); border-color: #BFE6B6; color: #1A4D13; }
body.fff .alert-warning { background: var(--fff-warn-bg); border-color: var(--fff-warn-line); color: #5C3A00; }

/* ---------- Forms ---------- */
.fff-form { display: flex; flex-direction: column; gap: 22px; }
body.fff .fff-form .form-group { margin: 0; display: flex; flex-direction: column; gap: 7px; }
body.fff .fff-form .form-group.hidden { display: none; }
body.fff .fff-form label, body.fff .fff-auth label { margin: 0; font-size: 14px; font-weight: 600; color: var(--fff-ink); }
.fff-help { font-size: 14px; color: var(--fff-muted); }
/* form-template.html renders errors before the label; show them under the input. */
body.fff .fff-form .form-group > * { order: 2; }
body.fff .fff-form .form-group > label { order: 1; }
body.fff .fff-form .form-group > .fff-errors { order: 3; display: flex; flex-direction: column; gap: 4px; }
body.fff .fff-form .form-group > .fff-errors:not(:has(*)) { display: none; }
body.fff .fff-form .form-group > .fff-help { order: 4; }
body.fff .fff-form .helptext { font-size: 14px; color: var(--fff-muted); }
.fff-field-error {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fff-err);
}
.fff-field-error::before { content: "!"; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.8px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.fff-form .form-group.has-error .form-control { border-color: #F0A9A0; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10); }

body.fff .form-control {
  height: 46px; padding: 0 14px;
  border: 1px solid var(--fff-field); border-radius: var(--fff-radius-sm);
  background: var(--fff-surface); color: var(--fff-ink);
  font-family: var(--fff-body); font-size: 16px; box-shadow: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
body.fff textarea.form-control { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
body.fff .form-control:focus { border-color: var(--fff-blue); box-shadow: var(--fff-focus); outline: none; }
body.fff .form-control::placeholder { color: #8A93A2; }
body.fff .form-control[readonly], body.fff .form-control[disabled] { background: var(--fff-bg); color: var(--fff-muted); }
body.fff select.form-control { padding-right: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%235A6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
body.fff select[multiple].form-control { height: auto; min-height: 120px; background-image: none; padding: 8px; }
body.fff input[type="checkbox"], body.fff input[type="radio"] { accent-color: var(--fff-blue); width: 18px; height: 18px; }
.fff-check { display: flex; align-items: center; gap: 10px; }

/* Input groups used on the sign-in page */
body.fff .input-group { display: flex; width: 100%; }
body.fff .input-group .input-group-addon {
  width: auto; padding: 0 12px; display: flex; align-items: center;
  background: var(--fff-bg); border: 1px solid var(--fff-field); border-right: 0;
  border-radius: var(--fff-radius-sm) 0 0 var(--fff-radius-sm); color: var(--fff-muted);
}
body.fff .input-group .form-control { border-radius: 0 var(--fff-radius-sm) var(--fff-radius-sm) 0; flex: 1; }

/* bootstrap-select (form-template adds selectpicker to every <select>) */
body.fff .bootstrap-select { width: 100% !important; }
body.fff .bootstrap-select > .dropdown-toggle {
  height: 46px; padding: 0 36px 0 14px; border: 1px solid var(--fff-field); border-radius: var(--fff-radius-sm);
  background: var(--fff-surface); color: var(--fff-ink); font-size: 16px; font-weight: 400; box-shadow: none; justify-content: flex-start;
}
body.fff .bootstrap-select > .dropdown-toggle:focus, body.fff .bootstrap-select.open > .dropdown-toggle { border-color: var(--fff-blue); box-shadow: var(--fff-focus); outline: none !important; }
body.fff .bootstrap-select .dropdown-menu { border: 1px solid var(--fff-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(25, 25, 25, 0.12); padding: 6px; }
body.fff .bootstrap-select .dropdown-menu li a { padding: 9px 12px; border-radius: 6px; font-size: 15px; color: var(--fff-text); }
body.fff .bootstrap-select .dropdown-menu li.selected a, body.fff .bootstrap-select .dropdown-menu li a:hover { background: var(--fff-blue-tint); color: var(--fff-blue); }

/* select2 / selectize */
body.fff .select2-container .select2-choice, body.fff .select2-container .select2-selection--single,
body.fff .selectize-control .selectize-input {
  min-height: 46px; border: 1px solid var(--fff-field) !important; border-radius: var(--fff-radius-sm) !important;
  background: var(--fff-surface) !important; box-shadow: none !important; font-size: 16px; padding: 10px 14px;
}
body.fff .selectize-control.multi .selectize-input > div { background: var(--fff-blue-tint); color: var(--fff-blue); border: 0; border-radius: 5px; padding: 2px 8px; }

/* dropify (file fields) */
body.fff .dropify-wrapper {
  height: 180px; border: 1.5px dashed var(--fff-blue-line); border-radius: 8px;
  background: var(--fff-subtle); color: var(--fff-text); font-family: var(--fff-body);
}
body.fff .dropify-wrapper:hover { border-color: var(--fff-blue); background-image: none; background-color: #F5F8FE; }
body.fff .dropify-wrapper .dropify-message span.file-icon { color: var(--fff-blue); font-size: 36px; }
body.fff .dropify-wrapper .dropify-message p { font-size: 15px; color: var(--fff-ink); }
body.fff .dropify-wrapper .dropify-clear { border-radius: 6px; border: 1px solid var(--fff-field); background: var(--fff-surface); color: var(--fff-ink); font-family: var(--fff-body); text-transform: none; font-weight: 600; }

/* datepickers */
body.fff .datepicker.dropdown-menu, body.fff .datetimepicker.dropdown-menu { border: 1px solid var(--fff-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(25, 25, 25, 0.12); padding: 8px; font-family: var(--fff-body); }
body.fff .datepicker table tr td.active, body.fff .datepicker table tr td.active:hover,
body.fff .datetimepicker table tr td.active { background: var(--fff-blue) !important; color: #FFF !important; text-shadow: none; }

/* ---------- Date filter (bootstrap_table_template) ---------- */
.fff-filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px 18px; margin-bottom: 16px; }
.fff-filter .fff-filter-field { display: flex; flex-direction: column; gap: 6px; }
.fff-filter label { font-size: 13px !important; }
body.fff .fff-filter .form-control { height: 42px; font-size: 15px; width: 190px; }

/* ---------- Tables (bootstrap-table 1.21) ---------- */
.fff-table-card { overflow: hidden; }
.fff-table-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--fff-line-soft); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.fff-search { position: relative; }
.fff-search svg { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; color: var(--fff-faint); pointer-events: none; }
body.fff .fff-search .form-control { width: 280px; max-width: 100%; height: 42px; padding-left: 38px; font-size: 14px; }
.fff-table-card .table-responsive { border: 0; margin: 0; }
.fff-table-card #error-message, .fff-table-card #success-message { margin: 14px 16px 0; }

body.fff .bootstrap-table { font-family: var(--fff-body); }
body.fff .bootstrap-table .fixed-table-toolbar { padding: 10px 16px 0; margin: 0; }
body.fff .bootstrap-table .fixed-table-toolbar .search .form-control { height: 40px; font-size: 14px; }
body.fff .bootstrap-table .fixed-table-toolbar .columns { margin: 0 0 10px; }
body.fff .bootstrap-table .fixed-table-toolbar .btn { min-height: 40px; }
body.fff .bootstrap-table .fixed-table-container { border: 0; border-radius: 0; }
body.fff .bootstrap-table .fixed-table-container .table,
body.fff #table-object { margin: 0; border: 0; border-collapse: collapse; width: 100%; font-size: 15px; color: var(--fff-text) !important; }
body.fff #table-object thead th {
  padding: 0; background: var(--fff-subtle); border: 0; border-bottom: 1px solid var(--fff-line-soft);
  font-family: var(--fff-body); font-size: 13px; font-weight: 600; color: var(--fff-muted); vertical-align: middle; text-transform: none;
}
body.fff #table-object thead th .th-inner { padding: 12px 16px; line-height: 1.3; }
body.fff #table-object thead th .sortable { background-position: right 6px center; padding-right: 26px; }
body.fff #table-object tbody td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--fff-line-soft); vertical-align: middle; }
body.fff #table-object tbody tr:nth-of-type(odd), body.fff .table-striped > tbody > tr:nth-of-type(odd) { background: var(--fff-surface); }
body.fff #table-object tbody tr:hover { background: var(--fff-subtle); }
body.fff #table-object tbody tr.selected { background: #F5F8FE; }
body.fff #table-object tbody td .btn { min-height: 34px; padding: 0 12px; font-size: 13px; margin: 0; }
body.fff #table-object tbody td a:not(.btn) { font-weight: 600; text-decoration: none; }
body.fff #table-object tbody td a:not(.btn):hover { text-decoration: underline; }
body.fff #table-object .bs-checkbox { width: 48px; text-align: center; }
body.fff .bootstrap-table .no-records-found td { padding: 48px 16px !important; text-align: center; color: var(--fff-muted); }
body.fff .bootstrap-table .fixed-table-loading { background: rgba(255, 255, 255, 0.8); color: var(--fff-muted); }

body.fff .fixed-table-pagination { padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
body.fff .fixed-table-pagination::before, body.fff .fixed-table-pagination::after { display: none; }
body.fff .fixed-table-pagination .pagination-detail, body.fff .fixed-table-pagination div.pagination { float: none; margin: 0; }
body.fff .fixed-table-pagination .pagination-info { font-size: 14px; color: var(--fff-muted); margin-right: 8px; }
body.fff .fixed-table-pagination .page-list .btn { min-height: 32px; padding: 0 10px; font-size: 13px; }
body.fff .pagination { margin: 0; display: flex; gap: 4px; }
body.fff .pagination > li > a, body.fff .pagination > li > span {
  min-width: 34px; height: 34px; padding: 0 10px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fff-line); border-radius: 6px !important;
  background: var(--fff-surface) !important; color: var(--fff-text) !important; font-size: 14px;
}
body.fff .pagination > li > a:hover { border-color: var(--fff-blue); color: var(--fff-blue) !important; }
body.fff .pagination > .active > a, body.fff .pagination > .active > a:hover { background: var(--fff-blue) !important; border-color: var(--fff-blue); color: #FFF !important; }
body.fff .pagination > .disabled > a { opacity: 0.45; }
body.fff .pagination .text-white { color: inherit !important; }

body.fff .dropdown-menu { border: 1px solid var(--fff-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(25, 25, 25, 0.12); padding: 6px; font-size: 14px; }
body.fff .dropdown-menu > li > a { padding: 8px 12px; border-radius: 6px; color: var(--fff-text); }
body.fff .dropdown-menu > li > a:hover { background: var(--fff-blue-tint); color: var(--fff-blue); }

body.fff #generic-table-file-export-div { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px !important; }
body.fff #generic-table-file-export-div.hidden { display: none !important; }
body.fff #generic-table-file-export-div i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fff-field); border-radius: 7px; background: var(--fff-surface); color: var(--fff-ink) !important; }

/* Counter labels on sidebar items */
body.fff .custom-counter-label, body.fff .label { border-radius: 11px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
body.fff .label-danger { background: var(--fff-blue); }

/* Report amounts the statement view renders */
body.fff .text-danger { color: var(--fff-err) !important; }
body.fff .text-success { color: var(--fff-ok) !important; }
body.fff .text-info { color: var(--fff-blue) !important; }
body.fff .font-bold { font-weight: 600 !important; }

/* ---------- SweetAlert 1 (approve / reject details, profile resets) ---------- */
body.fff .sweet-overlay { background: rgba(25, 25, 25, 0.45); }
body.fff .sweet-alert {
  width: min(460px, calc(100vw - 32px)); left: 50%; margin-left: 0 !important; transform: translateX(-50%);
  padding: 24px; border-radius: 12px; font-family: var(--fff-body); box-shadow: 0 24px 60px rgba(25, 25, 25, 0.25);
}
body.fff .sweet-alert h2 { margin: 0 0 12px; font-family: var(--fff-head); font-size: 20px; font-weight: 600; color: var(--fff-ink); text-align: left; }
body.fff .sweet-alert p { font-size: 15px; color: var(--fff-muted); text-align: left; }
body.fff .sweet-alert .form-control, body.fff .sweet-alert textarea { width: 100%; margin: 0; }
body.fff .sweet-alert .sa-button-container { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
body.fff .sweet-alert button {
  margin: 0; height: 42px; padding: 0 20px; border-radius: 7px; font-family: var(--fff-body); font-size: 15px; font-weight: 600; box-shadow: none !important;
}
body.fff .sweet-alert button.confirm { background: var(--fff-blue) !important; color: #FFF; }
body.fff .sweet-alert button.confirm:hover { background: var(--fff-blue-hover) !important; }
body.fff .sweet-alert button.cancel { background: var(--fff-surface); border: 1px solid var(--fff-field); color: var(--fff-ink); }
body.fff .sweet-alert .sa-error-container { background: var(--fff-err-bg); border-radius: 6px; }
body.fff .sweet-alert .sa-error-container p { color: var(--fff-err); }
body.fff .sweet-alert fieldset { display: none; }
body.fff .sweet-alert.show-input fieldset { display: block; }

/* SweetAlert 2 toasts */
body.fff .swal2-popup.swal2-toast { border-radius: 10px; box-shadow: 0 12px 32px rgba(25, 25, 25, 0.16); font-family: var(--fff-body); }
body.fff .swal2-popup .swal2-confirm { background: var(--fff-blue) !important; border-radius: 7px; }

/* jquery.toast */
body.fff .jq-toast-single { border-radius: 8px; font-family: var(--fff-body); font-size: 14px; }

/* blockUI overlay */
body.fff .blockUI.blockMsg { border-radius: 10px !important; border: 1px solid var(--fff-line) !important; padding: 16px !important; font-family: var(--fff-body); }
body.fff .blockUI.blockMsg h4 { font-size: 15px; color: var(--fff-ink); }

/* ---------- Detail page ---------- */
.fff-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fff-detail-actions .btn { margin: 0 !important; }
body.fff .form-control-static { padding: 0; min-height: 0; }

/* ---------- Profile ---------- */
.fff-profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.fff-profile-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #DCE6F7; }
.fff-profile-name { margin: 0; font-family: var(--fff-head); font-size: 22px; font-weight: 600; color: var(--fff-ink); }
.fff-setting { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--fff-line-soft); }
.fff-setting:last-child { border-bottom: 0; }
.fff-setting p { margin: 0; }
.fff-setting .fff-setting-title { font-size: 15px; font-weight: 600; color: var(--fff-ink); }
.fff-setting .fff-setting-note { margin-top: 3px; font-size: 14px; color: var(--fff-muted); }

/* ---------- Signed-out pages ---------- */
body.fff.fff-auth-page { background: var(--fff-surface); }
.fff-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
.fff-auth-brand { position: relative; overflow: hidden; background: var(--fff-blue); color: #FFF; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.fff-auth-brand img.fff-auth-logo { height: 44px; width: auto; align-self: flex-start; }
.fff-auth-watermark { position: absolute; right: -90px; bottom: -120px; width: 480px; height: auto; opacity: 0.09; pointer-events: none; }
.fff-auth-kicker { margin: 0 0 16px; font-family: var(--fff-head); font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fff-green); }
.fff-auth-headline { margin: 0 0 18px; font-family: var(--fff-head); font-weight: 600; font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; color: #FFF !important; }
.fff-auth-lede { margin: 0; font-size: 18px; line-height: 1.6; color: #FFF; max-width: 30em; }
.fff-auth-legal { position: relative; margin: 0; font-size: 14px; color: #D6E2F7; }
.fff-auth-main { display: flex; align-items: center; justify-content: center; padding: 48px clamp(20px, 5vw, 56px); overflow: auto; }
.fff-auth-box { width: 100%; max-width: 400px; }
.fff-auth-box--wide { max-width: 640px; }
.fff-auth-mark { display: none; height: 44px; width: auto; margin-bottom: 28px; }
.fff-auth-title { margin: 0 0 8px; font-family: var(--fff-head); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--fff-ink); }
.fff-auth-sub { margin: 0 0 28px; font-size: 16px; color: var(--fff-muted); }
.fff-auth-foot { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--fff-line-soft); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--fff-muted); }
.fff-auth-foot p { margin: 0; }
/* The sign-in body keeps its own markup. These make its Bootstrap pieces fit. */
body.fff .fff-auth-box .white-box { padding: 0 !important; background: none; box-shadow: none; margin: 0; }
/* SIGN-IN / OTP ONLY. These resets force every wrapper in the form to full width and
   display: block. They must never reach a form built from misc/form-template.html
   (class="fff-form", e.g. Register), because there they also hit plugin internals:
   bootstrap-select's .dropdown-menu, dropify's .dropify-loader / .dropify-preview,
   and Django's hidden .form-group.hidden rows. Hence form:not(.fff-form). */
body.fff .fff-auth-box form:not(.fff-form) .form-group { margin: 0 0 18px; }
body.fff .fff-auth-box .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
/* Bootstrap's grid gives .row a -15px side margin and columns fixed percentages,
   so the button and the inputs ended up different widths. Everything in the
   sign-in column now takes the column's full width. */
body.fff .fff-auth-box .row { margin-left: 0; margin-right: 0; }
/* Any wrapper the sign-in template puts around a field (divs, tables, fieldsets,
   Bootstrap columns, inline-block helpers) is forced to the column's full width,
   so no wrapper can shrink the inputs. The icon box is the only exception. */
body.fff .fff-auth-box .white-box,
body.fff .fff-auth-box form,
body.fff .fff-auth-box form:not(.fff-form) div:not(.input-group-addon):not(.input-group-btn),
body.fff .fff-auth-box form:not(.fff-form) fieldset,
body.fff .fff-auth-box form:not(.fff-form) p,
body.fff .fff-auth-box form:not(.fff-form) table,
body.fff .fff-auth-box form:not(.fff-form) tbody,
body.fff .fff-auth-box form:not(.fff-form) tr,
body.fff .fff-auth-box form:not(.fff-form) td {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  float: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
body.fff .fff-auth-box form:not(.fff-form) div:not(.input-group):not(.input-group-addon):not(.input-group-btn),
body.fff .fff-auth-box form:not(.fff-form) table, body.fff .fff-auth-box form:not(.fff-form) tbody,
body.fff .fff-auth-box form:not(.fff-form) tr, body.fff .fff-auth-box form:not(.fff-form) td { display: block !important; }
body.fff .fff-auth-box .input-group { display: flex !important; align-items: stretch; }
body.fff .fff-auth-box .input-group > .form-control,
body.fff .fff-auth-box .input-group > input { flex: 1 1 0% !important; width: 1% !important; min-width: 0; height: 46px; }
body.fff .fff-auth-box .input-group > .input-group-addon { flex: 0 0 46px !important; width: 46px !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }
body.fff .fff-auth-box form:not(.fff-form) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.input-group input) { width: 100% !important; }
body.fff .fff-auth-box form:not(.fff-form) .btn,
body.fff .fff-auth-box form:not(.fff-form) button[type="submit"],
body.fff .fff-auth-box form:not(.fff-form) input[type="submit"] { width: 100% !important; margin: 0 !important; float: none !important; }
/* Bootstrap columns are position: relative, so a later column paints on top of an
   earlier one and catches its clicks. Nothing floats or overlaps in the sign-in column. */
body.fff .fff-auth-box form:not(.fff-form) div { clear: both; }
body.fff .fff-auth-box form:not(.fff-form) [class*="col-"] { position: static !important; }
body.fff .fff-auth-box form:not(.fff-form) .m-t-10 { margin-top: 12px !important; }
/* Safety net: plugin parts hidden until used stay hidden in any auth form. */
body.fff .fff-auth-box .form-group.hidden { display: none !important; }
body.fff .fff-auth-box .bootstrap-select:not(.open) > .dropdown-menu { display: none !important; }
body.fff .fff-auth-box .dropify-wrapper:not(.is-loading) .dropify-loader { display: none !important; }
body.fff .fff-auth-box .dropify-wrapper:not(.has-preview) .dropify-preview { display: none !important; }
body.fff .fff-auth-box .fff-form .bootstrap-select .dropdown-menu { z-index: 20; }
body.fff .fff-auth-box .btn-info, body.fff .fff-auth-box .btn-primary { min-height: 50px; font-family: var(--fff-head); font-size: 17px; }
@media (max-width: 959px) {
  .fff-auth { grid-template-columns: minmax(0, 1fr); }
  .fff-auth-brand { display: none; }
  .fff-auth-mark { display: block; }
}

/* ---------- Error pages ---------- */
.fff-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.fff-error-box { max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.fff-error-box img { height: 48px; margin-bottom: 36px; }
/* 403/404/500 bodies are <h1>code</h1><h3>title</h3><p>message</p> */
.fff-error-box h1 { order: 0; margin: 0 0 10px; font-family: var(--fff-head); font-weight: 600; font-size: 15px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fff-blue); }
.fff-error-box h3 { margin: 0 0 14px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--fff-ink); }
body.fff .fff-error-box .text-uppercase { text-transform: none; }
.fff-error-box p { margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: var(--fff-text); }
.fff-error-box p.fff-error-legal { margin: 40px 0 0; font-size: 14px; color: var(--fff-muted); }

/* ---------- Print (generate_print uses printThis on #item-details) ---------- */
@media print {
  .fff-sidebar, .fff-topbar, .fff-footer, .fff-detail-actions, .fff-actions { display: none !important; }
  .fff-shell { display: block; }
  body.fff { background: #FFF; }
}