/* ==========================================================================
   MFLOW ERP — Admin Theme
   Bootstrap 5.3 override layer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Sidebar */
  --mf-sidebar-bg:        #0e3b2c;
  --mf-sidebar-hover:     #174c3a;
  --mf-sidebar-active:    #15694a;
  --mf-sidebar-text:      #d3e2db;
  --mf-sidebar-muted:     #7d9c8f;
  --mf-sidebar-border:    rgba(255, 255, 255, .07);
  --mf-sidebar-w:         246px;
  --mf-sidebar-w-sm:      76px;

  /* Surfaces */
  --mf-body:              #f5f6f8;
  --mf-card:              #ffffff;
  --mf-border:            #e8ebf0;
  --mf-border-soft:       #f0f2f5;

  /* Type */
  --mf-heading:           #1a2b3c;
  --mf-text:              #4a5867;
  --mf-muted:             #8794a3;

  /* Accents */
  --mf-green:             #16a34a;
  --mf-blue:              #4f80e1;
  --mf-amber:             #e8a93b;
  --mf-purple:            #8b5cf6;
  --mf-coral:             #ef7b6b;
  --mf-grey:              #c4cad2;

  /* Accent tints — stat card badges */
  --mf-green-soft:        #e4f4ea;
  --mf-blue-soft:         #e6eefb;
  --mf-amber-soft:        #fbf0da;
  --mf-purple-soft:       #efe8fd;

  /* Shape */
  --mf-radius:            10px;
  --mf-radius-sm:         8px;
  --mf-shadow:            0 1px 2px rgba(16, 30, 54, .04);
  --mf-topbar-h:          74px;

  --mf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  font-family: var(--mf-font);
  background: var(--mf-body);
  color: var(--mf-text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; }

.mf-num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd6de; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b6bfc9; }

:focus-visible { outline: 2px solid var(--mf-green); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */
.mf-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--mf-sidebar-w);
  background: var(--mf-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .22s ease, transform .22s ease;
}

.mf-main {
  margin-left: var(--mf-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .22s ease;
}

.mf-content {
  flex: 1 0 auto;
  padding: 22px 24px 8px;
}

.mf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 18, .45);
  z-index: 1035;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

/* --------------------------------------------------------------------------
   4. Sidebar — brand
   -------------------------------------------------------------------------- */
.mf-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--mf-topbar-h);
  padding: 0 18px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--mf-sidebar-border);
}

.mf-brand-mark { width: 34px; height: 34px; flex-shrink: 0; }

.mf-brand-text { min-width: 0; }

.mf-brand-name {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.1;
  white-space: nowrap;
}

.mf-brand-sub {
  color: var(--mf-sidebar-muted);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Sidebar — navigation
   -------------------------------------------------------------------------- */
.mf-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 18px;
}

.mf-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

.mf-nav-heading {
  color: var(--mf-sidebar-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 16px 10px 7px;
  white-space: nowrap;
}

.mf-nav-item { margin-bottom: 2px; }

.mf-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: var(--mf-radius-sm);
  color: var(--mf-sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.mf-nav-link:hover { background: var(--mf-sidebar-hover); color: #fff; }

.mf-nav-link.active { background: var(--mf-sidebar-active); color: #fff; font-weight: 600; }

.mf-nav-link [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.9; }

.mf-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.mf-nav-caret {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2 !important;
  opacity: .65;
  transition: transform .2s ease;
}

.mf-nav-link[aria-expanded="true"] .mf-nav-caret { transform: rotate(180deg); }

/* Submenu */
.mf-submenu { list-style: none; padding: 3px 0 3px 42px; margin: 0; }

.mf-submenu a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--mf-sidebar-muted);
  font-size: 12.8px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}

.mf-submenu a:hover { color: #fff; background: var(--mf-sidebar-hover); }
.mf-submenu a.active { color: #fff; background: var(--mf-sidebar-active); font-weight: 550; }

/* Collapse control */
.mf-sidebar-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--mf-sidebar-border);
  padding: 12px;
}

.mf-collapse-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--mf-radius-sm);
  background: transparent;
  color: var(--mf-sidebar-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.mf-collapse-btn:hover { background: var(--mf-sidebar-hover); color: #fff; }

.mf-collapse-btn [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. Sidebar — collapsed state (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.mf-collapsed .mf-sidebar { width: var(--mf-sidebar-w-sm); }
  body.mf-collapsed .mf-main { margin-left: var(--mf-sidebar-w-sm); }

  body.mf-collapsed .mf-brand { justify-content: center; padding: 0 10px; }

  body.mf-collapsed .mf-brand-text,
  body.mf-collapsed .mf-nav-label,
  body.mf-collapsed .mf-nav-caret,
  body.mf-collapsed .mf-nav-heading,
  body.mf-collapsed .mf-collapse-btn span,
  body.mf-collapsed .mf-submenu { display: none; }

  body.mf-collapsed .mf-nav-link,
  body.mf-collapsed .mf-collapse-btn { justify-content: center; padding-inline: 0; }

  body.mf-collapsed .mf-collapse-btn [data-lucide] { transform: rotate(180deg); }
}

/* --------------------------------------------------------------------------
   7. Topbar
   -------------------------------------------------------------------------- */
.mf-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--mf-topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--mf-card);
  border-bottom: 1px solid var(--mf-border);
}

.mf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--mf-radius-sm);
  background: transparent;
  color: var(--mf-heading);
  flex-shrink: 0;
  transition: background .15s ease;
}

.mf-icon-btn:hover { background: var(--mf-border-soft); }

.mf-page-title {
  font-size: 20px;
  font-weight: 650;
  color: var(--mf-heading);
  line-height: 1.15;
  margin: 0;
}

.mf-page-sub { font-size: 12.5px; color: var(--mf-muted); line-height: 1.2; }

/* Search */
.mf-search { position: relative; flex: 0 1 430px; margin-inline: auto; }

.mf-search [data-lucide] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--mf-muted);
  pointer-events: none;
}

.mf-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--mf-border);
  border-radius: 22px;
  background: var(--mf-card);
  font-size: 13.5px;
  color: var(--mf-heading);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mf-search input::placeholder { color: var(--mf-muted); }

.mf-search input:focus {
  outline: 0;
  border-color: var(--mf-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .1);
}

/* Topbar controls */
.mf-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.mf-branch-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--mf-radius-sm);
  background: transparent;
  color: var(--mf-heading);
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: background .15s ease;
}

.mf-branch-btn:hover { background: var(--mf-border-soft); }
.mf-branch-btn [data-lucide] { width: 18px; height: 18px; color: var(--mf-muted); }

.mf-bell { position: relative; }

.mf-bell-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 18px;
  text-align: center;
}

.mf-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: var(--mf-radius-sm);
  background: transparent;
  text-align: left;
  transition: background .15s ease;
}

.mf-user-btn:hover { background: var(--mf-border-soft); }

.mf-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.mf-user-name { font-size: 13.5px; font-weight: 600; color: var(--mf-heading); line-height: 1.2; white-space: nowrap; }
.mf-user-role { font-size: 11.5px; color: var(--mf-muted); line-height: 1.2; white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. Date strip
   -------------------------------------------------------------------------- */
.mf-datestrip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--mf-muted);
  font-size: 13px;
  padding-bottom: 16px;
}

.mf-datestrip [data-lucide] { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.mf-card {
  background: var(--mf-card);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  flex-shrink: 0;
}

.mf-card-title {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mf-heading);
  margin: 0;
}

.mf-card-link { font-size: 12.5px; color: var(--mf-green); font-weight: 550; white-space: nowrap; }
.mf-card-link:hover { text-decoration: underline; }

.mf-card-body { padding: 0 18px 18px; flex: 1 1 auto; }

/* Compact select */
.mf-select {
  height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--mf-border);
  border-radius: 7px;
  background: var(--mf-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238794a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  font-size: 12.5px;
  color: var(--mf-text);
  appearance: none;
  cursor: pointer;
}

.mf-select:focus { outline: 0; border-color: var(--mf-green); }

/* --------------------------------------------------------------------------
   10. Stat cards
   -------------------------------------------------------------------------- */
.mf-stat { padding: 18px; }

/* Only the LABEL shares a row with the icon badge. The value sits below it
   and spans the full card width — otherwise the icon steals width from the
   figure and long amounts overflow underneath it. */
.mf-stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mf-stat-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin: 0;
  padding-top: 3px;
}

.mf-stat-value {
  /* Never use word-break here — it splits inside the number. */
  font-size: clamp(18px, 1.05vw + 7px, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mf-stat-icon [data-lucide] { width: 22px; height: 22px; stroke-width: 1.9; }

.mf-stat-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--mf-muted);
}

.mf-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.mf-trend.up { color: var(--mf-green); }
.mf-trend.down { color: #e5484d; }
.mf-trend [data-lucide] { width: 14px; height: 14px; stroke-width: 2.4; }

/* Accent variants */
.mf-a-green  { color: var(--mf-green); }
.mf-a-blue   { color: var(--mf-blue); }
.mf-a-amber  { color: var(--mf-amber); }
.mf-a-purple { color: var(--mf-purple); }

.mf-bg-green  { background: var(--mf-green-soft);  color: var(--mf-green); }
.mf-bg-blue   { background: var(--mf-blue-soft);   color: var(--mf-blue); }
.mf-bg-amber  { background: var(--mf-amber-soft);  color: var(--mf-amber); }
.mf-bg-purple { background: var(--mf-purple-soft); color: var(--mf-purple); }

/* --------------------------------------------------------------------------
   11. List rows — banks, approvals, activities
   -------------------------------------------------------------------------- */
.mf-list { list-style: none; padding: 0; margin: 0; }

.mf-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mf-border-soft);
}

.mf-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-list > li:first-child { padding-top: 4px; }

.mf-list-body { flex: 1 1 auto; min-width: 0; }

.mf-list-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mf-heading);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-list-sub {
  font-size: 12px;
  color: var(--mf-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-list-amount {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--mf-heading);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Bank logo tile */
.mf-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--mf-radius-sm);
  object-fit: contain;
  background: var(--mf-border-soft);
  flex-shrink: 0;
}

/* Approvals */
.mf-approval-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mf-radius-sm);
  background: var(--mf-green-soft);
  color: var(--mf-green);
  flex-shrink: 0;
}

.mf-approval-icon [data-lucide] { width: 17px; height: 17px; stroke-width: 1.9; }

.mf-count {
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--mf-border-soft);
  color: var(--mf-heading);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Activities */
.mf-act-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.mf-act-text { font-size: 13px; color: var(--mf-text); line-height: 1.4; }
.mf-act-text strong { color: var(--mf-heading); font-weight: 650; }
.mf-act-ref { font-size: 11.5px; color: var(--mf-muted); }
.mf-act-time { font-size: 11.5px; color: var(--mf-muted); white-space: nowrap; flex-shrink: 0; align-self: flex-start; padding-top: 2px; }

/* --------------------------------------------------------------------------
   12. Expense legend
   -------------------------------------------------------------------------- */
.mf-legend { list-style: none; padding: 0; margin: 0; }

.mf-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 12.5px;
}

.mf-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.mf-legend-name { flex: 1 1 auto; color: var(--mf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-legend-value { color: var(--mf-heading); font-weight: 550; white-space: nowrap; }
.mf-legend-pct { width: 34px; text-align: right; color: var(--mf-muted); white-space: nowrap; }

.mf-legend-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--mf-border);
  font-size: 13px;
  font-weight: 650;
  color: var(--mf-heading);
}

/* --------------------------------------------------------------------------
   13. Charts
   -------------------------------------------------------------------------- */
.mf-chart { width: 100%; }

.apexcharts-tooltip {
  border: 1px solid var(--mf-border) !important;
  box-shadow: 0 4px 14px rgba(16, 30, 54, .1) !important;
  border-radius: var(--mf-radius-sm) !important;
  font-family: var(--mf-font) !important;
}

.apexcharts-tooltip-title {
  background: var(--mf-border-soft) !important;
  border-bottom: 1px solid var(--mf-border) !important;
  font-weight: 650 !important;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.mf-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--mf-border);
  background: var(--mf-card);
  font-size: 12.5px;
  color: var(--mf-muted);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .mf-search { flex-basis: 320px; }
}

/* Tablet and below — sidebar becomes an overlay drawer */
@media (max-width: 991.98px) {
  .mf-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  body.mf-sidebar-open .mf-sidebar { transform: translateX(0); }
  body.mf-sidebar-open .mf-backdrop { opacity: 1; visibility: visible; }

  .mf-main { margin-left: 0; }

  .mf-search { display: none; }
  .mf-topbar { padding: 0 16px; gap: 10px; }
  .mf-page-sub { display: none; }
  .mf-branch-btn span { display: none; }
  .mf-branch-btn { padding: 0 8px; }
  .mf-content { padding: 18px 16px 8px; }
  .mf-footer { padding: 16px; }
}

@media (max-width: 767.98px) {
  .mf-page-title { font-size: 17px; }
  .mf-user-name, .mf-user-role { display: none; }
  .mf-user-btn { padding: 0 4px; }
  .mf-datestrip { justify-content: flex-start; }
  .mf-stat { padding: 15px; }
  .mf-stat-icon { width: 42px; height: 42px; }
  .mf-footer { justify-content: center; text-align: center; }
}

@media (max-width: 575.98px) {
  .mf-content { padding: 14px 12px 8px; }
  .mf-card-head { padding: 14px 14px 10px; }
  .mf-card-body { padding: 0 14px 14px; }
  .mf-topbar { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .mf-sidebar, .mf-topbar, .mf-backdrop { display: none !important; }
  .mf-main { margin-left: 0 !important; }
  .mf-card { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   16. Authentication (login)
   -------------------------------------------------------------------------- */
.mf-auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16553d 0%, transparent 60%),
    var(--mf-sidebar-bg);
}

.mf-auth-shell { width: 100%; max-width: 412px; }

.mf-auth-card {
  background: var(--mf-card);
  border-radius: 14px;
  padding: 34px 32px 28px;
  box-shadow: 0 18px 48px rgba(6, 24, 17, .3);
}

.mf-auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }

.mf-auth-mark {
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--mf-sidebar-bg); padding: 3px; flex-shrink: 0;
}

.mf-auth-name {
  font-size: 19px; font-weight: 700; letter-spacing: .5px;
  color: var(--mf-heading); line-height: 1.1;
}

.mf-auth-tagline { font-size: 11px; color: var(--mf-muted); line-height: 1.2; }

.mf-auth-title {
  font-size: 22px; font-weight: 700; color: var(--mf-heading);
  margin: 0 0 4px; letter-spacing: -.02em;
}

.mf-auth-sub { font-size: 13.5px; color: var(--mf-muted); margin: 0 0 22px; }

.mf-field { margin-bottom: 16px; }

.mf-label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--mf-heading); margin-bottom: 6px;
}

.mf-input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm);
  background: var(--mf-card); font-family: var(--mf-font);
  font-size: 14px; color: var(--mf-heading);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mf-input::placeholder { color: #b3bcc7; }

.mf-input:focus {
  outline: 0; border-color: var(--mf-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

/* Multi-line variant — same skin as .mf-input, but it grows instead of
   sitting at a fixed 44px. Used for registered addresses and close reasons. */
.mf-textarea {
  height: auto; min-height: 88px; padding: 11px 14px;
  line-height: 1.5; resize: vertical;
}

.mf-input-error { border-color: #e5484d; }
.mf-input-error:focus { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }

.mf-input-group { position: relative; }
.mf-input-group .mf-input { padding-right: 44px; }

.mf-input-addon {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--mf-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.mf-input-addon:hover { background: var(--mf-border-soft); color: var(--mf-heading); }
.mf-input-addon [data-lucide] { width: 17px; height: 17px; }

.mf-error {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 6px; font-size: 12.5px; color: #c1352f;
}

.mf-error [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

.mf-check {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 20px; font-size: 13px; color: var(--mf-text); cursor: pointer;
}

.mf-check input { width: 15px; height: 15px; accent-color: var(--mf-green); cursor: pointer; }

.mf-btn-primary {
  width: 100%; height: 46px; border: 0;
  border-radius: var(--mf-radius-sm);
  background: var(--mf-sidebar-active); color: #fff;
  font-family: var(--mf-font); font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, opacity .15s ease;
}

.mf-btn-primary:hover:not(:disabled) { background: #12583e; }
.mf-btn-primary:disabled { opacity: .72; cursor: not-allowed; }

.mf-btn-loading { display: inline-flex; align-items: center; gap: 8px; }

.mf-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: mf-spin .6s linear infinite;
}

@keyframes mf-spin { to { transform: rotate(360deg); } }

.mf-auth-foot {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--mf-border-soft);
  font-size: 12px; color: var(--mf-muted); text-align: center;
}

.mf-auth-copy { font-size: 12px; color: rgba(211, 226, 219, .55); text-align: center; }

@media (max-width: 420px) {
  .mf-auth-card { padding: 26px 20px 22px; }
}

/* --------------------------------------------------------------------------
   17. Admin screens — access control (roles, permissions, user assignment)
   -------------------------------------------------------------------------- */

/* 17.1 Buttons -------------------------------------------------------------- */

.mf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm);
  background: var(--mf-card); color: var(--mf-heading);
  font-family: var(--mf-font); font-size: 13.5px; font-weight: 550;
  white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mf-btn [data-lucide] { width: 16px; height: 16px; }
.mf-btn:hover:not(:disabled) { background: var(--mf-body); border-color: #d8dde5; color: var(--mf-heading); }
.mf-btn:disabled { opacity: .55; cursor: not-allowed; }

.mf-btn-solid {
  background: var(--mf-sidebar-active); border-color: var(--mf-sidebar-active); color: #fff;
}
.mf-btn-solid:hover:not(:disabled) { background: #12583e; border-color: #12583e; color: #fff; }

.mf-btn-danger { color: #c02a2f; border-color: #f0d4d5; background: #fdf3f3; }
.mf-btn-danger:hover:not(:disabled) { background: #fbe7e8; border-color: #e6bcbe; color: #a3232a; }

.mf-btn-ghost { border-color: transparent; background: transparent; color: var(--mf-text); }
.mf-btn-ghost:hover:not(:disabled) { background: var(--mf-body); border-color: transparent; }

.mf-btn-sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.mf-btn-icon { width: 32px; height: 32px; padding: 0; }

/* 17.2 Toolbar -------------------------------------------------------------- */

.mf-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--mf-border-soft);
}

.mf-toolbar-grow { flex: 1 1 220px; min-width: 180px; }
.mf-toolbar-spacer { margin-left: auto; }

.mf-input-sm { height: 38px; font-size: 13.5px; }

.mf-search-field { position: relative; }
.mf-search-field [data-lucide] {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--mf-muted); pointer-events: none;
}
.mf-search-field .mf-input { padding-left: 36px; }

/* 17.3 Data table ----------------------------------------------------------- */

.mf-table-wrap { overflow-x: auto; }

.mf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.mf-table thead th {
  padding: 11px 18px;
  background: #fafbfc;
  border-bottom: 1px solid var(--mf-border);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mf-muted);
  text-align: left; white-space: nowrap;
}

.mf-table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--mf-border-soft);
  color: var(--mf-text); vertical-align: middle;
}

.mf-table tbody tr:last-child td { border-bottom: 0; }
.mf-table tbody tr:hover { background: #fafbfc; }

.mf-table .mf-td-actions { text-align: right; white-space: nowrap; }
.mf-table .mf-td-actions .mf-btn + .mf-btn { margin-left: 6px; }

.mf-table-title { font-weight: 600; color: var(--mf-heading); }
.mf-table-sub { font-size: 12.5px; color: var(--mf-muted); }

.mf-sortable { cursor: pointer; user-select: none; }
.mf-sortable:hover { color: var(--mf-text); }
.mf-sortable [data-lucide] { width: 13px; height: 13px; vertical-align: -2px; margin-left: 3px; }

/* 17.4 Badges and code chips ------------------------------------------------ */

.mf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 550; line-height: 1.5;
  background: var(--mf-body); color: var(--mf-text);
}

.mf-badge-green  { background: var(--mf-green-soft);  color: #12693a; }
.mf-badge-blue   { background: var(--mf-blue-soft);   color: #2f5cb5; }
.mf-badge-amber  { background: var(--mf-amber-soft);  color: #8a6416; }
.mf-badge-purple { background: var(--mf-purple-soft); color: #6438c8; }
.mf-badge-muted  { background: #eef1f4;               color: var(--mf-muted); }

.mf-code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--mf-heading);
  background: #f2f4f7; border-radius: 5px; padding: 2px 7px;
}

.mf-badge-stack { display: flex; flex-wrap: wrap; gap: 5px; }

/* 17.5 Empty state ---------------------------------------------------------- */

.mf-empty { padding: 52px 20px; text-align: center; color: var(--mf-muted); }
.mf-empty [data-lucide] { width: 30px; height: 30px; color: #c8d0da; margin-bottom: 10px; }
.mf-empty-title { font-size: 14.5px; font-weight: 600; color: var(--mf-heading); margin-bottom: 3px; }

/* 17.6 Flash messages ------------------------------------------------------- */

.mf-alert {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; margin-bottom: 16px;
  border: 1px solid var(--mf-green-soft); border-left: 3px solid var(--mf-green);
  border-radius: var(--mf-radius-sm);
  background: #f2faf5; color: #12693a; font-size: 13.5px;
}

.mf-alert [data-lucide] { width: 17px; height: 17px; flex: none; }
.mf-alert-error { border-color: #f3d7d8; border-left-color: #d0454a; background: #fdf4f4; color: #a3232a; }
.mf-alert-dismiss { margin-left: auto; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.mf-alert-dismiss:hover { opacity: 1; }

/* 17.7 Modal ---------------------------------------------------------------- */

.mf-modal {
  position: fixed; inset: 0; z-index: 1060;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  background: rgba(16, 30, 54, .42);
  overflow-y: auto;
  animation: mf-fade .12s ease;
}

@keyframes mf-fade { from { opacity: 0; } to { opacity: 1; } }

.mf-modal-card {
  width: 100%; max-width: 560px; margin: auto 0;
  background: var(--mf-card); border-radius: var(--mf-radius);
  box-shadow: 0 18px 44px rgba(16, 30, 54, .18);
}

.mf-modal-lg { max-width: 940px; }

.mf-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--mf-border-soft);
}

.mf-modal-title { font-size: 15.5px; font-weight: 650; color: var(--mf-heading); margin: 0; }
.mf-modal-sub { font-size: 12.5px; color: var(--mf-muted); margin: 2px 0 0; }
.mf-modal-close {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--mf-muted); cursor: pointer;
}
.mf-modal-close:hover { background: var(--mf-body); color: var(--mf-heading); }
.mf-modal-close [data-lucide] { width: 17px; height: 17px; }

.mf-modal-body { padding: 20px 22px; }
.mf-modal-body-scroll { max-height: min(58vh, 560px); overflow-y: auto; }

.mf-modal-foot {
  display: flex; align-items: center; gap: 9px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--mf-border-soft);
  background: #fbfcfd; border-radius: 0 0 var(--mf-radius) var(--mf-radius);
}

.mf-modal-foot-note { margin-right: auto; font-size: 12.5px; color: var(--mf-muted); }

/* 17.8 Permission matrix ---------------------------------------------------- */

.mf-perm-group + .mf-perm-group { margin-top: 8px; }

.mf-perm-group-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 2px;
  background: #f7f9fa; border-radius: var(--mf-radius-sm);
  font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mf-muted);
}

.mf-perm-group-count { font-weight: 550; letter-spacing: 0; text-transform: none; }

.mf-perm-module { padding: 10px 12px; border-bottom: 1px solid var(--mf-border-soft); }
.mf-perm-module:last-child { border-bottom: 0; }

.mf-perm-module-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}

.mf-perm-module-name { font-size: 13.5px; font-weight: 600; color: var(--mf-heading); }

.mf-perm-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.mf-perm-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--mf-border-soft); border-radius: 7px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}

.mf-perm-item:hover { background: #fafbfc; border-color: var(--mf-border); }
.mf-perm-item input { margin-top: 2px; flex: none; accent-color: var(--mf-sidebar-active); }
.mf-perm-item-name { font-size: 13px; color: var(--mf-heading); line-height: 1.35; }
.mf-perm-item-desc { font-size: 11.5px; color: var(--mf-muted); }
.mf-perm-item input:checked ~ span .mf-perm-item-name { font-weight: 600; }

/* 17.9 Checkbox / option rows ----------------------------------------------- */

.mf-option {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}

.mf-option + .mf-option { margin-top: 8px; }
.mf-option:hover { background: #fafbfc; }
.mf-option input { margin-top: 3px; flex: none; accent-color: var(--mf-sidebar-active); }
.mf-option-name { font-size: 13.5px; font-weight: 600; color: var(--mf-heading); }
.mf-option-desc { font-size: 12.5px; color: var(--mf-muted); line-height: 1.45; }
.mf-option-selected { border-color: #bfe0cd; background: #f5fbf7; }

/* 17.10 Footer strip under a table (pagination + counts) --------------------- */

.mf-table-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--mf-border-soft);
  font-size: 13px; color: var(--mf-muted);
}

.mf-table-foot .pagination { margin: 0; flex-wrap: wrap; }
.mf-table-foot nav { margin-left: auto; }

/* Bootstrap's pagination view wraps "Showing x to y of z results" in a <p>,
   which carries Bootstrap's 1rem bottom margin. Inside an align-items:center
   row that margin lifts the text off the buttons' centre line. The same view
   also puts the count and the links flush against each other, so give them a
   gap rather than letting them touch. */
.mf-table-foot nav p { margin: 0; }
.mf-table-foot nav > div { gap: 16px; }

.mf-table-foot .page-link {
  border-color: var(--mf-border); color: var(--mf-text);
  font-size: 13px; padding: 5px 11px;
}
.mf-table-foot .page-item.active .page-link {
  background: var(--mf-sidebar-active); border-color: var(--mf-sidebar-active); color: #fff;
}
.mf-table-foot .page-item.disabled .page-link { color: #c3cad3; }

/* 17.11 Helper text --------------------------------------------------------- */

.mf-hint { font-size: 12.5px; color: var(--mf-muted); margin-top: 6px; }
.mf-required { color: #d0454a; }