/* TondeSoft Pharmacy ERP — Enterprise Experience Layer */
:root{
 --te-brand:#0b1f38;--te-brand-2:#15385f;--te-accent:#0d9488;--te-accent-2:#14b8a6;
 --te-bg:#f4f7fa;--te-surface:#fff;--te-surface-2:#f8fafc;--te-text:#0f172a;--te-muted:#64748b;
 --te-border:#e2e8f0;--te-focus:rgba(13,148,136,.25);--te-shadow:0 8px 30px rgba(15,23,42,.07)
}
/* Global quality-of-life */
.pherp-enterprise-admin .notice{border-radius:10px!important}
.pherp-enterprise-admin #wpbody-content{padding-bottom:36px}
.pherp-enterprise-admin #wpfooter{border-top:1px solid #e2e8f0;background:#fff}
.pherp-enterprise-admin #wpfooter .pherp-footer-sep{margin:0 5px;color:#94a3b8}
.pherp-enterprise-admin .pherp-wrap{max-width:1680px!important}
/* Admin navigation polish */
.pherp-enterprise-admin #adminmenu .wp-submenu{border-radius:0 0 8px 8px}
.pherp-enterprise-admin #adminmenu .wp-has-current-submenu .wp-submenu,
.pherp-enterprise-admin #adminmenu .wp-menu-open .wp-submenu{box-shadow:0 8px 24px rgba(15,23,42,.10)}
/* Shared focus language */
.pherp-enterprise-admin :focus-visible,.fe-app :focus-visible{outline:3px solid var(--te-focus)!important;outline-offset:2px!important}
/* Frontend enterprise shell */
.fe-enterprise-bar{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 24px;background:linear-gradient(90deg,var(--te-brand),var(--te-brand-2));color:#dbeafe;font-size:11px;font-weight:600;letter-spacing:.2px}
.fe-enterprise-bar .te-status{display:inline-flex;align-items:center;gap:6px}
.fe-enterprise-bar .te-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12)}
.fe-enterprise-spacer{flex:1}
.fe-topbar-actions{display:flex;align-items:center;gap:7px}
.fe-topbar-action{width:36px;height:36px;border:1px solid var(--fe-border-light);background:#fff;color:#475569;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.fe-topbar-action:hover{background:var(--fe-teal-pale);color:var(--fe-teal);border-color:#b7e4df}
.fe-global-search{display:flex;align-items:center;gap:8px;min-width:220px;height:36px;padding:0 11px;border:1px solid var(--fe-border-light);background:#f8fafc;border-radius:9px;color:#64748b;cursor:pointer}
.fe-global-search kbd{margin-left:auto;padding:2px 6px;border:1px solid #dbe3ea;border-radius:5px;background:#fff;font-size:10px;color:#94a3b8}
.fe-command-overlay{position:fixed;inset:0;background:rgba(2,8,23,.48);backdrop-filter:blur(3px);z-index:100000;display:none;align-items:flex-start;justify-content:center;padding-top:11vh}
.fe-command-overlay.open{display:flex}
.fe-command{width:min(680px,calc(100vw - 28px));background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 30px 80px rgba(2,8,23,.28);overflow:hidden}
.fe-command-input{width:100%;height:58px;border:0;border-bottom:1px solid #e2e8f0;padding:0 18px;font-size:17px;outline:0;background:#fff;color:#0f172a}
.fe-command-list{max-height:55vh;overflow:auto;padding:8px}
.fe-command-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;text-decoration:none;color:#0f172a}
.fe-command-item:hover,.fe-command-item.active{background:#f0fdfa;color:#0f766e}
.fe-command-item .te-cmd-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#f1f5f9}
.fe-command-empty{padding:28px;text-align:center;color:#64748b}
.fe-density-compact .fe-card{margin-top:14px}
.fe-density-compact .fe-kpi-grid{gap:10px;padding-top:14px}
.fe-density-compact .fe-kpi-card{padding:14px 16px}
/* Dark theme: opt-in via data-theme so existing installations remain unchanged */
[data-theme="dark"] .fe-app{--fe-bg:#0b1220;--fe-card-bg:#111827;--fe-text:#e5edf7;--fe-text-soft:#cbd5e1;--fe-muted:#94a3b8;--fe-border:#263449;--fe-border-light:#1e293b;--fe-navy:#e5edf7;--fe-navy2:#dbeafe;--fe-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.03)}
[data-theme="dark"] .fe-topbar,[data-theme="dark"] .fe-username,[data-theme="dark"] .fe-global-search,[data-theme="dark"] .fe-topbar-action,[data-theme="dark"] .fe-command{background:#111827;color:#e5edf7;border-color:#263449}
[data-theme="dark"] .fe-sidebar{background:#08111f;border-color:#172235}
[data-theme="dark"] .fe-card-header{background:#0f172a;border-color:#263449}
[data-theme="dark"] .fe-command-input{background:#111827;color:#e5edf7;border-color:#263449}
[data-theme="dark"] .fe-command-item{color:#e5edf7}
[data-theme="dark"] .fe-command-item:hover,[data-theme="dark"] .fe-command-item.active{background:#0f2e2b}
@media(max-width:900px){.fe-global-search{min-width:36px;width:36px;padding:0}.fe-global-search span,.fe-global-search kbd{display:none}.fe-enterprise-bar{padding:0 14px}.fe-topbar{padding:0 14px}}
@media(max-width:640px){.fe-enterprise-bar{display:none}.fe-topbar-action{width:34px;height:34px}.fe-username{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* ============================================================
   TondeSoft Pharmacy ERP — UI Enhancement Layer
   UI ONLY: visual presentation, spacing, hierarchy, states and
   responsive behavior. No business logic, routes, data or
   functional controls are changed by this layer.
   ============================================================ */

:root{
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-tint:#f3f8f8;
  --ui-border:#e2e8f0;
  --ui-border-strong:#cbd5e1;
  --ui-ink:#0f172a;
  --ui-ink-soft:#334155;
  --ui-muted:#64748b;
  --ui-brand:#0f766e;
  --ui-brand-strong:#115e59;
  --ui-brand-soft:#ecfdf5;
  --ui-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --ui-shadow:0 4px 18px rgba(15,23,42,.07);
  --ui-shadow-lg:0 18px 45px rgba(15,23,42,.13);
}

/* ---------- Global visual rhythm ---------- */
.fe-app{
  background:
    radial-gradient(circle at 100% 0,rgba(13,148,136,.035),transparent 28rem),
    var(--fe-bg);
}
.fe-main{background:transparent}
.fe-topbar{
  height:68px;
  padding:0 30px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(203,213,225,.72);
  box-shadow:0 1px 12px rgba(15,23,42,.045);
}
.fe-page-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  letter-spacing:-.3px;
}
.fe-username{
  color:var(--ui-ink-soft);
  font-weight:600;
}

/* ---------- Enterprise status bar ---------- */
.fe-enterprise-bar{
  min-height:34px;
  padding:0 30px;
  background:linear-gradient(100deg,#0b1f38 0%,#103b4b 55%,#0f766e 100%);
  font-size:10.5px;
  letter-spacing:.03em;
}
.fe-enterprise-bar .te-status{font-weight:700}

/* ---------- Sidebar ---------- */
.fe-sidebar{
  background:
    linear-gradient(180deg,#081b31 0%,#0b243d 52%,#0a1d32 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:8px 0 28px rgba(2,8,23,.10);
}
.fe-sidebar .fe-nav{
  padding:10px 10px 16px;
}
.fe-nav-group-label{
  padding:17px 12px 6px;
  color:rgba(255,255,255,.38);
  font-size:9px;
  letter-spacing:.13em;
}
.fe-nav-link{
  min-height:42px;
  margin:2px 0;
  padding:9px 12px;
  border:1px solid transparent;
  color:rgba(255,255,255,.68);
  border-radius:9px;
}
.fe-nav-link:hover{
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.055);
  transform:translateX(1px);
}
.fe-nav-link.fe-active{
  color:#fff;
  background:linear-gradient(90deg,rgba(13,148,136,.30),rgba(13,148,136,.12));
  border-color:rgba(45,212,191,.15);
  box-shadow:inset 3px 0 0 #2dd4bf,0 3px 12px rgba(2,8,23,.12);
}
.fe-nav-icon{
  width:24px;
  font-size:16px;
  filter:saturate(.9);
}
.fe-sidebar-footer{
  margin:0 10px;
  padding:13px 10px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ---------- Topbar controls ---------- */
.fe-global-search{
  height:38px;
  min-width:250px;
  border-radius:10px;
  background:#f8fafc;
  border-color:#e2e8f0;
  box-shadow:var(--ui-shadow-sm);
}
.fe-global-search:hover{
  background:#fff;
  border-color:#99f6e4;
  box-shadow:0 0 0 3px rgba(13,148,136,.07);
}
.fe-topbar-action{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#fff;
  border-color:#e2e8f0;
  box-shadow:var(--ui-shadow-sm);
}

/* ---------- Cards ---------- */
.fe-card{
  margin-top:18px;
  border-radius:14px;
  border-color:#e2e8f0;
  box-shadow:var(--ui-shadow);
  background:rgba(255,255,255,.97);
}
.fe-card-header{
  min-height:52px;
  padding:14px 20px;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-bottom-color:#e7edf3;
  font-size:13px;
  letter-spacing:.01em;
}
.fe-card-header > span:first-child{
  color:#0f172a;
}

/* ---------- KPI cards ---------- */
.fe-kpi-grid{
  gap:14px;
  padding:20px 24px 4px;
}
.fe-kpi-card{
  min-height:112px;
  padding:18px 18px 16px;
  border-radius:13px;
  border:1px solid #e2e8f0;
  border-top:3px solid #14b8a6;
  box-shadow:var(--ui-shadow-sm);
  background:linear-gradient(145deg,#fff 0%,#fbfdfd 100%);
}
.fe-kpi-card:hover{
  transform:translateY(-2px);
  border-color:#cbd5e1;
  box-shadow:0 10px 24px rgba(15,23,42,.09);
}
.fe-kpi-label{
  margin-bottom:9px;
  font-size:10px;
  letter-spacing:.085em;
}
.fe-kpi-value{
  font-size:27px;
  letter-spacing:-.5px;
}

/* ---------- Tables ---------- */
.fe-table-wrap{
  border-radius:10px;
}
.fe-table{
  font-size:13px;
}
.fe-table th{
  padding:12px 15px;
  background:#f8fafc;
  color:#475569;
  border-bottom:1px solid #dbe3ea;
  font-size:10px;
  letter-spacing:.075em;
}
.fe-table td{
  padding:12px 15px;
}
.fe-table tbody tr{
  transition:background .12s ease;
}
.fe-table tbody tr:hover td{
  background:#f0fdfa;
}
.fe-table tbody tr:last-child td{
  border-bottom:0;
}

/* ---------- Forms ---------- */
.fe-field{
  margin-bottom:15px;
}
.fe-field label{
  display:block;
  margin-bottom:6px;
  color:#475569;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}
.fe-input{
  min-height:42px;
  padding:10px 13px;
  border-color:#cbd5e1;
  border-radius:9px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
}
.fe-input:hover{
  border-color:#94a3b8;
}
.fe-input:focus{
  border-color:#14b8a6;
  box-shadow:0 0 0 3px rgba(20,184,166,.13),inset 0 1px 2px rgba(15,23,42,.025);
}
select.fe-input{
  cursor:pointer;
}

/* ---------- Buttons ---------- */
.fe-btn{
  min-height:38px;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
}
.fe-btn-primary{
  background:linear-gradient(135deg,#0d9488,#0f766e);
  box-shadow:0 3px 10px rgba(13,148,136,.20);
}
.fe-btn-primary:hover:not(:disabled){
  background:linear-gradient(135deg,#0f766e,#115e59);
}
.fe-btn-outline{
  border-color:#0f9489;
}
.fe-btn-ghost{
  border-color:#dbe3ea;
}
.fe-btn-icon{
  min-height:32px;
}

/* ---------- Badges / status ---------- */
.fe-badge{
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
}
.fe-alert{
  border-radius:9px;
  border-width:1px;
}

/* ---------- Toolbar / filters ---------- */
.fe-toolbar{
  padding:13px 20px;
  gap:9px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}
.fe-period-pills{
  background:#eef2f5;
  border-radius:9px;
  padding:3px!important;
}
.fe-period-pill{
  border-radius:7px!important;
}

/* ---------- Dashboard emphasis ---------- */
.fe-quick-actions{
  gap:8px;
}
.fe-qa-btn{
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
  box-shadow:var(--ui-shadow-sm);
  transition:transform .14s,box-shadow .14s,border-color .14s,background .14s;
}
.fe-qa-btn:hover{
  transform:translateY(-1px);
  border-color:#99f6e4;
  background:#f0fdfa;
  box-shadow:0 6px 14px rgba(15,23,42,.07);
}
.fe-qa-warn:hover{
  border-color:#fcd34d;
  background:#fffbeb;
}

/* ---------- POS presentation ---------- */
.fe-pos-layout{
  gap:18px;
}
.fe-pos-cart-panel .fe-card,
.fe-pos-payment-panel .fe-card{
  box-shadow:0 6px 22px rgba(15,23,42,.065);
}
.fe-pos-cart-panel .fe-card:first-child{
  border-top:3px solid #0d9488;
}
.fe-pos-payment-panel .fe-card:nth-child(2){
  border-top:3px solid #2563eb;
}
.fe-pos-totals{
  margin:14px 20px 20px;
  padding:13px 0 0;
  border-top:1px solid #e2e8f0;
}
.fe-pos-total-row{
  min-height:32px;
  color:#475569;
}
.fe-pos-grand-total{
  margin-top:7px;
  padding-top:12px;
  border-top:1px dashed #cbd5e1;
  color:#0f172a;
}
.fe-pos-grand-total span:last-child{
  font-size:24px;
  letter-spacing:-.5px;
}
.fe-pos-change-row{
  border-radius:9px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}

/* ---------- Modals ---------- */
.fe-modal-overlay{
  background:rgba(2,8,23,.58);
  backdrop-filter:blur(4px);
}
.fe-modal{
  border-radius:16px;
  border-color:#dbe3ea;
  box-shadow:var(--ui-shadow-lg);
}
.fe-modal-header{
  min-height:58px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.fe-modal-footer{
  background:#f8fafc;
}

/* ---------- Scrollbars ---------- */
.fe-app *{
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.fe-app *::-webkit-scrollbar{width:8px;height:8px}
.fe-app *::-webkit-scrollbar-track{background:transparent}
.fe-app *::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.fe-app *::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ---------- Loading state ---------- */
.fe-loading-text{
  color:#64748b;
}
.fe-kpi-card.loading{
  position:relative;
  overflow:hidden;
}
.fe-kpi-card.loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.62) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:ui-shimmer 1.5s infinite;
}
@keyframes ui-shimmer{
  to{transform:translateX(100%)}
}

/* ---------- Mobile / tablet ---------- */
@media(max-width:1100px){
  .fe-topbar{padding:0 20px}
  .fe-global-search{min-width:200px}
  .fe-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
}
@media(max-width:900px){
  .fe-topbar{height:62px}
  .fe-global-search{min-width:38px;width:38px;padding:0;justify-content:center}
  .fe-kpi-grid{padding-left:16px;padding-right:16px}
  .fe-card{margin-left:16px;margin-right:16px}
}
@media(max-width:640px){
  .fe-topbar{padding:0 12px}
  .fe-page-title{font-size:16px}
  .fe-kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .fe-kpi-card{min-height:96px;padding:14px}
  .fe-kpi-value{font-size:22px}
  .fe-card{margin-left:10px;margin-right:10px;border-radius:12px}
  .fe-card-header{padding:12px 14px}
  .fe-table th,.fe-table td{padding:10px 11px}
}

/* ---------- Dark mode visual parity ---------- */
[data-theme="dark"] .fe-app{
  background:#0b1220;
  --ui-surface:#111827;
  --ui-surface-soft:#0f172a;
  --ui-border:#263449;
  --ui-border-strong:#334155;
  --ui-ink:#e5edf7;
  --ui-ink-soft:#cbd5e1;
  --ui-muted:#94a3b8;
}
[data-theme="dark"] .fe-topbar{
  background:rgba(17,24,39,.94);
  border-color:#263449;
}
[data-theme="dark"] .fe-card{
  background:#111827;
  border-color:#263449;
  box-shadow:0 4px 18px rgba(0,0,0,.20);
}
[data-theme="dark"] .fe-card-header,
[data-theme="dark"] .fe-table th,
[data-theme="dark"] .fe-toolbar{
  background:#0f172a;
  border-color:#263449;
}
[data-theme="dark"] .fe-kpi-card{
  background:linear-gradient(145deg,#111827,#0f172a);
  border-color:#263449;
}
[data-theme="dark"] .fe-table td{
  border-color:#263449;
  color:#e5edf7;
}
[data-theme="dark"] .fe-table tbody tr:hover td{
  background:#0f2e2b;
}
[data-theme="dark"] .fe-input{
  background:#0f172a;
  color:#e5edf7;
  border-color:#334155;
}
[data-theme="dark"] .fe-input::placeholder{color:#64748b}
[data-theme="dark"] .fe-global-search{
  background:#0f172a;
  border-color:#263449;
}
[data-theme="dark"] .fe-qa-btn{
  background:#0f172a;
  border-color:#263449;
  color:#e5edf7;
}
[data-theme="dark"] .fe-pos-grand-total,
[data-theme="dark"] .fe-table .col-currency,
[data-theme="dark"] .fe-table td strong{
  color:#e5edf7;
}
[data-theme="dark"] .fe-modal,
[data-theme="dark"] .fe-modal-header,
[data-theme="dark"] .fe-modal-footer{
  background:#111827;
  border-color:#263449;
}
[data-theme="dark"] .fe-pos-change-row{
  background:#0f2e24;
  border-color:#166534;
}

/* ---------- Accessibility ---------- */
.fe-app button:focus-visible,
.fe-app a:focus-visible,
.fe-app input:focus-visible,
.fe-app select:focus-visible,
.fe-app textarea:focus-visible{
  outline:3px solid rgba(45,212,191,.38)!important;
  outline-offset:2px!important;
}
@media(prefers-reduced-motion:reduce){
  .fe-kpi-card.loading::after{animation:none}
  .fe-nav-link,.fe-btn,.fe-qa-btn,.fe-kpi-card{transition:none!important}
}

/* ============================================================
   TondeSoft Pharmacy ERP — Premium UI Pass
   PRESENTATION ONLY. No routes, data, business rules, events,
   forms, APIs, or application functionality are changed.
   ============================================================ */
:root{
  --ui-radius-xs:7px;
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:18px;
  --ui-ring:0 0 0 4px rgba(20,184,166,.13);
  --ui-shadow-float:0 20px 55px rgba(15,23,42,.14),0 4px 14px rgba(15,23,42,.06);
}

/* App canvas + typography */
.fe-app{
  font-feature-settings:"cv02","cv03","cv04","cv11";
  letter-spacing:-.005em;
}
.fe-app h1,.fe-app h2,.fe-app h3,.fe-app h4,.fe-app h5{
  letter-spacing:-.025em;
}
.fe-main{min-height:calc(100vh - 102px)}
.fe-main > *{animation:ui-fade-up .22s ease both}
@keyframes ui-fade-up{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Topbar: stronger product chrome */
.fe-topbar{position:sticky;top:0;z-index:50}
.fe-topbar-right{gap:8px}
.fe-topbar-action,.fe-notif-btn,.fe-sidebar-toggle{
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.fe-topbar-action:hover,.fe-notif-btn:hover,.fe-sidebar-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(15,23,42,.09);
}
.fe-global-search{
  box-shadow:inset 0 1px 1px rgba(15,23,42,.025);
  transition:.16s ease;
}
.fe-global-search:hover{border-color:#b8c7d8;background:#fff;box-shadow:var(--ui-shadow-sm)}

/* Sidebar premium navigation */
.fe-sidebar{position:relative;overflow:hidden}
.fe-sidebar::after{
  content:"";position:absolute;inset:auto -60px 80px auto;width:180px;height:180px;
  border-radius:50%;background:rgba(20,184,166,.10);filter:blur(35px);pointer-events:none;
}
.fe-sidebar-brand{position:relative;z-index:1}
.fe-nav-group-label{padding-left:14px;opacity:.66;text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:800}
.fe-nav-link{
  position:relative;margin:2px 9px;border:1px solid transparent;border-radius:10px;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.fe-nav-link:hover{transform:translateX(2px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.07)}
.fe-nav-link.fe-active,.fe-nav-link.active{
  background:linear-gradient(90deg,rgba(20,184,166,.18),rgba(20,184,166,.07));
  border-color:rgba(45,212,191,.20);
  box-shadow:inset 3px 0 0 #2dd4bf,0 5px 16px rgba(0,0,0,.10);
}
.fe-nav-link.fe-active .fe-nav-icon,.fe-nav-link.active .fe-nav-icon{color:#5eead4}

/* Page heading */
.fe-page-title{font-weight:760}
.fe-subheader,.fe-toolbar{
  border-radius:var(--ui-radius-md);
}
.fe-toolbar{
  box-shadow:var(--ui-shadow-sm);
}
.fe-toolbar .fe-input,.fe-toolbar .fe-select{background:#fff}

/* Cards */
.fe-card,.pherp-card{
  border-radius:var(--ui-radius-md);
  box-shadow:var(--ui-shadow-sm);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.fe-card:hover,.pherp-card:hover{box-shadow:var(--ui-shadow)}
.fe-card-header,.pherp-card-header{
  font-weight:750;
  letter-spacing:-.015em;
}
.fe-card-header{position:relative}
.fe-card-header::after{
  content:"";position:absolute;left:0;bottom:-1px;width:42px;height:2px;border-radius:99px;background:#14b8a6;
}

/* KPI system: more visual differentiation without changing content */
.fe-kpi-grid{align-items:stretch}
.fe-kpi-card{
  position:relative;overflow:hidden;border-radius:15px!important;
  min-height:118px;
  background:linear-gradient(145deg,#fff 0%,#f8fbfc 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.045);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.fe-kpi-card::before{
  content:"";position:absolute;right:-30px;top:-38px;width:100px;height:100px;border-radius:50%;
  background:rgba(20,184,166,.055);pointer-events:none;
}
.fe-kpi-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.10)}
.fe-kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:#64748b}
.fe-kpi-value{font-weight:800;letter-spacing:-.045em}
.fe-kpi-card .fe-badge{box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)}

/* Buttons */
.fe-btn,.pherp-btn,.btn{
  border-radius:9px;
  font-weight:700;
  letter-spacing:-.005em;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,border-color .14s ease;
}
.fe-btn:hover,.pherp-btn:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.10)}
.fe-btn:active,.pherp-btn:active,.btn:active{transform:translateY(0);box-shadow:var(--ui-shadow-sm)}
.fe-btn-primary{box-shadow:0 5px 14px rgba(13,148,136,.18)}
.fe-btn-icon{border-radius:9px}

/* Inputs / selects */
.fe-field{gap:7px}
.fe-field label,.fe-form-section-title,.pherp-form-section-title{font-weight:750}
.fe-input,.fe-select,.fe-textarea,.search-input,.input-pw-wrap input{
  border-radius:9px!important;
  min-height:40px;
  border-color:#d7e0e8;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.fe-input:hover,.fe-select:hover,.fe-textarea:hover{border-color:#b8c7d8}
.fe-input:focus,.fe-select:focus,.fe-textarea:focus{
  border-color:#14b8a6!important;box-shadow:var(--ui-ring)!important;outline:0!important;
}
.fe-input::placeholder,.fe-textarea::placeholder{color:#94a3b8}

/* Tables: clearer scan lines and fixed visual rhythm */
.fe-table-wrap,.pherp-table-wrap{
  border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-md)!important;
  overflow:auto;box-shadow:var(--ui-shadow-sm);background:#fff;
}
.fe-table{border-collapse:separate;border-spacing:0;width:100%}
.fe-table th{
  position:sticky;top:0;z-index:2;text-transform:uppercase;letter-spacing:.055em;font-size:10px;font-weight:800;
  background:linear-gradient(180deg,#f8fafc,#f3f6f9)!important;color:#64748b!important;
  border-bottom:1px solid #dbe3ea!important;
}
.fe-table td{vertical-align:middle}
.fe-table tbody tr{transition:background .12s ease}
.fe-table tbody tr:nth-child(even) td{background:rgba(248,250,252,.48)}
.fe-table tbody tr:hover td{background:#f0fdfa!important}
.fe-table td strong{font-weight:750}
.fe-row-active td{box-shadow:inset 3px 0 0 #14b8a6}

/* Badges / status */
.fe-badge,.pherp-pill,.role-badge,.mod-tag{
  border-radius:999px!important;font-weight:750!important;letter-spacing:.01em;
}
.fe-badge{padding:4px 8px}
.fe-live-dot{box-shadow:0 0 0 4px rgba(34,197,94,.10)}

/* Tabs */
.fe-tabs,.pherp-tabs,.module-tabs{gap:4px;border-bottom:1px solid #e2e8f0}
.fe-tab-btn,.tab-btn,.pherp-tab-btn{
  border-radius:8px 8px 0 0!important;font-weight:700!important;position:relative;transition:.15s ease;
}
.fe-tab-btn:hover,.tab-btn:hover,.pherp-tab-btn:hover{background:#f8fafc}
.fe-tab-active,.fe-tab-btn.active,.tab-btn.active,.pherp-tab-btn.active{color:#0f766e!important}
.fe-tab-active::after,.fe-tab-btn.active::after,.tab-btn.active::after,.pherp-tab-btn.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:99px;background:#14b8a6;
}

/* Quick actions / reports */
.fe-quick-actions{gap:10px}
.fe-qa-btn,.fe-report-card{
  border-radius:12px!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.fe-qa-btn:hover,.fe-report-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow);border-color:#b7e4df!important}
.fe-report-card-icon{border-radius:11px}

/* POS: make the transaction surface visually dominant */
.fe-pos-layout{gap:18px}
.fe-pos-cart-panel,.fe-pos-payment-panel{
  border-radius:16px!important;border:1px solid #dbe3ea!important;
  box-shadow:var(--ui-shadow)!important;background:#fff;
}
.fe-pos-cart-panel{overflow:hidden}
.fe-pos-payment-panel{position:relative}
.fe-pos-grand-total{
  border-radius:12px!important;
  background:linear-gradient(135deg,#0b1f38,#0f766e)!important;
  color:#fff!important;box-shadow:0 12px 26px rgba(11,31,56,.20);
}
.fe-pos-total-row{font-weight:650}
.fe-pos-change-row{border-radius:10px!important}

/* Modals / overlays */
.fe-modal-overlay,.modal-overlay{backdrop-filter:blur(7px)!important;background:rgba(2,8,23,.56)!important}
.fe-modal,.modal-box,.pherp-modal{
  border-radius:18px!important;box-shadow:var(--ui-shadow-float)!important;overflow:hidden;
  animation:ui-modal-in .18s ease both;
}
@keyframes ui-modal-in{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.fe-modal-header,.modal-header{padding:17px 20px!important;background:linear-gradient(180deg,#fff,#f8fafc)!important}
.fe-modal-body,.modal-body{padding:20px!important}
.fe-modal-footer,.modal-footer{padding:13px 20px!important;background:#f8fafc!important}
.fe-modal-close,.modal-close{border-radius:8px!important}

/* Alerts / toasts */
.fe-alert,.pherp-alert,.fe-toast{border-radius:11px!important;box-shadow:var(--ui-shadow-sm)}
.fe-toast{backdrop-filter:blur(12px)}

/* Empty/loading states */
.fe-empty{border:1px dashed #cbd5e1;border-radius:12px;background:linear-gradient(180deg,#fbfdfe,#f8fafc);padding:30px}
.fe-spinner{filter:drop-shadow(0 2px 5px rgba(20,184,166,.15))}

/* Login surface */
.pherp-login-page,.lp-root{background:
  radial-gradient(circle at 15% 15%,rgba(45,212,191,.13),transparent 25rem),
  radial-gradient(circle at 90% 80%,rgba(14,116,144,.12),transparent 28rem),#071524!important}
.pherp-login-card,.lp-form,.lp-overlay .lp-form{
  border-radius:20px!important;box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
}
.pherp-login-heading{letter-spacing:-.04em}
.pherp-login-submit,.lp-submit-btn{border-radius:10px!important;min-height:44px;box-shadow:0 9px 22px rgba(20,184,166,.18)}

/* Admin shell */
.pherp-enterprise-admin .pherp-wrap{filter:saturate(.99)}
.pherp-enterprise-admin .pherp-page-header{
  border-radius:14px!important;box-shadow:var(--ui-shadow-sm);background:linear-gradient(180deg,#fff,#fbfcfd);
}
.pherp-enterprise-admin .pherp-kpi-card{border-radius:14px!important;transition:.18s ease}
.pherp-enterprise-admin .pherp-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow)}
.pherp-enterprise-admin .pherp-table{border-collapse:separate;border-spacing:0}

/* Dark premium parity */
[data-theme="dark"] .fe-card,.dark .fe-card,
[data-theme="dark"] .fe-table-wrap,[data-theme="dark"] .pherp-table-wrap{
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
[data-theme="dark"] .fe-kpi-card{background:linear-gradient(145deg,#111827,#0d1625)}
[data-theme="dark"] .fe-table th{background:linear-gradient(180deg,#111c2d,#0f172a)!important;color:#94a3b8!important}
[data-theme="dark"] .fe-table tbody tr:nth-child(even) td{background:rgba(15,23,42,.42)}
[data-theme="dark"] .fe-table tbody tr:hover td{background:#0d302d!important}
[data-theme="dark"] .fe-input,[data-theme="dark"] .fe-select,[data-theme="dark"] .fe-textarea{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
[data-theme="dark"] .fe-modal-header,[data-theme="dark"] .modal-header{background:linear-gradient(180deg,#111827,#0f172a)!important}
[data-theme="dark"] .fe-modal-footer,[data-theme="dark"] .modal-footer{background:#0f172a!important}
[data-theme="dark"] .fe-empty{background:#0f172a;border-color:#334155}

/* Responsive polish */
@media(max-width:900px){
  .fe-card,.pherp-card{box-shadow:var(--ui-shadow-sm)}
  .fe-table-wrap,.pherp-table-wrap{border-radius:12px!important}
  .fe-pos-layout{gap:12px}
}
@media(max-width:640px){
  .fe-kpi-card{min-height:104px;border-radius:12px!important}
  .fe-kpi-label{font-size:9px}
  .fe-toolbar{border-radius:11px}
  .fe-modal,.modal-box,.pherp-modal{width:calc(100vw - 20px)!important;border-radius:15px!important}
  .fe-modal-body,.modal-body{padding:15px!important}
}

/* Respect user motion preferences */
@media(prefers-reduced-motion:reduce){
  .fe-main > *,.fe-modal,.modal-box,.pherp-modal{animation:none!important}
  .fe-kpi-card:hover,.fe-btn:hover,.pherp-btn:hover,.btn:hover,.fe-nav-link:hover,.fe-qa-btn:hover,.fe-report-card:hover{transform:none!important}
}

/* ============================================================
   DASHBOARD V3 — VISUAL ORDER / INFORMATION HIERARCHY
   Presentation-only: no markup, IDs, data, actions or logic changed.
   ============================================================ */
#fe-app > .fe-main{max-width:100%;}
#fe-app > .fe-main > .fe-topbar{
  margin-bottom:22px;
  padding:2px 0 18px;
  border-bottom:1px solid var(--ui-border,#e2e8f0);
}
#fe-app > .fe-main > .fe-topbar .fe-page-title{
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.035em;
}

/* Primary KPI zone: fewer visual jumps, equal card geometry. */
#fe-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  padding:0!important;
  margin:0!important;
}
#fe-kpi-grid > .fe-kpi-card{
  min-width:0;
  min-height:104px;
  padding:18px 18px 16px!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#fe-kpi-grid > .fe-kpi-card:nth-child(1),
#fe-kpi-grid > .fe-kpi-card:nth-child(2),
#fe-kpi-grid > .fe-kpi-card:nth-child(3){
  border-top:3px solid #14b8a6;
}
#fe-kpi-grid > .fe-kpi-card:nth-child(4){border-top:3px solid #64748b}
#fe-kpi-grid > .fe-kpi-card:nth-child(5),
#fe-kpi-grid > .fe-kpi-card:nth-child(6){border-top:3px solid #f59e0b}
#fe-kpi-grid > .fe-kpi-card:nth-child(8){border-top:3px solid #ef4444}
#fe-kpi-grid > .fe-kpi-card:nth-child(n+19){border-top:3px solid #f59e0b} /* GRA / SSNIT positions */
#fe-kpi-grid > .fe-kpi-card:nth-child(n+9){background:linear-gradient(145deg,#fbfcfd 0%,#f4f8fa 100%)}

/* Section cards become deliberate modules rather than a stack of floating boxes. */
#dash-accounting-sync-card,
#dash-system-health-card,
#dash-accounting-control-card{
  margin-top:18px!important;
  padding:0!important;
  overflow:hidden;
}
#dash-accounting-sync-card .fe-card-header,
#dash-system-health-card .fe-card-header,
#dash-accounting-control-card .fe-card-header{
  min-height:56px;
  padding:17px 20px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-bottom:1px solid #e5eaf0;
}
#dash-accounting-sync-card .fe-card-header::after,
#dash-system-health-card .fe-card-header::after,
#dash-accounting-control-card .fe-card-header::after{display:none}
#dash-accounting-sync-card > .fe-kpi-grid,
#dash-system-health-card > .fe-kpi-grid,
#dash-accounting-control-card > .fe-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  padding:14px 18px!important;
  margin:0!important;
}
#dash-system-health-card > .fe-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
#dash-accounting-control-card > .fe-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#dash-accounting-sync-card .fe-kpi-card,
#dash-system-health-card .fe-kpi-card,
#dash-accounting-control-card .fe-kpi-card{
  min-width:0;
  min-height:88px!important;
  padding:14px 15px!important;
  box-shadow:none!important;
  border:1px solid #e2e8f0!important;
  border-radius:11px!important;
  transform:none!important;
  background:#fbfcfd!important;
}
#dash-accounting-sync-card .fe-kpi-card::before,
#dash-system-health-card .fe-kpi-card::before,
#dash-accounting-control-card .fe-kpi-card::before{display:none}
#dash-accounting-sync-card .fe-table-wrap,
#dash-accounting-control-card .fe-table-wrap{
  margin:0 18px 18px;
}
#dash-system-health-card .fe-kpi-value{font-size:22px}
#dash-health-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Diagnostic cards: force a balanced two-column composition. */
#fe-diagnostic-cards{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px!important;
  margin-top:18px!important;
}
#fe-diagnostic-cards > .fe-card{min-width:0}

/* Analytics + actions: chart gets the visual majority. */
#fe-app > .fe-main > .fe-row.fe-gap-lg:has(#fe-sales-chart){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:18px!important;
  margin-top:18px!important;
  align-items:stretch;
}
#fe-app > .fe-main > .fe-row.fe-gap-lg:has(#fe-sales-chart) > .fe-card{width:auto!important;min-width:0}
#fe-sales-chart{display:block;width:100%!important;max-width:100%;}

/* Recent sales gets a clean final section boundary. */
#fe-app > .fe-main > .fe-card:has(#fe-recent-sales){
  margin-top:18px!important;
  overflow:hidden;
}
#fe-recent-sales{border:0!important;box-shadow:none!important;border-radius:0!important}

/* Make dashboard typography scan in a predictable F-pattern. */
#fe-app > .fe-main .fe-kpi-label{line-height:1.35;max-width:100%;}
#fe-app > .fe-main .fe-kpi-value{line-height:1.12;margin-top:7px;}
#fe-app > .fe-main .fe-card-header{letter-spacing:-.01em;}

/* Dark mode for dashboard module headers. */
[data-theme="dark"] #dash-accounting-sync-card .fe-card-header,
[data-theme="dark"] #dash-system-health-card .fe-card-header,
[data-theme="dark"] #dash-accounting-control-card .fe-card-header{
  background:linear-gradient(180deg,#111827,#0f172a);
  border-bottom-color:#263449;
}
[data-theme="dark"] #dash-accounting-sync-card .fe-kpi-card,
[data-theme="dark"] #dash-system-health-card .fe-kpi-card,
[data-theme="dark"] #dash-accounting-control-card .fe-kpi-card{
  background:#0f172a!important;
  border-color:#263449!important;
}
[data-theme="dark"] #fe-kpi-grid > .fe-kpi-card:nth-child(n+9){
  background:linear-gradient(145deg,#111827,#0f172a);
}

/* Tablet / mobile: preserve hierarchy instead of merely shrinking. */
@media(max-width:1100px){
  #fe-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #dash-system-health-card > .fe-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #dash-accounting-control-card > .fe-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:820px){
  #fe-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dash-accounting-sync-card > .fe-kpi-grid,
  #dash-system-health-card > .fe-kpi-grid,
  #dash-accounting-control-card > .fe-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #fe-diagnostic-cards{grid-template-columns:1fr}
  #fe-app > .fe-main > .fe-row.fe-gap-lg:has(#fe-sales-chart){grid-template-columns:1fr!important}
}
@media(max-width:520px){
  #fe-kpi-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  #fe-kpi-grid > .fe-kpi-card{min-height:92px;padding:14px!important}
  #dash-accounting-sync-card > .fe-kpi-grid,
  #dash-system-health-card > .fe-kpi-grid,
  #dash-accounting-control-card > .fe-kpi-grid{grid-template-columns:1fr 1fr!important}
  #dash-accounting-sync-card .fe-table-wrap,
  #dash-accounting-control-card .fe-table-wrap{margin-left:10px;margin-right:10px}
}

/* ============================================================
   GLOBAL ERP VIEWPORT CORRECTION — v2
   The ERP is rendered inside a WordPress full-screen takeover.
   Some active themes apply vertical spacing to the generic <main>
   element. That spacing must not affect the ERP workspace.
   UI/layout only — no application logic changed.
   ============================================================ */
html.pherp-standalone-shell,
html.pherp-standalone-shell body,
body.pherp-standalone-shell,
body.pherp-portal,
body.pherp-erp-shell{
  margin-top:0!important;
  padding-top:0!important;
}

body.pherp-standalone-shell #page,
body.pherp-standalone-shell #content,
body.pherp-standalone-shell .site,
body.pherp-standalone-shell .site-content,
body.pherp-standalone-shell .site-main,
body.pherp-standalone-shell .entry-content,
body.pherp-standalone-shell .wp-site-blocks,
body.pherp-standalone-shell .wp-block-post-content,
body.pherp-standalone-shell .is-layout-constrained,
body.pherp-standalone-shell main.site-main,
body.pherp-standalone-shell main.fe-main,
body.pherp-portal main.fe-main,
body.pherp-erp-shell main.fe-main{
  margin-top:0!important;
  margin-block-start:0!important;
  padding-top:0!important;
  padding-block-start:0!important;
  inset-block-start:0!important;
  top:0!important;
  transform:none!important;
}

/* The ERP workspace itself must begin immediately after the shell's
   own chrome; never reserve a theme-sized vertical row above it. */
body.pherp-standalone-shell .fe-app > .fe-main,
body.pherp-portal .fe-app > .fe-main,
body.pherp-erp-shell .fe-app > .fe-main{
  position:relative!important;
  display:block!important;
  float:none!important;
  clear:none!important;
  margin-top:0!important;
  margin-block-start:0!important;
  padding-top:0!important;
  padding-block-start:0!important;
  top:0!important;
  inset:0 auto auto 0!important;
  transform:none!important;
  translate:none!important;
  min-height:calc(100vh - 34px)!important;
}

/* Keep the application chrome at the viewport origin. */
body.pherp-standalone-shell .fe-app,
body.pherp-portal .fe-app,
body.pherp-erp-shell .fe-app{
  margin:0!important;
  padding:0!important;
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow-x:hidden!important;
}

/* Sidebar is viewport chrome, not a source of document height. */
body.pherp-standalone-shell .fe-sidebar,
body.pherp-portal .fe-sidebar,
body.pherp-erp-shell .fe-sidebar{
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  left:0!important;
  margin:0!important;
  transform:none!important;
}

@media(max-width:768px){
  body.pherp-standalone-shell .fe-app > .fe-main,
  body.pherp-portal .fe-app > .fe-main,
  body.pherp-erp-shell .fe-app > .fe-main{
    min-height:100vh!important;
  }
}

/* ============================================================
   MODAL VISIBILITY FIX — UI ONLY
   Keep existing modals hidden until openModal() explicitly opens them.
   The previous global display:flex!important rule caused Settings > Add
   Branch and Users > Add New Role to appear automatically.
   ============================================================ */
.pherp-modal{
  display:none!important;
}
.pherp-modal.pherp-modal-open{
  display:flex!important;
}
/* Final modal visibility guard: closed ERP modals are ALWAYS hidden. */
.pherp-modal[aria-hidden="true"]{
  display:none!important;
}
.pherp-modal.pherp-modal-open[aria-hidden="false"]{
  display:flex!important;
}

/* ============================================================
   ENTRY FORM SCROLL — UI ONLY
   Long create/edit forms remain usable inside the viewport.
   Header and footer stay visible while the form body scrolls.
   ============================================================ */
.fe-modal-overlay,
.modal-overlay{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  scrollbar-color:#94a3b8 rgba(226,232,240,.55)!important;
}

.fe-modal,
.modal-box{
  max-height:calc(100vh - 32px)!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
/* Visibility of .pherp-modal containers is controlled ONLY by the
   .pherp-modal / .pherp-modal-open rules above. The inner dialog boxes
   (.fe-modal / .modal-box) must always be displayed, otherwise overlays such
   as #db-confirm-modal open as an empty dark screen. */

.fe-modal-body,
.modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:calc(100vh - 150px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  scrollbar-color:#94a3b8 #f1f5f9!important;
  scrollbar-gutter:stable!important;
}

.fe-modal-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.fe-modal-overlay::-webkit-scrollbar,
.modal-overlay::-webkit-scrollbar{
  width:9px;
}
.fe-modal-body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.fe-modal-overlay::-webkit-scrollbar-track,
.modal-overlay::-webkit-scrollbar-track{
  background:#f1f5f9;
  border-radius:10px;
}
.fe-modal-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.fe-modal-overlay::-webkit-scrollbar-thumb,
.modal-overlay::-webkit-scrollbar-thumb{
  background:#94a3b8;
  border:2px solid #f1f5f9;
  border-radius:10px;
}
.fe-modal-body::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.fe-modal-overlay::-webkit-scrollbar-thumb:hover,
.modal-overlay::-webkit-scrollbar-thumb:hover{
  background:#64748b;
}

/* Keep form actions visible while the entry fields scroll. */
.fe-modal-header,
.modal-header,
.fe-modal-footer,
.modal-footer{
  flex:0 0 auto!important;
}

@media(max-width:640px){
  .fe-modal,
  .modal-box,
  .pherp-modal{
    max-height:calc(100vh - 16px)!important;
  }
  .fe-modal-body,
  .modal-body{
    max-height:calc(100vh - 130px)!important;
    padding:15px!important;
  }
}

[data-theme="dark"] .fe-modal-body,
[data-theme="dark"] .modal-body{
  scrollbar-color:#64748b #111827!important;
}
[data-theme="dark"] .fe-modal-body::-webkit-scrollbar-track,
[data-theme="dark"] .modal-body::-webkit-scrollbar-track{
  background:#111827;
}
[data-theme="dark"] .fe-modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb{
  background:#64748b;
  border-color:#111827;
}

/* ============================================================
   SIDEBAR SCROLLBAR — UI ONLY
   Keeps the full navigation accessible when the menu exceeds the
   viewport. The sidebar remains fixed; only its contents scroll.
   ============================================================ */
body.pherp-standalone-shell .fe-sidebar,
body.pherp-portal .fe-sidebar,
body.pherp-erp-shell .fe-sidebar,
.fe-sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(94,234,212,.62) rgba(255,255,255,.07)!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}

body.pherp-standalone-shell .fe-sidebar::-webkit-scrollbar,
body.pherp-portal .fe-sidebar::-webkit-scrollbar,
body.pherp-erp-shell .fe-sidebar::-webkit-scrollbar,
.fe-sidebar::-webkit-scrollbar{
  width:8px!important;
}

body.pherp-standalone-shell .fe-sidebar::-webkit-scrollbar-track,
body.pherp-portal .fe-sidebar::-webkit-scrollbar-track,
body.pherp-erp-shell .fe-sidebar::-webkit-scrollbar-track,
.fe-sidebar::-webkit-scrollbar-track{
  background:rgba(255,255,255,.055)!important;
  border-radius:10px!important;
}

body.pherp-standalone-shell .fe-sidebar::-webkit-scrollbar-thumb,
body.pherp-portal .fe-sidebar::-webkit-scrollbar-thumb,
body.pherp-erp-shell .fe-sidebar::-webkit-scrollbar-thumb,
.fe-sidebar::-webkit-scrollbar-thumb{
  background:rgba(94,234,212,.58)!important;
  border:2px solid rgba(8,27,49,.72)!important;
  border-radius:10px!important;
  min-height:42px!important;
}

body.pherp-standalone-shell .fe-sidebar::-webkit-scrollbar-thumb:hover,
body.pherp-portal .fe-sidebar::-webkit-scrollbar-thumb:hover,
body.pherp-erp-shell .fe-sidebar::-webkit-scrollbar-thumb:hover,
.fe-sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(94,234,212,.88)!important;
}

/* Keep the brand and collapse control visually stable while navigation scrolls. */
.fe-sidebar-brand{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
}

/* Do not let the collapsed sidebar lose its usable scrollbar. */
.fe-sidebar-collapsed{
  scrollbar-width:thin!important;
}

@media(max-width:768px){
  .fe-sidebar::-webkit-scrollbar{width:7px!important}
  .fe-sidebar{scrollbar-width:thin!important}
}

[data-theme="dark"] .fe-sidebar{
  scrollbar-color:rgba(94,234,212,.58) rgba(255,255,255,.055)!important;
}

/* ============================================================
   GLOBAL PAGE FIT + BREATHING ROOM — UI ONLY
   Keeps every ERP module comfortably inside the viewport with
   a small, consistent page margin. No markup or functionality.
   ============================================================ */
body.pherp-erp-shell .fe-main,
body.pherp-portal .fe-main,
body.pherp-standalone-shell .fe-main{
  box-sizing:border-box!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
  padding:0 16px 24px!important;
}

/* Keep the application header aligned with the new page gutter. */
body.pherp-erp-shell .fe-main > .fe-topbar,
body.pherp-portal .fe-main > .fe-topbar,
body.pherp-standalone-shell .fe-main > .fe-topbar{
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
  max-width:100%!important;
}

/* Every module component must respect the available page width. */
body.pherp-erp-shell .fe-main > *,
body.pherp-portal .fe-main > *,
body.pherp-standalone-shell .fe-main > *{
  box-sizing:border-box!important;
  max-width:100%!important;
  min-width:0;
}

body.pherp-erp-shell .fe-main .fe-card,
body.pherp-erp-shell .fe-main .fe-row,
body.pherp-erp-shell .fe-main .fe-grid,
body.pherp-erp-shell .fe-main .fe-kpi-grid,
body.pherp-portal .fe-main .fe-card,
body.pherp-portal .fe-main .fe-row,
body.pherp-portal .fe-main .fe-grid,
body.pherp-portal .fe-main .fe-kpi-grid,
body.pherp-standalone-shell .fe-main .fe-card,
body.pherp-standalone-shell .fe-main .fe-row,
body.pherp-standalone-shell .fe-main .fe-grid,
body.pherp-standalone-shell .fe-main .fe-kpi-grid{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Give stacked page sections a consistent visual rhythm. */
body.pherp-erp-shell .fe-main > .fe-card,
body.pherp-erp-shell .fe-main > .fe-row,
body.pherp-portal .fe-main > .fe-card,
body.pherp-portal .fe-main > .fe-row,
body.pherp-standalone-shell .fe-main > .fe-card,
body.pherp-standalone-shell .fe-main > .fe-row{
  margin-bottom:16px;
}

/* Tables and wide content stay inside their cards and scroll locally. */
body.pherp-erp-shell .fe-main .fe-table-wrap,
body.pherp-portal .fe-main .fe-table-wrap,
body.pherp-standalone-shell .fe-main .fe-table-wrap{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Prevent grids/forms from forcing the page wider than the viewport. */
body.pherp-erp-shell .fe-main .fe-form-grid,
body.pherp-erp-shell .fe-main .form-grid-2,
body.pherp-portal .fe-main .fe-form-grid,
body.pherp-portal .fe-main .form-grid-2,
body.pherp-standalone-shell .fe-main .fe-form-grid,
body.pherp-standalone-shell .fe-main .form-grid-2{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

/* Keep action bars and toolbars from overflowing on narrow pages. */
body.pherp-erp-shell .fe-main .fe-card-header,
body.pherp-erp-shell .fe-main .fe-toolbar,
body.pherp-erp-shell .fe-main .fe-actions,
body.pherp-portal .fe-main .fe-card-header,
body.pherp-portal .fe-main .fe-toolbar,
body.pherp-portal .fe-main .fe-actions,
body.pherp-standalone-shell .fe-main .fe-card-header,
body.pherp-standalone-shell .fe-main .fe-toolbar,
body.pherp-standalone-shell .fe-main .fe-actions{
  min-width:0;
  max-width:100%;
}

@media(max-width:900px){
  body.pherp-erp-shell .fe-main,
  body.pherp-portal .fe-main,
  body.pherp-standalone-shell .fe-main{
    padding-left:12px!important;
    padding-right:12px!important;
    padding-bottom:18px!important;
  }
}

@media(max-width:600px){
  body.pherp-erp-shell .fe-main,
  body.pherp-portal .fe-main,
  body.pherp-standalone-shell .fe-main{
    padding-left:10px!important;
    padding-right:10px!important;
    padding-bottom:14px!important;
  }
}

/* ============================================================
   TondeSoft Pharmacy ERP — PAGE FIT COMPATIBILITY PASS
   UI ONLY. Do not alter markup, routes, data, business rules,
   event handlers, APIs, permissions or application features.
   Purpose: prevent page components from exceeding the usable
   content box when shell gutters and component margins coexist.
   ============================================================ */

/* The main canvas owns the horizontal gutter. Child blocks must size
   themselves to the remaining content width rather than adding a second
   100% width on top of their own margins. */
body.pherp-erp-shell .fe-main,
body.pherp-portal .fe-main,
body.pherp-standalone-shell .fe-main{
  box-sizing:border-box!important;
  width:calc(100vw - var(--fe-sidebar-w))!important;
  max-width:calc(100vw - var(--fe-sidebar-w))!important;
  overflow-x:hidden!important;
}
body.pherp-erp-shell .fe-main.fe-main-expanded{
  width:calc(100vw - var(--fe-sidebar-w-c))!important;
  max-width:calc(100vw - var(--fe-sidebar-w-c))!important;
}

/* Top-level cards/rows use their natural available width. Their existing
   horizontal margins remain the visual page spacing; width:100% is what
   previously made those margins spill into the page gutter. */
body.pherp-erp-shell .fe-main > .fe-card,
body.pherp-portal .fe-main > .fe-card,
body.pherp-standalone-shell .fe-main > .fe-card,
body.pherp-erp-shell .fe-main > .fe-row,
body.pherp-portal .fe-main > .fe-row,
body.pherp-standalone-shell .fe-main > .fe-row{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Grids are true full-width layout containers and should consume only the
   content box of .fe-main. */
body.pherp-erp-shell .fe-main > .fe-kpi-grid,
body.pherp-portal .fe-main > .fe-kpi-grid,
body.pherp-standalone-shell .fe-main > .fe-kpi-grid,
body.pherp-erp-shell .fe-main > .fe-grid,
body.pherp-portal .fe-main > .fe-grid,
body.pherp-standalone-shell .fe-main > .fe-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Flex/grid children are allowed to shrink instead of forcing the parent
   wider because of long labels, buttons, selects or tables. */
body.pherp-erp-shell .fe-main .fe-row > *,
body.pherp-portal .fe-main .fe-row > *,
body.pherp-standalone-shell .fe-main .fe-row > *,
body.pherp-erp-shell .fe-main .fe-grid > *,
body.pherp-portal .fe-main .fe-grid > *,
body.pherp-standalone-shell .fe-main .fe-grid > *{
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Card headers/toolbars: wrap controls instead of pushing them through the
   right page edge on medium and narrow screens. */
body.pherp-erp-shell .fe-main .fe-card-header,
body.pherp-portal .fe-main .fe-card-header,
body.pherp-standalone-shell .fe-main .fe-card-header,
body.pherp-erp-shell .fe-main .fe-toolbar,
body.pherp-portal .fe-main .fe-toolbar,
body.pherp-standalone-shell .fe-main .fe-toolbar{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  flex-wrap:wrap;
}

/* Form columns and controls must never establish a wider-than-card layout. */
body.pherp-erp-shell .fe-main .fe-form-grid,
body.pherp-portal .fe-main .fe-form-grid,
body.pherp-standalone-shell .fe-main .fe-form-grid,
body.pherp-erp-shell .fe-main .form-grid-2,
body.pherp-portal .fe-main .form-grid-2,
body.pherp-standalone-shell .fe-main .form-grid-2{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body.pherp-erp-shell .fe-main input,
body.pherp-erp-shell .fe-main select,
body.pherp-erp-shell .fe-main textarea,
body.pherp-portal .fe-main input,
body.pherp-portal .fe-main select,
body.pherp-portal .fe-main textarea,
body.pherp-standalone-shell .fe-main input,
body.pherp-standalone-shell .fe-main select,
body.pherp-standalone-shell .fe-main textarea{
  max-width:100%;
  box-sizing:border-box;
}

/* Tables remain inside their visual component and scroll locally when their
   natural column set is wider than the available page. */
body.pherp-erp-shell .fe-main .fe-table-wrap,
body.pherp-portal .fe-main .fe-table-wrap,
body.pherp-standalone-shell .fe-main .fe-table-wrap{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
}
body.pherp-erp-shell .fe-main .fe-table,
body.pherp-portal .fe-main .fe-table,
body.pherp-standalone-shell .fe-main .fe-table{
  max-width:none;
}

/* POS columns: the existing layout remains intact, but both panels may
   shrink to the actual content width. */
body.pherp-erp-shell .fe-main .fe-pos-layout,
body.pherp-portal .fe-main .fe-pos-layout,
body.pherp-standalone-shell .fe-main .fe-pos-layout{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
}
body.pherp-erp-shell .fe-main .fe-pos-cart-panel,
body.pherp-erp-shell .fe-main .fe-pos-payment-panel,
body.pherp-portal .fe-main .fe-pos-cart-panel,
body.pherp-portal .fe-main .fe-pos-payment-panel,
body.pherp-standalone-shell .fe-main .fe-pos-cart-panel,
body.pherp-standalone-shell .fe-main .fe-pos-payment-panel{
  min-width:0!important;
  max-width:100%!important;
}

/* Dashboard-specific fixed column compositions become fluid before they
   reach the narrow/mobile breakpoints. */
@media(max-width:1180px){
  #fe-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #fe-diagnostic-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #fe-app > .fe-main > .fe-row.fe-gap-lg:has(#fe-sales-chart){grid-template-columns:minmax(0,1fr) 260px!important}
}
@media(max-width:900px){
  body.pherp-erp-shell .fe-main,
  body.pherp-portal .fe-main,
  body.pherp-standalone-shell .fe-main{
    width:calc(100vw - var(--fe-sidebar-w-c))!important;
    max-width:calc(100vw - var(--fe-sidebar-w-c))!important;
  }
  body.pherp-erp-shell .fe-main > .fe-card,
  body.pherp-portal .fe-main > .fe-card,
  body.pherp-standalone-shell .fe-main > .fe-card{
    margin-left:8px!important;
    margin-right:8px!important;
  }
  #fe-app > .fe-main > .fe-row.fe-gap-lg:has(#fe-sales-chart){grid-template-columns:1fr!important}
}
@media(max-width:600px){
  body.pherp-erp-shell .fe-main,
  body.pherp-portal .fe-main,
  body.pherp-standalone-shell .fe-main{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  body.pherp-erp-shell .fe-main > .fe-card,
  body.pherp-portal .fe-main > .fe-card,
  body.pherp-standalone-shell .fe-main > .fe-card{
    margin-left:4px!important;
    margin-right:4px!important;
    border-radius:12px!important;
  }
  body.pherp-erp-shell .fe-main .fe-card-header,
  body.pherp-portal .fe-main .fe-card-header,
  body.pherp-standalone-shell .fe-main .fe-card-header{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #fe-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #fe-diagnostic-cards{grid-template-columns:1fr!important}
}
@media(max-width:400px){
  #fe-kpi-grid{grid-template-columns:1fr!important}
}

/* Admin/workspace pages: keep their existing structure while ensuring the
   presentation wrapper and wide tables stay inside WordPress content. */
.pherp-enterprise-admin .pherp-wrap,
.pherp-enterprise-admin .pherp-page-header,
.pherp-enterprise-admin .pherp-card,
.pherp-enterprise-admin .pherp-dashboard-grid,
.pherp-enterprise-admin .pherp-kpi-grid{
  box-sizing:border-box!important;
  max-width:100%!important;
  min-width:0!important;
}
.pherp-enterprise-admin .pherp-dashboard-grid > *,
.pherp-enterprise-admin .pherp-kpi-grid > *{
  min-width:0!important;
}
.pherp-enterprise-admin .pherp-table-wrap{
  max-width:100%!important;
  overflow-x:auto!important;
}
.pherp-enterprise-admin .pherp-page-header .pherp-header-actions{
  min-width:0;
  flex-wrap:wrap;
}
@media(max-width:782px){
  .pherp-enterprise-admin .pherp-wrap{padding-left:12px!important;padding-right:12px!important}
  .pherp-enterprise-admin .pherp-page-header{width:100%!important}
}

/* 4.7.32 - sidebar section headings: bold + white */
.fe-sidebar .fe-nav-group-label{color:#fff!important;font-weight:800!important;opacity:1!important;font-size:11.5px!important}


/* 4.7.39 — centred sidebar section headings */
.fe-sidebar .fe-nav-group-label{text-align:center!important;padding-left:12px!important;padding-right:12px!important}

/* 4.7.39 — real top search bar (input + live module results) */
.fe-search-box{position:relative;cursor:text!important;min-width:280px;padding:0 11px;display:flex;align-items:center;gap:8px}
.fe-search-box .fe-search-icon{flex:none;color:#64748b;display:inline-flex}
.fe-search-box:focus-within{background:#fff;border-color:#14b8a6;box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.fe-search-input{flex:1;min-width:0;height:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:13.5px;color:#0f172a;padding:0!important;margin:0!important}
.fe-search-input::placeholder{color:#94a3b8}
.fe-search-input::-webkit-search-cancel-button{cursor:pointer}
.fe-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:340px;max-height:60vh;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 18px 50px rgba(2,8,23,.22);padding:6px;z-index:100001;display:none}
.fe-search-box.open .fe-search-results{display:block}
.fe-search-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:#0f172a;font-size:13.5px}
.fe-search-item:hover,.fe-search-item.active{background:#f0fdfa;color:#0f766e}
.fe-search-item .fe-search-ico{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#f1f5f9;flex:none}
.fe-search-item .fe-search-grp{margin-left:auto;font-size:10.5px;color:#94a3b8;white-space:nowrap}
.fe-search-item mark{background:#fef08a;color:inherit;border-radius:2px;padding:0}
.fe-search-empty{padding:18px;text-align:center;color:#64748b;font-size:13px}
[data-theme="dark"] .fe-search-input{color:#e5edf7}
[data-theme="dark"] .fe-search-results{background:#111827;border-color:#263449}
[data-theme="dark"] .fe-search-item{color:#e5edf7}
[data-theme="dark"] .fe-search-item:hover,[data-theme="dark"] .fe-search-item.active{background:#0f2e2b}
[data-theme="dark"] .fe-search-item .fe-search-ico{background:#1f2a3d}
@media(max-width:900px){
  .fe-search-box{min-width:0;width:44px;padding:0 11px;overflow:visible;transition:width .15s}
  .fe-search-box:focus-within{width:min(260px,60vw)}
  .fe-search-box .fe-search-input{width:0;flex:0 0 0;opacity:0}
  .fe-search-box:focus-within .fe-search-input{flex:1;width:auto;opacity:1}
  .fe-search-box kbd{display:none!important}
  .fe-search-results{min-width:min(340px,92vw);right:auto}
}
[data-theme="dark"] .fe-search-box:focus-within{background:#0b1220;border-color:#14b8a6}

/* Header search: rows hidden by the in-module filter */
.fe-search-hidden{display:none!important}

/* ===================================================================
   4.7.83 — Layout gutters: nothing may touch, enter or overflow the page margins
   One horizontal gutter (--fe-gutter) is used for every block directly inside .fe-main.
   =================================================================== */
.fe-app{--fe-gutter:24px}
@media(max-width:900px){.fe-app{--fe-gutter:16px}}
@media(max-width:600px){.fe-app{--fe-gutter:12px}}

/* 1. Cards placed straight in a page: always the same side gutter (beats inline margin:16px 0 / margin:20px) */
.fe-main > .fe-card,
.fe-main > section > .fe-card{margin-left:var(--fe-gutter);margin-right:var(--fe-gutter)}
.fe-main > .fe-card[style*="margin:20px"],
.fe-main > .fe-card[style*="margin: 20px"],
.fe-main > section > .fe-card[style*="margin:20px"]{margin:20px var(--fe-gutter)!important}
.fe-card.fe-inventory-valuation-card{margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important}
.fe-main > .fe-card[style*="max-width"]{max-width:calc(100% - 2*var(--fe-gutter))}

/* 2. KPI strips / card grids (Medical Items modules etc.): the grid owns the gutter, cards inside carry no margin */
.fe-main [class$="-kpis"]{margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;min-width:0}
.fe-main [class$="-kpis"] > .fe-card,
.fe-main .fe-diagnostic-cards > .fe-card{margin:0!important;min-width:0}
.fe-main > .fe-kpi-grid,
.fe-main > section > .fe-kpi-grid{padding-left:var(--fe-gutter);padding-right:var(--fe-gutter)}
.fe-card > .fe-kpi-grid{padding-left:18px;padding-right:18px}

/* 3. Side-by-side cards: the row owns the gutter and the gap, cards never stack margins or push past the edge */
.fe-row:has(> .fe-card){gap:20px;padding:0 var(--fe-gutter);align-items:stretch;box-sizing:border-box;min-width:0}
.fe-row:has(> .fe-card) > .fe-card{margin-left:0;margin-right:0;min-width:min(260px,100%);box-sizing:border-box}
.fe-row:has(> .fe-card) > .fe-card[style*="min-width"]{min-width:min(260px,100%)!important}
.fe-card .fe-row:has(> .fe-card){padding:0 16px 16px}
/* a card inside a card sits inset, not at the outer gutter */
.fe-card .fe-card{margin-left:16px;margin-right:16px}

/* 4. Wide tables scroll inside their own box instead of widening the page */
.fe-card{max-width:100%;box-sizing:border-box}
.fe-card > .fe-table-wrap,.fe-card .fe-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fe-main img,.fe-main canvas{max-width:100%}

/* 5. Toolbars and filter bars: wrap, never overflow, same gutter as the cards below them */
.fe-toolbar{padding-left:var(--fe-gutter);padding-right:var(--fe-gutter);row-gap:8px}
.fe-toolbar > *{min-width:0;max-width:100%}
.fe-toolbar .fe-input,.fe-toolbar select{max-width:100%}

/* 6. Narrow screens: stack side-by-side cards full width */
@media(max-width:720px){
  .fe-row:has(> .fe-card){padding:0 var(--fe-gutter)}
  .fe-row:has(> .fe-card) > .fe-card{flex:1 1 100%!important;min-width:0!important}
  .fe-main [class$="-kpis"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ===================================================================
   4.7.84 — Layout alignment pass (frames / boxes inside module pages)
   Root causes fixed here:
   (a) a descendant rule gave every .fe-card width:100%; cards that sit inside a tab pane,
       a Global-Reports pane or a report-output block also carry a 24px side margin, so they
       were shifted 24px right and clipped at the page edge (Suppliers, Staff, Payroll, Expiry...).
   (b) tab bars never wrapped, so tabs beyond the right edge were cut off (Accounting, Procurement...).
   (c) tab bars, KPI rows, toolbars, diagnostic panels and report/POS blocks each used their own
       side spacing, so their edges did not line up with the cards below them.
   (d) top bars with several buttons ran past the edge on tablets and phones.
   Everything below is presentation only (no markup, PHP or JavaScript changes).
   =================================================================== */

/* (a) Cards that live in a block container fill the container minus their own margins */
.fe-app .fe-main .fe-tab-pane > .fe-card,
.fe-app .fe-main .gr-pane > .fe-card,
.fe-app .fe-main .rep-output > .fe-card,
.fe-app .fe-main section > .fe-card,
.fe-app .fe-main .fe-pos-cart-panel > .fe-card,
.fe-app .fe-main > div:not(.fe-row):not(.fe-grid):not(.fe-kpi-grid):not([style*="flex"]):not([style*="grid"]) > .fe-card{
  width:auto!important;max-width:none!important;min-width:0;
}
/* Card sections (e.g. Medical Items Procurement) and tab panes share the page gutter */
.fe-app .fe-main .fe-tab-pane > .fe-card,
.fe-app .fe-main .gr-pane > .fe-card,
.fe-app .fe-main .rep-output > .fe-card{margin-left:var(--fe-gutter);margin-right:var(--fe-gutter)}
.fe-app .fe-main .fe-tab-pane,.fe-app .fe-main .gr-pane,.fe-app .fe-main .rep-output{min-width:0;box-sizing:border-box}
.fe-app .fe-main .fe-tab-pane > .fe-card:last-child{margin-bottom:24px}

/* (b) + (c) Tab bars: wrap on desktop, scroll sideways on phones, aligned with the cards */
.fe-app .fe-main > .fe-tabs{
  margin:20px var(--fe-gutter) 0;
  flex-wrap:wrap;row-gap:0;
  width:auto!important;max-width:none!important;min-width:0;box-sizing:border-box;
}
.fe-app .fe-main > .fe-tabs + .fe-tab-pane > .fe-card:first-child{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.fe-app .fe-main .fe-tabs .fe-tab{flex:0 0 auto}
@media(max-width:720px){
  .fe-app .fe-main > .fe-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}

/* (c) Same side spacing for every block placed straight in the page */
.fe-app .fe-main > .fe-kpi-row,
.fe-app .fe-main > .fe-kpi-strip,
.fe-app .fe-main > .fe-diagnostic-panel,
.fe-app .fe-main > .mi-toolbar,
.fe-app .fe-main > .fe-alert,
.fe-app .fe-main > .fe-pos-layout,
.fe-app .fe-main > .rep-output,
.fe-app .fe-main > .fe-row.fe-gap-lg:not(.fe-diagnostic-cards){
  margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;
  width:auto!important;max-width:none!important;min-width:0;box-sizing:border-box!important;
}
.fe-app .fe-main > .fe-kpi-strip,
.fe-app .fe-main > .fe-pos-layout,
.fe-app .fe-main > .rep-output{padding-left:0!important;padding-right:0!important}
/* these rows own their gutter through margin now, not padding (4.7.83 rule 3 used padding) */
.fe-app .fe-main > .fe-row.fe-gap-lg:has(> .fe-card){padding-left:0;padding-right:0}
.fe-app .fe-main > .fe-diagnostic-panel > *{min-width:0;box-sizing:border-box}

/* (d) Top bar: title and buttons wrap instead of running past the edge */
.fe-app .fe-main > .fe-topbar{height:auto!important;min-height:68px;flex-wrap:wrap;row-gap:8px;column-gap:12px;padding-top:10px;padding-bottom:10px;box-sizing:border-box}
.fe-app .fe-topbar .fe-page-title{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.fe-app .fe-topbar .fe-topbar-right{min-width:0;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;row-gap:8px;margin-left:auto}
@media(max-width:600px){
  .fe-app .fe-main > .fe-topbar{padding-left:12px!important;padding-right:12px!important}
  .fe-app .fe-topbar .fe-topbar-right{width:100%;justify-content:flex-start}
}

/* Phones / small tablets: ONE gutter. The page padding is dropped so cards, KPI grids, tabs,
   toolbars and rows all sit on the same left/right edge. */
@media(max-width:900px){
  body.pherp-erp-shell .fe-main,body.pherp-portal .fe-main,body.pherp-standalone-shell .fe-main{padding-left:0!important;padding-right:0!important}
  body.pherp-erp-shell .fe-main > .fe-card,body.pherp-portal .fe-main > .fe-card,body.pherp-standalone-shell .fe-main > .fe-card,
  .fe-app .fe-main .fe-tab-pane > .fe-card,.fe-app .fe-main .gr-pane > .fe-card,.fe-app .fe-main .rep-output > .fe-card{
    margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;
  }
  .fe-app .fe-main > .fe-kpi-grid{padding-left:var(--fe-gutter);padding-right:var(--fe-gutter)}
}
@media(max-width:600px){
  body.pherp-erp-shell .fe-main,body.pherp-portal .fe-main,body.pherp-standalone-shell .fe-main{padding-left:0!important;padding-right:0!important}
  body.pherp-erp-shell .fe-main > .fe-card,body.pherp-portal .fe-main > .fe-card,body.pherp-standalone-shell .fe-main > .fe-card{
    margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;
  }
}

/* 4.7.84 — small-screen leftovers */
.fe-app .fe-topbar > div[style*="display:flex"]{flex-wrap:wrap;min-width:0;justify-content:flex-end;margin-left:auto}
.fe-app .fe-main input[style*="min-width"],
.fe-app .fe-main select[style*="min-width"]{min-width:min(var(--fe-field-min,220px),100%)!important;max-width:100%}
.fe-app .fe-main .mr-find{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.fe-app .fe-main .mr-find > *{min-width:0}
.fe-app .db-purge-item{flex-wrap:wrap;min-width:0}
.fe-app .db-purge-item > *{min-width:0}
.fe-app .fe-card .fe-btn,.fe-app .fe-card a.fe-btn{max-width:100%}

/* 4.7.84 — Small screens: the content column never moves with the sidebar.
   The sidebar starts as the 64px icon strip (see frontend.js) and, when opened, floats OVER the page
   instead of pushing the page 192px off the right edge of the screen. */
@media(max-width:900px){
  body.pherp-erp-shell .fe-main,
  body.pherp-erp-shell .fe-main.fe-main-expanded,
  body.pherp-portal .fe-main,
  body.pherp-standalone-shell .fe-main{
    margin-left:var(--fe-sidebar-w-c)!important;
    width:calc(100vw - var(--fe-sidebar-w-c))!important;
    max-width:calc(100vw - var(--fe-sidebar-w-c))!important;
  }
  body.pherp-erp-shell .fe-sidebar:not(.fe-sidebar-collapsed){z-index:1000;box-shadow:12px 0 40px rgba(2,8,23,.35)}
}

/* 4.7.84 — grids with wide minimum columns never exceed their container on narrow screens */
.fe-app .db-purge-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.fe-app .roles-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.fe-app .fe-main .fe-card[style*="display:flex"]{flex-wrap:wrap;gap:10px}
.fe-app .fe-main .fe-card[style*="display:flex"] > *{min-width:0;max-width:100%}

/* 4.7.84 — Claims KPI row had no layout rule: its cards stacked as huge full-width boxes. Now a responsive grid. */
.fe-app .fe-main > .fe-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin-top:20px!important;margin-bottom:0}
.fe-app .fe-main > .fe-kpi-row > .fe-kpi-card{margin:0;min-width:0}

/* 4.7.84 — stray teal lines: the ".fe-tab-active::after" underline was also applied to the active tab PANE and to
   .fe-tab buttons that are not positioned, so a bar was drawn along the bottom of every active pane and across the
   whole tab strip, wider than the cards. The tab button already has its own 3px active border. */
.fe-tab-pane.fe-tab-active::after,
.fe-tab.fe-tab-active::after{content:none!important;display:none!important}
.fe-tab{position:relative}

/* 4.7.84 — the diagnostic-cards row keeps its gutter as padding (it is a grid that owns the gutter) */
.fe-app .fe-main > .fe-row.fe-diagnostic-cards{padding-left:var(--fe-gutter)!important;padding-right:var(--fe-gutter)!important;margin-left:0!important;margin-right:0!important}

/* ===================================================================
   4.7.88 — One left/right edge for every frame on a module page
   Measured in a browser: topbar sits at the page edge, but tabs / cards sat 24px in while KPI strips (Procurement,
   Scan Services) were flush with the page edge and the Reports KPI grids were inset by padding on top of a margin.
   Rule: every block placed directly in the page (or in .rep-output) uses the page gutter as MARGIN, never padding.
   =================================================================== */
body.pherp-erp-shell .fe-app .fe-main > .fe-kpi-grid,
body.pherp-erp-shell .fe-app .fe-main > .fe-kpi-grid.proc-summary,
body.pherp-erp-shell .fe-app .fe-main > section > .fe-kpi-grid,
body.pherp-erp-shell .fe-app .fe-main .rep-output > .fe-tab-pane > .fe-kpi-grid{
  margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;
  padding-left:0!important;padding-right:0!important;padding-bottom:0!important;
  width:auto!important;max-width:none!important;min-width:0;box-sizing:border-box;
  margin-top:16px!important;margin-bottom:16px!important;
}
body.pherp-erp-shell .fe-app .fe-main > .fe-kpi-grid .fe-kpi-card,
body.pherp-erp-shell .fe-app .fe-main .rep-output > .fe-tab-pane > .fe-kpi-grid .fe-kpi-card{margin:0!important;min-width:0}
/* KPI strip sits tight under the tab bar it belongs to (Procurement, Customers) */
.fe-app .fe-main > .fe-tabs + .fe-kpi-grid{margin-top:16px!important}

/* Reports: output block + everything in it share one edge */
.fe-app .fe-main > .rep-output{margin-left:var(--fe-gutter)!important;margin-right:var(--fe-gutter)!important;padding:0!important}
.fe-app .fe-main .rep-output > .fe-kpi-grid,
.fe-app .fe-main .rep-output > .fe-tabs,
.fe-app .fe-main .rep-output > .fe-row,
.fe-app .fe-main .rep-output > .fe-card,
.fe-app .fe-main .rep-output > .fe-tab-pane > .fe-card{
  margin-left:0!important;margin-right:0!important;padding-left:0;padding-right:0;
  width:auto!important;max-width:none!important;min-width:0;box-sizing:border-box;
}
.fe-app .fe-main .rep-output > .fe-kpi-grid{padding:0!important;margin-top:16px!important;margin-bottom:16px!important}
.fe-app .fe-main .rep-output > .fe-row{padding-left:0!important;padding-right:0!important}
.fe-app .fe-main .rep-output > .fe-tabs{margin-top:16px}
.fe-app .fe-main .rep-output > .fe-tab-pane > .fe-card{margin-top:0}
/* KPI grids inside report cards keep an even inner inset */
.fe-app .fe-main .rep-output > .fe-card > .fe-kpi-grid{padding:14px 18px 6px!important}
.fe-app .fe-main .rep-output > .fe-card + .fe-card,
.fe-app .fe-main .rep-output > .fe-row + .fe-card{margin-top:16px}

/* Scan Services: tab bar lives inside a card — keep it flush with the card edges and the search row on one line */
.fe-app .fe-main > .fe-card > .fe-tabs{margin:0;width:auto!important;border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none}
.fe-app .fe-main > .fe-card > .fe-tab-pane,
.fe-app .fe-main > .fe-card > div > .fe-tab-pane{box-sizing:border-box}
.fe-app .fe-main .fe-tab-pane > .fe-card .fe-toolbar,
.fe-app .fe-main > .fe-card .fe-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;box-sizing:border-box}
.fe-app .fe-main .fe-toolbar > input.fe-input{flex:1 1 260px;min-width:0;width:auto}
.fe-app .fe-main .fe-toolbar > select.fe-input{flex:0 0 auto;width:auto;min-width:150px}
.fe-app .fe-main .fe-toolbar > .fe-btn{flex:0 0 auto}

/* ===================================================================
   4.7.89 — KPI cards that are plain .fe-card (Scan Services: Today's Orders / Awaiting Report / Reported / Outstanding)
   The 4.7.88 reset only zeroed .fe-kpi-card, so these cards kept the 24px side margin (and 18px top margin) and
   the whole row sat 24px right of the other frames and ran past the page edge. A KPI strip owns the gutter; the
   cards inside it carry no margin and share the strip's left/right edge.
   =================================================================== */
.fe-app .fe-main .fe-kpi-grid > .fe-card,
.fe-app .fe-main .fe-kpi-grid > .fe-kpi-card{
  margin:0!important;width:auto!important;max-width:none!important;min-width:0;box-sizing:border-box;
}
/* KPI cards built from .fe-card get the same inner padding as the other KPI cards (text no longer touches the card edge) */
.fe-app .fe-main .fe-kpi-grid > .fe-card > .fe-card-body{padding:14px 18px}