/* ═══════════════════════════════════════════════════════════════
   Fluid ERP — "Your Financial Brain"
   Design System v8 — Premium Corporate
   Font: Cairo | Accent: #4361ee | Theme: Deep Sidebar · Clean Content
═══════════════════════════════════════════════════════════════ */


/* ══ TOKENS ════════════════════════════════════════════════════ */
:root {
  --p:       #4361ee;  --p-d:    #3a56d4;  --p-l:   #eef1fd;  --p-ll:  #e0e5fb;
  --p-glow:  rgba(67,97,238,.16);

  --success:   #0d9f6e;  --success-d: #0b8a5e;  --success-l:  #e8faf3;  --success-ll: #a7f3d0;
  --danger:    #e5374e;  --danger-d:  #d02040;  --danger-l:   #fef1f2;  --danger-ll:  #fecdd3;
  --warning:   #f59e0b;  --warning-d: #d97706;  --warning-l:  #fffbeb;  --warning-ll: #fde68a;
  --info:      #0ea5e9;  --info-d:    #0284c7;  --info-l:     #f0f9ff;  --info-ll:    #bae6fd;
  --purple:    #8b5cf6;  --purple-d:  #7c3aed;  --purple-l:   #f5f3ff;  --purple-ll:  #ddd6fe;
  --teal:      #14b8a6;  --teal-d:    #0d9488;  --teal-l:     #f0fdfa;  --teal-ll:    #99f6e4;

  --g0:#fff; --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0; --g300:#cbd5e1;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569; --g700:#334155; --g800:#1e293b; --g900:#0f172a;

  --bg:#f1f4f9; --white:#ffffff; --border:#e2e8f0; --bord-l:#edf2f7;

  --sb-w:258px; --sb-mini:62px;
  --sb-bg:#0f172a; --sb-bg2:#1e293b; --sb-bord:rgba(255,255,255,.07);
  --sb-text:rgba(148,163,184,.85); --sb-texth:#f1f5f9;
  --sb-act:rgba(67,97,238,.22); --sb-actb:#818cf8; --sb-hov:rgba(255,255,255,.06);
  --sb-t:.22s cubic-bezier(.4,0,.2,1);

  --nav-h:56px;

  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04);
  --sh-lg:0 10px 15px rgba(0,0,0,.07),0 4px 6px rgba(0,0,0,.04);
  --sh-xl:0 20px 25px rgba(0,0,0,.08),0 8px 10px rgba(0,0,0,.04);

  --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;

  --fm-bord:#d1d9e6; --fm-bg:#f8fafc; --fm-text:#1e293b;
  --fm-lbl:#475569; --fm-acc:#4361ee; --fm-glow:rgba(67,97,238,.14);

  --t-fast:.12s ease; --t-base:.2s ease; --t-slow:.32s ease;
}

/* ══ BASE ══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--g800);font-size:13.5px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
*{scrollbar-width:thin;scrollbar-color:var(--g200) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-thumb{background:var(--g300);border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:var(--g400)}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Cairo',sans-serif;font-weight:800;line-height:1.3}

/* ══ SIDEBAR ═══════════════════════════════════════════════════ */
#sidebar{width:var(--sb-w);height:100vh;background:var(--sb-bg);position:fixed;right:0;top:0;z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:width var(--sb-t);border-left:1px solid rgba(255,255,255,.04)}
#sidebar.collapsed{width:var(--sb-mini)}
#sidebar::before{content:'';flex-shrink:0;height:2px;background:linear-gradient(90deg,#4361ee,#818cf8,#4361ee);background-size:200% 100%;animation:sb-shimmer 4s linear infinite}
@keyframes sb-shimmer{0%{background-position:0 0}100%{background-position:200% 0}}

.sidebar-inner{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:32px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
.sidebar-inner::-webkit-scrollbar{width:3px}
.sidebar-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}

.sidebar-brand{flex-shrink:0;height:var(--nav-h);padding:0 16px;background:transparent;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sb-bord);overflow:visible;position:relative}
.sidebar-brand img{width:32px;height:32px;object-fit:contain;flex-shrink:0;border-radius:8px;transition:transform var(--sb-t)}
#sidebar.collapsed .sidebar-brand img{transform:scale(.88)}
.brand-name{font-size:14.5px;font-weight:900;letter-spacing:-.3px;color:#f1f5f9;white-space:nowrap;transition:opacity var(--sb-t),transform var(--sb-t)}
.brand-tagline{font-size:9.5px;color:rgba(148,163,184,.6);font-weight:500;letter-spacing:.2px;display:block;margin-top:-1px}
#sidebar.collapsed .brand-name,#sidebar.collapsed .brand-tagline{opacity:0;transform:translateX(8px);pointer-events:none}

.nav-section{font-size:9px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:rgba(67,97,238,.7);padding:18px 16px 5px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;transition:opacity var(--sb-t),padding var(--sb-t)}
.nav-section::after{content:'';flex:1;height:1px;background:var(--sb-bord)}
#sidebar.collapsed .nav-section{opacity:0;height:0;padding:0;pointer-events:none}

.nav-item>a{color:var(--sb-text);padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;transition:all var(--sb-t);border-right:2.5px solid transparent;text-decoration:none;white-space:nowrap;overflow:hidden;position:relative;margin:1px 0}
.nav-item>a:hover{color:var(--sb-texth);background:var(--sb-hov)}
.nav-item>a.active,.nav-item.open>a{color:var(--sb-actb);background:var(--sb-act);border-right-color:var(--sb-actb)}
#sidebar>.nav-item>a{margin:1px 8px;border-radius:8px;border-right:none!important;padding:9px 12px}
#sidebar>.nav-item>a.active{background:rgba(67,97,238,.2);color:#818cf8}

.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:.5;flex-shrink:0;transition:opacity var(--sb-t)}
.nav-item>a:hover .nav-icon,.nav-item>a.active .nav-icon{opacity:1}
.nav-label{flex:1;transition:opacity var(--sb-t),max-width var(--sb-t);overflow:hidden}
.menu-arrow{font-size:8px;transition:transform var(--sb-t),opacity var(--sb-t);opacity:.25;flex-shrink:0}
.nav-item.open>a .menu-arrow{transform:rotate(-90deg)}
#sidebar.collapsed .nav-label,#sidebar.collapsed .menu-arrow{opacity:0;max-width:0}

.nav-item{position:relative}
#sidebar.collapsed .nav-item>a::after{content:attr(data-tip);position:absolute;right:calc(var(--sb-mini)+10px);top:50%;transform:translateY(-50%);background:#1e293b;color:#e2e8f0;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.08);z-index:2000}
#sidebar.collapsed .nav-item>a:hover::after{opacity:1}

.sub-menu{overflow:hidden;background:rgba(0,0,0,.15);max-height:0;transition:max-height .22s cubic-bezier(.4,0,.2,1)}
.sub-menu.show{max-height:var(--sub-h,1400px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
#sidebar.collapsed .sub-menu{max-height:0!important}
.sub-menu a{color:rgba(148,163,184,.75);padding:7px 14px 7px 38px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;transition:all var(--sb-t);border-right:2px solid transparent;text-decoration:none}
.sub-menu a .nav-icon{font-size:10px;opacity:.35}
.sub-menu a:hover{color:#f1f5f9;background:rgba(255,255,255,.05)}
.sub-menu a.active{color:var(--sb-actb);background:rgba(67,97,238,.15);border-right-color:var(--sb-actb)}
.sub-menu a.active .nav-icon,.sub-menu a:hover .nav-icon{opacity:1}

.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 5px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:9px;flex-shrink:0}
.nav-badge.warn{background:var(--warning-d)}
.nav-badge.info{background:var(--info-d)}
.nav-badge.success{background:var(--success)}
#sidebar.collapsed .nav-badge{opacity:0}

#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;backdrop-filter:blur(2px)}

/* ══ TOPNAV ════════════════════════════════════════════════════ */
#main-content{margin-right:var(--sb-w);min-height:100vh;transition:margin var(--sb-t)}
body.sb-collapsed #main-content{margin-right:var(--sb-mini)}

#topnav{background:var(--white);height:var(--nav-h);padding:0 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:999;box-shadow:0 1px 0 var(--border),var(--sh-xs)}
#topnav-hamburger{display:none;width:34px;height:34px;border:1px solid var(--g200);border-radius:var(--r-md);background:var(--g50);align-items:center;justify-content:center;cursor:pointer;color:var(--g500);font-size:14px;flex-shrink:0;transition:all var(--t-fast)}
#topnav-hamburger:hover{background:var(--p-l);color:var(--p);border-color:var(--p-ll)}
#dark-mode-toggle{width:34px;height:34px;border:1px solid var(--g200);border-radius:var(--r-md);background:var(--g50);color:var(--g500);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all var(--t-fast);flex-shrink:0}
#dark-mode-toggle:hover{background:var(--p-l);color:var(--p);border-color:var(--p-ll)}

.tnav-user-pill{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-full);cursor:pointer;transition:all .15s;font-family:'Cairo',sans-serif}
.tnav-user-pill:hover,.tnav-user-pill.show{border-color:var(--p);background:var(--p-l)}
.tnav-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--p) 0%,var(--purple-d) 100%);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tnav-uname{font-size:12.5px;font-weight:700;color:var(--g700)}
.tnav-date{font-size:11.5px;color:var(--g400);font-weight:500;white-space:nowrap;padding:4px 10px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-full)}

.breadcrumb{margin:0;font-size:12px;display:flex;align-items:center;gap:3px}
.breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--g300);margin:0 4px}
.breadcrumb-item a{color:var(--g400);transition:color var(--t-fast)}
.breadcrumb-item a:hover{color:var(--p)}
.breadcrumb-item.active{color:var(--g600);font-weight:600}

/* ══ PAGE LAYOUT ══════════════════════════════════════════════ */
.page-header{background:var(--white);padding:12px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;direction:rtl;box-shadow:var(--sh-xs)}
.page-header h4{margin:0;font-size:16px;font-weight:800;color:var(--g900);display:flex;align-items:center;gap:9px;letter-spacing:-.2px}
.ph-actions,.page-header .ph-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;direction:ltr}

.action-bar{background:var(--white);padding:9px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-wrap:wrap;position:sticky;top:var(--nav-h);z-index:100;direction:ltr;box-shadow:0 1px 3px rgba(0,0,0,.04)}

.content-area{padding:20px 22px}

/* ══ SAVE BAR ══════════════════════════════════════════════════ */
.save-bar{position:sticky;bottom:0;left:0;right:0;z-index:100;background:var(--white);border-top:1px solid var(--border);padding:12px 22px;display:flex;align-items:center;gap:10px;box-shadow:0 -4px 16px rgba(0,0,0,.06);direction:ltr}
.save-bar .save-bar-info{margin-left:auto;font-size:12px;color:var(--g400)}

/* ══ STATUS BAR ════════════════════════════════════════════════ */
.status-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 0}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--r-full);font-size:12px;font-weight:700;border:1px solid;border-color:color-mix(in srgb,currentColor 20%,transparent);background:color-mix(in srgb,currentColor 8%,transparent)}
.scb{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-md);border:1px solid;background:var(--white);font-size:12px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;transition:all var(--t-fast)}
.scb:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.scb-draft{color:var(--g600);border-color:var(--g300)}.scb-draft:hover{background:var(--g100)}
.scb-confirmed,.scb-approved{color:var(--p-d);border-color:var(--p-ll)}.scb-confirmed:hover,.scb-approved:hover{background:var(--p-l)}
.scb-posted{color:var(--purple-d);border-color:var(--purple-ll)}.scb-posted:hover{background:var(--purple-l)}
.scb-cancelled{color:var(--danger-d);border-color:var(--danger-ll)}.scb-cancelled:hover{background:var(--danger-l)}
.scb-done{color:var(--success-d);border-color:var(--success-ll)}.scb-done:hover{background:var(--success-l)}
.scb-reversed{color:var(--purple-d);border-color:var(--purple-ll)}.scb-reversed:hover{background:var(--purple-l)}

/* ══ BUTTONS ══════════════════════════════════════════════════ */
.btn{border-radius:var(--r-md);font-size:13px;font-weight:700;padding:7px 16px;display:inline-flex;align-items:center;gap:7px;transition:all var(--t-fast);border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:'Cairo',sans-serif;line-height:1.4}
.btn:active{transform:scale(.97)}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:var(--r-sm)}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:var(--r-sm)}
.btn-lg{padding:10px 22px;font-size:14px}
.btn-primary{background:var(--p);border-color:var(--p);color:#fff;box-shadow:0 1px 3px rgba(67,97,238,.3)}
.btn-primary:hover{background:var(--p-d);border-color:var(--p-d);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(67,97,238,.4)}
.btn-success{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 1px 3px rgba(13,159,110,.25)}
.btn-success:hover{background:var(--success-d);color:#fff;transform:translateY(-1px)}
.btn-danger{background:var(--danger-d);border-color:var(--danger-d);color:#fff;box-shadow:0 1px 3px rgba(229,55,78,.25)}
.btn-danger:hover{background:#c01030;color:#fff;transform:translateY(-1px)}
.btn-warning{background:var(--warning-d);border-color:var(--warning-d);color:#fff}
.btn-warning:hover{background:#c47d00;color:#fff;transform:translateY(-1px)}
.btn-info{background:var(--info-d);border-color:var(--info-d);color:#fff}
.btn-info:hover{background:#0272b0;color:#fff;transform:translateY(-1px)}
.btn-light{background:var(--white);border-color:var(--g200);color:var(--g600);box-shadow:var(--sh-xs)}
.btn-light:hover{background:var(--g50);border-color:var(--g300);color:var(--g800)}
.btn-outline-primary{color:var(--p);border-color:var(--p-ll);background:var(--p-l)}
.btn-outline-primary:hover{background:var(--p);color:#fff;border-color:var(--p);transform:translateY(-1px)}
.btn-outline-success{color:var(--success-d);border-color:var(--success-ll);background:var(--success-l)}
.btn-outline-success:hover{background:var(--success);color:#fff}
.btn-outline-danger{color:var(--danger-d);border-color:var(--danger-ll);background:var(--danger-l)}
.btn-outline-danger:hover{background:var(--danger-d);color:#fff}
.btn-outline-warning{color:var(--warning-d);border-color:var(--warning-ll);background:var(--warning-l)}
.btn-outline-warning:hover{background:var(--warning-d);color:#fff}
.btn-outline-secondary{color:var(--g600);border-color:var(--g200);background:var(--white)}
.btn-outline-secondary:hover{background:var(--g100);color:var(--g800)}
.btn-outline-info{color:var(--info-d);border-color:var(--info-ll);background:var(--info-l)}
.btn-outline-info:hover{background:var(--info-d);color:#fff}

/* ══ CARDS ════════════════════════════════════════════════════ */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);transition:box-shadow .2s,transform .2s,border-color .2s;overflow:hidden}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-1px);border-color:var(--g300)}
.card-header{background:var(--g50);border-bottom:1px solid var(--border);padding:12px 16px;font-weight:800;font-size:13px;color:var(--g700);display:flex;align-items:center;gap:8px}
.card-body{padding:16px}
.card-footer{background:var(--g50);border-top:1px solid var(--border);padding:12px 16px}

/* ══ KPI CARDS ════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-xs);transition:all .2s;text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;top:0;right:0;left:0;height:2px;background:var(--kpi-color,var(--p));border-radius:var(--r-lg) var(--r-lg) 0 0}
.kpi-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px);border-color:var(--g300);color:inherit}
.kpi-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.kpi-card-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.kpi-card-val{font-size:25px;font-weight:900;color:var(--g900);line-height:1;letter-spacing:-.5px;margin-bottom:4px}
.kpi-card-lbl{font-size:12px;color:var(--g500);font-weight:600}
.kpi-card-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--bord-l);font-size:11.5px;color:var(--g400);display:flex;align-items:center;gap:5px}
.kpi-blue{--kpi-color:var(--p)}.kpi-green{--kpi-color:var(--success)}.kpi-red{--kpi-color:var(--danger-d)}.kpi-amber{--kpi-color:var(--warning-d)}.kpi-purple{--kpi-color:var(--purple-d)}.kpi-teal{--kpi-color:var(--teal-d)}.kpi-info{--kpi-color:var(--info-d)}.kpi-orange{--kpi-color:#f97316}

/* ══ TABLES ════════════════════════════════════════════════════ */
.list-tbl{width:100%;border-collapse:collapse}
.list-tbl th{background:var(--g50);color:var(--g500);font-size:11px;font-weight:700;letter-spacing:.4px;padding:10px 14px;border-bottom:1.5px solid var(--border);text-align:right;white-space:nowrap;user-select:none}
.list-tbl th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.list-tbl th a:hover{color:var(--p)}
.list-tbl td{padding:10px 14px;border-bottom:1px solid var(--bord-l);vertical-align:middle;font-size:13px;color:var(--g800)}
.list-tbl tr:last-child td{border-bottom:none}
.list-tbl tr:hover td{background:var(--p-l)}
.list-tbl tr.inactive td{opacity:.45}
.list-tbl tfoot td{background:var(--g50);font-weight:800;border-top:1.5px solid var(--border);border-bottom:none}

.table thead th,.table-dark thead th,.table thead td,thead.table-dark th,table thead.bg-dark th,table thead[style*="background:#0"] th,table thead[style*="background:#1"] th{background:var(--g50)!important;color:var(--g500)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.4px!important;border-color:var(--border)!important}
.table-dark{background:var(--white)!important;color:var(--g800)!important}
.table-dark td{border-color:var(--bord-l)!important;color:var(--g800)!important}
.table-dark tbody tr:hover td{background:var(--p-l)!important}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{background:var(--g50);color:var(--g500);padding:10px 14px;font-size:11px;font-weight:700;text-align:right;white-space:nowrap;letter-spacing:.4px;border-bottom:1.5px solid var(--border)}
.table td{padding:10px 14px;border-bottom:1px solid var(--bord-l);vertical-align:middle}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--p-l)}
.table tbody tr:last-child td{border-bottom:none}

.search-wrap{position:relative;flex:1;min-width:200px}
.search-wrap i{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--g400);font-size:12px;pointer-events:none}
.search-wrap .form-control{padding-right:34px}

/* ══ FORM SECTIONS ══════════════════════════════════════════════ */
.sec{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden;box-shadow:var(--sh-xs)}
.sec-head{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--g50)}
.sec-head-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.sec-title{font-size:13px;font-weight:800;color:var(--g900)}
.sec-sub{font-size:11px;color:var(--g500);margin-top:1px}
.sec-body{padding:18px}
.sec-body .row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sec-body .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.sec-body .row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
@media(max-width:768px){.sec-body .row-2,.sec-body .row-3,.sec-body .row-4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.sec-body .row-2,.sec-body .row-3,.sec-body .row-4{grid-template-columns:1fr}}

/* ══ DASHBOARD LAYOUT ═══════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dash-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.dash-section{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs)}
.dash-section-head{padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;color:var(--g900);display:flex;align-items:center;gap:8px;background:var(--g50)}
.dash-section-body{padding:14px}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
@media(max-width:1100px){.dash-grid-3{grid-template-columns:1fr 1fr}}

/* ══ FORM LINES TABLE ══════════════════════════════════════════ */
.ltbl,.po-tbl{width:100%;border-collapse:collapse}
.ltbl thead th,.po-tbl thead th{background:var(--g50);font-size:10.5px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;padding:9px 10px;border-bottom:1.5px solid var(--border);text-align:right;white-space:nowrap}
.ltbl tbody tr,.po-tbl tbody tr{border-bottom:1px solid var(--bord-l)}
.ltbl tbody tr:hover td,.po-tbl tbody tr:hover td{background:var(--p-l)}
.ltbl td,.po-tbl td{padding:6px 7px;vertical-align:middle}
.ltbl input,.ltbl select,.po-tbl input,.po-tbl select{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 9px;font-size:12.5px;font-family:'Cairo',sans-serif;color:var(--g800);background:var(--white);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.ltbl input:focus,.po-tbl input:focus,.ltbl select:focus,.po-tbl select:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p-glow)}
.ltbl input[type=number],.po-tbl input[type=number]{text-align:left;font-weight:700;color:var(--p-d)}
.ltbl input[readonly],.ltbl select[disabled],.po-tbl input[readonly],.po-tbl select[disabled]{background:var(--g50);opacity:.6;cursor:not-allowed}

/* Lines helpers */
.li{width:100%;border:1px solid transparent;border-radius:var(--r-sm);padding:5px 8px;font-size:12.5px;font-family:'Cairo',sans-serif;color:var(--g800);background:transparent;outline:none;transition:border-color .15s,background .15s}
.li:hover{border-color:var(--g300);background:var(--g50)}
.li:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 2px var(--p-glow)}
.li.has-val{border-color:#86efac;background:linear-gradient(to left,#f0fdf4,var(--white))}
.del-r{width:26px;height:26px;border-radius:5px;border:1px solid var(--danger-ll);background:var(--danger-l);color:var(--danger-d);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .12s}
.del-r:hover{background:var(--danger-d);color:#fff;border-color:var(--danger-d)}
.line-tot{font-size:13px;font-weight:800;color:var(--p-d);text-align:left;white-space:nowrap;padding:5px 8px}
.totals-bar{background:var(--g50);border-top:1.5px solid var(--border);padding:14px 16px;display:flex;justify-content:flex-end;gap:24px}
.total-item{text-align:left}
.total-label{font-size:11px;color:var(--g400);font-weight:600;margin-bottom:2px}
.total-value{font-size:16px;font-weight:900;color:var(--g900)}
.total-value.grand{font-size:20px;color:var(--p)}
.lines-table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-xs)}
.add-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-md);border:1.5px dashed var(--g300);background:var(--g50);color:var(--g500);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .15s;width:100%;justify-content:center}
.add-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-l)}

/* ══ STATUS BADGES ════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-full);font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}
.bg-primary{background:var(--p)!important;color:#fff}
.bg-success{background:var(--success)!important;color:#fff}
.bg-danger{background:var(--danger-d)!important;color:#fff}
.bg-warning{background:var(--warning-d)!important;color:#fff}
.bg-info{background:var(--info-d)!important;color:#fff}
.bg-secondary{background:var(--g400)!important;color:#fff}
.bg-light{background:var(--g100)!important;color:var(--g700)}
.bg-dark{background:var(--g800)!important;color:#fff}
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700}
.status-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8;flex-shrink:0}
.badge-draft{background:var(--g100);color:var(--g600)}
.badge-confirmed,.badge-approved,.badge-posted{background:var(--p-l);color:var(--p-d)}
.badge-done,.badge-paid,.badge-validated{background:var(--success-l);color:var(--success-d)}
.badge-cancelled,.badge-void{background:var(--danger-l);color:var(--danger-d)}
.badge-partial{background:var(--warning-l);color:var(--warning-d)}
.badge-pending{background:var(--purple-l);color:var(--purple-d)}

/* ══ STATUS FLOW STEPPER ══════════════════════════════════════ */
.status-flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.status-step{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-full);background:var(--g100);color:var(--g400);border:1px solid var(--g200)}
.status-step.active{background:var(--p-l);color:var(--p);border-color:var(--p-ll)}
.status-step.done{background:var(--success-l);color:var(--success-d);border-color:var(--success-ll)}

/* ══ ALERTS ════════════════════════════════════════════════════ */
.alert{padding:12px 16px;border-radius:var(--r-md);border:1px solid;font-size:13px;font-weight:600;display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.alert-success{background:var(--success-l);color:var(--success-d);border-color:var(--success-ll)}
.alert-danger,.alert-error{background:var(--danger-l);color:var(--danger-d);border-color:var(--danger-ll)}
.alert-warning{background:var(--warning-l);color:var(--warning-d);border-color:var(--warning-ll)}
.alert-info{background:var(--info-l);color:var(--info-d);border-color:var(--info-ll)}

/* Flash */
.flash-msg{position:fixed;top:calc(var(--nav-h)+10px);left:50%;transform:translateX(-50%) translateY(-6px);z-index:9999;padding:11px 20px 11px 16px;border-radius:var(--r-lg);font-size:13px;font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:var(--sh-xl);min-width:280px;max-width:460px;animation:flash-in .22s ease forwards}
@keyframes flash-in{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.flash-success{background:#0f172a;color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.flash-error{background:#0f172a;color:#f87171;border:1px solid rgba(248,113,113,.2)}
.flash-warning{background:#0f172a;color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.flash-info{background:#0f172a;color:#60a5fa;border:1px solid rgba(96,165,250,.2)}
.flash-close{margin-right:auto;background:none;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:16px;padding:0;line-height:1}
.flash-close:hover{opacity:1}

/* ══ FORMS ════════════════════════════════════════════════════ */
.fi{border:1px solid var(--fm-bord);border-radius:var(--r-md);padding:8px 12px;font-size:13px;font-family:'Cairo',sans-serif;background:var(--white);color:var(--g900);outline:none;transition:border-color .15s,box-shadow .15s;height:36px;line-height:1.4;width:100%}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow)}
.fi:hover:not(:focus){border-color:var(--g400)}
.fi::placeholder{color:var(--g300)}
select.fi{cursor:pointer}
input[type="date"].fi{cursor:pointer}
textarea.fi{height:auto;min-height:80px;resize:vertical}
.form-label,.fl{font-size:11.5px;font-weight:700;color:var(--g500);margin-bottom:5px;display:block;letter-spacing:.15px}
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}

.form-control,.form-select{border:1px solid var(--fm-bord)!important;border-radius:var(--r-md)!important;padding:7.5px 12px!important;font-size:13px!important;font-family:'Cairo',sans-serif!important;color:var(--g900)!important;background:var(--white)!important;transition:border-color .15s,box-shadow .15s!important;width:100%!important;outline:none!important;line-height:1.5!important}
.form-control:focus,.form-select:focus{border-color:var(--p)!important;box-shadow:0 0 0 3px var(--p-glow)!important;background:var(--white)!important}
.form-control:hover:not(:focus),.form-select:hover:not(:focus){border-color:var(--g400)!important}
.form-control-sm,.form-select-sm{padding:5px 10px!important;font-size:12px!important;border-radius:var(--r-sm)!important}
.form-control::placeholder{color:var(--g300)!important}
.form-label{font-size:11.5px!important;font-weight:700!important;color:var(--g500)!important;margin-bottom:5px!important;display:block!important}

input.fi,select.fi,textarea.fi{border:1px solid var(--fm-bord)!important;border-radius:var(--r-md)!important;padding:7px 12px!important;font-size:13px!important;font-family:'Cairo',sans-serif!important;background:var(--white)!important;color:var(--g900)!important;height:36px!important;box-shadow:none!important;outline:none!important;transition:border-color .15s,box-shadow .15s!important}
input.fi:focus,select.fi:focus,textarea.fi:focus{border-color:var(--p)!important;box-shadow:0 0 0 3px var(--p-glow)!important}
input.fi:hover:not(:focus),select.fi:hover:not(:focus){border-color:var(--g400)!important}
select.fi{cursor:pointer;appearance:auto}
input[type="date"].fi{cursor:pointer}
input.fi::placeholder{color:var(--g300)}
textarea.fi{height:auto!important;min-height:80px!important}

/* ══ ORDER FORM FIELDS ════════════════════════════════════════ */
.cd-wrap{position:relative;display:flex;flex-direction:column}
.cd-label{font-size:11px;font-weight:700;color:var(--g500);margin-bottom:4px;letter-spacing:.15px}
.cd-input{padding:8px 12px;font-size:13px;font-family:'Cairo',sans-serif;border:1px solid var(--fm-bord);border-radius:var(--r-md);background:var(--white);color:var(--g900);outline:none;transition:border-color .15s,box-shadow .15s;height:36px}
.cd-input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow)}
.cd-hint{font-size:10.5px;color:var(--g400);margin-top:3px}
.pt-drop{font-size:13px;font-family:'Cairo',sans-serif;border:1px solid var(--fm-bord);border-radius:var(--r-md);padding:7.5px 11px;background:var(--white);color:var(--g900);cursor:pointer;outline:none;height:36px;transition:border-color .15s,box-shadow .15s}
.pt-drop:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow)}
.doc-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.doc-meta-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;box-shadow:var(--sh-xs)}

/* ══ PRODUCT DROPDOWN ══════════════════════════════════════════ */
.pp-wrap{position:relative;width:100%}
.pp-inp{width:100%;border:1px solid transparent;border-radius:var(--r-sm);padding:5px 8px;font-size:12.5px;font-family:'Cairo',sans-serif;color:var(--g800);background:transparent;outline:none;transition:border-color .15s,background .15s}
.pp-inp:hover{border-color:var(--g300);background:var(--g50)}
.pp-inp:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 2px var(--p-glow)}
.pp-drop{position:absolute;top:calc(100% + 2px);right:0;left:0;background:var(--white);border:1.5px solid var(--p);border-radius:var(--r-lg);box-shadow:var(--sh-xl);z-index:9000;display:none;overflow:hidden;min-width:280px}
.pp-drop.open{display:block;animation:dd-in .15s ease}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pp-item{padding:9px 13px;cursor:pointer;font-size:13px;color:var(--g800);border-bottom:1px solid var(--bord-l);transition:background .1s;display:flex;align-items:center;gap:8px}
.pp-item:last-child{border-bottom:none}
.pp-item:hover,.pp-item.foc{background:var(--p-l);color:var(--p-d)}
.pp-item-code{font-family:monospace;font-size:11px;color:var(--g400);flex-shrink:0}
.pp-item-name{flex:1;font-weight:600}
.pp-item-meta{font-size:11px;color:var(--g400)}
.pp-empty{padding:16px;text-align:center;color:var(--g400);font-size:13px}

/* ══ AUTOCOMPLETE ══════════════════════════════════════════════ */
.ac-wrap{position:relative;width:100%}
.ac-input{width:100%;border:1px solid var(--fm-bord);border-radius:var(--r-md);padding:8px 12px 8px 32px;font-size:13px;outline:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 8px center;transition:border-color .15s,box-shadow .15s;color:var(--g800);font-family:'Cairo',sans-serif;height:36px}
.ac-input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow)}
.ac-input::placeholder{color:var(--g300);font-weight:400}
.ac-drop{display:none;position:fixed;background:var(--white);border:1.5px solid var(--p);border-radius:var(--r-lg);box-shadow:var(--sh-xl);z-index:999999;overflow:hidden}
.ac-drop.open{display:block;animation:dd-in .15s ease}
.ac-count{padding:5px 12px;font-size:10px;color:var(--g400);background:var(--g50);border-bottom:1px solid var(--bord-l);font-weight:700}
.ac-list{max-height:200px;overflow-y:auto}
.ac-item{padding:9px 13px;cursor:pointer;font-size:13px;color:var(--g800);border-bottom:1px solid var(--bord-l);display:flex;align-items:center;gap:9px;transition:all var(--t-fast)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.foc{background:var(--p-l);color:var(--p-d)}
.ac-item.sel{background:var(--p-ll);font-weight:700;color:var(--p-d)}
.ac-item-code{font-family:monospace;font-size:11px;font-weight:800;color:var(--p);background:var(--p-l);padding:2px 6px;border-radius:4px;flex-shrink:0}
.ac-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-empty{padding:16px;text-align:center;color:var(--g400);font-size:12.5px}
mark.ach{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px;font-style:normal;font-weight:800}
.ac-clr{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:17px;height:17px;border-radius:50%;background:var(--g300);color:#fff;border:none;font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background var(--t-fast);z-index:2;padding:0}
.ac-clr:hover{background:var(--danger-d)}
.ac-wrap .ac-input.has-val{padding-right:12px}
#linesTable .ac-input{height:31px;padding:4px 8px 4px 26px;font-size:12px;border-radius:var(--r-sm)}
#linesTable .ac-drop{min-width:280px}

/* ══ TOOLBAR ═══════════════════════════════════════════════════ */
.toolbar{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:9px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;box-shadow:var(--sh-xs)}
.search-wrap{flex:1;min-width:180px;position:relative}
.search-wrap i{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--g300);font-size:12px;pointer-events:none}
.search-wrap input{width:100%;padding:7px 34px 7px 12px;border:1px solid var(--border);border-radius:var(--r-md);font-size:13px;font-family:'Cairo',sans-serif;outline:none;color:var(--g900);background:var(--white);transition:border-color .15s,box-shadow .15s;height:34px}
.search-wrap input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-glow)}
.search-wrap input::placeholder{color:var(--g300)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-full);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--g500);transition:all .15s;text-decoration:none;white-space:nowrap;font-family:'Cairo',sans-serif;height:34px}
.chip:hover{border-color:var(--p);color:var(--p);text-decoration:none}
.chip.on,.chip.active{border-color:var(--p);background:var(--p-l);color:var(--p-d)}
.chip.danger{border-color:var(--danger-d);color:var(--danger-d)}
.chip.success{border-color:var(--success);color:var(--success)}

/* ══ BULK BAR ══════════════════════════════════════════════════ */
.bulk-bar{display:none;align-items:center;gap:8px;flex-wrap:wrap;background:var(--white);border:1.5px solid var(--p);border-radius:var(--r-lg);padding:8px 14px;margin-bottom:12px;box-shadow:0 2px 12px rgba(67,97,238,.12)}
.bulk-bar.show{display:flex}
.bb-sel{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--p-d);padding:4px 12px;background:var(--p-l);border-radius:var(--r-full);white-space:nowrap}
.bb-sel span{font-size:15px;font-weight:900}
.bb-divider,.bb-div{width:1px;height:26px;background:var(--bord-l);flex-shrink:0}
.bb-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--white);font-size:12px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;color:var(--g700);transition:all .15s;white-space:nowrap}
.bb-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-l)}
.bb-dup:hover{border-color:var(--purple-d);color:var(--purple-d);background:var(--purple-l)}
.bb-print:hover{border-color:var(--info-d);color:var(--info-d);background:var(--info-l)}
.bb-exp:hover{border-color:var(--success);color:var(--success);background:var(--success-l)}
.bb-del{border-color:var(--bord-l);color:var(--g400)}
.bb-del:hover{border-color:var(--danger-d);color:var(--danger-d);background:var(--danger-l)}
.bb-cls{margin-right:auto;background:none;border:none;font-size:12px;color:var(--g400);cursor:pointer;font-family:'Cairo',sans-serif;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:var(--r-sm);transition:all .15s}
.bb-cls:hover{color:var(--danger-d);background:var(--danger-l)}

/* ══ PAGER ═════════════════════════════════════════════════════ */
.pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:14px}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--white);font-size:12.5px;font-weight:600;color:var(--g700);text-decoration:none;transition:all .15s;cursor:pointer;font-family:'Cairo',sans-serif}
.pg-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-l);text-decoration:none}
.pg-btn.cur{border-color:var(--p);background:var(--p);color:#fff;pointer-events:none}
.pg-btn.dis{opacity:.35;pointer-events:none;cursor:default}
.pg-info{font-size:11.5px;color:var(--g400);margin:0 6px}

/* ══ ROW ACTIONS ═══════════════════════════════════════════════ */
.row-acts{opacity:0;transition:opacity .15s;display:flex;gap:4px}
tr:hover .row-acts{opacity:1}
div:hover>.row-acts,.tree-row:hover .row-acts,.list-row:hover .row-acts{opacity:1}
.act-btn{width:27px;height:27px;border-radius:5px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .12s;color:var(--g500);text-decoration:none}
.act-btn:hover{border-color:var(--p);color:var(--p);background:var(--p-l);text-decoration:none}
.act-btn.del:hover{border-color:var(--danger-d);color:var(--danger-d);background:var(--danger-l)}
.act-btn.success:hover{border-color:var(--success);color:var(--success);background:var(--success-l)}

/* ══ KPI MINI (list screens) ═══════════════════════════════════ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.kpi-ico{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.kpi-val{font-size:19px;font-weight:900;line-height:1;color:var(--g900)}
.kpi-lbl{font-size:11px;color:var(--g400);margin-top:2px;font-weight:600}

/* ══ CONFIRM DIALOG ════════════════════════════════════════════ */
#confirmOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#confirmOverlay.show{display:flex}
#confirmBox{background:var(--white);border-radius:var(--r-xl);padding:28px 28px 22px;width:min(420px,92vw);box-shadow:var(--sh-xl);text-align:center;border:1px solid var(--border)}
#confirmBox .confirm-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px}
#confirmBox h5{font-size:16px;font-weight:900;color:var(--g900);margin:0 0 8px}
#confirmBox p{font-size:13px;color:var(--g500);margin:0 0 22px;line-height:1.6}
#confirmBox .confirm-actions{display:flex;gap:10px;justify-content:center}

/* ══ MISC ══════════════════════════════════════════════════════ */
.nav-tabs{border-bottom:1.5px solid var(--border);display:flex;gap:2px;margin-bottom:16px}
.nav-tabs .nav-link{color:var(--g500);padding:9px 16px;font-size:13px;font-weight:700;border:none;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all var(--t-fast);text-decoration:none;cursor:pointer;background:none;border-radius:var(--r-sm) var(--r-sm) 0 0}
.nav-tabs .nav-link:hover{color:var(--g700);background:var(--g50)}
.nav-tabs .nav-link.active{color:var(--p);border-bottom-color:var(--p);background:var(--p-l)}
.modal-content{border:none;border-radius:var(--r-xl);box-shadow:var(--sh-xl)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-body{padding:20px}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--g50);border-radius:0 0 var(--r-xl) var(--r-xl)}
.dropdown-menu{border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:5px;font-size:13px}
.dropdown-item{padding:7px 12px;color:var(--g700);transition:all var(--t-fast);border-radius:var(--r-sm)}
.dropdown-item:hover{background:var(--p-l);color:var(--p)}
.pagination{display:flex;gap:4px;align-items:center;margin:0}
.page-link{padding:5px 11px;border:1px solid var(--border);border-radius:var(--r-md);color:var(--g600);font-size:13px;text-decoration:none;transition:all var(--t-fast);font-weight:700}
.page-link:hover{background:var(--p-l);border-color:var(--p);color:var(--p)}
.page-item.active .page-link{background:var(--p);border-color:var(--p);color:#fff}
.page-item.disabled .page-link{opacity:.4;pointer-events:none}
.empty-state{text-align:center;padding:56px 20px;color:var(--g400)}
.empty-state i{font-size:44px;margin-bottom:14px;opacity:.18;display:block}
.empty-state h5{font-size:15px;font-weight:800;color:var(--g600);margin-bottom:7px}
.empty-state p{font-size:13px;color:var(--g400);margin-bottom:18px}
.doc-num{font-size:11.5px;color:var(--g500);background:var(--g100);padding:2px 9px;border-radius:var(--r-full);border:1px solid var(--g200);font-weight:700;font-family:monospace}
.skeleton{background:linear-gradient(90deg,var(--g100) 25%,var(--g50) 50%,var(--g100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);font-size:11px;font-weight:700;background:var(--g100);color:var(--g600);border:1px solid var(--g200)}
.tag-blue{background:var(--p-l);color:var(--p-d);border-color:var(--p-ll)}
.tag-green{background:var(--success-l);color:var(--success-d);border-color:var(--success-ll)}
.tag-red{background:var(--danger-l);color:var(--danger-d);border-color:var(--danger-ll)}
.coa-tree-node{cursor:pointer;transition:background .1s}
.coa-tree-node:hover{background:var(--p-l)}
.coa-tree-node.active{background:var(--p-l);color:var(--p-d);font-weight:700}
.coa-indent{padding-right:16px}

/* Status toast */
.status-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:8000;padding:10px 20px;background:#0f172a;color:#f1f5f9;border-radius:var(--r-lg);font-size:13px;font-weight:700;box-shadow:var(--sh-xl);display:none;align-items:center;gap:10px}

/* ══ MOBILE ════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--sb-w:258px}
  #main-content{margin-right:0!important}
  #topnav-hamburger{display:flex}
  .content-area{padding:14px 14px}
  .action-bar{padding:8px 14px;gap:5px}
  .page-header{padding:10px 14px}
  .page-header h4{font-size:15px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:1fr 1fr}
  .tnav-date{display:none}
  .save-bar{padding:10px 14px}
}
@media(max-width:500px){
  .kpi-grid,.kpi-row,.dash-grid{grid-template-columns:1fr}
}

/* ══ BOOTSTRAP OVERRIDES ══════════════════════════════════════ */
button.tnav-user-pill{border:1px solid var(--g200);outline:none}
button.tnav-user-pill::after{display:none}
button.tnav-user-pill:focus{box-shadow:none;outline:none}

.row{--bs-gutter-x:1rem}
.col,[class*="col-"]{padding-right:8px;padding-left:8px}
.g-2,.g-3{--bs-gutter-y:.5rem;--bs-gutter-x:.5rem}
.mb-3{margin-bottom:14px!important}.mb-4{margin-bottom:20px!important}.mb-2{margin-bottom:10px!important}
.me-1{margin-left:4px!important}.me-2{margin-left:8px!important}.me-3{margin-left:12px!important}
.ms-auto{margin-right:auto!important}.d-flex{display:flex!important}
.align-items-center{align-items:center!important}.justify-content-between{justify-content:space-between!important}
.fw-bold,.fw-semibold{font-weight:700!important}.fw-normal{font-weight:400!important}
.text-muted{color:var(--g400)!important}.text-primary{color:var(--p)!important}
.text-success{color:var(--success-d)!important}.text-danger{color:var(--danger-d)!important}
.text-warning{color:var(--warning-d)!important}.text-end{text-align:left!important}
.small{font-size:12px!important}.fs-5{font-size:18px!important}.fs-6{font-size:14px!important}
.p-3{padding:14px!important}.py-2{padding-top:8px!important;padding-bottom:8px!important}
.px-3{padding-right:14px!important;padding-left:14px!important}
.rounded{border-radius:var(--r-md)!important}.rounded-circle{border-radius:50%!important}
.border{border:1px solid var(--border)!important}.shadow-sm{box-shadow:var(--sh-sm)!important}
.overflow-hidden{overflow:hidden!important}.w-100{width:100%!important}
.position-relative{position:relative!important}.position-absolute{position:absolute!important}
.opacity-50{opacity:.5!important}.d-none{display:none!important}.d-block{display:block!important}
.gap-1{gap:4px!important}.gap-2{gap:8px!important}.gap-3{gap:12px!important}
.flex-wrap{flex-wrap:wrap!important}.flex-column{flex-direction:column!important}
.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}

/* ══ SELECT OVERFLOW FIX ══════════════════════════════════════ */
.tnav-user-pill,.tnav-date,.card,.card-body,.content-area,
.col-md-2,.col-md-3,.col-md-4,.col-md-6,.row,.form-row,.g-2,
.page-header,.action-bar{overflow:visible!important}
select.form-select,select.form-control,select.form-select-sm{position:relative;z-index:10}
select.form-select:focus,select.form-control:focus{z-index:9999}

#sb-collapse-btn{width:32px;height:32px;border-radius:var(--r-md);background:var(--g100);border:1px solid var(--border);color:var(--g500);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;font-size:13px}
#sb-collapse-btn:hover{background:var(--p-l);color:var(--p);border-color:var(--p-ll)}

.app-nav-dropdown-list,.app-module-dropdown,[data-nav-dropdown],.module-submenu,.accounting-dropdown,.nav-app-sub{max-height:calc(100vh - 80px)!important;overflow-y:auto!important;overflow-x:hidden!important}
.app-nav-dropdown-list::-webkit-scrollbar{width:4px}
.app-nav-dropdown-list::-webkit-scrollbar-thumb{background:var(--g300);border-radius:4px}

/* ══ LINES TABLE — number alignment ═══════════════════════════ */
.ltbl input[type=number], .po-tbl input[type=number],
#linesTable input[type=number], #tbody input[type=number] {
  text-align:left !important;
  font-weight:700 !important;
  color:var(--g900) !important;
  font-variant-numeric:tabular-nums;
}
.ltbl th.num, .po-tbl th.num,
#linesTable th.num { text-align:left !important }
.line-tot { text-align:left !important }

/* ══ UOM Select — lines table ══════════════════════════════════ */
select.uom-sel, select.l-uom {
  width: 100% !important;
  height: 32px !important;
  padding: 0 6px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  font-size: 12.5px !important;
  font-family: 'Cairo', sans-serif !important;
  color: var(--g800) !important;
  background: transparent !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  box-shadow: none !important;
}
select.uom-sel:hover, select.l-uom:hover {
  border-color: var(--g300) !important;
  background: var(--g50) !important;
}
select.uom-sel:focus, select.l-uom:focus {
  border-color: var(--p) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 2px var(--p-glow) !important;
}
select.uom-sel:disabled, select.l-uom:disabled {
  opacity: .6;
  cursor: not-allowed !important;
}
select.uom-sel:hover, select.l-uom:hover {
  border-color: var(--g400);
}
select.uom-sel:focus, select.l-uom:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 2px var(--p-glow);
}
select.uom-sel:disabled, select.l-uom:disabled {
  background: var(--g50);
  opacity: .6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE  —  [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0f1117;
  --bg2:         #1a1d27;
  --bg3:         #222538;
  --white:       #1e2133;
  --g50:         #1a1d27;
  --g100:        #222538;
  --g200:        #2d3148;
  --g300:        #3d4268;
  --g400:        #8b92b8;
  --g500:        #a0a8cc;
  --g600:        #b8bee0;
  --g700:        #d0d4f0;
  --g800:        #e4e6f8;
  --g900:        #f0f1fc;
  --border:      #2d3148;
  --text:        #e4e6f8;
  --text-muted:  #8b92b8;
  --card-bg:     #1e2133;
  --card-shadow: 0 2px 8px rgba(0,0,0,.4);
  --sidebar-bg:  #13151f;
  --sidebar-text:#c8ccec;
  --topnav-bg:   #1a1d27;
  --input-bg:    #222538;
  --table-stripe:#1e2133;
  --table-hover: #252840;
}

/* Layout */
[data-theme="dark"] body              { background: var(--bg); color: var(--text); }
[data-theme="dark"] #sidebar          { background: var(--sidebar-bg); border-color: var(--border); }
[data-theme="dark"] #topnav           { background: var(--topnav-bg); border-color: var(--border); box-shadow: 0 1px 0 var(--border); }
[data-theme="dark"] .content-area     { background: var(--bg); }

/* Cards & Panels */
[data-theme="dark"] .card,
[data-theme="dark"] .sec,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .pp-drop          { background: var(--card-bg); border-color: var(--border); box-shadow: var(--card-shadow); }
[data-theme="dark"] .sec-head         { background: var(--g50); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .sec-body         { background: var(--card-bg); }

/* Forms */
[data-theme="dark"] .fi,
[data-theme="dark"] .fs,
[data-theme="dark"] select.fi,
[data-theme="dark"] input[type="text"].fi,
[data-theme="dark"] input[type="number"].fi,
[data-theme="dark"] input[type="date"].fi,
[data-theme="dark"] input[type="email"].fi,
[data-theme="dark"] textarea.fi       { background: var(--input-bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .fi:focus         { border-color: var(--p); background: var(--bg3); }
[data-theme="dark"] .fi:disabled,
[data-theme="dark"] .fi[readonly]     { background: var(--g100); color: var(--g500); }
[data-theme="dark"] .fl               { color: var(--g600); }

/* Tables */
[data-theme="dark"] table             { color: var(--text); }
[data-theme="dark"] thead th          { background: var(--g100); color: var(--g700); border-color: var(--border); }
[data-theme="dark"] tbody tr          { border-color: var(--border); }
[data-theme="dark"] tbody tr:hover    { background: var(--table-hover); }
[data-theme="dark"] tbody tr:nth-child(even) { background: var(--table-stripe); }
[data-theme="dark"] td, [data-theme="dark"] th { border-color: var(--border); }

/* Buttons */
[data-theme="dark"] .btn-light        { background: var(--g100); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-light:hover  { background: var(--g200); }
[data-theme="dark"] .btn-outline-secondary { border-color: var(--border); color: var(--g600); }

/* Navigation */
[data-theme="dark"] .nav-item-link    { color: var(--sidebar-text); }
[data-theme="dark"] .nav-item-link:hover,
[data-theme="dark"] .nav-item-link.active { background: var(--g100); color: var(--p-l); }
[data-theme="dark"] .nav-section-label { color: var(--g400); }
[data-theme="dark"] .sb-group-head    { background: var(--g50); border-color: var(--border); color: var(--g600); }

/* Page Header */
[data-theme="dark"] .page-header      { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .page-header h4   { color: var(--text); }

/* KPI Cards */
[data-theme="dark"] .kpi-card         { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .kpi-val          { color: var(--text); }
[data-theme="dark"] .kpi-lbl          { color: var(--text-muted); }

/* Toolbar & Chips */
[data-theme="dark"] .toolbar          { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .chip             { background: var(--g100); color: var(--g600); border-color: var(--border); }
[data-theme="dark"] .chip.active      { background: var(--p); color: #fff; }

/* Bulk bar */
[data-theme="dark"] .bulk-bar         { background: var(--g100); border-color: var(--p); }

/* Topnav buttons */
[data-theme="dark"] #dark-mode-toggle { background: var(--g100); border-color: var(--border); color: var(--p-l); }
[data-theme="dark"] #sb-collapse-btn  { background: var(--g100); border-color: var(--border); color: var(--g600); }
[data-theme="dark"] #notifBellBtn     { background: var(--g100); border-color: var(--border); }

/* Flash messages */
[data-theme="dark"] .flash-msg        { box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* Misc */
[data-theme="dark"] .text-muted       { color: var(--text-muted) !important; }
[data-theme="dark"] hr                { border-color: var(--border); }
[data-theme="dark"] .breadcrumb-item  { color: var(--text-muted); }
[data-theme="dark"] .breadcrumb-item a { color: var(--p-l); }
[data-theme="dark"] .empty-state      { color: var(--g500); }
[data-theme="dark"] .badge.bg-light   { background: var(--g100) !important; color: var(--text) !important; }

/* ═══ Confirm Dialog ═══ */
#erp-confirm-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:99999;align-items:center;justify-content:center}
#erp-confirm-overlay.active{display:flex}
#erp-confirm-dialog{background:#fff;border-radius:16px;padding:28px 32px 20px;min-width:360px;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.25);direction:rtl;animation:ecd-pop .2s ease}
@keyframes ecd-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.ecd-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.ecd-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ecd-title{font-size:16px;font-weight:800;margin:0 0 4px;color:var(--g900,#111)}
.ecd-msg{font-size:13px;color:var(--g500,#6b7280);margin:0;line-height:1.5}
.ecd-footer{display:flex;gap:10px;justify-content:flex-start}
.ecd-cancel,.ecd-confirm{padding:9px 22px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:inherit}
.ecd-cancel{background:var(--g100,#f3f4f6);color:var(--g700,#374151)}
.ecd-cancel:hover{background:var(--g200,#e5e7eb)}
.ecd-confirm{color:#fff;display:flex;align-items:center;gap:6px}
.ecd-confirm i{font-size:13px}
/* Type colors */
.ecd-delete .ecd-icon{background:#fef2f2;color:#dc2626}
.ecd-delete .ecd-confirm{background:#dc2626}
.ecd-delete .ecd-confirm:hover{background:#b91c1c}
.ecd-post .ecd-icon{background:#f0fdf4;color:#16a34a}
.ecd-post .ecd-confirm{background:#16a34a}
.ecd-post .ecd-confirm:hover{background:#15803d}
.ecd-cancel-type .ecd-icon{background:#fefce8;color:#ca8a04}
.ecd-cancel-type .ecd-confirm{background:#ca8a04}
.ecd-approve .ecd-icon{background:#eff6ff;color:#2563eb}
.ecd-approve .ecd-confirm{background:#2563eb}
.ecd-warning .ecd-icon{background:#fff7ed;color:#ea580c}
.ecd-warning .ecd-confirm{background:#ea580c}
/*
 * ═══════════════════════════════════════════════════════════════════════════
 * Fluid ERP — Design System v2.0
 * Extracted from showcase.html — March 2026
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  --p:#4361ee; --p-d:#3451d1; --p-l:#eef1fd; --p-ll:#e0e5fb;
  --p-glow:rgba(67,97,238,.16);
  --success:#0d9f6e; --success-d:#0b8a5e; --success-l:#e8faf3; --success-ll:#a7f3d0;
  --danger:#e5374e; --danger-d:#d02040; --danger-l:#fef1f2; --danger-ll:#fecdd3;
  --warning:#f59e0b; --warning-d:#d97706; --warning-l:#fffbeb; --warning-ll:#fde68a;
  --info:#0ea5e9; --info-d:#0284c7; --info-l:#f0f9ff; --info-ll:#bae6fd;
  --purple:#8b5cf6; --purple-d:#7c3aed; --purple-l:#f5f3ff; --purple-ll:#ddd6fe;
  --teal:#14b8a6; --teal-d:#0d9488; --teal-l:#f0fdfa;
  --g0:#fff; --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0; --g300:#cbd5e1;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569; --g700:#334155;
  --g800:#1e293b; --g900:#0f172a;
  --bg:#f1f4f9; --white:#fff; --border:#e2e8f0; --bord-l:#edf2f7;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;
  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04);
  --sh-lg:0 10px 15px rgba(0,0,0,.07),0 4px 6px rgba(0,0,0,.04);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════════════════════════════════ */
.page-header {
  background: var(--white); padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  box-shadow: var(--sh-xs);
}
.page-header h4 { margin:0; font-size:16px; font-weight:800; color:var(--g900); display:flex; align-items:center; gap:9px; }
.ph-actions { display:flex; align-items:center; gap:7px; direction:ltr; }
.ph-icon { width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; color:#fff; }
.ph-sub { font-size:12px; color:var(--g500); margin-top:1px; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════════ */
.btn { border-radius:var(--r-md); font-size:13px; font-weight:700; padding:7px 16px; display:inline-flex; align-items:center; gap:7px; transition:all .15s; border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:'Cairo',sans-serif; line-height:1.4; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:var(--r-sm); }
.btn-primary { background:var(--p); color:#fff; box-shadow:0 1px 3px rgba(67,97,238,.3); }
.btn-primary:hover { background:var(--p-d); transform:translateY(-1px); box-shadow:0 4px 12px rgba(67,97,238,.4); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:var(--success-d); }
.btn-danger  { background:var(--danger-d); color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-light   { background:var(--white); border-color:var(--g200); color:var(--g600); box-shadow:var(--sh-xs); }
.btn-light:hover { background:var(--g50); }
.btn-outline-primary { color:var(--p); border-color:var(--p-ll); background:var(--p-l); }
.btn-outline-primary:hover { background:var(--p); color:#fff; }
.btn-outline-danger  { color:var(--danger-d); border-color:var(--danger-ll); background:var(--danger-l); }
.btn-outline-danger:hover { background:var(--danger-d); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   KPI STRIP
══════════════════════════════════════════════════════════════════════════ */
.kpi-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.kc { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; display:flex; align-items:center; gap:13px; position:relative; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer; transition:all .2s; box-shadow:var(--sh-xs); }
.kc::before { content:''; position:absolute; top:0; right:0; left:0; height:2.5px; background:var(--kc-clr,var(--p)); }
.kc:hover { border-color:var(--kc-clr,var(--p)); transform:translateY(-2px); box-shadow:var(--sh-md); }
.kc.active { border-color:var(--kc-clr,var(--p)); background:color-mix(in srgb, var(--kc-clr,var(--p)) 5%, white); }
.kc-icon { width:42px; height:42px; border-radius:var(--r-md); background:color-mix(in srgb,var(--kc-clr,var(--p)) 12%,transparent); color:var(--kc-clr,var(--p)); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.kc-val { font-size:22px; font-weight:900; color:var(--g900); line-height:1; }
.kc-lbl { font-size:11.5px; color:var(--g500); font-weight:600; margin-top:3px; }
.kc-blue{--kc-clr:var(--p)} .kc-green{--kc-clr:var(--success)} .kc-red{--kc-clr:var(--danger-d)} .kc-amber{--kc-clr:var(--warning-d)} .kc-purple{--kc-clr:var(--purple-d)} .kc-teal{--kc-clr:var(--teal-d)}

/* ══════════════════════════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════════════════════════ */
.toolbar { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:9px 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; box-shadow:var(--sh-xs); }
.search-wrap { flex:1; min-width:180px; position:relative; }
.search-wrap i { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--g300); font-size:12px; pointer-events:none; }
.search-wrap input { width:100%; padding:7px 34px 7px 12px; border:1px solid var(--border); border-radius:var(--r-md); font-size:13px; font-family:'Cairo',sans-serif; outline:none; color:var(--g900); height:34px; transition:border-color .15s; }
.search-wrap input:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-glow); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-full); font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--white); color:var(--g500); transition:all .15s; height:34px; font-family:'Cairo',sans-serif; text-decoration:none; }
.chip:hover { border-color:var(--p); color:var(--p); }
.chip.on,.chip.active { border-color:var(--p); background:var(--p-l); color:var(--p-d); }
.chip.danger { border-color:var(--danger-ll); background:var(--danger-l); color:var(--danger-d); }

/* ══════════════════════════════════════════════════════════════════════════
   BULK BAR
══════════════════════════════════════════════════════════════════════════ */
.bulk-bar { display:none; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--p); border-radius:var(--r-lg); padding:8px 14px; margin-bottom:12px; box-shadow:0 2px 12px rgba(67,97,238,.12); }
.bulk-bar.show { display:flex; animation:bb-in .2s ease; }
@keyframes bb-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.bb-sel { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--p-d); padding:4px 12px; background:var(--p-l); border-radius:var(--r-full); }
.bb-sel span { font-size:16px; font-weight:900; }
.bb-div { width:1px; height:26px; background:var(--bord-l); }
.bb-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--white); font-size:12px; font-weight:700; cursor:pointer; font-family:'Cairo',sans-serif; color:var(--g700); transition:all .15s; }
.bb-btn:hover { border-color:var(--p); color:var(--p); background:var(--p-l); }
.bb-btn.print:hover { border-color:var(--info-d); color:var(--info-d); background:var(--info-l); }
.bb-btn.exp:hover { border-color:var(--success); color:var(--success); background:var(--success-l); }
.bb-btn.del:hover { border-color:var(--danger-d); color:var(--danger-d); background:var(--danger-l); }
.bb-cls { margin-right:auto; background:none; border:none; font-size:12px; color:var(--g400); cursor:pointer; font-family:'Cairo',sans-serif; display:flex; align-items:center; gap:5px; padding:5px 9px; border-radius:var(--r-sm); }
.bb-cls:hover { background:var(--g100); color:var(--g600); }

/* ══════════════════════════════════════════════════════════════════════════
   DATA TABLE
══════════════════════════════════════════════════════════════════════════ */
.dt-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); margin-bottom:14px; }
table.dt { width:100%; border-collapse:collapse; }
table.dt thead th { background:#0f172a; color:#c8d3e8; padding:11px 14px; font-size:11px; font-weight:700; letter-spacing:.4px; text-align:right; white-space:nowrap; }
table.dt thead th.num { text-align:left; }
table.dt thead th a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
table.dt thead th a:hover { color:#fff; }
table.dt tbody td { padding:11px 14px; border-bottom:1px solid var(--bord-l); vertical-align:middle; font-size:13px; color:var(--g800); }
table.dt tbody tr { cursor:pointer; transition:background .1s; }
table.dt tbody tr:hover td { background:var(--p-l); }
table.dt tbody tr:last-child td { border-bottom:none; }
table.dt tfoot td { background:var(--g50); font-weight:800; border-top:1.5px solid var(--border); padding:10px 14px; }

/* Sort Arrows */
.sort-arrows { display:inline-flex; flex-direction:column; gap:1px; vertical-align:middle; margin-right:4px; }
.sort-arrows span { line-height:1; font-size:8px; color:rgba(255,255,255,.3); }
.sort-arrows span.on { color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   STATUS BADGE
══════════════════════════════════════════════════════════════════════════ */
.sb { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full); font-size:11px; font-weight:700; }
.sb::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
.sb-draft     { background:var(--g100);     color:var(--g600); }
.sb-pending   { background:var(--warning-l);color:var(--warning-d); }
.sb-confirmed { background:var(--p-l);      color:var(--p-d); }
.sb-approved  { background:var(--teal-l);   color:var(--teal-d); }
.sb-posted    { background:var(--purple-l); color:var(--purple-d); }
.sb-done      { background:var(--success-l);color:var(--success-d); }
.sb-cancelled { background:var(--danger-l); color:var(--danger-d); }
.sb-partial   { background:var(--warning-l);color:var(--warning-d); }
.sb-active    { background:var(--success-l);color:var(--success-d); }
.sb-inactive  { background:var(--g100);     color:var(--g500); }

/* ══════════════════════════════════════════════════════════════════════════
   ROW ACTIONS
══════════════════════════════════════════════════════════════════════════ */
.row-acts { opacity:0; transition:opacity .15s; display:flex; gap:4px; justify-content:center; }
tr:hover .row-acts { opacity:1; }
.act-btn { width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11.5px; transition:all .12s; color:var(--g500); text-decoration:none; }
.act-btn:hover { border-color:var(--p); color:var(--p); background:var(--p-l); }
.act-btn.del:hover { border-color:var(--danger-d); color:var(--danger-d); background:var(--danger-l); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════════════════ */
.pager { display:flex; align-items:center; gap:5px; margin-top:14px; padding:0 4px; }
.pg-btn { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 9px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--white); font-size:12.5px; font-weight:600; color:var(--g700); text-decoration:none; transition:all .15s; cursor:pointer; font-family:'Cairo',sans-serif; }
.pg-btn:hover { border-color:var(--p); color:var(--p); background:var(--p-l); }
.pg-btn.cur { border-color:var(--p); background:var(--p); color:#fff; }
.pg-btn.dis { opacity:.4; pointer-events:none; }
.pg-info { font-size:11.5px; color:var(--g400); margin:0 6px; flex:1; text-align:left; }

/* ══════════════════════════════════════════════════════════════════════════
   FLASH MESSAGES
══════════════════════════════════════════════════════════════════════════ */
.flash { padding:11px 16px; border-radius:var(--r-md); font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.flash.success { background:#0f172a; color:#4ade80; border:1px solid rgba(74,222,128,.2); }
.flash.error   { background:#0f172a; color:#f87171; border:1px solid rgba(248,113,113,.2); }
.flash.info    { background:#0f172a; color:#60a5fa; border:1px solid rgba(96,165,250,.2); }
.flash.warning { background:#0f172a; color:#fbbf24; border:1px solid rgba(251,191,36,.2); }

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════════════════════════════════ */
.content-area { padding:20px 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════════════ */
.empty { text-align:center; padding:60px 20px; color:var(--g400); }
.empty-icon { width:72px; height:72px; border-radius:50%; background:var(--g50); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--g300); margin:0 auto 18px; }
.empty h5 { font-size:15px; font-weight:800; color:var(--g600); margin-bottom:8px; }
.empty p  { font-size:13px; color:var(--g400); margin-bottom:20px; }

/* ══════════════════════════════════════════════════════════════════════════
   FORM SECTION
══════════════════════════════════════════════════════════════════════════ */
.sec { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; box-shadow:var(--sh-xs); }
.sec-head { padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--g50); }
.sec-head-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.sec-title { font-size:13px; font-weight:800; color:var(--g900); }
.sec-sub { font-size:11px; color:var(--g500); }
.sec-body { padding:18px; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.row-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
.fg { margin-bottom:14px; }
.fg:last-child { margin-bottom:0; }
.fl { font-size:11.5px; font-weight:700; color:var(--g500); margin-bottom:5px; display:block; }
.fi { border:1px solid #d1d9e6; border-radius:var(--r-md); padding:8px 12px; font-size:13px; font-family:'Cairo',sans-serif; background:var(--white); color:var(--g900); outline:none; transition:border-color .15s,box-shadow .15s; height:36px; width:100%; }
.fi:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-glow); }
.fi::placeholder { color:var(--g300); }
.req { color:var(--danger-d); }

/* ══════════════════════════════════════════════════════════════════════════
   SAVE BAR
══════════════════════════════════════════════════════════════════════════ */
.save-bar { position:sticky; bottom:0; background:var(--white); border-top:1px solid var(--border); padding:12px 22px; display:flex; align-items:center; gap:10px; box-shadow:0 -4px 16px rgba(0,0,0,.06); direction:ltr; z-index:100; }
.save-bar-info { margin-left:auto; font-size:12px; color:var(--g400); direction:rtl; }

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENT HEADER
══════════════════════════════════════════════════════════════════════════ */
.doc-hdr { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:14px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; box-shadow:var(--sh-xs); }
.doc-hdr-ref { font-family:monospace; font-size:13px; font-weight:700; color:var(--p-d); background:var(--p-l); padding:3px 10px; border-radius:var(--r-full); display:inline-block; margin-bottom:8px; }
.doc-hdr-title { font-size:20px; font-weight:900; color:var(--g900); margin-bottom:4px; }
.doc-meta-grid { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.doc-meta-item { text-align:left; }
.doc-meta-lbl { font-size:10.5px; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.doc-meta-val { font-size:14px; font-weight:700; color:var(--g800); }
.doc-meta-sep { width:1px; height:36px; background:var(--bord-l); }

/* ══════════════════════════════════════════════════════════════════════════
   FLOW STEPS
══════════════════════════════════════════════════════════════════════════ */
.flow-steps { display:flex; align-items:center; }
.flow-step { padding:5px 14px; font-size:12px; font-weight:700; color:var(--g400); background:var(--g100); border:1.5px solid var(--g200); }
.flow-step:first-child { border-radius:var(--r-full) 0 0 var(--r-full); }
.flow-step:last-child  { border-radius:0 var(--r-full) var(--r-full) 0; }
.flow-step.done   { background:var(--success-l); color:var(--success-d); border-color:var(--success-ll); }
.flow-step.active { background:var(--p); color:#fff; border-color:var(--p); }

/* ══════════════════════════════════════════════════════════════════════════
   LINES TABLE (for documents)
══════════════════════════════════════════════════════════════════════════ */
.lt-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:14px; box-shadow:var(--sh-xs); }
.lt-hdr { background:var(--g50); border-bottom:1px solid var(--border); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:800; color:var(--g700); }
table.lt { width:100%; border-collapse:collapse; }
table.lt thead th { background:var(--g50); color:var(--g500); padding:9px 10px; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-align:right; border-bottom:1.5px solid var(--border); }
table.lt thead th.num { text-align:left; }
table.lt tbody td { padding:6px 8px; border-bottom:1px solid var(--bord-l); vertical-align:middle; }
table.lt tbody tr:hover td { background:var(--p-l); }
.lt-foot { background:var(--g50); border-top:1.5px solid var(--border); padding:14px 20px; display:flex; justify-content:flex-end; gap:28px; }
.lt-total-lbl { font-size:11px; color:var(--g400); font-weight:600; margin-bottom:2px; }
.lt-total-val { font-size:17px; font-weight:900; color:var(--g900); }
.lt-total-val.grand { font-size:22px; color:var(--p); }
.li { width:100%; border:1px solid transparent; border-radius:var(--r-sm); padding:5px 8px; font-size:12.5px; font-family:'Cairo',sans-serif; background:transparent; outline:none; transition:all .15s; }
.li:hover { border-color:var(--g300); background:var(--g50); }
.li:focus { border-color:var(--p); background:var(--white); box-shadow:0 0 0 2px var(--p-glow); }
.li[type=number] { text-align:left; font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD WIDGETS
══════════════════════════════════════════════════════════════════════════ */
.dw { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.dw-head { padding:11px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:800; color:var(--g900); background:var(--g50); }
.dw-body { padding:14px 16px; }
.dw-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.dw-grid-3 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; margin-bottom:14px; }

/* ══════════════════════════════════════════════════════════════════════════
   REPORT FILTER PANEL
══════════════════════════════════════════════════════════════════════════ */
.filter-panel { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 20px; margin-bottom:14px; box-shadow:var(--sh-xs); }
.filter-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:end; }
.rpt-export { display:flex; gap:7px; }
.rpt-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-md); border:1.5px solid; font-size:12px; font-weight:700; cursor:pointer; font-family:'Cairo',sans-serif; transition:all .15s; }
.rpt-btn.excel { color:#16a34a; border-color:#86efac; background:#f0fdf4; }
.rpt-btn.excel:hover { background:#16a34a; color:#fff; }
.rpt-btn.print { color:var(--g600); border-color:var(--g200); background:var(--white); }
.rpt-btn.print:hover { background:var(--g100); }

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════════════════════════════════════ */
.settings-nav { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.settings-nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--bord-l); cursor:pointer; transition:background .12s; }
.settings-nav-item:last-child { border-bottom:none; }
.settings-nav-item:hover { background:var(--p-l); }
.settings-nav-item.active { background:var(--p-l); border-left:3px solid var(--p); }
.settings-nav-icon { width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.settings-main { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.settings-group { padding:20px; border-bottom:1px solid var(--bord-l); }
.settings-group:last-child { border-bottom:none; }
.settings-group-title { font-size:13px; font-weight:800; color:var(--g900); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--bord-l); gap:20px; }
.settings-row:last-child { border-bottom:none; }
.settings-lbl { font-size:13px; font-weight:700; color:var(--g800); }
.settings-desc { font-size:11.5px; color:var(--g500); margin-top:2px; }
.toggle { width:44px; height:24px; background:var(--g200); border-radius:var(--r-full); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; border:none; }
.toggle.on { background:var(--p); }
.toggle::after { content:''; position:absolute; top:3px; right:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle.on::after { transform:translateX(-20px); }

/* ══════════════════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════════════════ */
.tabs { border-bottom:1.5px solid var(--border); display:flex; gap:0; background:var(--white); padding:0 22px; }
.tab { padding:10px 18px; font-size:13px; font-weight:700; color:var(--g500); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:7px; text-decoration:none; }
.tab:hover { color:var(--g800); background:var(--g50); }
.tab.active { color:var(--p); border-bottom-color:var(--p); background:var(--p-l); }
.tab-count { background:var(--g200); color:var(--g600); font-size:10px; padding:1px 6px; border-radius:var(--r-full); font-weight:800; }
.tab.active .tab-count { background:var(--p); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   POS
══════════════════════════════════════════════════════════════════════════ */
.pos-layout { display:grid; grid-template-columns:1fr 360px; min-height:600px; }
.pos-left { background:var(--bg); padding:16px; overflow-y:auto; }
.pos-right { background:var(--white); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.pos-top { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.pos-cat-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.pos-cat-chip { padding:5px 14px; border-radius:var(--r-full); font-size:12px; font-weight:700; cursor:pointer; border:1.5px solid var(--border); background:var(--white); color:var(--g500); white-space:nowrap; transition:all .15s; }
.pos-cat-chip.active { background:var(--p); color:#fff; border-color:var(--p); }
.pos-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.pos-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:12px; cursor:pointer; transition:all .15s; text-align:center; }
.pos-card:hover { border-color:var(--p); box-shadow:var(--sh-md); transform:translateY(-1px); }
.pos-card-img { width:52px; height:52px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 8px; }
.pos-card-name { font-size:12px; font-weight:700; color:var(--g800); margin-bottom:4px; }
.pos-card-price { font-size:14px; font-weight:900; color:var(--p-d); }
.pos-cart-head { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:800; }
.pos-cart-body { flex:1; overflow-y:auto; padding:8px 0; }
.cart-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--bord-l); }
.cart-item-name { flex:1; font-size:13px; font-weight:700; }
.cart-item-qty { display:flex; align-items:center; gap:6px; }
.qty-btn { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--g200); background:var(--white); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--g600); transition:all .12s; }
.qty-btn:hover { border-color:var(--p); color:var(--p); }
.cart-item-price { font-size:13px; font-weight:800; color:var(--g900); min-width:70px; text-align:left; }
.pos-cart-foot { border-top:1px solid var(--border); padding:14px; }
.pos-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pos-total-lbl { font-size:12px; color:var(--g500); }
.pos-total-val { font-size:14px; font-weight:700; color:var(--g800); }
.pos-grand { font-size:18px !important; font-weight:900 !important; color:var(--p) !important; }
.pos-pay-btn { width:100%; padding:14px; border-radius:var(--r-lg); background:var(--p); color:#fff; border:none; font-size:15px; font-weight:800; cursor:pointer; font-family:'Cairo',sans-serif; margin-top:10px; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.pos-pay-btn:hover { background:var(--p-d); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════════════════════ */
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-muted { color:var(--g400); }
.fw-bold { font-weight:700; }
.fw-800 { font-weight:800; }
.me-1 { margin-left:4px; }
.me-2 { margin-left:8px; }
.mb-3 { margin-bottom:16px; }
.mb-2 { margin-bottom:8px; }
.py-5 { padding-top:48px; padding-bottom:48px; }
.d-flex { display:flex; }
.d-block { display:block; }
.align-items-center { align-items:center; }
.justify-content-between { justify-content:space-between; }
.justify-content-center { justify-content:center; }
.gap-2 { gap:8px; }
.flex-wrap { flex-wrap:wrap; }
.opacity-25 { opacity:.25; }
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); }
.table-responsive { overflow-x:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP COMPATIBILITY BRIDGE
   Maps remaining Bootstrap form/table classes to DS styles
══════════════════════════════════════════════════════════════════════════ */
.form-control, .form-select {
  border: 1px solid #d1d9e6; border-radius: var(--r-md);
  padding: 8px 12px; font-size: 13px; font-family: 'Cairo', sans-serif;
  background: var(--white); color: var(--g900); outline: none;
  transition: border-color .15s, box-shadow .15s;
  height: 36px; width: 100%;
}
.form-control:focus, .form-select:focus {
  border-color: var(--p); box-shadow: 0 0 0 3px var(--p-glow);
}
.form-control::placeholder { color: var(--g300); }
.form-control:disabled, .form-control[readonly] { background: var(--g50); color: var(--g500); }
.form-control-sm, .form-select-sm { padding: 6px 10px; font-size: 12.5px; height: 32px; }
.form-label, .col-form-label { font-size: 11.5px; font-weight: 700; color: var(--g500); margin-bottom: 5px; display: block; }
.input-group .form-control { border-radius: var(--r-sm) 0 0 var(--r-sm); }
textarea.form-control { height: auto; min-height: 70px; }

/* ══════════════════════════════════════════════════════════════════════════
   EXTRA KPI VARIANTS
══════════════════════════════════════════════════════════════════════════ */
.kc-info   { --kc-clr: var(--info-d); }
.kc-orange { --kc-clr: #f97316; }
.kc-gray   { --kc-clr: var(--g500); }
.kc-trend  { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full); flex-shrink: 0; }
.kc-trend.up   { background: var(--success-l); color: var(--success-d); }
.kc-trend.down { background: var(--danger-l);  color: var(--danger-d); }

/* ══════════════════════════════════════════════════════════════════════════
   FLASH / ALERT MESSAGES
══════════════════════════════════════════════════════════════════════════ */
.flash { padding: 11px 16px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.flash.success { background: #0f172a; color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.flash.error   { background: #0f172a; color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.flash.info    { background: #0f172a; color: #60a5fa; border: 1px solid rgba(96,165,250,.2); }
.flash.warning { background: #0f172a; color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════════════ */
.empty-state, .empty { text-align: center; padding: 60px 20px; color: var(--g400); }
.empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--g50); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--g300); margin: 0 auto 18px; }
.empty-state h5, .empty h5 { font-size: 15px; font-weight: 800; color: var(--g600); margin-bottom: 8px; }
.empty-state p, .empty p { font-size: 13px; color: var(--g400); margin-bottom: 20px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS LAYOUT GRID  (used in inline style, now a class)
══════════════════════════════════════════════════════════════════════════ */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }

/* ══ Quick-Add Button (qa-btn) ═══════════════════════════════ */
.qa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--success-d, #16a34a);
    background: var(--success-l, #f0fdf4);
    color: var(--success-d, #16a34a);
    border-radius: var(--r-md, 8px);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all .15s;
}
.qa-btn:hover { background: var(--success-d, #16a34a); color: #fff; }
.qa-btn.qa-sm { width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }

/* ══ Lines Table Footer (Odoo-style) ═════════════════════════ */
table.lt tfoot td,
#linesTable tfoot td,
#billLines + * tfoot td {
    padding: 6px 14px !important;
    border-top: 1px solid var(--bord-l) !important;
    background: var(--g50, #f8f9fc) !important;
}
.lt-add-link {
    background: none;
    border: none;
    font-family: Cairo, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s;
}
.lt-add-link.primary { color: var(--p, #4361ee); }
.lt-add-link.primary:hover { background: var(--p-l); }
.lt-add-link.success { color: var(--success-d, #16a34a); }
.lt-add-link.success:hover { background: var(--success-l, #f0fdf4); }
.lt-add-sep { color: var(--bord-l, #e2e8f0); font-size: 14px; padding: 0 2px; user-select: none; }
/* ═══════════════════════════════════════════════════════════════
   Fluid ERP — Unified Select / Dropdown System v1.0
   One design for ALL dropdowns: cd-wrap, pt-wrap, plain select
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper ─────────────────────────────────────────────── */
.erp-select-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Trigger button (looks like a text field) ─────────────────── */
.erp-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    height: 38px;
    min-height: 38px;
    background: var(--white, #fff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md, 8px);
    cursor: pointer;
    font-family: Cairo, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--g800, #1e293b);
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
    overflow: hidden;
}
.erp-select-trigger:hover { border-color: var(--g300, #cbd5e1); }
.erp-select-trigger:focus,
.erp-select-wrap.open .erp-select-trigger {
    border-color: var(--p, #4361ee);
    box-shadow: 0 0 0 3px rgba(67,97,238,.12);
    outline: none;
}
.erp-select-trigger.disabled,
.erp-select-trigger[disabled] {
    background: var(--g50, #f8f9fc);
    color: var(--g400, #94a3b8);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Label (selected value text) ──────────────────────────────── */
.erp-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: inherit;
}
.erp-select-label.placeholder { color: var(--g400, #94a3b8); font-weight: 500; }

/* ── Arrow icon ───────────────────────────────────────────────── */
.erp-select-arrow {
    font-size: 10px;
    color: var(--g400, #94a3b8);
    flex-shrink: 0;
    transition: transform .2s;
}
.erp-select-wrap.open .erp-select-arrow { transform: rotate(180deg); }

/* ── Clear button ─────────────────────────────────────────────── */
.erp-select-clear {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g200, #e2e8f0);
    color: var(--g500, #64748b);
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.erp-select-clear:hover { background: var(--danger-l, #fee2e2); color: var(--danger-d, #dc2626); }
.erp-select-wrap.has-value .erp-select-clear { display: flex; }

/* ── Dropdown panel ───────────────────────────────────────────── */
.erp-select-drop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: var(--white, #fff);
    border: 1.5px solid var(--p, #4361ee);
    border-radius: var(--r-md, 8px);
    box-shadow: 0 8px 32px rgba(67,97,238,.15), 0 2px 8px rgba(0,0,0,.06);
    z-index: 9999;
    overflow: hidden;
    min-width: 200px;
}
.erp-select-wrap.open .erp-select-drop { display: block; }

/* ── Search box inside dropdown ───────────────────────────────── */
.erp-select-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--bord-l, #f1f5f9);
    background: var(--g50, #f8f9fc);
}
.erp-select-search {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 7px;
    font-size: 12px;
    font-family: Cairo, sans-serif;
    background: var(--white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 8px center / 14px;
    direction: rtl;
    outline: none;
    color: var(--g800, #1e293b);
    box-sizing: border-box;
    transition: border-color .15s;
}
.erp-select-search:focus { border-color: var(--p, #4361ee); }
.erp-select-search::placeholder { color: var(--g400, #94a3b8); }

/* ── Options list ─────────────────────────────────────────────── */
.erp-select-list {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--g200) transparent;
}
.erp-select-list::-webkit-scrollbar { width: 4px; }
.erp-select-list::-webkit-scrollbar-track { background: transparent; }
.erp-select-list::-webkit-scrollbar-thumb { background: var(--g200); border-radius: 2px; }

/* ── Single option ────────────────────────────────────────────── */
.erp-select-opt {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    font-family: Cairo, sans-serif;
    font-weight: 500;
    color: var(--g700, #334155);
    border-bottom: 1px solid var(--bord-l, #f8fafc);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .1s;
    line-height: 1.4;
}
.erp-select-opt:last-child { border-bottom: none; }
.erp-select-opt:hover { background: var(--p-l, #eff2ff); color: var(--p, #4361ee); }
.erp-select-opt.selected {
    background: var(--p-l, #eff2ff);
    color: var(--p-d, #3051d3);
    font-weight: 700;
}
.erp-select-opt.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-right: auto;
    color: var(--p, #4361ee);
}
.erp-select-opt.hidden { display: none; }

/* ── Group header ─────────────────────────────────────────────── */
.erp-select-group-head {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 800;
    color: var(--g400, #94a3b8);
    letter-spacing: .4px;
    text-transform: uppercase;
    background: var(--g50, #f8f9fc);
    border-bottom: 1px solid var(--bord-l, #f1f5f9);
}

/* ── Sub-label (secondary text inside option) ─────────────────── */
.erp-select-opt-sub {
    font-size: 11px;
    color: var(--g400, #94a3b8);
    font-weight: 500;
    margin-right: auto;
}

/* ── Empty / no results state ─────────────────────────────────── */
.erp-select-empty {
    padding: 20px;
    text-align: center;
    color: var(--g400, #94a3b8);
    font-size: 12px;
    font-family: Cairo, sans-serif;
}

/* ── Code badge (for accounts, SKUs) ─────────────────────────── */
.erp-select-code {
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--p, #4361ee);
    background: var(--p-l, #eff2ff);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── Loading state ────────────────────────────────────────────── */
.erp-select-loading {
    padding: 16px;
    text-align: center;
    color: var(--g400);
    font-size: 12px;
}

/* ══ COMPATIBILITY ALIASES ════════════════════════════════════ */
/* Makes old cd-wrap / pt-wrap use new visual system */
.cd-wrap { position: relative; overflow: visible !important; }
.cd-display,
.pt-inp {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 12px !important;
    height: 38px !important;
    min-height: 38px !important;
    background: var(--white, #fff) !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: var(--r-md, 8px) !important;
    cursor: pointer !important;
    font-family: Cairo, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g800, #1e293b) !important;
    transition: border-color .15s, box-shadow .15s !important;
    user-select: none !important;
    box-sizing: border-box !important;
}
.cd-display:hover, .pt-inp:hover { border-color: var(--g300, #cbd5e1) !important; }
.cd-wrap.open .cd-display,
.pt-wrap.pt-open .pt-inp {
    border-color: var(--p, #4361ee) !important;
    box-shadow: 0 0 0 3px rgba(67,97,238,.12) !important;
}
.cd-display.cd-disabled,
.pt-inp.cd-disabled { background: var(--g50) !important; cursor: not-allowed !important; pointer-events: none !important; }

.cd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cd-arrow  { font-size: 10px; color: var(--g400); transition: transform .2s; flex-shrink: 0; }
.cd-wrap.open .cd-arrow { transform: rotate(180deg); }

.cd-drop,
.pt-drop {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important; left: 0 !important;
    background: var(--white, #fff) !important;
    border: 1.5px solid var(--p, #4361ee) !important;
    border-radius: var(--r-md, 8px) !important;
    box-shadow: 0 8px 32px rgba(67,97,238,.15) !important;
    z-index: 9999 !important;
    overflow: visible !important;
    min-width: 200px !important;
}

.cd-search-wrap,
.pt-search-wrap {
    padding: 8px !important;
    border-bottom: 1px solid var(--bord-l, #f1f5f9) !important;
    background: var(--g50, #f8f9fc) !important;
}
.cd-search,
.pt-search {
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-family: Cairo, sans-serif !important;
    outline: none !important;
    color: var(--g800) !important;
    box-sizing: border-box !important;
    background: var(--white) !important;
}
.cd-search:focus, .pt-search:focus { border-color: var(--p) !important; }

.cd-list,
.pt-list {
    max-height: 220px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}

.cd-item,
.pt-item {
    padding: 9px 14px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: Cairo, sans-serif !important;
    font-weight: 500 !important;
    color: var(--g700, #334155) !important;
    border-bottom: 1px solid var(--bord-l, #f8fafc) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background .1s !important;
}


/* ══ PLAIN <select> UPGRADE ═══════════════════════════════════ */
/* Engine-rendered selects that can't be converted to cd-wrap */
select.fi, select.erp-select, .sec-body select, .fg select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat left 10px center / 12px !important;
    padding-left: 32px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: var(--r-md, 8px) !important;
    font-family: Cairo, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g800, #1e293b) !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s !important;
    outline: none !important;
}
select.fi:hover, select.erp-select:hover { border-color: var(--g300) !important; }
select.fi:focus, select.erp-select:focus {
    border-color: var(--p, #4361ee) !important;
    box-shadow: 0 0 0 3px rgba(67,97,238,.12) !important;
}
select.fi:disabled { background-color: var(--g50) !important; color: var(--g400) !important; cursor: not-allowed !important; }

/* ══ PRINT — hide arrows, show as text ════════════════════════ */
@media print {
    .cd-arrow, .erp-select-arrow { display: none !important; }
    .cd-display, .pt-inp, .erp-select-trigger {
        border-color: #999 !important;
        box-shadow: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px 8px !important;
    }
    .cd-drop, .pt-drop, .erp-select-drop { display: none !important; }
}

/* ══ Badge refinements (erp-badges.js output) ════════════════ */
.erp-cur-badge,
.erp-pt-badge {
    font-family: Cairo, sans-serif;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    width: fit-content;
    line-height: 1.5;
}
.erp-cur-badge i,
.erp-pt-badge i { font-size: 9px !important; opacity: .8; }

.cd-item.hidden { display: none; }

/* ══════════════════════════════════════════════════════════
   UNIFIED DROPDOWN STYLE — applies to ALL dropdowns
   cd-drop, prod-drop, li-dd-drop
══════════════════════════════════════════════════════════ */

/* Container */
.cd-drop, .prod-drop {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: 0 !important;
    min-width: 200px !important;
    background: var(--white, #fff) !important;
    border: 1.5px solid var(--p, #4361ee) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(67,97,238,.13) !important;
    z-index: 9999 !important;
    overflow: visible !important;
    font-family: Cairo, sans-serif !important;
}
/* li-dd-drop uses position:fixed via JS — don't force absolute */
.li-dd-drop {
    display: none;
    position: fixed;
    min-width: 200px;
    background: var(--white, #fff);
    border: 1.5px solid var(--p, #4361ee);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(67,97,238,.18);
    z-index: 99999;
    max-height: 240px;
    overflow-y: auto;
    font-family: Cairo, sans-serif;
}

/* Search box wrapper */
.cd-search-wrap, .prod-search-box {
    padding: 8px 10px !important;
    background: var(--g50, #f8f9fc) !important;
    border-bottom: 1px solid var(--bord-l, #f1f5f9) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Search input */
.cd-search {
    width: 100% !important;
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    font-family: Cairo, sans-serif !important;
    background: var(--white, #fff) !important;
    color: var(--g900, #0f172a) !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.cd-search:focus { border-color: var(--p, #4361ee) !important; }

/* List scroll area */
.cd-list, .prod-drop { max-height: 200px !important; overflow-y: auto !important; }

/* Item row */
.cd-item, .prod-drop-item, .li-dd-drop div, .li-dd-item {
    padding: 8px 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: Cairo, sans-serif !important;
    font-weight: 500 !important;
    color: var(--g700, #334155) !important;
    border-bottom: 1px solid var(--bord-l, #f1f5f9) !important;
    transition: background .1s !important;
    display: block !important;
}
.cd-item:last-child, .prod-drop-item:last-child, .li-dd-drop div:last-child, .li-dd-item:last-child {
    border-bottom: none !important;
}
.cd-item:hover, .prod-drop-item:hover, .li-dd-drop div:hover, .li-dd-item:hover {
    background: var(--p-l, #eff2ff) !important;
    color: var(--p, #4361ee) !important;
}
.cd-item.selected {
    background: var(--p-l, #eff2ff) !important;
    color: var(--p-d, #3051d3) !important;
    font-weight: 700 !important;
}

/* prod-drop-item: flex for badge layout */
.prod-drop-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}
.prod-drop-item .item-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--g800, #1e293b) !important;
}
.prod-drop-item .item-badges {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

/* new-item green */
.prod-drop-item.new-item, .prod-new-item {
    color: var(--success-d, #15803d) !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.cd-item.new-dept { color: var(--success-d, #15803d) !important; font-weight: 700 !important; }

/* hidden filter class */
.cd-item.hidden, .prod-drop-item.hidden { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
   Fluid ERP — Component Library v1.0
   erp-components.css
   المرجع الموحد لكل مكونات الـ UI في السيستم
   يُستخدم بعد erp-ui.css
═══════════════════════════════════════════════════════════════════ */

/* ══ 1. FILTER PANEL ═══════════════════════════════════════════════
   استخدام: .filter-panel > .filter-grid-{2|3|4|auto}
   مثال:
   <div class="filter-panel">
     <div class="filter-grid-3">
       <div class="fg"><label class="fl">بحث</label><input class="fi"></div>
       ...
       <div class="fg filter-actions"><button class="btn btn-primary">عرض</button></div>
     </div>
   </div>
══════════════════════════════════════════════════════════════════ */
.filter-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.filter-panel .filter-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-grid-1 { display: grid; grid-template-columns: 1fr;                     gap: 12px; align-items: end; }
.filter-grid-2 { display: grid; grid-template-columns: 1fr 1fr;                 gap: 12px; align-items: end; }
.filter-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;             gap: 12px; align-items: end; }
.filter-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;         gap: 12px; align-items: end; }
.filter-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; align-items: end; }
.filter-actions { display: flex; gap: 8px; padding-bottom: 1px; }
@media (max-width: 900px) {
  .filter-grid-4 { grid-template-columns: 1fr 1fr; }
  .filter-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .filter-grid-2, .filter-grid-3, .filter-grid-4 { grid-template-columns: 1fr; }
}

/* ══ 2. KPI CARD SYSTEM ════════════════════════════════════════════
   استخدام: .kpi-strip > .kc.kc-{blue|green|red|amber|purple|teal}
   مثال:
   <div class="kpi-strip">
     <a href="?" class="kc kc-blue">
       <div class="kc-icon"><i class="fas fa-file"></i></div>
       <div class="kc-body">
         <div class="kc-val">1,234</div>
         <div class="kc-lbl">الكل</div>
       </div>
       <div class="kc-trend up">+12%</div>
     </a>
   </div>
══════════════════════════════════════════════════════════════════ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kc {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--sh-xs);
}
.kc::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 2.5px;
  background: var(--kc-clr, var(--p));
}
.kc:hover {
  border-color: var(--kc-clr, var(--p));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--kc-clr, var(--p)) 20%, transparent);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.kc.active { border-color: var(--kc-clr, var(--p)); background: color-mix(in srgb, var(--kc-clr, var(--p)) 5%, white); }
.kc-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--kc-clr, var(--p)) 12%, transparent);
  color: var(--kc-clr, var(--p));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.kc-body { flex: 1; min-width: 0; }
.kc-val  { font-size: 22px; font-weight: 900; color: var(--g900); line-height: 1; letter-spacing: -.5px; }
.kc-lbl  { font-size: 11.5px; color: var(--g500); font-weight: 600; margin-top: 3px; }
.kc-trend { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full); flex-shrink: 0; }
.kc-trend.up   { background: var(--success-l); color: var(--success-d); }
.kc-trend.down { background: var(--danger-l);  color: var(--danger-d); }

/* Color variants */
.kc-blue   { --kc-clr: var(--p); }
.kc-green  { --kc-clr: var(--success); }
.kc-red    { --kc-clr: var(--danger-d); }
.kc-amber  { --kc-clr: var(--warning-d); }
.kc-purple { --kc-clr: var(--purple-d); }
.kc-teal   { --kc-clr: var(--teal-d); }
.kc-info   { --kc-clr: var(--info-d); }
.kc-orange { --kc-clr: #f97316; }
.kc-gray   { --kc-clr: var(--g500); }

@media (max-width: 600px) { .kpi-strip { grid-template-columns: 1fr 1fr; } }

/* ══ 3. DATA TABLE ═════════════════════════════════════════════════
   استخدام: .dt-wrap > table.dt
   مثال:
   <div class="dt-wrap">
     <table class="dt">
       <thead><tr><th class="dt-chk">...</th><th class="dt-sort">العمود</th></tr></thead>
       <tbody><tr class="dt-row" data-href="...">...</tr></tbody>
       <tfoot>...</tfoot>
     </table>
   </div>
══════════════════════════════════════════════════════════════════ */
.dt-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
table.dt { width: 100%; border-collapse: collapse; }
table.dt thead th {
  background: #0f172a;
  color: #c8d3e8;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: right;
  white-space: nowrap;
  user-select: none;
  border-bottom: none;
}
table.dt thead th.dt-sort { cursor: pointer; }
table.dt thead th.dt-sort:hover { color: #fff; }
table.dt thead th.dt-sort::after { content: ' ↕'; opacity: .3; font-size: 10px; }
table.dt thead th.dt-sort.asc::after  { content: ' ↑'; opacity: .8; }
table.dt thead th.dt-sort.desc::after { content: ' ↓'; opacity: .8; }
table.dt thead th.dt-chk, table.dt tbody td.dt-chk { width: 42px; text-align: center; }
table.dt thead th.dt-num, table.dt tbody td.dt-num { text-align: left; font-variant-numeric: tabular-nums; }
table.dt thead th.dt-actions { width: 90px; text-align: center; }
table.dt tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bord-l);
  vertical-align: middle;
  font-size: 13px;
  color: var(--g800);
}
table.dt tbody tr { cursor: pointer; transition: background .1s; }
table.dt tbody tr:hover td { background: var(--p-l); }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr.inactive td { opacity: .45; }
table.dt tfoot td {
  background: var(--g50);
  font-weight: 800;
  font-size: 12px;
  border-top: 1.5px solid var(--border);
  padding: 10px 14px;
  color: var(--g700);
}
/* Row ID badge */
.dt-id { font-family: monospace; font-size: 11px; color: var(--g400); font-weight: 700; }
/* Clickable link cell */
.dt-link { font-weight: 700; color: var(--p-d); font-size: 13px; }
.dt-link:hover { text-decoration: underline; }
/* Amount cell */
.dt-amount { font-weight: 800; font-size: 13px; color: var(--g900); font-variant-numeric: tabular-nums; }
.dt-amount.positive { color: var(--success-d); }
.dt-amount.negative { color: var(--danger-d); }

/* ══ 4. STATUS BADGES ══════════════════════════════════════════════
   استخدام: <span class="sb sb-{draft|posted|done|cancelled|partial|pending}">
══════════════════════════════════════════════════════════════════ */
.sb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.sb::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.sb-draft     { background: var(--g100);       color: var(--g600);     }
.sb-confirmed { background: var(--p-l);         color: var(--p-d);      }
.sb-approved  { background: var(--p-l);         color: var(--p-d);      }
.sb-posted    { background: var(--purple-l);    color: var(--purple-d); }
.sb-done      { background: var(--success-l);   color: var(--success-d);}
.sb-paid      { background: var(--success-l);   color: var(--success-d);}
.sb-partial   { background: var(--warning-l);   color: var(--warning-d);}
.sb-pending   { background: var(--warning-l);   color: var(--warning-d);}
.sb-cancelled { background: var(--danger-l);    color: var(--danger-d); }
.sb-void      { background: var(--danger-l);    color: var(--danger-d); }
.sb-reversed  { background: var(--purple-l);    color: var(--purple-d); }
.sb-active    { background: var(--success-l);   color: var(--success-d);}
.sb-inactive  { background: var(--g100);        color: var(--g400);     }
.sb-overdue   { background: var(--danger-l);    color: var(--danger-d); }
.sb-open      { background: var(--info-l);      color: var(--info-d);   }
.sb-closed    { background: var(--g100);        color: var(--g600);     }
.sb-received  { background: var(--teal-l);      color: var(--teal-d);   }
.sb-invoiced  { background: var(--purple-l);    color: var(--purple-d); }

/* ══ 5. DOCUMENT STATUS FLOW ═══════════════════════════════════════
   استخدام:
   <div class="flow-steps">
     <div class="flow-step done">مسودة</div>
     <div class="flow-arrow"></div>
     <div class="flow-step active">مؤكد</div>
     <div class="flow-arrow"></div>
     <div class="flow-step">مرحّل</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.flow-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.flow-step {
  padding: 5px 14px; font-size: 12px; font-weight: 700;
  color: var(--g400); background: var(--g100);
  border: 1.5px solid var(--g200);
  border-radius: 0; position: relative; transition: all .2s;
}
.flow-step:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.flow-step:last-child  { border-radius: 0 var(--r-full) var(--r-full) 0; }
.flow-step.done   { background: var(--success-l); color: var(--success-d); border-color: var(--success-ll); }
.flow-step.active { background: var(--p); color: #fff; border-color: var(--p); z-index: 1; }

/* ══ 6. FORM SECTION (sec/sec-head/sec-body) ═══════════════════════
   (already in erp-ui.css — enhanced here)
══════════════════════════════════════════════════════════════════ */
.sec-head-icon.blue   { background: var(--p-l);       color: var(--p); }
.sec-head-icon.green  { background: var(--success-l);  color: var(--success-d); }
.sec-head-icon.amber  { background: var(--warning-l);  color: var(--warning-d); }
.sec-head-icon.red    { background: var(--danger-l);   color: var(--danger-d); }
.sec-head-icon.purple { background: var(--purple-l);   color: var(--purple-d); }
.sec-head-icon.teal   { background: var(--teal-l);     color: var(--teal-d); }
.sec-head-icon.gray   { background: var(--g100);       color: var(--g600); }

/* Field required indicator */
.req { color: var(--danger-d); margin-right: 2px; }

/* Field help text */
.fhelp { font-size: 11px; color: var(--g400); margin-top: 3px; }

/* Field validation error */
.ferr { font-size: 11.5px; color: var(--danger-d); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.fi.error, input.fi.error { border-color: var(--danger-d) !important; box-shadow: 0 0 0 3px rgba(229,55,78,.1) !important; }
.fi.ok, input.fi.ok { border-color: var(--success) !important; }

/* ══ 7. DOCUMENT HEADER (فاتورة، أمر شراء، إلخ) ════════════════════
   استخدام:
   <div class="doc-header">
     <div class="doc-header-main">...</div>
     <div class="doc-header-meta">...</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.doc-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--sh-xs);
}
.doc-header-title { font-size: 20px; font-weight: 900; color: var(--g900); letter-spacing: -.3px; margin-bottom: 4px; }
.doc-header-ref   { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--p-d); background: var(--p-l); padding: 3px 10px; border-radius: var(--r-full); display: inline-block; margin-bottom: 8px; }
.doc-header-meta  { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.doc-meta-item { text-align: left; }
.doc-meta-label { font-size: 10.5px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.doc-meta-val   { font-size: 14px; font-weight: 700; color: var(--g800); }
.doc-meta-sep   { width: 1px; height: 36px; background: var(--bord-l); }

/* ══ 8. LINES TABLE (أسطر الفواتير والأوامر) ══════════════════════ */
.lt-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.lt-head {
  background: var(--g50);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--g700);
}
table.lt { width: 100%; border-collapse: collapse; }
table.lt thead th {
  background: var(--g50);
  color: var(--g500);
  padding: 9px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--border);
}
table.lt thead th.lt-num { text-align: left; }
table.lt tbody td { padding: 5px 7px; border-bottom: 1px solid var(--bord-l); vertical-align: middle; }
table.lt tbody tr:hover td { background: var(--p-l); }
table.lt tbody tr:last-child td { border-bottom: none; }
.lt-foot {
  background: var(--g50);
  border-top: 1.5px solid var(--border);
  padding: 14px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  align-items: center;
}
.lt-total { text-align: left; }
.lt-total-lbl { font-size: 11px; color: var(--g400); font-weight: 600; }
.lt-total-val { font-size: 17px; font-weight: 900; color: var(--g900); font-variant-numeric: tabular-nums; }
.lt-total-val.grand { font-size: 22px; color: var(--p); }
.lt-add-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px;
  border: 1.5px dashed var(--g300);
  border-radius: var(--r-md);
  color: var(--g400); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  background: none; width: 100%;
  font-family: 'Cairo', sans-serif;
  margin-top: 4px;
}
.lt-add-row:hover { border-color: var(--p); color: var(--p); background: var(--p-l); }

/* ══ 9. DASHBOARD WIDGETS ══════════════════════════════════════════ */
.dw { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.dw-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: var(--g900);
  background: var(--g50);
}
.dw-head-actions { display: flex; gap: 6px; }
.dw-body { padding: 14px 16px; }
.dw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dw-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .dw-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dw-grid-2, .dw-grid-3 { grid-template-columns: 1fr; } }

/* Chart placeholder */
.chart-placeholder {
  background: var(--g50);
  border: 1.5px dashed var(--g200);
  border-radius: var(--r-md);
  padding: 30px;
  text-align: center;
  color: var(--g400);
  font-size: 12.5px;
  min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}

/* ══ 10. REPORT OUTPUT ════════════════════════════════════════════
   استخدام:
   <div class="rpt-wrap">
     <div class="rpt-toolbar">...</div>
     <div class="dt-wrap"><table class="dt">...</table></div>
     <div class="rpt-footer">...</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.rpt-wrap { max-width: 1300px; margin: 0 auto; }
.rpt-toolbar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.rpt-export-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.rpt-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-md);
  border: 1.5px solid; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Cairo', sans-serif;
  transition: all .15s;
}
.rpt-export-btn.excel { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.rpt-export-btn.excel:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.rpt-export-btn.csv   { color: var(--info-d); border-color: var(--info-ll); background: var(--info-l); }
.rpt-export-btn.csv:hover { background: var(--info-d); color: #fff; }
.rpt-export-btn.print { color: var(--g600); border-color: var(--g200); background: var(--white); }
.rpt-export-btn.print:hover { background: var(--g100); color: var(--g800); }
.rpt-meta { font-size: 12px; color: var(--g400); }

/* ══ 11. EMPTY STATE ════════════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--g400);
}
.empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--g50);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--g300);
  margin: 0 auto 18px;
}
.empty h5 { font-size: 15px; font-weight: 800; color: var(--g600); margin-bottom: 8px; }
.empty p  { font-size: 13px; color: var(--g400); margin-bottom: 20px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ══ 12. MODAL SYSTEM ═══════════════════════════════════════════════ */
.m-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.m-overlay.open { display: flex; animation: m-fade-in .18s ease; }
@keyframes m-fade-in { from { opacity: 0 } to { opacity: 1 } }
.m-box {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%; max-width: 520px;
  margin: 0 16px;
  box-shadow: 0 32px 64px rgba(0,0,0,.22);
  overflow: hidden;
  animation: m-slide-in .2s cubic-bezier(.34,1.4,.64,1);
}
.m-box.m-lg { max-width: 780px; }
.m-box.m-xl { max-width: 1000px; }
@keyframes m-slide-in { from { transform: scale(.94) translateY(-12px); opacity: 0; } }
.m-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--p), #6366f1);
  color: #fff;
}
.m-head h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.m-close {
  width: 28px; height: 28px; border: none;
  background: rgba(255,255,255,.2); border-radius: 7px;
  color: #fff; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.m-close:hover { background: rgba(255,255,255,.35); }
.m-body { padding: 22px; }
.m-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--bord-l);
  background: var(--g50);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ══ 13. TABS ════════════════════════════════════════════════════════ */
.tabs { border-bottom: 1.5px solid var(--border); display: flex; gap: 0; margin-bottom: 0; }
.tab-item {
  padding: 10px 18px;
  font-size: 13px; font-weight: 700; color: var(--g500);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  font-family: 'Cairo', sans-serif;
  background: none; border-top: none; border-left: none; border-right: none;
}
.tab-item:hover { color: var(--g800); background: var(--g50); }
.tab-item.active { color: var(--p); border-bottom-color: var(--p); background: var(--p-l); }
.tab-badge { background: var(--g200); color: var(--g600); font-size: 10px; padding: 1px 6px; border-radius: var(--r-full); font-weight: 800; min-width: 18px; text-align: center; }
.tab-item.active .tab-badge { background: var(--p); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ══ 14. PAGE HEADER VARIANTS ════════════════════════════════════════ */
.page-header-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; color: #fff;
}
.ph-sub { font-size: 12px; color: var(--g500); margin-top: 2px; font-weight: 500; }

/* ══ 15. STEP WIZARD ════════════════════════════════════════════════ */
.wizard-steps {
  display: flex; align-items: center;
  gap: 0; padding: 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.wz-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.wz-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--g100); color: var(--g500);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid var(--g200);
  transition: all .25s;
}
.wz-info { flex: 1; }
.wz-title { font-size: 13px; font-weight: 700; color: var(--g400); transition: color .2s; }
.wz-sub   { font-size: 11px; color: var(--g300); transition: color .2s; }
.wz-line  { flex: 1; height: 2px; background: var(--g200); transition: background .25s; min-width: 20px; }
.wz-step.done .wz-num  { background: var(--success-l); color: var(--success-d); border-color: var(--success-ll); }
.wz-step.done .wz-title { color: var(--success-d); }
.wz-step.done .wz-line  { background: var(--success); }
.wz-step.active .wz-num { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-glow); }
.wz-step.active .wz-title { color: var(--p-d); font-weight: 800; }
.wz-step.active .wz-sub   { color: var(--g500); }

/* ══ 16. NOTIFICATION BADGE ══════════════════════════════════════════ */
.notif-dot {
  position: absolute; top: -2px; left: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger-d); border: 2px solid var(--white);
}
.notif-count {
  position: absolute; top: -5px; left: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger-d); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}

/* ══ 17. DRAG AND DROP ZONE ══════════════════════════════════════════ */
.dropzone {
  border: 2px dashed var(--g300);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  color: var(--g500);
  font-size: 13px;
  transition: all .2s;
  cursor: pointer;
  background: var(--g50);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--p);
  background: var(--p-l);
  color: var(--p-d);
}
.dropzone i { font-size: 32px; display: block; margin-bottom: 10px; opacity: .4; }

/* ══ 18. PROGRESS BAR ════════════════════════════════════════════════ */
.prog { height: 6px; background: var(--g100); border-radius: var(--r-full); overflow: hidden; }
.prog-bar {
  height: 100%; border-radius: var(--r-full);
  background: var(--p);
  transition: width .4s ease;
}
.prog-bar.green  { background: var(--success); }
.prog-bar.red    { background: var(--danger-d); }
.prog-bar.amber  { background: var(--warning-d); }
.prog-bar.purple { background: var(--purple-d); }
.prog-bar.striped {
  background: repeating-linear-gradient(
    45deg, var(--p) 0, var(--p) 10px,
    var(--p-d) 10px, var(--p-d) 20px
  );
}

/* ══ 19. POS SPECIFIC ════════════════════════════════════════════════ */
.pos-wrap { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - var(--nav-h)); gap: 0; }
.pos-products { background: var(--bg); padding: 16px; overflow-y: auto; }
.pos-cart { background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.pos-cart-head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 800; }
.pos-cart-body { flex: 1; overflow-y: auto; }
.pos-cart-foot { border-top: 1px solid var(--border); padding: 14px 16px; }
.pos-product-card {
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; cursor: pointer; transition: all .15s; text-align: center;
}
.pos-product-card:hover { border-color: var(--p); box-shadow: var(--sh-md); transform: translateY(-2px); }
.pos-product-card.out-of-stock { opacity: .4; pointer-events: none; }

/* ══ 20. PRINT STYLES ════════════════════════════════════════════════ */
@media print {
  #sidebar, #topnav, .page-header .ph-actions,
  .action-bar, .save-bar, .bulk-bar, .toolbar,
  .filter-panel, .pager, .rpt-export-btns,
  .row-acts, .act-btn, no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12px !important; }
  #main-content { margin: 0 !important; }
  .dt-wrap, .lt-wrap, .doc-header { box-shadow: none !important; border-color: #ccc !important; }
  table.dt thead th { background: #f0f0f0 !important; color: #000 !important; }
  .page-header { box-shadow: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
   Fluid ERP — Responsive Design System v4.0
   Breakpoints: 1200px (tablet) | 768px (mobile) | 480px (small)
   ═══════════════════════════════════════════════════════════════ */

/* ══ CSS Variables ══════════════════════════════════════════════ */
:root {
  --sb-w: 240px;
  --sb-mini: 64px;
}

/* ══════════════════════════════════════════════════════════════
   TABLET — max-width: 1200px
══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  /* Sidebar collapse */
  #sidebar { width: var(--sb-mini); }
  #main-content { margin-right: var(--sb-mini); }
  #sidebar .nav-label,
  #sidebar .menu-arrow,
  #sidebar .nav-section,
  #sidebar .brand-name,
  #sidebar .brand-tagline { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
  #sidebar .sub-menu { max-height: 0 !important; } /* mobile: collapsed */

  /* Grids */
  .dw-grid-3 { grid-template-columns: 1fr 1fr; }
  .row-3, .row-4 { grid-template-columns: 1fr 1fr; }
  .filter-grid-3, .filter-grid-4 { grid-template-columns: 1fr 1fr; }
  .doc-grid-4, .fg-grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* Module nav */
  .mn-groups { gap: 0; }
  .mn-group-btn { padding: 0 10px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Sidebar ── */
  #sidebar { transform: translateX(100%); width: var(--sb-w); z-index: 1100; transition: transform .25s; }
  #sidebar.mobile-open, #sidebar.open { transform: translateX(0); }
  #sidebar.mobile-open .nav-label,
  #sidebar.mobile-open .menu-arrow,
  #sidebar.mobile-open .nav-section,
  #sidebar.mobile-open .brand-name,
  #sidebar.mobile-open .brand-tagline { opacity: 1; pointer-events: auto; width: auto; overflow: visible; }
  #main-content { margin-right: 0 !important; }
  #sidebar-overlay { display: block; }
  #topnav-hamburger { display: flex; }

  /* ── Module Nav ── */
  #module-nav { padding: 0 10px; height: 48px; }
  .mn-brand span { display: none; }
  .mn-brand .mn-icon { width: 30px; height: 30px; font-size: 13px; }
  .mn-brand { padding: 0 10px 0 0; margin-left: 6px; }
  .mn-group-btn { padding: 0 8px; font-size: 11px; }
  .mn-group-btn span { display: none; }
  .mn-group-btn i.mn-caret { display: none; }
  .mn-apps-btn span { display: none; }
  .mn-apps-btn { padding: 0 10px; }
  #module-nav .mn-tools > a:last-child span { display: none; }

  /* ── Page Header ── */
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 10px 14px;
  }
  .ph-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .content-area { padding: 12px 10px !important; }

  /* ── KPI Strip ── */
  .kpi-strip { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .kc { padding: 12px 14px; gap: 10px; }
  .kc-icon { width: 36px; height: 36px; font-size: 14px; }
  .kc-val { font-size: 18px; }
  .kc-lbl { font-size: 11px; }

  /* ── Toolbar ── */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
  }
  .search-wrap { min-width: 100%; }
  .chip { flex: 1; justify-content: center; }
  .bulk-bar { flex-wrap: wrap; gap: 6px; }
  .bb-cls { margin-right: 0; }
  .bb-div { display: none; }

  /* ── Data Table ── */
  .dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
  table.dt { min-width: 650px; }
  table.dt thead th { padding: 9px 10px; font-size: 10px; }
  table.dt tbody td { padding: 9px 10px; font-size: 12px; }
  .row-acts { opacity: 1; } /* always visible on mobile */

  /* ── Pager ── */
  .pager { flex-wrap: wrap; gap: 4px; justify-content: center; }
  .pg-info { width: 100%; text-align: center; margin-top: 4px; order: -1; }

  /* ── Forms ── */
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; }
  .doc-grid, .doc-grid-2, .doc-grid-3, .doc-grid-4,
  .fg-grid-2, .fg-grid-3, .fg-grid-4,
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  .save-bar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .save-bar-info { width: 100%; margin-top: 4px; margin-left: 0; }
  .sec-body { padding: 12px; }
  .sec-head { padding: 10px 14px; }
  .sec-head-icon { width: 24px; height: 24px; font-size: 10px; }

  /* ── Document Header ── */
  .doc-hdr, .doc-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
  .doc-meta-grid { flex-wrap: wrap; gap: 8px; }
  .doc-meta-sep { display: none; }
  .doc-meta-item { min-width: 120px; }
  .doc-hdr-title { font-size: 16px; }

  /* ── Flow Steps ── */
  .flow-steps { flex-wrap: wrap; gap: 4px; }
  .flow-step { font-size: 10px; padding: 3px 8px; }

  /* ── Lines Table ── */
  .lt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.lt { min-width: 560px; }
  .lt-foot { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .lt-total-val { font-size: 14px; }
  .lt-total-val.grand { font-size: 18px; }

  /* ── Dashboard ── */
  .dw-grid-2, .dw-grid-3 { grid-template-columns: 1fr; gap: 10px; }
  .dw-head { padding: 10px 14px; font-size: 12px; }

  /* ── Settings ── */
  .settings-layout { display: flex !important; flex-direction: column !important; gap: 12px; }
  .settings-nav { min-width: 0; }
  .settings-row { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* ── Reports ── */
  .filter-grid-2, .filter-grid-3, .filter-grid-4 { grid-template-columns: 1fr; }
  .rpt-kpi-row.cols-2, .rpt-kpi-row.cols-3, .rpt-kpi-row.cols-4 { grid-template-columns: 1fr 1fr; }
  .rpt-export { flex-wrap: wrap; }
  .rpt-hdr { flex-direction: column; gap: 10px; }
  .rpt-actions { flex-wrap: wrap; }

  /* ── Tabs ── */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: 0 12px; }
  .tab { padding: 8px 12px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* ── POS ── */
  .pos-layout { grid-template-columns: 1fr !important; height: auto !important; flex-direction: column; }
  .pos-right { border-right: none; border-top: 1px solid var(--border); min-height: 400px; }
  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }

  /* ── Modals ── */
  .modal-box, .js-modal, .reason-box {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .mf-grid { grid-template-columns: 1fr; }

  /* ── Sidebar Cards (form sidebars) ── */
  .pr-layout, .po-layout, .bill-layout, .grn-layout {
    grid-template-columns: 1fr !important;
  }

  /* ── Quick links ── */
  .quick-link { padding: 10px; }
  .sidebar-card { margin-bottom: 10px; }

  /* ── Apps page ── */
  .apps-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  #apps-hero { padding: 20px 16px 16px; }
  .hero-greeting { font-size: 20px; }
  .hero-kpis { flex-direction: column; }
  .hkpi { min-width: 0; }
  #apps-container { padding: 0 16px 32px; }
  .apps-search { max-width: 160px; }
  .apps-date { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: 1fr !important; }
  .rpt-kpi-row.cols-2, .rpt-kpi-row.cols-3, .rpt-kpi-row.cols-4 { grid-template-columns: 1fr; }
  .btn { font-size: 12px; padding: 6px 11px; }
  .btn-sm { font-size: 11px; padding: 4px 9px; }
  .page-header h4 { font-size: 14px; }
  .ph-icon { width: 30px; height: 30px; font-size: 13px; }
  .pos-products-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  table.dt thead th { padding: 7px 8px; font-size: 9.5px; }
  table.dt tbody td { padding: 7px 8px; font-size: 11px; }
  .chip { font-size: 11px; padding: 4px 8px; height: 30px; }
  .sb { font-size: 10px; padding: 2px 7px; }
  .apps-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .app-card { padding: 14px 10px 12px; }
  .app-icon { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
  .app-name { font-size: 12px; }
  .app-desc { display: none; }
  .mn-group-btn { padding: 0 5px; font-size: 10px; }
  #module-nav { padding: 0 6px; gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
  /* Hide all navigation and interactive elements */
  #sidebar, #topnav, #sidebar-overlay, #module-nav,
  .page-header .ph-actions, .ph-actions,
  .save-bar, .bulk-bar, .toolbar,
  .filter-panel, .pager, .pager-wrap,
  .rpt-export, .rpt-export-btns, .rpt-actions button,
  .row-acts, .act-btn, .no-print,
  .flow-steps, .tabs, .breadcrumb,
  .settings-nav, .nav-arrows,
  .quick-link, .sidebar-card,
  button[onclick], a.btn-primary, a.btn-success, a.btn-danger,
  [data-pt-badge] .erp-pt-badge, [data-currency-badge] .erp-cur-badge { display: none !important; }

  /* Reset layout */
  body { background: #fff !important; color: #000 !important; font-size: 11pt !important; direction: rtl; }
  #main-content { margin: 0 !important; padding: 0 !important; }
  .content-area { padding: 0 !important; }
  * { box-shadow: none !important; }

  /* Print header — show doc info */
  .page-header {
    display: flex !important;
    border-bottom: 2px solid #000 !important;
    padding: 8px 0 !important;
    margin-bottom: 12px !important;
  }
  .page-header h4 { font-size: 16pt !important; color: #000 !important; }
  .ph-sub { color: #555 !important; }
  .ph-icon { background: #000 !important; }

  /* Tables */
  .dt-wrap, .lt-wrap {
    border: 1px solid #999 !important;
    overflow: visible !important;
  }
  table.dt, table.lt {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  table.dt thead th {
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 9pt !important;
    padding: 6px 8px !important;
  }
  table.dt tbody td, table.lt tbody td {
    font-size: 9pt !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid #ddd !important;
  }
  table.dt tbody tr:hover td { background: transparent !important; }

  /* Cards & sections */
  .sec, .dw, .kc, .card { box-shadow: none !important; page-break-inside: avoid; }
  .kc::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* KPI */
  .kpi-strip { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .kc { border: 1px solid #ccc !important; flex: 1; min-width: 120px; }
  .kc-val { font-size: 16pt !important; }

  /* Document */
  .doc-hdr { border: 1px solid #ccc !important; padding: 12px !important; }
  .lt-foot { border-top: 2px solid #000 !important; background: #f9f9f9 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .lt-total-val.grand { color: #000 !important; }

  /* Status badge */
  .sb { border: 1px solid #999 !important; background: transparent !important; color: #000 !important; }

  /* Page breaks */
  .sec { page-break-inside: avoid; }
  .lt-wrap { page-break-inside: auto; }
  table.dt tr, table.lt tr { page-break-inside: avoid; }

  /* Print footer with doc number */
  .doc-hdr-ref { display: block !important; }

  /* Grids in forms */
  .row-2, .row-3, .doc-grid-2, .doc-grid-3, .g2, .g3 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Report specific */
  .rpt-card { border: 1px solid #ccc !important; }
  .rpt-table th {
    background: #f0f0f0 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/**
 * Fluid ERP — Document Screen Pattern CSS
 * Used by: invoice_form, order_form, quotation_form, delivery_form, return_form
 * and all purchase/accounting document screens
 */

/* ── Remove Number Spinners ─────────────────────────────── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

/* ── Flow Steps ──────────────────────────────────────── */
.flow-steps { display:flex; align-items:center; margin-top:6px; }
.flow-step { padding:4px 16px; font-size:11px; font-weight:700; background:var(--g100,#f1f5f9); color:var(--g400,#94a3b8); border:1.5px solid var(--g200,#e2e8f0); position:relative; cursor:default; }
.flow-step:first-child { border-radius:0 9999px 9999px 0; }
.flow-step:last-child { border-radius:9999px 0 0 9999px; }
.flow-step + .flow-step { margin-right:-1px; }
.flow-step.done { background:#f0fdf4; color:#16a34a; border-color:#bbf7d0; }
.flow-step.active { background:var(--p,#4361ee); color:#fff; border-color:var(--p,#4361ee); z-index:1; }

/* ── Status Action Buttons ───────────────────────────── */
.status-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.sa-btn { padding:5px 14px; border-radius:8px; font-size:12px; font-weight:700; font-family:'Cairo',sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s; border:1.5px solid; }
.sa-btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.sa-btn.sa-back { border-color:#bfdbfe; color:#2563eb; background:#eff6ff; }
.sa-btn.sa-back:hover { background:#dbeafe; }
.sa-btn.sa-danger { border-color:#fecaca; color:#dc2626; background:#fff; }
.sa-btn.sa-danger:hover { background:#fef2f2; }
.sa-btn.sa-success { border-color:#bbf7d0; color:#16a34a; background:#f0fdf4; }
.sa-btn.sa-success:hover { background:#dcfce7; }

/* ── Document Header ─────────────────────────────────── */
.doc-hdr { background:var(--white,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:20px 22px; margin-bottom:14px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.doc-hdr-ref { font-family:monospace; font-size:13px; font-weight:700; color:var(--p-d,#3730a3); background:var(--p-l,#eef2ff); padding:3px 10px; border-radius:9999px; display:inline-block; margin-bottom:8px; }
.doc-hdr-title { font-size:20px; font-weight:900; color:var(--g900,#0f172a); margin-bottom:4px; }
.doc-meta-grid { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.doc-meta-item { text-align:center; }
.doc-meta-lbl { font-size:10px; font-weight:600; color:var(--g400,#94a3b8); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.doc-meta-val { font-size:14px; font-weight:800; color:var(--g800,#1e293b); }
.doc-meta-sep { width:1px; height:36px; background:var(--g200,#e2e8f0); align-self:center; }

/* ── Tabs ────────────────────────────────────────────── */
.doc-tabs-wrap { background:var(--white,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; overflow:hidden; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.doc-tabs { display:flex; border-bottom:2px solid var(--border,#e2e8f0); padding:0 16px; gap:0; }
.doc-tab { padding:12px 20px; font-size:13px; font-weight:700; color:var(--g400,#94a3b8); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-2px; transition:all .15s; white-space:nowrap; }
.doc-tab:hover { color:var(--g600,#475569); }
.doc-tab.active { color:var(--p,#4361ee); border-bottom-color:var(--p,#4361ee); }
.doc-tab-panel { display:none; }
.doc-tab-panel.active { display:block; }

/* ── Lines Table (lt) ────────────────────────────────── */
.lt-wrap { background:var(--white,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; overflow:hidden; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.lt-hdr { padding:12px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border,#e2e8f0); font-size:13px; font-weight:700; color:var(--g700,#334155); }

/* ── Totals (vertical stack) ─────────────────────────── */
.lt-foot { background:var(--g50,#f8fafc); border-top:1.5px solid var(--border,#e2e8f0); padding:16px 20px; display:flex; justify-content:flex-end; }
.lt-totals { display:flex; flex-direction:column; gap:6px; min-width:280px; }
.lt-total-row { display:flex; justify-content:space-between; align-items:baseline; padding:2px 0; }
.lt-total-row .lt-total-lbl { font-size:12.5px; font-weight:600; color:var(--g500,#64748b); }
.lt-total-row .lt-total-val { font-size:14px; font-weight:800; color:var(--g800,#1e293b); text-align:left; font-variant-numeric:tabular-nums; }
.lt-total-divider { border-top:1.5px solid var(--border,#e2e8f0); margin:4px 0; }
.lt-total-row.grand .lt-total-lbl { font-size:13px; font-weight:800; color:var(--g700,#334155); }
.lt-total-row.grand .lt-total-val { font-size:20px; color:var(--p,#4361ee); }
.lt-total-row.lcy { margin-top:4px; padding-top:8px; border-top:2px solid var(--border,#e2e8f0); }
.lt-total-row.lcy .lt-total-lbl { font-size:13px; font-weight:800; }
.lt-total-row.lcy .lt-total-val { font-size:20px; color:#16a34a; }

/* ── Add Line Row ────────────────────────────────────── */
.add-line-row { padding:10px 20px; border-top:1px solid var(--g100,#f1f5f9); }
.add-line-link { font-size:12.5px; font-weight:600; color:var(--p,#4361ee); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; background:none; border:none; font-family:'Cairo',sans-serif; }
.add-line-link:hover { text-decoration:underline; }

/* ── Journal Entry Header ────────────────────────────── */
.je-header { padding:14px 20px; border-bottom:1px solid var(--border,#e2e8f0); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.je-info { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.je-actions { display:flex; gap:6px; }

/* ── Journal Table ───────────────────────────────────── */
.je-table { width:100%; border-collapse:collapse; }
.je-table th { padding:10px 14px; font-size:11px; font-weight:700; color:var(--g400,#94a3b8); background:var(--g50,#f8fafc); border-bottom:1.5px solid var(--border,#e2e8f0); text-align:right; }
.je-table td { padding:10px 14px; border-bottom:1px solid var(--g100,#f1f5f9); font-size:13px; }
.je-table .num { text-align:left; font-variant-numeric:tabular-nums; font-weight:700; }
.je-table tr:hover { background:var(--g50,#f8fafc); }
.je-table tfoot td { font-weight:800; background:var(--g50,#f8fafc); border-top:1.5px solid var(--border,#e2e8f0); }

/* ── Audit Sidebar (hidden overlay) ──────────────────── */
.audit-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:998; opacity:0; pointer-events:none; transition:opacity .3s; }
.audit-overlay.open { opacity:1; pointer-events:all; }
.audit-sidebar { position:fixed; left:-320px; top:0; width:310px; height:100vh; background:#fff; z-index:999; box-shadow:4px 0 24px rgba(0,0,0,.12); transition:left .3s ease; overflow-y:auto; }
.audit-sidebar.open { left:0; }

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:768px) {
  .doc-hdr { flex-direction:column; }
  .doc-meta-grid { width:100%; }
  .flow-steps { flex-wrap:wrap; }
  .lt-foot { padding:12px 16px; }
  .lt-totals { min-width:auto; width:100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Form Screen Pattern — 2+1 Layout (product_form, partner_form)
   ═══════════════════════════════════════════════════════════════ */

/* ── Form 2+1 Grid Layout ── */
.form-layout { display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
@media(max-width:900px) { .form-layout { grid-template-columns:1fr; } }

/* ── Doc Fields Section ── */
.doc-fields { background:var(--white,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:18px 22px; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:visible; }
.doc-fields-title { font-size:13px; font-weight:800; color:var(--g700,#334155); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.doc-fields-title i { font-size:12px; }
.doc-grid { display:grid; gap:12px 18px; overflow:visible; }
.doc-grid-2 { grid-template-columns:1fr 1fr; }
.doc-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.doc-grid-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.fg { display:flex; flex-direction:column; gap:4px; position:relative; margin-bottom:0; }
.fg-full { grid-column:1/-1; }
@media(max-width:768px) { .doc-grid-2,.doc-grid-3 { grid-template-columns:1fr 1fr; } .doc-grid-4 { grid-template-columns:1fr 1fr; } }

/* ── Sidebar Cards ── */
.sidebar-card { background:var(--white,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; overflow:hidden; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sidebar-card-h { padding:12px 16px; border-bottom:1px solid var(--border,#e2e8f0); display:flex; align-items:center; gap:8px; background:var(--g50,#f8fafc); }
.sidebar-card-h .s-ico { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.sidebar-card-h .s-title { font-size:13px; font-weight:800; color:var(--g800,#1e293b); }
.sidebar-card-b { padding:14px 16px; }

/* ── KPI Grid ── */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kpi-box { border-radius:8px; padding:12px; text-align:center; }
.kpi-box .kv { font-size:20px; font-weight:900; line-height:1.2; }
.kpi-box .kl { font-size:10.5px; font-weight:600; margin-top:3px; }

/* ── Toggle Switch ── */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--g100,#f1f5f9); }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:13px; font-weight:600; color:var(--g700,#334155); display:flex; align-items:center; gap:6px; }
.toggle-switch { width:40px; height:22px; border-radius:11px; position:relative; cursor:pointer; transition:background .2s; border:none; }
.toggle-switch.on { background:var(--success,#22c55e); }
.toggle-switch.off { background:var(--g300,#cbd5e1); }
.toggle-switch::after { content:''; position:absolute; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:all .2s; }
.toggle-switch.on::after { left:2px; }
.toggle-switch.off::after { left:20px; }

/* ── Product Image Placeholder ── */
.product-img { width:100%; aspect-ratio:1; border-radius:8px; background:var(--g100,#f1f5f9); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--g400,#94a3b8); gap:8px; border:2px dashed var(--g200,#e2e8f0); cursor:pointer; transition:all .15s; }
.product-img:hover { border-color:var(--p,#4361ee); color:var(--p,#4361ee); background:var(--p-l,#eef2ff); }
.product-img i { font-size:28px; }
.product-img span { font-size:12px; font-weight:600; }

/* ── Quick Links ── */
.quick-link { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background:var(--g50,#f8fafc); color:var(--g700,#334155); font-size:12.5px; font-weight:600; text-decoration:none; transition:background .15s; }
.quick-link:hover { background:var(--p-l,#eef2ff); color:var(--p,#4361ee); }
.quick-link .ql-arrow { margin-right:auto; color:var(--g400,#94a3b8); font-size:10px; }

/* ── Conversion Row ── */
.conv-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--g50,#f8fafc); border-radius:8px; margin-top:8px; flex-wrap:wrap; }
.conv-arrow { color:var(--g400,#94a3b8); font-size:14px; }
.conv-eq { font-size:12px; font-weight:700; color:var(--p-d,#3730a3); background:var(--p-l,#eef2ff); padding:4px 10px; border-radius:9999px; }

/* ── Alert Banner ── */
.alert-banner { border-radius:8px; padding:10px 14px; font-size:12px; font-weight:600; display:flex; align-items:flex-start; gap:8px; margin-top:10px; }
.alert-banner.info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.alert-banner.warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.alert-banner a { color:inherit; font-weight:800; text-decoration:underline; }

/* ── Audit Toggle Button ── */
.audit-toggle { position:fixed; left:20px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--white,#fff); border:1.5px solid var(--border,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,.06); color:var(--g600,#475569); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; z-index:99; transition:all .2s; }
.audit-toggle:hover { background:var(--p,#4361ee); color:#fff; border-color:var(--p,#4361ee); }
/* ═══════════════════════════════════════════════════════════════════
   Fluid ERP — Unified Design System
   نظام التصميم الموحّد — v1.0
   الفونت: Cairo | Accent: #4361ee | نمط: Clean Corporate RTL
═══════════════════════════════════════════════════════════════════ */

/* ── 1. الفونت الموحّد ──────────────────────────────────────── */
* {
  font-family: 'Cairo', sans-serif;
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}
/* FontAwesome — يجب أن يأتي بعد * مع !important ليتغلب على الـ inheritance */
/* FA font override — must come after * to win */
.fa,.fas,.far,.fal,.fad,.fa-solid,.fa-regular { font-family:"Font Awesome 6 Free" !important; }
.fab,.fa-brands { font-family:"Font Awesome 6 Brands" !important; }
code, pre, .mono, [dir="ltr"] input, input[type="number"], input[type="tel"] {
  font-family: 'Cairo', 'Courier New', monospace !important;
}

/* ── 2. الأرقام والعملة والكميات ──────────────────────────── */
/* كل رقم مالي يكون LTR + محاذاة يسار + وزن 700 */
.num, .money, .qty, .rate,
.kpi-card-val, .kc-val, .tr-kpi-val, .pk-val,
td.money, td.qty, td.num {
  direction: ltr !important;
  text-align: left !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
/* أرقام الجدول */
.list-tbl td.td-money,
.erp-table td.td-money,
table td.td-money {
  direction: ltr !important;
  text-align: left !important;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.list-tbl td.td-qty,
.erp-table td.td-qty,
table td.td-qty {
  direction: ltr !important;
  text-align: left !important;
  font-size: 13px;
}
/* حقول إدخال الأرقام */
input[type="number"],
input.input-num,
input.input-money,
input.input-qty {
  direction: ltr !important;
  text-align: left !important;
  font-weight: 600 !important;
}
/* badge العملة */
.cur-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ── 3. KPI Cards الموحّدة ──────────────────────────────────── */
/* نظام موحّد يحلّ محل: kpi-card, kc, tr-kpi-card, pk, apr-kc */
.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ds-kpi {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s, transform .15s, border-color .15s;
}
/* الخط الجانبي الملون */
.ds-kpi::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 3.5px; height: 100%;
  background: var(--ds-kpi-color, var(--p));
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.ds-kpi:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--ds-kpi-color, var(--p));
}
.ds-kpi.active {
  background: color-mix(in srgb, var(--ds-kpi-color, var(--p)) 6%, var(--white));
  border-color: var(--ds-kpi-color, var(--p));
}
/* أيقونة KPI */
.ds-kpi-ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ds-kpi-color, var(--p)) 12%, transparent);
  color: var(--ds-kpi-color, var(--p));
}
/* قيمة KPI */
.ds-kpi-val {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--g900);
  letter-spacing: -.5px;
  direction: ltr;
  text-align: left;
}
.ds-kpi-val.colored { color: var(--ds-kpi-color, var(--p)); }
.ds-kpi-lbl {
  font-size: 11.5px;
  color: var(--g500);
  font-weight: 600;
  margin-top: 3px;
}
.ds-kpi-sub {
  font-size: 10.5px;
  color: var(--g400);
  margin-top: 1px;
}
/* ألوان KPI */
.ds-kpi-blue   { --ds-kpi-color: #2563eb; }
.ds-kpi-green  { --ds-kpi-color: #059669; }
.ds-kpi-red    { --ds-kpi-color: #dc2626; }
.ds-kpi-amber  { --ds-kpi-color: #d97706; }
.ds-kpi-purple { --ds-kpi-color: #7c3aed; }
.ds-kpi-teal   { --ds-kpi-color: #0891b2; }
.ds-kpi-pink   { --ds-kpi-color: #ec4899; }
.ds-kpi-indigo { --ds-kpi-color: #4361ee; }

/* ── 4. Dropdowns الموحّدة ──────────────────────────────────── */
/* native select موحّد */
select.fi, select.form-select, .ds-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  padding-left: 30px !important;
  cursor: pointer !important;
}
/* cd-wrap (custom dropdown) موحّد مع native */
.cd-wrap .cd-display,
.cd-wrap .pt-inp {
  height: 36px !important;
  border: 1.5px solid var(--fm-bord) !important;
  border-radius: var(--r-md) !important;
  background: var(--white) !important;
  font-size: 13px !important;
  color: var(--g900) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.cd-wrap.open .cd-display,
.cd-wrap.open .pt-inp {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--p-glow) !important;
}
.cd-drop, .pt-drop {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--white) !important;
  font-size: 12.5px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
}
.cd-item:hover, .pt-item:hover {
  background: var(--p-l) !important;
  color: var(--p-d) !important;
}
.cd-item.selected, .pt-item.selected {
  background: var(--p) !important;
  color: #fff !important;
}

/* ── 5. Filters / Toolbar الموحّد ───────────────────────────── */
.ds-toolbar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.ds-search-icon {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--g400);
  font-size: 12px;
  pointer-events: none;
}
.ds-search input {
  width: 100%;
  padding: 7px 30px 7px 10px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 12.5px !important;
  background: var(--g50) !important;
  height: 36px !important;
  outline: none !important;
}
.ds-search input:focus {
  border-color: var(--p) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px var(--p-glow) !important;
}
/* Filter chips (حالة / نوع) */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g600);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
}
.ds-chip:hover { border-color: var(--p); color: var(--p); background: var(--p-l); }
.ds-chip.on    { background: var(--p); border-color: var(--p); color: #fff; }
.ds-chip.on:hover { background: var(--p-d); border-color: var(--p-d); }

/* ── 6. Tables الموحّدة ─────────────────────────────────────── */
/* نوحّد كل: erp-table, list-tbl, p-tbl, tr-tbl, un-tbl */
.erp-table, .list-tbl, .ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.erp-table th, .list-tbl th, .ds-table th {
  padding: 9px 13px;
  background: var(--g50);
  border-bottom: 1.5px solid var(--border);
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--g600);
  white-space: nowrap;
}
.erp-table td, .list-tbl td, .ds-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--bord-l);
  vertical-align: middle;
}
.erp-table tr:last-child td, .list-tbl tr:last-child td, .ds-table tr:last-child td {
  border-bottom: none;
}
.erp-table tr:hover td, .list-tbl tr:hover td, .ds-table tr.clickable:hover td {
  background: var(--g50);
}
.ds-table tr.clickable { cursor: pointer; }

/* ── 7. Dashboard Section Container ─────────────────────────── */
.ds-section {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.ds-section-hd {
  padding: 11px 16px;
  border-bottom: 1px solid var(--bord-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--g900);
}
.ds-section-hd i { font-size: 14px; }
.ds-section-body { padding: 14px 16px; }
.ds-section-body.no-pad { padding: 0; }

/* ── 8. Status Badges الموحّدة ──────────────────────────────── */
/* نوحّد: sb-*, status-badge */
.sb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.sb::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.sb-draft     { background: #fef9c3; color: #854d0e; }
.sb-confirmed { background: #dbeafe; color: #1d4ed8; }
.sb-posted    { background: #dcfce7; color: #15803d; }
.sb-done      { background: #dcfce7; color: #15803d; }
.sb-partial   { background: #fde8d8; color: #c2410c; }
.sb-cancelled { background: #fee2e2; color: #b91c1c; }
.sb-pending   { background: #fef9c3; color: #854d0e; }
.sb-approved  { background: #dcfce7; color: #15803d; }
.sb-rejected  { background: #fee2e2; color: #b91c1c; }
.sb-active    { background: #dcfce7; color: #15803d; }
.sb-inactive  { background: #f1f5f9; color: #64748b; }

/* ── 9. Action Icons الموحّدة ───────────────────────────────── */
.act-btn {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--g500);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  margin-right: 3px;
}
.act-btn:hover { background: var(--g100); color: var(--g800); border-color: var(--g300); }
.act-btn.danger:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.act-btn.success:hover { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* ── 10. Pagination الموحّدة ─────────────────────────────────── */
.ds-pagi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--bord-l);
  font-size: 11.5px;
  color: var(--g400);
}
.ds-pagi-btns { display: flex; gap: 3px; }
.ds-pg {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--g600);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.ds-pg:hover { background: var(--g50); border-color: var(--g300); }
.ds-pg.on    { background: var(--p); color: #fff; border-color: var(--p); }

/* ── 11. Bulk Bar ────────────────────────────────────────────── */
.ds-bulk {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--white);
  border: 2px solid var(--p);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.ds-bulk.show { display: flex; }
.ds-bulk-count { font-size: 13px; font-weight: 700; color: var(--p); flex: 1; }

/* ── 12. Form Sections ───────────────────────────────────────── */
.sec {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
}
.sec-head {
  padding: 10px 16px;
  background: var(--g50);
  border-bottom: 1px solid var(--bord-l);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--g700);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sec-body { padding: 16px; }
.form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fm-lbl) !important;
  margin-bottom: 5px !important;
}

/* ── 13. Avatar موحّد ────────────────────────────────────────── */
.ds-av {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── 14. RTL Number Display ──────────────────────────────────── */
/* في الجداول: الأرقام يسار، النصوص يمين */
.tbl-num { direction: ltr; text-align: left; font-weight: 700; white-space: nowrap; }
.tbl-date { font-size: 12px; color: var(--g500); white-space: nowrap; }
.tbl-code { font-family: monospace !important; font-size: 12px; font-weight: 700; color: var(--p); background: var(--p-l); padding: 2px 6px; border-radius: 4px; }
.tbl-ref  { font-weight: 700; color: var(--p); text-decoration: none; }
.tbl-ref:hover { text-decoration: underline; }

/* ── 15. محاذاة الجدول الأرقام ──────────────────────────────── */
/* في الـ erp-table: عمود المبلغ والكمية */
.erp-table th.th-num,
.erp-table th.th-money,
.erp-table th.th-qty { text-align: left !important; direction: ltr; }

/* ── 16. Empty State موحّد ───────────────────────────────────── */
.ds-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--g400);
}
.ds-empty i { font-size: 32px; opacity: .18; display: block; margin-bottom: 12px; }
.ds-empty-title { font-size: 13.5px; font-weight: 700; color: var(--g600); }
.ds-empty-sub   { font-size: 12px; margin-top: 4px; color: var(--g400); }


/* ── FontAwesome Fallback: prevent □ squares when font fails to load ── */
.fa,.fas,.far,.fab,.fal,.fad,.fa-solid,.fa-regular,.fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
}
/* If font doesn't load, icon is invisible instead of □ */
@supports not (font-family: "Font Awesome 6 Free") {
  i.fa,i.fas,i.far,i.fab,i.fal { visibility: hidden; width: 0; margin: 0; }
}
/* Fluid ERP — Purchase Form Shared CSS v1.4.0 */

/* ═══════════════════════════════════════════════════
   FLUID ERP — Purchase Form Layout
   Shared across: PR / PO / Bill / GRN / RFQ
═══════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --p:#4361ee; --p-d:#3051d3; --p-l:#eff2ff; --p-ll:#e0e7ff;
  --white:#ffffff;
  --bg:#f4f6fb;
  --border:#e2e8f0;
  --bord-l:#f1f5f9;
  --g50:#f8f9fc; --g100:#f1f5f9; --g200:#e2e8f0;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569;
  --g700:#334155; --g800:#1e293b; --g900:#0f172a;
  --success:#16a34a; --success-l:#f0fdf4; --success-ll:#bbf7d0; --success-d:#15803d;
  --warning:#d97706; --warning-l:#fffbeb; --warning-ll:#fde68a; --warning-d:#b45309;
  --danger:#dc2626; --danger-l:#fff5f5; --danger-ll:#fecaca; --danger-d:#b91c1c;
  --info:#0284c7; --info-l:#f0f9ff; --info-ll:#bae6fd; --info-d:#0369a1;
  --purple:#7c3aed; --purple-l:#f5f3ff; --purple-ll:#ddd6fe; --purple-d:#6d28d9;
  --teal:#0891b2; --teal-l:#ecfeff; --teal-ll:#a5f3fc; --teal-d:#0e7490;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08);
}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--g800);font-size:14px;min-height:100vh;direction:rtl}

/* ── Module Navbar ──────────────────────────────── */
#module-nav{
  position:sticky;top:0;z-index:200;height:48px;
  background:var(--p);display:flex;align-items:center;
  padding:0 16px;gap:0;box-shadow:0 2px 8px rgba(67,97,238,.35)
}
.mn-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:14px;padding:0 14px 0 0;border-left:1px solid rgba(255,255,255,.2);margin-left:10px;white-space:nowrap;flex-shrink:0}
.mn-brand .mn-icon{width:30px;height:30px;background:rgba(255,255,255,.18);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}
.mn-tabs{display:flex;align-items:center;flex:1;gap:0}
.mn-tab{padding:0 14px;height:48px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:12.5px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.mn-tab:hover,.mn-tab.active{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}
.mn-tools{display:flex;align-items:center;gap:6px;margin-right:auto}
.mn-tool-btn{height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:11.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:'Cairo',sans-serif;transition:all .15s}
.mn-tool-btn:hover{background:rgba(255,255,255,.2)}
.mn-version{font-size:10px;color:rgba(255,255,255,.4);font-weight:600;padding:0 8px}

/* ── Page Header ────────────────────────────────── */
.page-header{
  background:var(--white);border-bottom:1.5px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap
}
.ph-left{display:flex;align-items:center;gap:10px}
.ph-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--p),var(--p-d))}
.ph-title{font-size:16px;font-weight:800;color:var(--g900)}
.ph-sub{font-size:11.5px;color:var(--g400);margin-top:1px}
.ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{padding:6px 14px;border-radius:var(--r-md);font-size:13px;font-weight:700;border:1.5px solid var(--border);background:var(--white);color:var(--g600);cursor:pointer;font-family:'Cairo',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--g300);background:var(--g50)}
.btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.btn-primary:hover{background:var(--p-d);border-color:var(--p-d)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-warning{background:var(--warning-l);color:var(--warning-d);border-color:var(--warning-ll)}
.btn-danger-outline{background:transparent;color:var(--danger);border-color:var(--danger-ll)}
.btn-sm{padding:4px 10px;font-size:12px}

/* ── Flow Steps ─────────────────────────────────── */
.flow-steps{
  background:var(--white);border-bottom:1.5px solid var(--border);
  padding:0 24px;display:flex;align-items:stretch;gap:0;overflow-x:auto;
  min-height:44px;
}
.flow-step{
  display:flex;align-items:center;gap:8px;padding:0 18px;
  font-size:12.5px;font-weight:600;color:var(--g400);
  border-bottom:3px solid transparent;white-space:nowrap;
  transition:all .15s;position:relative;cursor:default;
}
.flow-step.done{color:var(--success,#2f9e44);border-bottom-color:transparent}
.flow-step.active{color:var(--p,#4361ee);border-bottom-color:var(--p,#4361ee);font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(67,97,238,.04))}
.flow-step .fs-dot{
  width:9px;height:9px;border-radius:50%;
  border:2px solid currentColor;flex-shrink:0;
  transition:all .15s;background:transparent;
}
.flow-step.done .fs-dot{background:var(--success,#2f9e44);border-color:var(--success,#2f9e44)}
.flow-step.active .fs-dot{background:var(--p,#4361ee);border-color:var(--p,#4361ee);box-shadow:0 0 0 3px rgba(67,97,238,.18)}
.flow-arrow{color:var(--g200);font-size:10px;align-self:center;padding:0;flex-shrink:0}

/* ── Main Layout ────────────────────────────────── */
.doc-layout{
  display:grid;
  grid-template-columns:1fr 256px;
  min-height:calc(100vh - 48px - 54px - 46px)
}

/* ── Main Column ────────────────────────────────── */
.doc-main{background:var(--white);border-left:1.5px solid var(--border)}

/* Sections */
.doc-sec{border-bottom:1.5px solid var(--border);padding:16px 20px}
.doc-sec:last-child{border-bottom:none}
.sec-title{font-size:11px;font-weight:800;color:var(--g500);letter-spacing:.3px;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.sec-title::before{content:'';width:3px;height:13px;background:var(--p);border-radius:2px;flex-shrink:0}

/* Field grid */
.fg-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fg-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg.span-2{grid-column:span 2}
.fg.span-3{grid-column:span 3}
.fl{font-size:11.5px;font-weight:700;color:var(--g500);display:flex;align-items:center;gap:5px}
.fl .req{color:var(--danger);font-size:10px}
.fl .fl-new{font-size:10px;color:var(--p);cursor:pointer;font-weight:600;margin-right:auto}
.fl .fl-new:hover{text-decoration:underline}
.fi{
  height:36px;padding:0 10px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--g800);
  background:var(--white);width:100%;font-family:'Cairo',sans-serif;
  outline:none;transition:border-color .15s,box-shadow .15s
}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(67,97,238,.1)}
.fi:disabled,.fi[readonly]{background:var(--g50);color:var(--g400);cursor:not-allowed}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:10px;padding-left:28px;cursor:pointer}
textarea.fi{height:auto;padding:8px 10px;resize:vertical;line-height:1.6}
.badge-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;margin-top:4px;width:fit-content}
.bp-green{background:var(--success-l);color:var(--success-d);border:1px solid var(--success-ll)}
.bp-orange{background:var(--warning-l);color:var(--warning-d);border:1px solid var(--warning-ll)}
.bp-blue{background:var(--p-l);color:var(--p-d);border:1px solid var(--p-ll)}

/* ── Lines Table ────────────────────────────────── */
.lines-wrap{overflow-x:auto;overflow-y:visible}
.lt{width:100%;border-collapse:collapse;font-size:12.5px;min-width:700px}
.lt thead th{
  background:var(--g50);padding:8px 10px;text-align:right;
  font-size:11px;font-weight:700;color:var(--g500);
  border-bottom:1.5px solid var(--border);white-space:nowrap
}
.lt tbody td{
  padding:7px 10px;border-bottom:1px solid var(--bord-l);
  vertical-align:middle;color:var(--g800)
}
.lt tbody tr:hover td{background:var(--p-l)}
.lt tbody tr:last-child td{border-bottom:none}
.lt tfoot td{
  padding:8px 10px;border-top:1.5px solid var(--border);
  background:var(--g50)
}
/* Line inputs */
.li{height:30px;padding:0 8px;border:1.5px solid transparent;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--g800);background:transparent;width:100%;font-family:'Cairo',sans-serif;outline:none;transition:all .15s;text-align:left}
.li:hover{border-color:var(--g200);background:var(--white)}
.li:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 2px rgba(67,97,238,.1)}
.li.li-right{text-align:right}
select.li{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 6px center;background-size:9px;padding-left:22px}
.del-r{width:24px;height:24px;border:none;background:transparent;color:var(--g300);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s}
.del-r:hover{background:var(--danger-l);color:var(--danger)}
.line-tot{font-weight:700;font-family:monospace;font-size:13px;text-align:left;color:var(--g800)}
/* Add line link */
.add-line-btn{background:none;border:none;color:var(--p);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;padding:5px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;transition:background .12s}
.add-line-btn:hover{background:var(--p-l)}
/* empty state */
.lt-empty{text-align:center;padding:28px;color:var(--g400)}
.lt-empty i{font-size:28px;display:block;margin-bottom:8px;opacity:.25}
.lt-empty p{font-size:12.5px;font-weight:600}
/* Product search inside cell */
.prod-search-wrap{position:relative}
.prod-new-item{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--success-d,#15803d);
  cursor:pointer;padding:3px 0;margin-top:2px;
  transition:opacity .15s;
}
.prod-new-item:hover{opacity:.7}

.prod-search-input{text-align:right}
.prod-drop{display:none}
.prod-drop.open{display:block}
.prod-code{font-size:10.5px;font-family:monospace;background:var(--p-l);color:var(--p-d);padding:1px 5px;border-radius:3px;flex-shrink:0}
.prod-search-wrap input::placeholder{color:var(--g400);font-weight:500}

/* ── Save Bar ────────────────────────────────────── */
.save-bar{
  position:sticky;bottom:0;z-index:100;
  background:var(--white);border-top:1.5px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 -2px 12px rgba(0,0,0,.06)
}
.save-bar-info{font-size:11.5px;color:var(--g400)}

/* ── Sidebar ─────────────────────────────────────── */
.doc-sidebar{background:var(--g50);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:visible}
.card-head{padding:9px 14px;border-bottom:1px solid var(--bord-l);display:flex;align-items:center;gap:9px;background:var(--g50)}
.card-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.card-title{font-size:12.5px;font-weight:700;color:var(--g800)}
.card-sub{font-size:10.5px;color:var(--g400);margin-top:1px}
.card-body{padding:10px 14px}

/* Status steps */
.st-step{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11.5px;color:var(--g400);border-bottom:1px solid var(--bord-l)}
.st-step:last-child{border-bottom:none}
.st-step.done{color:var(--success)}
.st-step.active{color:var(--p);font-weight:700}
.st-step.cancelled{color:var(--danger)}
.st-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex-shrink:0}
.st-dot.filled{background:currentColor}
.st-lbl{flex:1}
.st-check{font-size:9px;opacity:.8}

/* Financial summary */
.fin-row{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--bord-l)}
.fin-row:last-child{border-bottom:none}
.fin-row.grand{border-top:2px solid var(--border);padding-top:10px;margin-top:4px}
.fin-lbl{font-size:11px;color:var(--g400);font-weight:600}
.fin-val{font-size:14px;font-weight:700;font-family:monospace;color:var(--g800)}
.fin-val.grand-val{font-size:20px;color:var(--p-d);font-weight:900}
.fin-lbl{color:var(--g500)}
.fin-val{font-weight:700;font-family:monospace;color:var(--g800)}
.fin-val.grand-val{font-size:16px;color:var(--p-d);font-weight:900}

/* Action buttons */
.action-btn{width:100%;padding:7px 10px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;border:1.5px solid;cursor:pointer;font-family:'Cairo',sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;margin-bottom:6px}
.action-btn:last-child{margin-bottom:0}
.ab-review{background:var(--info-l);color:var(--info-d);border-color:var(--info-ll)}
.ab-review:hover{background:var(--info);color:#fff;border-color:var(--info)}
.ab-approve{background:var(--success-l);color:var(--success-d);border-color:var(--success-ll)}
.ab-approve:hover{background:var(--success);color:#fff;border-color:var(--success)}
.ab-cancel{background:transparent;color:var(--danger);border-color:var(--danger-ll)}
.ab-cancel:hover{background:var(--danger-l)}

/* Quick links */
.ql-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11.5px;color:var(--g500);cursor:pointer;border-bottom:1px solid var(--bord-l);transition:color .12s}
.ql-item:last-child{border-bottom:none}
.ql-item:hover{color:var(--p)}
.ql-ico{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}

/* Totals row below table */
.totals-row{background:var(--g50);padding:12px 20px;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px}
.tot-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:200px}
.tot-lbl{color:var(--g500)}
.tot-val{font-weight:700;font-family:monospace;color:var(--g800);text-align:left}
.tot-val.grand{font-size:15px;color:var(--p-d)}

/* Responsive */
@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{min-height:auto}
  .fg-grid-4{grid-template-columns:1fr 1fr}
  .fg-grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .fg-grid-4,.fg-grid-3,.fg-grid-2{grid-template-columns:1fr}
  .mn-tab{display:none}
  .mn-tab.active{display:flex}
}
@media print{
  #module-nav,.ph-actions,.save-bar,.action-btn,.del-r,.add-line-btn{display:none!important}
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{display:none}
  .lt{font-size:11px}
}

.li-dd-wrap{position:relative;width:100%}
.li-dd-inp{width:100%}
.li-dd-drop{display:none}

/* ── li-dd portal dropdown items (fix overflow clipping) ── */
.li-dd-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Cairo, sans-serif;
  font-weight: 500;
  color: var(--g700, #334155);
  border-bottom: 1px solid var(--bord-l, #f1f5f9);
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.li-dd-item:last-child { border-bottom: none; }
.li-dd-item:hover { background: var(--p-l, #eff2ff); color: var(--p, #4361ee); }

/* ── Tax column wider ── */
.lt thead th:nth-child(6),
.lt tbody td:nth-child(6) { min-width: 140px; }


/* ═══════════════════════════════════════════════════
   Mockup Design System — GRN & Purchase Forms
   ═══════════════════════════════════════════════════ */
:root{--ind:#4361ee;--indl:#eef0fd;--indd:#3451d1;--tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;--bd:#e2e8f0;--bg:#f1f5f9;--wh:#fff;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--info:#3b82f6;--r:8px;--rl:12px}

*{box-sizing:border-box;margin:0;padding:0}
:root{--ind:#4361ee;--indl:#eef0fd;--indd:#3451d1;--tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;--bd:#e2e8f0;--bg:#f1f5f9;--wh:#fff;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--info:#3b82f6;--r:8px;--rl:12px}
/* body rule removed - ERP uses its own body styles */

/* ── TOP BAR ── */
.topbar{background:var(--ind);color:#fff;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:30}
.logo{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.logo svg{opacity:.9}
.logo small{font-size:10.5px;opacity:.6;font-weight:400}
.top-right{display:flex;align-items:center;gap:12px;font-size:12px}
.top-right .sep{opacity:.3}
.av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.top-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:.15s}
.top-icon:hover{background:rgba(255,255,255,.22)}

/* ── MODULE NAV BAR ── */
.modbar{background:#fff;border-bottom:2px solid var(--bd);display:flex;align-items:center;padding:0 20px;flex-shrink:0;gap:0;overflow-x:auto}
.modbar::-webkit-scrollbar{height:0}
.mod-item{display:flex;align-items:center;gap:6px;padding:0 16px;height:44px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:.15s;position:relative}
.mod-item:hover{color:var(--ind);background:#fafbff}
.mod-item.on{color:var(--ind);border-bottom-color:var(--ind)}
.mod-item .mi{font-size:14px}
.mod-badge{background:var(--warn);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}
.mod-sep{width:1px;height:24px;background:var(--bd);margin:0 4px;flex-shrink:0}

/* ── SUB TOOLBAR ── */
.subtool{background:var(--bg);border-bottom:1px solid var(--bd);padding:8px 20px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.new-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;border:none;background:var(--ind);color:#fff;transition:.15s}
.new-btn:hover{background:var(--indd)}
.new-btn .arr{font-size:10px;opacity:.7;margin-right:2px}
.stool-sep{width:1px;height:22px;background:var(--bd)}
.time-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r);font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid var(--bd);background:var(--wh);color:var(--tx2);transition:.15s}
.time-chip:hover,.time-chip.on{background:var(--ind);border-color:var(--ind);color:#fff}
.stool-sep2{flex:1}
.srch-mini{display:flex;align-items:center;gap:5px;background:var(--wh);border:1px solid var(--bd);border-radius:var(--r);padding:5px 10px;min-width:200px}
.srch-mini input{border:none;background:transparent;font-family:'Cairo',sans-serif;font-size:12px;color:var(--tx);outline:none;width:100%;direction:rtl}

/* ── CONTENT ── */
.grn-area{flex:1;overflow-y:auto;display:flex;flex-direction:column}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:.15s;white-space:nowrap}
.btn-p{background:var(--ind);color:#fff}.btn-p:hover{background:var(--indd)}
.btn-o{background:var(--wh);color:var(--ind);border:1px solid var(--ind)}.btn-o:hover{background:var(--indl)}
.btn-g{background:var(--wh);color:var(--tx2);border:1px solid var(--bd)}.btn-g:hover{background:var(--bg)}
.btn-e{background:var(--wh);color:var(--err);border:1px solid #fca5a5}.btn-e:hover{background:#fff1f1}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-full{width:100%;justify-content:center}

/* ── PAGE HEADER ── */
.ph{background:var(--wh);border-bottom:1px solid var(--bd);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ph-left h1{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.ph-left .bc{font-size:11px;color:var(--tx3);margin-top:2px}
.ph-right{display:flex;gap:8px;align-items:center}

/* ── BADGES ── */
.bdg{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.b-draft{background:#fef3c7;color:#92400e}.b-sent{background:#dbeafe;color:#1d4ed8}
.b-approved{background:#d1fae5;color:#065f46}.b-rejected{background:#fee2e2;color:#991b1b}
.b-partial{background:#fde8d8;color:#9a3412}.b-done{background:#d1fae5;color:#065f46}
.b-open{background:#ede9fe;color:#5b21b6}.b-paid{background:#d1fae5;color:#065f46}
.b-unpaid{background:#fee2e2;color:#991b1b}.b-overdue{background:#fef3c7;color:#92400e}

/* ── FLOW STEPS ── */
.flow{background:var(--wh);border-bottom:1px solid var(--bd);padding:10px 22px;display:flex;align-items:center;flex-shrink:0;overflow-x:auto}
.step{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sc{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.s-d .sc{background:var(--ok);color:#fff}.s-a .sc{background:var(--ind);color:#fff}.s-p .sc{background:var(--bd);color:var(--tx3)}
.sl{font-size:11.5px;font-weight:600;white-space:nowrap}
.s-d .sl{color:var(--ok)}.s-a .sl{color:var(--ind)}.s-p .sl{color:var(--tx3)}
.sln{flex:1;height:1px;min-width:18px;background:var(--bd);margin:0 6px}
.sln.done{background:var(--ok)}

/* ── KPI ── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 22px}
.kc{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);padding:14px 16px;position:relative;overflow:hidden;cursor:pointer;transition:.15s}
.kc:hover{border-color:var(--ind);box-shadow:0 2px 12px rgba(67,97,238,.1)}
.kc::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--acc,var(--ind))}
.kc-lbl{font-size:11px;color:var(--tx2);font-weight:600}
.kc-val{font-size:24px;font-weight:700;color:var(--tx);margin:3px 0}
.kc-sub{font-size:10.5px;color:var(--tx3)}

/* ── TOOLBAR ── */
.toolbar{background:var(--wh);border-bottom:1px solid var(--bd);padding:9px 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.srch{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:5px 10px;flex:1;max-width:300px}
.srch input{border:none;background:transparent;font-family:'Cairo',sans-serif;font-size:12px;color:var(--tx);outline:none;width:100%;direction:rtl}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--bd);background:var(--wh);color:var(--tx2);transition:.15s;user-select:none}
.chip:hover,.chip.on{background:var(--indl);border-color:var(--ind);color:var(--ind)}
.tsep{flex:1}
.flt-sel{padding:5px 8px;border:1px solid var(--bd);border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:11.5px;color:var(--tx2);background:var(--wh);direction:rtl}

/* ── TABLE ── */
.tbl-wrap{padding:14px 22px;flex:1}
.tbl-box{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
table.dt{width:100%;border-collapse:collapse;font-size:12px}
table.dt thead tr{background:#f8fafc}
table.dt th{padding:9px 12px;text-align:right;font-weight:600;color:var(--tx2);border-bottom:1px solid var(--bd);white-space:nowrap}
table.dt td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.dt tbody tr:last-child td{border:none}
table.dt tbody tr:hover td{background:#fafbff}
table.dt tbody tr{cursor:pointer}
.ra{display:flex;gap:4px;opacity:0;transition:.15s}
table.dt tbody tr:hover .ra{opacity:1}
.ib{background:none;border:1px solid var(--bd);border-radius:5px;cursor:pointer;padding:3px 7px;font-size:11px;color:var(--tx2);transition:.15s;font-family:'Cairo',sans-serif}
.ib:hover{border-color:var(--ind);color:var(--ind);background:var(--indl)}
.ib.del:hover{border-color:var(--err);color:var(--err);background:#fff1f1}
.amt{text-align:left;direction:ltr;font-weight:600}
.pager{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--bd);font-size:11px;color:var(--tx2)}
.pg-btns{display:flex;gap:4px}
.pg-btn{padding:3px 8px;border:1px solid var(--bd);border-radius:5px;background:var(--wh);cursor:pointer;font-size:11px;font-family:'Cairo',sans-serif;transition:.15s}
.pg-btn.on,.pg-btn:hover{background:var(--ind);color:#fff;border-color:var(--ind)}

/* ── FORM ── */
.form-body{padding:14px 22px;display:flex;gap:14px;align-items:flex-start;flex:1}
.form-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.form-side{width:212px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.sec{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.sec-h{padding:10px 15px;border-bottom:1px solid var(--bd);font-size:12.5px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:7px}
.sec-h .hi{width:22px;height:22px;background:var(--indl);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px}
.sec-b{padding:14px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg .full{grid-column:1/-1}
.f-grp{display:flex;flex-direction:column;gap:4px}
.f-grp label{font-size:11px;font-weight:700;color:var(--tx2)}
.f-grp label .req{color:var(--err)}
.f-grp input,.f-grp select,.f-grp textarea{width:100%;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12.5px;color:var(--tx);background:var(--wh);outline:none;direction:rtl;transition:border .15s}
.f-grp input:focus,.f-grp select:focus,.f-grp textarea:focus{border-color:var(--ind);box-shadow:0 0 0 3px rgba(67,97,238,.08)}
.f-grp input[readonly]{background:#f8fafc;color:var(--tx2)}
.f-grp textarea{resize:vertical;min-height:64px}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--r);padding:8px 12px;font-size:11.5px;color:#1e40af;line-height:1.7}
.alert-ok{background:#f0fdf4;border:1px solid #86efac;border-radius:var(--r);padding:8px 12px;font-size:11.5px;color:#166534}
.alert-warn{background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--r);padding:8px 12px;font-size:11.5px;color:#92400e}

/* ── ITEMS TABLE ── */
.it-wrap{overflow-x:auto}
table.lt{width:100%;border-collapse:collapse;font-size:12px}
table.lt thead tr{background:#f8fafc}
table.lt th{padding:7px 8px;text-align:right;font-weight:600;color:var(--tx2);border-bottom:1px solid var(--bd);white-space:nowrap;font-size:11.5px}
table.lt td{padding:4px 4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.lt tbody tr:hover td{background:#fafbff}
table.lt td input,table.lt td select{border:1px solid transparent;border-radius:6px;padding:5px 6px;font-size:11.5px;width:100%;background:transparent;font-family:'Cairo',sans-serif;color:var(--tx);outline:none;transition:border .15s}
table.lt td input:hover,table.lt td select:hover{border-color:var(--bd)}
table.lt td input:focus,table.lt td select:focus{border-color:var(--ind);background:var(--wh)}
.lt-tot-val{padding:5px 8px;font-weight:700;color:var(--tx);text-align:left;direction:ltr;white-space:nowrap;font-size:12px}
.lt-diff-pos{color:var(--ok);font-weight:700;text-align:center}
.lt-diff-neg{color:var(--err);font-weight:700;text-align:center}
.btn-add-row{background:none;border:none;color:var(--ind);font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:8px 12px;transition:.15s}
.btn-add-row:hover{background:var(--indl)}
.btn-del-row{background:none;border:none;cursor:pointer;color:var(--tx3);padding:4px;border-radius:4px;font-size:13px;line-height:1;transition:.15s}
.btn-del-row:hover{background:#fee2e2;color:var(--err)}
.lt-tots{padding:11px 15px;border-top:1px solid var(--bd);background:#fafbff;display:flex;flex-direction:column;gap:3px}
.tot-r{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.tot-r.grand{font-size:14px;font-weight:700;color:var(--ind);border-top:1px solid var(--bd);margin-top:5px;padding-top:7px}
.tot-lbl{color:var(--tx2)}

/* ── SIDEBAR CARDS ── */
.sc-card{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.sc-h{padding:9px 13px;border-bottom:1px solid var(--bd);font-size:12px;font-weight:700;color:var(--tx2)}
.sc-b{padding:12px 13px}
.sc-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid #f1f5f9}
.sc-row:last-child{border:none;font-weight:700;color:var(--ind);font-size:13px}
.sc-lbl{color:var(--tx2)}
.sc-btns{padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.tl{margin-top:8px;border-top:1px solid var(--bd);padding-top:9px}
.tl-item{display:flex;gap:7px;margin-bottom:7px}
.tl-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.tl-txt{font-size:11px;color:var(--tx2)}.tl-date{font-size:10px;color:var(--tx3)}

/* ── ATTACH ── */
.att-zone{border:1.5px dashed var(--bd);border-radius:var(--r);padding:14px;text-align:center;color:var(--tx3);font-size:12px;cursor:pointer;transition:.15s}
.att-zone:hover{border-color:var(--ind);color:var(--ind);background:var(--indl)}

/* ── DASH ── */
.dash-grid{padding:0 22px 22px;display:grid;grid-template-columns:2fr 1fr;gap:14px}
.dc{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.dc-h{padding:11px 15px;border-bottom:1px solid var(--bd);font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.dc-b{padding:13px 15px}
.bar-wrap{display:flex;gap:4px;align-items:flex-end;height:88px}
.bar{flex:1;border-radius:4px 4px 0 0;background:var(--ind);transition:.3s;cursor:pointer}
.bar-lbls{display:flex;gap:4px;font-size:9.5px;color:var(--tx3);margin-top:4px}
.bar-lbls span{flex:1;text-align:center}
.flow-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg);border-radius:6px;margin-bottom:5px;cursor:pointer;transition:.15s}
.flow-item:hover{background:var(--indl)}
.flow-n{font-size:18px;font-weight:700;min-width:30px;color:var(--tx)}
.sup-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f1f5f9}
.sup-item:last-child{border:none}
.sup-av{width:28px;height:28px;border-radius:50%;background:var(--indl);color:var(--ind);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.act-item{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid #f1f5f9}
.act-item:last-child{border:none}
.prog{display:flex;align-items:center;gap:6px}
.prog-bar{flex:1;height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px}
.pay-sum{background:var(--indl);border:1px solid #c7d2fe;border-radius:var(--rl);padding:14px;margin-bottom:12px}

/* ── TOAST ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--tx);color:#fff;padding:9px 22px;border-radius:30px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;z-index:9999;transition:.3s;opacity:0;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{background:var(--ok)}.toast.err{background:var(--err)}.toast.info{background:var(--ind)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}


/* ══════════════════════════════════════════════════════════════════
   UNIFIED LIST-SCREEN COMPONENTS v2.0
   Extracted from requests.php (Reference Screen)
   Usage: Apply these classes to any list screen for instant consistency.
   Direction: RTL-first with [dir="ltr"] overrides at the end.
   Theme: Uses CSS vars from :root — auto-adapts to dark mode.
   ══════════════════════════════════════════════════════════════════ */

/* ── THEME SYSTEM ── */
:root {
  --accent:      var(--p);
  --accent-d:    var(--p-d);
  --accent-l:    var(--p-l);
  --accent-ll:   var(--p-ll);
  --accent-glow: var(--p-glow);
  --font-main:   'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-en:     'Segoe UI', 'Inter', system-ui, sans-serif;
}

/* Accent color presets — add data-accent="teal" to <body> or wrapper */
[data-accent="teal"]   { --accent:var(--teal);   --accent-d:var(--teal-d);   --accent-l:var(--teal-l);   }
[data-accent="purple"] { --accent:var(--purple); --accent-d:var(--purple-d); --accent-l:var(--purple-l); }
[data-accent="success"]{ --accent:var(--success);--accent-d:var(--success-d);--accent-l:var(--success-l);}
[data-accent="danger"] { --accent:var(--danger); --accent-d:var(--danger-d); --accent-l:var(--danger-l); }
[data-accent="warning"]{ --accent:var(--warning);--accent-d:var(--warning-d);--accent-l:var(--warning-l);}
[data-accent="info"]   { --accent:var(--info);   --accent-d:var(--info-d);   --accent-l:var(--info-l);   }
[data-accent="amber"]  { --accent:#f59e0b; --accent-d:#d97706; --accent-l:#fffbeb; }

/* ── LIST WRAPPER ── */
.ls-wrap { font-family: var(--font-main); background: var(--bg); min-height: calc(100vh - 60px); }
.ls-wrap * { font-family: var(--font-main); box-sizing: border-box; }

/* ── PAGE HEADER (list variant) ── */
.ls-ph { background: var(--white); border-bottom: 1px solid var(--border); padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; }
.ls-ph h1 { font-size: 15px; font-weight: 700; color: var(--g900); margin: 0; display: flex; align-items: center; gap: 8px; }
.ls-ph .ls-bc { font-size: 11px; color: var(--g400); margin-top: 2px; }
.ls-ph-r { display: flex; gap: 7px; align-items: center; }

/* ── BUTTONS ── */
.ls-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; transition: var(--t-fast); white-space: nowrap; text-decoration: none; line-height: 1.2; font-family: var(--font-main); }
.ls-btn-p { background: var(--accent); color: #fff; }
.ls-btn-p:hover { background: var(--accent-d); color: #fff; }
.ls-btn-g { background: var(--white); color: var(--g500); border: 1px solid var(--border); }
.ls-btn-g:hover { background: var(--g50); }
.ls-btn-sm { padding: 5px 11px; font-size: 12px; }

/* ── KPI ROW ── */
.ls-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px 20px 6px; }
@media(max-width:768px) { .ls-kpi { grid-template-columns: 1fr 1fr; padding: 10px 14px 4px; } }
@media(max-width:480px) { .ls-kpi { grid-template-columns: 1fr; } }

/* ── KPI CARD (list variant) ── */
.ls-kc { background: var(--white); border: 1px solid var(--bord-l); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; cursor: pointer; transition: all .2s; text-decoration: none; display: block; box-shadow: var(--sh-xs); color: inherit; }
.ls-kc::before { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 3px; height: 100%; background: var(--kc-acc, var(--accent)); }
.ls-kc:hover { border-color: var(--accent-ll, #c7d2fe); box-shadow: 0 3px 10px var(--accent-glow); transform: translateY(-1px); }
.ls-kc.on { border-color: var(--accent-ll, #c7d2fe); background: var(--accent-l); }
.ls-kc-lbl { font-size: 11px; color: var(--g500); font-weight: 600; margin-bottom: 3px; }
.ls-kc-val { font-size: 20px; font-weight: 800; color: var(--g900); line-height: 1.2; }
.ls-kc.on .ls-kc-val { color: var(--accent); }
.ls-kc-sub { font-size: 10px; color: var(--g400); margin-top: 2px; }

/* KPI color modifiers */
.ls-kc.kc-green  { --kc-acc: var(--success);  } .ls-kc.kc-green.on  { background: var(--success-l); }
.ls-kc.kc-red    { --kc-acc: var(--danger);   } .ls-kc.kc-red.on    { background: var(--danger-l); }
.ls-kc.kc-amber  { --kc-acc: var(--warning);  } .ls-kc.kc-amber.on  { background: var(--warning-l); }
.ls-kc.kc-blue   { --kc-acc: var(--accent);   } .ls-kc.kc-blue.on   { background: var(--accent-l); }
.ls-kc.kc-purple { --kc-acc: var(--purple);   } .ls-kc.kc-purple.on { background: var(--purple-l); }
.ls-kc.kc-teal   { --kc-acc: var(--teal);     } .ls-kc.kc-teal.on   { background: var(--teal-l); }

/* ── TOOLBAR / FILTER BAR ── */
.ls-tb { background: var(--white); border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ── SEARCH INPUT ── */
.ls-srch { display: flex; align-items: center; gap: 6px; background: var(--g50); border: 1px solid var(--border); border-radius: 7px; padding: 5px 11px; flex: 1; max-width: 280px; transition: var(--t-fast); }
.ls-srch:focus-within { border-color: var(--accent); background: var(--white); }
.ls-srch i { color: var(--g400); font-size: 13px; }
.ls-srch input { border: none; background: transparent; font-size: 12.5px; color: var(--g700); outline: none; width: 100%; font-family: var(--font-main); }
.ls-srch input::placeholder { color: var(--g400); }

/* ── FILTER CHIPS ── */
.ls-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--g500); transition: var(--t-fast); white-space: nowrap; text-decoration: none; font-family: var(--font-main); }
.ls-chip:hover { background: var(--accent-l); border-color: var(--accent-ll, #c7d2fe); color: var(--accent); }
.ls-chip.on { background: var(--accent-l); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ls-chip .n { background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 9px; min-width: 16px; text-align: center; line-height: 1.5; }
.ls-chip.on .n { background: var(--accent-d); }
.ls-sep { flex: 1; }
.ls-flt { padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; color: var(--g500); background: var(--white); outline: none; cursor: pointer; font-family: var(--font-main); }
.ls-flt:focus { border-color: var(--accent); }

/* ── BULK BAR ── */
.ls-bbar { display: none; align-items: center; gap: 8px; padding: 7px 20px; background: var(--white); border-bottom: 1px solid var(--border); }
.ls-bbar.on { display: flex; }
.ls-bbar-n { background: var(--accent-l); color: var(--accent); font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: var(--r-full); }
.ls-bbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--g500); transition: var(--t-fast); font-family: var(--font-main); }
.ls-bbar-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.ls-bbar-btn.del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-l); }
.ls-bbar-x { background: none; border: none; cursor: pointer; color: var(--g400); font-size: 14px; padding: 2px 5px; border-radius: 4px; margin-inline-start: auto; }
.ls-bbar-x:hover { color: var(--danger); }

/* ── TABLE WRAPPER ── */
.ls-tw { padding: 12px 20px 20px; }
.ls-tb-box { background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--sh-xs); }

/* ── TABLE (Light Header — requests.php style) ── */
table.ls { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ls thead tr { background: var(--g50); }
table.ls thead th { padding: 9px 12px; text-align: start; font-size: 11.5px; font-weight: 600; color: var(--g500); border-bottom: 1px solid var(--bord-l); white-space: nowrap; background: var(--g50); letter-spacing: .01em; }
table.ls thead th.chk { width: 40px; text-align: center; }
table.ls thead th.c { text-align: center; }
table.ls thead th.num { text-align: end; }
table.ls tbody td { padding: 9px 12px; border-bottom: 1px solid var(--bord-l); vertical-align: middle; color: var(--g700); font-size: 12.5px; line-height: 1.5; }
table.ls tbody tr:last-child td { border-bottom: none; }
table.ls tbody tr { cursor: pointer; transition: background var(--t-fast); }
table.ls tbody tr:hover td { background: var(--accent-l); }
table.ls tbody tr.sel td { background: var(--accent-l); }
table.ls tfoot td { padding: 9px 12px; background: var(--g50); border-top: 1px solid var(--border); font-size: 12px; color: var(--g500); }

/* ── REFERENCE LINK ── */
.ls-ref { font-weight: 600; color: var(--accent); text-decoration: none; font-size: 12.5px; }
.ls-ref:hover { color: var(--accent-d); }

/* ── AMOUNT CELL ── */
.ls-amt { font-weight: 600; color: var(--g700); font-size: 12.5px; direction: ltr; white-space: nowrap; text-align: start; }
.ls-amt-total { font-weight: 700; font-size: 13px; color: var(--accent); direction: ltr; text-align: start; }

/* ── STATUS BADGES ── */
.ls-bdg { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.ls-draft    { background: var(--warning-l); color: var(--warning-d); }
.ls-review   { background: var(--info-l);    color: var(--info-d); }
.ls-approved { background: var(--success-l); color: var(--success-d); }
.ls-partial  { background: #ffedd5;          color: #c2410c; }
.ls-done     { background: var(--success-l); color: var(--success-d); }
.ls-cancelled{ background: var(--danger-l);  color: var(--danger-d); }
.ls-posted   { background: var(--purple-l);  color: var(--purple-d); }
.ls-other    { background: var(--g100);      color: var(--g600); }

/* ── AVATAR ── */
.ls-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── ROW ACTIONS ── */
.ls-ra { display: flex; gap: 3px; opacity: 0; transition: var(--t-fast); }
table.ls tbody tr:hover .ls-ra { opacity: 1; }
.ls-ib { background: var(--white); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; padding: 3px 8px; font-size: 11.5px; color: var(--g500); transition: var(--t-fast); text-decoration: none; display: inline-flex; align-items: center; }
.ls-ib:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.ls-ib.del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-l); }

/* ── PAGER ── */
.ls-pgr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--g500); }
.ls-pg-btns { display: flex; gap: 3px; align-items: center; }
.ls-pg-btn { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--white); cursor: pointer; font-size: 13px; color: var(--g500); transition: var(--t-fast); text-decoration: none; font-weight: 500; font-family: var(--font-main); }
.ls-pg-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.ls-pg-btn.on { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; font-weight: 600; }
.ls-pg-btn.off { opacity: .3; cursor: default; pointer-events: none; }
.ls-pg-dots { padding: 0 3px; color: var(--g400); font-size: 12px; }

/* ── SORTABLE HEADERS ── */
.ls-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ls-th-sort:hover { color: var(--accent); background: var(--accent-l); }
.ls-th-sort .arrows { display: inline-flex; flex-direction: column; gap: 0; margin-inline-end: 4px; vertical-align: middle; line-height: 1; }
.ls-th-sort .arrows span { display: block; font-size: 8px; line-height: 1.1; color: var(--g300); transition: var(--t-fast); }
.ls-th-sort .arrows span.on { color: var(--accent); }

/* ── EMPTY STATE ── */
.ls-empty { padding: 56px; text-align: center; }
.ls-empty .ico { font-size: 40px; opacity: .15; margin-bottom: 10px; }
.ls-empty h4 { font-size: 14px; font-weight: 600; color: var(--g500); margin: 0 0 5px; }
.ls-empty p { font-size: 12px; color: var(--g400); }

/* ── CHECKBOX ── */
.ls-chk { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }


/* ══════════════════════════════════════════════════
   DARK MODE — List Screen Components
   ══════════════════════════════════════════════════ */
[data-theme="dark"] .ls-wrap      { background: var(--bg); }
[data-theme="dark"] .ls-ph        { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .ls-ph h1     { color: var(--text); }
[data-theme="dark"] .ls-tb        { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .ls-srch      { background: var(--input-bg); border-color: var(--border); }
[data-theme="dark"] .ls-srch input{ color: var(--text); }
[data-theme="dark"] .ls-chip      { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-chip:hover{ background: var(--g100); }
[data-theme="dark"] .ls-chip.on   { background: var(--g100); border-color: var(--accent); }
[data-theme="dark"] .ls-flt       { background: var(--input-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-kc        { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .ls-kc:hover  { border-color: var(--accent); }
[data-theme="dark"] .ls-kc.on     { background: var(--g100); border-color: var(--accent); }
[data-theme="dark"] .ls-kc-val    { color: var(--text); }
[data-theme="dark"] .ls-kc-lbl    { color: var(--text-muted); }
[data-theme="dark"] .ls-bbar      { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .ls-bbar-btn  { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-tb-box    { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] table.ls thead th   { background: var(--g50); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] table.ls tbody td   { color: var(--text); border-color: var(--border); }
[data-theme="dark"] table.ls tbody tr:hover td { background: var(--table-hover); }
[data-theme="dark"] table.ls tfoot td   { background: var(--g50); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-ref       { color: var(--accent); }
[data-theme="dark"] .ls-amt       { color: var(--text); }
[data-theme="dark"] .ls-ib        { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-pgr       { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-pg-btn    { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ls-empty h4  { color: var(--text-muted); }
[data-theme="dark"] .ls-empty p   { color: var(--g400); }


/* ══════════════════════════════════════════════════
   LTR SUPPORT — [dir="ltr"] overrides
   English language / Left-to-right layout
   ══════════════════════════════════════════════════ */
[dir="ltr"] .ls-wrap,
[dir="ltr"] .ls-wrap * { font-family: var(--font-en); }
[dir="ltr"] table.ls thead th { text-align: left; }
[dir="ltr"] table.ls thead th.num { text-align: right; }
[dir="ltr"] .ls-kc::before { right: auto; left: 0; }
[dir="ltr"] .ls-ph { direction: ltr; }
[dir="ltr"] .ls-tb { direction: ltr; }
[dir="ltr"] .ls-bbar-x { margin-left: auto; margin-right: 0; }
[dir="ltr"] .ls-amt,
[dir="ltr"] .ls-amt-total { text-align: right; }

/* ── Logical property aliases (for new code) ── */
/* Use margin-inline-start/end, padding-inline-start/end in new code
   for automatic RTL/LTR support without overrides. */


/* ══════════════════════════════════════════════════
   RESPONSIVE — List Screen
   ══════════════════════════════════════════════════ */
@media(max-width:768px) {
  .ls-ph { padding: 10px 14px; }
  .ls-ph h1 { font-size: 14px; }
  .ls-tb { padding: 8px 14px; }
  .ls-tw { padding: 10px 14px 14px; }
  .ls-srch { max-width: 100%; }
  .ls-ra { opacity: 1; }
  table.ls { font-size: 12px; }
  table.ls thead th,
  table.ls tbody td { padding: 8px 8px; }
}
@media(max-width:480px) {
  .ls-ph { flex-direction: column; align-items: stretch; gap: 8px; }
  .ls-ph-r { justify-content: flex-end; }
  .ls-tb { flex-direction: column; align-items: stretch; }
  .ls-srch { max-width: 100%; }
  .ls-bbar { flex-wrap: wrap; padding: 7px 14px; }
}


/* ═══════════════════════════════════════════════════════════════
   erp-form.css — merged into bundle (eliminates per-page HTTP request)
   ═══════════════════════════════════════════════════════════════ */
/**
 * ═══════════════════════════════════════════════════════════
 *  erp-form.css — Fluid ERP Global Form Component Library
 *  v5.1 — Apr 2026
 * ═══════════════════════════════════════════════════════════
 *
 *  ⚠️  قاعدة ذهبية:
 *  أي CSS component هيتكرر في أكثر من شاشة → يُكتب هنا فقط
 *
 *  ✅ يُكتب هنا:        ❌ لا يُكتب هنا:
 *  - Progress bars      - لون badge خاص بـ PO
 *  - Warning messages   - width خاص بجدول معين
 *  - Summary bars       - layout خاص بشاشة
 *  - Code column inputs - overrides صغيرة
 *  - History panels
 *  - Lock banners
 *  - Duplicate modals
 *  - Print styles
 *
 *  المحتوى:
 *  1. CSS Variables
 *  2. Reset
 *  3. Page Header (.ph)
 *  4. Badges (.bdg)
 *  5. Nav Arrows
 *  6. Buttons (.btn)
 *  7. Flow Bar (.flow)
 *  8. Form Layout (.form-body, .form-main, .form-side)
 *  9. Sections (.sec)
 * 10. Field Grids (.fg2, .fg3, .fg4)
 * 11. Form Fields (.fi, .pick-btn, .info-pill)
 * 12. Lines Table (table.lt)
 * 13. Totals (.lt-tots)
 * 14. Sidebar Cards (.sc-card)
 * 15. Save Bar (.save-bar)
 * 16. Rel Map (.rel-map-section)
 * 17. Audit Chatter
 * 18. Quick Links
 * 19. Responsive
 * ── v5.1 Components ──
 * 20. Price Lock Banner (.price-lock-banner)
 * 21. Form Summary Bar (.form-summary-bar)
 * 22. Code Column Input (.code-col-inp)
 * 23. Received Progress Bar (.rcv-wrap, .rcv-bar)
 * 24. Price Validation Warning (.price-warn)
 * 25. Price History Panel (.price-hist-panel)
 * 26. Duplicate Warning Modal (.dup-overlay)
 * 27. Print Styles (@media print)
 * ═══════════════════════════════════════════════════════════
 */

/**
 * erp-form.css — Fluid ERP Unified Form Styles v5.0
 * ملف CSS الموحد لكل فورمات السيستم
 * يشمل: Page Header, Flow Bar, Form Layout,
 *        Sections, Fields, Table, Sidebar, Save Bar,
 *        Info Pills, Badges, Buttons, Responsive
 *
 * الاستخدام:
 *   <link rel="stylesheet" href="/erp/assets/erp-bundle.css">
 *
 * Breakpoints:
 *   Desktop  ≥ 1024px
 *   Tablet   768px – 1023px
 *   Mobile   < 768px
 */

/* ═══════════════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════════════ */
:root{
  /* Brand */
  --pr:#4361ee;--pr-h:#3451d1;--pr-l:#eef0fd;
  /* Semantic */
  --ok:#10b981;--ok-l:#d1fae5;--ok-d:#065f46;
  --warn:#f59e0b;--warn-l:#fef3c7;--warn-d:#92400e;
  --err:#ef4444;--err-l:#fee2e2;--err-d:#991b1b;
  --info:#3b82f6;--info-l:#dbeafe;--info-d:#1e40af;
  /* Neutrals */
  --tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;
  --bd:#e2e8f0;--bg:#f1f5f9;--wh:#fff;
  /* Radius */
  --r:8px;--rl:12px;--rxl:16px;
  /* Sidebar */
  --sidebar-w:260px;
  /* Save bar */
  --savebar-h:56px;
}

/* ═══════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════ */
*{box-sizing:border-box}

/* ═══════════════════════════════════════════════════
   PAGE OUTER WRAPPER
═══════════════════════════════════════════════════ */
.erp-page{
  background:var(--bg);
  min-height:calc(100vh - 52px);
  padding-bottom:calc(var(--savebar-h) + 16px);
}

/* ═══════════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════════ */
.ph{
  background:var(--wh);
  border-bottom:1px solid var(--bd);
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:50;
}
.ph-left{min-width:0;flex:1}
.ph-left h1{
  font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;
}
.ph-left .bc{font-size:11px;color:var(--tx3);margin-top:3px}
.ph-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.ph-creator{font-size:11px;color:var(--tx3)}

/* Ref pill */
.ref-pill{
  font-size:12px;font-family:monospace;
  background:var(--bg);border:1px solid var(--bd);
  padding:2px 10px;border-radius:20px;color:var(--tx2);
}

/* ═══════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════ */
.bdg{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 10px;border-radius:20px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.b-draft{background:var(--warn-l);color:var(--warn-d)}
.b-sent,.b-reviewed{background:var(--info-l);color:var(--info-d)}
.b-approved{background:var(--ok-l);color:var(--ok-d)}
.b-rejected,.b-cancelled{background:var(--err-l);color:var(--err-d)}
.b-partial{background:#fde8d8;color:#9a3412}
.b-done,.b-paid{background:var(--ok-l);color:var(--ok-d)}

/* ═══════════════════════════════════════════════════
   NAV ARROWS
═══════════════════════════════════════════════════ */
.nav-arrows{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r);padding:2px;
}
.nav-arrow{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;
  color:var(--tx2);text-decoration:none;
  transition:all .15s;font-size:12px;
}
.nav-arrow:hover{background:var(--wh);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.nav-arrow.disabled{color:#cbd5e1;cursor:not-allowed;pointer-events:none}
.nav-counter{
  font-size:12px;font-weight:700;
  color:var(--tx2);padding:0 8px;
  white-space:nowrap;font-family:monospace;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;padding:7px 14px;border-radius:var(--r);
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid transparent;
  transition:.15s;white-space:nowrap;text-decoration:none;
  min-height:36px;
}
/* Primary */
.btn-p,.btn-pr{background:var(--pr);color:#fff;border-color:var(--pr)}
.btn-p:hover,.btn-pr:hover{background:var(--pr-h)}
/* Success */
.btn-ok,.btn-success{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-ok:hover,.btn-success:hover{opacity:.9}
/* Outline */
.btn-o{background:var(--wh);color:var(--pr);border-color:var(--pr)}
.btn-o:hover{background:var(--pr-l)}
/* Ghost */
.btn-g{background:var(--wh);color:var(--tx2);border-color:var(--bd)}
.btn-g:hover{background:var(--bg)}
/* Danger */
.btn-e,.btn-err{background:var(--wh);color:var(--err);border-color:#fca5a5}
.btn-e:hover,.btn-err:hover{background:var(--err-l)}
/* Warn */
.btn-warn{background:var(--wh);color:var(--warn);border-color:#fcd34d}
/* Sizes */
.btn-sm{padding:5px 12px;font-size:12px;min-height:30px}
.btn-lg{padding:10px 20px;font-size:14px;min-height:44px}
.btn-full{width:100%;justify-content:center}

/* ═══════════════════════════════════════════════════
   FLOW BAR
═══════════════════════════════════════════════════ */
.flow-bar,.flow{
  background:var(--wh);
  border-bottom:1px solid var(--bd);
  padding:10px 22px;
  display:flex;align-items:center;
  overflow-x:auto;gap:0;
  -webkit-overflow-scrolling:touch;
}
.fstep,.step{display:flex;align-items:center;gap:6px;flex-shrink:0}
.fcircle,.sc{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
/* States */
.fc-done,.s-d .sc{background:var(--ok);color:#fff}
.fc-active,.s-a .sc{background:var(--pr);color:#fff}
.fc-pending,.s-p .sc{background:var(--bg);color:var(--tx3);border:1px solid var(--bd)}
.fc-cancel{background:var(--err);color:#fff}
/* Labels */
.flabel,.sl{font-size:12px;font-weight:600;white-space:nowrap}
.fl-done,.s-d .sl{color:var(--ok)}
.fl-active,.s-a .sl{color:var(--pr)}
.fl-pending,.s-p .sl{color:var(--tx3)}
.fl-cancel{color:var(--err)}
/* Lines */
.fline,.sln{
  flex:1;height:1px;min-width:18px;max-width:60px;
  background:var(--bd);margin:0 6px;
}
.fline.done,.sln.done{background:var(--ok)}

/* ═══════════════════════════════════════════════════
   FORM LAYOUT
═══════════════════════════════════════════════════ */
.form-wrap,.form-body{
  padding:16px 22px;
  display:flex;gap:14px;
  align-items:flex-start;
}
.form-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.form-side{
  width:var(--sidebar-w);flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
  position:sticky;top:58px;
  align-self:flex-start;
}

/* ═══════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════ */
.sec{
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--rl);overflow:visible;
}
/* Section Header */
.sec-head,.sec-h{
  padding:10px 16px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--tx);
}
.sec-ico,.hi{
  width:22px;height:22px;
  background:var(--pr-l);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;color:var(--pr);
}
.sec-cnt,.cnt{
  margin-right:auto;
  background:var(--bg);color:var(--tx3);
  font-size:11px;font-weight:600;
  padding:2px 9px;border-radius:20px;
}
/* Section Body */
.sec-body,.sec-b{padding:14px}

/* ═══════════════════════════════════════════════════
   FIELD GRIDS
═══════════════════════════════════════════════════ */
.fg4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fg3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fg2,.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fg1{display:grid;grid-template-columns:1fr;gap:12px}
.full{grid-column:1/-1}

/* ═══════════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════════ */
.f-grp{display:flex;flex-direction:column;gap:4px}
.f-lbl,.f-grp label{font-size:12px;font-weight:700;color:var(--tx2)}
.f-req,.req{color:var(--err)}
.f-hint{font-size:11px;color:var(--tx3);margin-top:2px}
.f-err-msg{font-size:11px;color:var(--err);margin-top:3px}

.fi{
  width:100%;padding:7px 11px;
  border:1px solid var(--bd);border-radius:var(--r);
  font-family:'Cairo',sans-serif;font-size:13px;
  color:var(--tx);background:var(--wh);
  transition:border .15s;outline:none;direction:rtl;
  min-height:36px;
}
.fi:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(67,97,238,.09)}
.fi[readonly],.fi.readonly{background:#f8fafc;color:var(--tx2);cursor:default}
.fi.fi-err{border-color:var(--err)}
select.fi{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 10px center;
  background-size:10px;padding-left:28px;
}
textarea.fi{resize:vertical;min-height:72px;line-height:1.6}

/* ═══════════════════════════════════════════════════
   CUSTOM PICKER BUTTON
═══════════════════════════════════════════════════ */
.pick-btn{
  width:100%;padding:7px 11px;
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--r);font-family:'Cairo',sans-serif;
  font-size:13px;color:var(--tx);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;transition:border .15s;outline:none;min-height:36px;
}
.pick-btn:hover,.pick-btn.open{border-color:var(--pr)}
.pick-btn:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(67,97,238,.09)}

/* ═══════════════════════════════════════════════════
   INFO PILLS (تحت الحقول)
═══════════════════════════════════════════════════ */
.info-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;
  width:fit-content;margin-top:4px;
}
.info-pill-blue,.pill-blue{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
.info-pill-green,.pill-green{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}
.info-pill-warn,.pill-warn{color:var(--warn-d);background:var(--warn-l);border:1px solid #fcd34d}

/* ═══════════════════════════════════════════════════
   LINES TABLE
═══════════════════════════════════════════════════ */
.it-wrap,.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.lt{
  width:100%;border-collapse:collapse;
  font-size:12px;min-width:680px;
}
table.lt thead tr{background:#f8fafc}
table.lt th{
  padding:8px 8px;text-align:right;
  font-weight:600;color:var(--tx2);
  border-bottom:1px solid var(--bd);
  white-space:nowrap;font-size:11.5px;
}
table.lt th.r,.lt th.num{text-align:left}
table.lt td{padding:4px 4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.lt tbody tr:hover td{background:#fafbff}

/* Inline cell inputs */
table.lt td input,
table.lt td select{
  border:1px solid transparent;border-radius:6px;
  padding:5px 6px;font-size:12px;width:100%;
  background:transparent;font-family:'Cairo',sans-serif;
  color:var(--tx);outline:none;transition:border .15s;
}
table.lt td input:hover,
table.lt td select:hover{border-color:var(--bd)}
table.lt td input:focus,
table.lt td select:focus{border-color:var(--pr);background:var(--wh)}
table.lt td select{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 6px center;
  background-size:9px;padding-left:22px;
}
/* Numeric cell */
.lt-num,.num-cell{text-align:left!important;font-family:monospace;font-weight:700}
.lt-tot-val{
  padding:5px 7px;font-weight:700;
  text-align:left;direction:ltr;
  white-space:nowrap;font-size:12px;
  font-family:monospace;
}
/* Add/Delete row buttons */
.btn-add-row{
  background:none;border:none;color:var(--pr);
  font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:5px;
  padding:10px 14px;transition:.15s;width:100%;
}
.btn-add-row:hover{background:var(--pr-l)}
.btn-del-row{
  background:none;border:none;cursor:pointer;
  color:var(--tx3);padding:4px;border-radius:4px;
  font-size:13px;line-height:1;transition:.15s;
  display:block;margin:auto;
}
.btn-del-row:hover{background:#fee2e2;color:var(--err)}

/* ═══════════════════════════════════════════════════
   TOTALS
═══════════════════════════════════════════════════ */
.lt-tots{
  padding:12px 16px;border-top:1px solid var(--bd);
  background:#fafbff;display:flex;flex-direction:column;gap:3px;
}
.tot-r{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;padding:3px 0;
}
.tot-r.grand{
  font-size:14px;font-weight:700;color:var(--pr);
  border-top:1px solid var(--bd);margin-top:5px;padding-top:7px;
}
.tot-lbl{color:var(--tx2)}
.tot-val{font-family:monospace;font-weight:700}

/* ═══════════════════════════════════════════════════
   SIDEBAR CARDS
═══════════════════════════════════════════════════ */
.side-card,.sc-card{
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--rl);overflow:hidden;
}
.side-hdr,.sc-h{
  padding:9px 14px;border-bottom:1px solid var(--bd);
  font-size:12px;font-weight:700;color:var(--tx2);
  background:#fafbfc;
}
.side-body,.sc-b{padding:12px 14px}
.sc-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;padding:5px 0;border-bottom:1px solid #f1f5f9;gap:6px;
}
.sc-row:last-child{border:none}
.sc-row.grand{font-weight:700;font-size:13px;padding-top:8px}
.sc-lbl{color:var(--tx2);flex-shrink:0}
.sc-row span:last-child{text-align:left;font-family:monospace;word-break:break-all}
.side-btns,.sc-btns{padding:12px 14px;display:flex;flex-direction:column;gap:8px}

/* ═══════════════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════════════ */
.tl{margin-top:8px;border-top:1px solid var(--bd);padding-top:9px}
.tl-item{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.tl-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.tl-txt{font-size:11px;color:var(--tx2)}
.tl-date{font-size:10px;color:var(--tx3)}

/* ═══════════════════════════════════════════════════
   CONVERSION PROGRESS
═══════════════════════════════════════════════════ */
.conv-bar{height:6px;background:#e0e7ff;border-radius:3px;overflow:hidden;margin:7px 0}
.conv-fill{height:100%;border-radius:3px;background:var(--pr);transition:width .3s}

/* ═══════════════════════════════════════════════════
   SAVE BAR — Fixed Bottom
═══════════════════════════════════════════════════ */
.save-bar{
  position:fixed;bottom:0;right:0;left:0;z-index:150;
  background:var(--wh);border-top:1px solid var(--bd);
  padding:11px 22px;display:flex;justify-content:flex-end;
  gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.07);
  height:var(--savebar-h);
}

/* ═══════════════════════════════════════════════════
   PRODUCT DROP PORTAL
═══════════════════════════════════════════════════ */
.pr-pdrop{
  position:fixed;z-index:999999;display:none;
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--rl);box-shadow:0 4px 20px rgba(0,0,0,.1);
  overflow:hidden;min-width:300px;max-width:440px;
}
.pr-pdrop-hd{padding:8px 12px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
.pr-pdrop-hd input{
  width:100%;border:1px solid var(--bd);border-radius:6px;
  padding:6px 10px;font-size:12px;font-family:'Cairo',sans-serif;outline:none;
}
.pr-pdrop-hd input:focus{border-color:var(--pr)}
.pr-pdrop-list{max-height:260px;overflow-y:auto}
.pr-pdrop-item{
  padding:9px 12px;cursor:pointer;display:flex;align-items:center;
  gap:8px;border-bottom:1px solid #f8fafc;font-size:12px;
}
.pr-pdrop-item:hover{background:#f0f4ff}
.pr-pdrop-code{font-size:10.5px;color:var(--tx3);font-family:monospace;flex-shrink:0;min-width:60px}
.pr-pdrop-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-pdrop-add{
  padding:8px 12px;cursor:pointer;display:flex;align-items:center;
  gap:6px;font-size:12px;font-weight:700;color:var(--ok);
  border-top:1px solid #f1f5f9;position:sticky;bottom:0;background:var(--wh);
}
.pr-pdrop-add:hover{background:#f0fdf4}
.pr-pdrop-empty{padding:14px;text-align:center;color:var(--tx3);font-size:12px}

/* ═══════════════════════════════════════════════════
   TAX PICKER
═══════════════════════════════════════════════════ */
.tax-pick-wrap{position:relative}
.tax-pick-btn{
  width:100%;padding:5px 8px;
  background:var(--wh);border:1px solid transparent;
  border-radius:6px;font-family:'Cairo',sans-serif;
  font-size:12px;color:var(--pr);font-weight:600;
  cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:4px;
  transition:border .15s;outline:none;
}
.tax-pick-btn:hover{border-color:var(--bd)}
.tax-pick-btn:focus,.tax-pick-btn.open{border-color:var(--pr)}
.uom-inp{cursor:pointer!important;color:var(--pr)!important;font-weight:600!important}

/* ═══════════════════════════════════════════════════
   DOCUMENT RELATIONSHIP MAP
═══════════════════════════════════════════════════ */
.rel-map-section{
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--rl);overflow:hidden;margin:0 22px 16px;
}
.rel-map-head{
  padding:10px 16px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.rel-map-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.rel-map-body{height:280px;position:relative;background:#fafbff}
#relMapCanvas{width:100%;height:100%}
/* Node tooltips */
.rel-tooltip{
  position:absolute;background:#1e293b;color:#fff;
  font-size:11px;padding:6px 10px;border-radius:8px;
  pointer-events:none;z-index:100;display:none;
  font-family:'Cairo',sans-serif;direction:rtl;
  max-width:180px;line-height:1.5;
}

/* ═══════════════════════════════════════════════════
   AUDIT CHATTER (سجل التغيرات)
═══════════════════════════════════════════════════ */
#auditChatterWrap{position:fixed;left:0;top:0;height:100vh;z-index:1300;pointer-events:none}
#auditToggleBtn{
  pointer-events:all;position:fixed;left:0;bottom:80px;
  background:#1e2a3b;color:#fff;border:none;
  border-radius:0 6px 6px 0;padding:7px 6px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;font-size:13px;
  box-shadow:2px 0 8px rgba(0,0,0,.18);
  transition:background .18s;z-index:1301;
}
#auditToggleBtn:hover{background:var(--pr)}
.ac-cnt-badge{
  background:#ef4444;color:#fff;font-size:9px;font-weight:800;
  min-width:14px;height:14px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
#auditOverlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.35);z-index:1302;pointer-events:all;
}
#auditOverlay.show{display:block}
.audit-chatter{
  pointer-events:all;position:fixed;
  left:-380px;top:0;width:360px;height:100vh;
  background:var(--wh);border-right:1.5px solid var(--bd);
  box-shadow:4px 0 28px rgba(0,0,0,.14);
  z-index:1303;display:flex;flex-direction:column;
  transition:left .26s cubic-bezier(.4,0,.2,1);
}
.audit-chatter.open{left:0}
.ac-hdr{
  padding:13px 16px;background:#1e2a3b;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;gap:8px;
}
.ac-hdr-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.ac-hdr-cnt{
  background:var(--pr);color:#fff;font-size:10px;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.ac-hdr-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;
  width:28px;height:28px;border-radius:7px;cursor:pointer;
  font-size:12px;transition:background .15s;
}
.ac-hdr-close:hover{background:rgba(255,255,255,.2)}
.ac-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--bd) transparent;
  direction:rtl;
}
.ac-body::-webkit-scrollbar{width:4px}
.ac-body::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.ac-date-sep{text-align:center;position:relative;margin:14px 16px 4px}
.ac-date-sep::before{
  content:'';position:absolute;top:50%;left:0;right:0;
  height:1px;background:#e8ecf0;
}
.ac-date-sep span{
  position:relative;background:var(--wh);padding:0 10px;
  font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.3px;
}
.ac-entry{padding:12px 16px;border-bottom:1px solid #f1f5f9;direction:rtl}
.ac-entry:last-child{border-bottom:none}
.ac-entry:hover{background:#fafbff}
.ac-entry-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ac-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#fff;flex-shrink:0;
}
.ac-entry-user{font-size:13px;font-weight:700;color:#0f172a}
.ac-entry-time{font-size:11.5px;color:var(--tx3)}
.ac-entry-body{padding-right:39px}
.ac-changes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.ac-change-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:12px;padding:2px 0 2px 12px;position:relative;
}
.ac-change-row::before{content:'•';position:absolute;left:0;color:#cbd5e1;font-size:14px;top:1px}
.ac-ch-from{
  background:#fee2e2;color:#991b1b;padding:1px 7px;border-radius:4px;
  font-size:11.5px;text-decoration:line-through;opacity:.85;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ac-ch-arrow{color:var(--tx3);font-size:11px;flex-shrink:0}
.ac-ch-to{
  background:#dcfce7;color:#166534;padding:1px 7px;border-radius:4px;
  font-size:11.5px;font-weight:700;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ac-ch-field-lbl{color:#334155;font-size:11.5px;font-weight:700;flex-shrink:0;min-width:55px}
.ac-msg{font-size:12.5px;color:var(--tx2);line-height:1.55}
.ac-action-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 8px;border-radius:20px;font-size:11px;font-weight:700;
}
.ac-action-success{background:#dcfce7;color:#15803d}
.ac-action-primary{background:#dbeafe;color:#1d4ed8}
.ac-action-danger{background:#fee2e2;color:#991b1b}
.ac-action-warning{background:#fef3c7;color:#92400e}
.ac-action-secondary{background:#f1f5f9;color:#475569}
.ac-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;height:200px;
  color:var(--tx3);font-size:13px;direction:rtl;
}
.ac-empty i{font-size:36px}

/* ═══════════════════════════════════════════════════
   QUICK LINKS
═══════════════════════════════════════════════════ */
.quick-link{
  font-size:12px;color:var(--tx2);text-decoration:none;
  display:flex;align-items:center;gap:6px;
  padding:5px 0;border-bottom:1px solid #f1f5f9;
  transition:color .15s;
}
.quick-link:last-child{border:none}
.quick-link:hover{color:var(--pr)}
.quick-link-count{
  margin-right:auto;background:var(--pr-l);color:var(--pr);
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET (768-1023px)
═══════════════════════════════════════════════════ */
@media(max-width:1023px){
  .form-wrap,.form-body{flex-direction:column}
  .form-side{
    width:100%;position:static;
    max-height:none;overflow-y:visible;
    flex-direction:row;flex-wrap:wrap;
  }
  .form-side .side-card,
  .form-side .sc-card{flex:1;min-width:200px}
  .fg4{grid-template-columns:repeat(2,1fr)}
  .fg3{grid-template-columns:repeat(2,1fr)}
  .ph-creator{display:none}
  .rel-map-body{height:220px}
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
═══════════════════════════════════════════════════ */
@media(max-width:767px){
  /* Header */
  .ph{padding:10px 14px;gap:8px}
  .ph-right{width:100%;justify-content:flex-end}
  .ph-left h1{font-size:14px}
  .ref-pill{display:none}

  /* Flow */
  .flow-bar,.flow{padding:8px 14px}
  .fstep .flabel,.step .sl{display:none}
  .fstep.active .flabel,
  .step.s-a .sl{display:block;font-size:10px}
  .fcircle,.sc{width:20px;height:20px;font-size:10px}
  .fline,.sln{min-width:10px;max-width:30px}

  /* Form */
  .form-wrap,.form-body{padding:10px 12px;gap:10px}
  .form-side{flex-direction:column}
  .form-side .side-card,
  .form-side .sc-card{min-width:unset}
  .fg4,.fg3,.fg2,.fg{grid-template-columns:1fr}

  /* Save Bar */
  .save-bar{padding:8px 12px;gap:6px}
  .save-bar .btn{flex:1}

  /* Table mobile */
  .col-hide-mobile{display:none}

  /* Rel map */
  .rel-map-body{height:180px}
  .rel-map-section{margin:0 12px 12px}

  /* Buttons touch target */
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
}

/* ═══════════════════════════════════════════════════
   FORM COMPONENTS v5.1 — Apr 2026
   هذه الـ components مشتركة بين كل الشاشات
═══════════════════════════════════════════════════ */

/* ── 1. Price Lock Banner ────────────────────────────
   يظهر في أي شاشة لما الأسعار مقفولة بسبب GRN أو invoice
   الاستخدام: order_form.php, grn_form.php, vendor_bill_form.php
─────────────────────────────────────────────────── */
.price-lock-banner{
  background:#fff7ed;border:1.5px solid #fed7aa;
  border-radius:var(--rl);padding:10px 16px;
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:#9a3412;font-weight:600;
}
.price-lock-banner i{color:#ea580c;font-size:16px;flex-shrink:0}
.price-lock-banner .plb-msg{flex:1}
.price-lock-banner .plb-tag{
  font-size:11px;background:#fed7aa;color:#9a3412;
  padding:2px 9px;border-radius:10px;font-weight:700;flex-shrink:0;
}

/* ── 2. Form Summary Bar ────────────────────────────
   شريط KPIs فوق جدول البنود — يتحدث live
   الاستخدام: order_form, sales/order_form, request_form
─────────────────────────────────────────────────── */
.form-summary-bar{
  display:flex;align-items:stretch;
  background:var(--bg);border:1px solid var(--bd);
  border-radius:var(--r);overflow:hidden;
  margin:10px 14px 8px;
}
.fsb-item{
  flex:1;padding:8px 10px;text-align:center;
  border-left:1px solid var(--bd);
}
.fsb-item:last-child{border-left:none}
.fsb-val{font-size:15px;font-weight:900;font-family:monospace;color:var(--tx);display:block}
.fsb-lbl{font-size:10px;font-weight:600;color:var(--tx3);display:block;margin-top:1px}
.fsb-item.fsb-ok .fsb-val{color:var(--ok-d)}
.fsb-item.fsb-warn .fsb-val{color:var(--warn-d)}
.fsb-item.fsb-primary .fsb-val{color:var(--pr)}

/* ── 3. Code Column Input ───────────────────────────
   حقل الكود قابل للضغط عليه لفتح product portal
   الاستخدام: أي شاشة فيها جدول أصناف
─────────────────────────────────────────────────── */
.code-col-inp{
  font-family:monospace!important;font-size:11px!important;
  color:var(--pr)!important;font-weight:700!important;
  cursor:pointer!important;text-align:center!important;
  background:#fafbff!important;
}
.code-col-inp:hover{border-color:var(--p-ll)!important}
.code-col-inp:focus{border-color:var(--pr)!important;background:var(--wh)!important}

/* ── 4. Received Qty Progress Bar ───────────────────
   شريط تقدم الاستلام في جدول البنود
   الاستخدام: order_form, grn_form, vendor_bill_form
─────────────────────────────────────────────────── */
.rcv-wrap{min-width:85px;padding:2px}
.rcv-nums{display:flex;justify-content:space-between;font-size:10px;font-weight:700;margin-bottom:3px}
.rcv-nums .rcv-done{color:var(--ok-d)}
.rcv-nums .rcv-total{color:var(--tx3)}
.rcv-bar{height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.rcv-fill{height:100%;border-radius:3px;transition:width .3s}
.rcv-fill.rcv-full{background:var(--ok)}
.rcv-fill.rcv-part{background:var(--warn)}
.rcv-fill.rcv-zero{background:var(--tx3)}
.rcv-pct{font-size:9.5px;color:var(--tx3);margin-top:2px;text-align:center}

/* ── 5. Price Validation Warning ────────────────────
   تحذير inline لو السعر أعلى من آخر شراء
   الاستخدام: order_form, rfq_form, vendor_bill_form
─────────────────────────────────────────────────── */
.price-warn{
  font-size:10.5px;font-weight:700;
  color:var(--err-d);background:var(--err-l);
  border:1px solid #fca5a5;border-radius:5px;
  padding:2px 7px;margin-top:3px;
  display:none;align-items:center;gap:4px;
}
.price-warn.show{display:flex}

/* ── 6. Price History Button ────────────────────────
   زرار 📊 بجانب حقل السعر يفتح history panel
─────────────────────────────────────────────────── */
.price-hist-btn{
  background:none;border:none;cursor:pointer;
  color:var(--tx3);font-size:13px;padding:2px 4px;
  border-radius:4px;transition:.15s;flex-shrink:0;line-height:1;
}
.price-hist-btn:hover{color:var(--pr);background:var(--pr-l)}

/* ── 7. Price History Panel ─────────────────────────
   popup يعرض آخر 3 أسعار شراء من نفس المورد
─────────────────────────────────────────────────── */
.price-hist-panel{
  position:fixed;z-index:99998;
  background:var(--wh);border:1px solid var(--bd);
  border-radius:var(--rl);box-shadow:0 8px 24px rgba(0,0,0,.14);
  width:260px;font-family:'Cairo',sans-serif;direction:rtl;
  display:none;overflow:hidden;
}
.price-hist-panel.open{display:block}
.php-hd{
  padding:9px 12px;border-bottom:1px solid var(--bd);
  background:var(--bg);display:flex;align-items:center;
  justify-content:space-between;font-size:12px;font-weight:700;color:var(--tx);
}
.php-hd button{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:13px}
.php-hd button:hover{color:var(--err)}
.php-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-bottom:1px solid #f8fafc;font-size:12px;
}
.php-item:last-of-type{border-bottom:none}
.php-date{color:var(--tx3);font-size:10.5px}
.php-ref{color:var(--tx3);font-size:10px;font-family:monospace}
.php-price{font-family:monospace;font-weight:700;color:var(--tx);margin-right:auto}
.php-diff{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:8px}
.diff-up{background:var(--err-l);color:var(--err-d)}
.diff-dn{background:var(--ok-l);color:var(--ok-d)}
.diff-eq{background:var(--bg);color:var(--tx3)}
.php-empty{padding:18px;text-align:center;color:var(--tx3);font-size:12px}

/* ── 8. Duplicate Warning Modal ─────────────────────
   modal تحذير من وجود مستند مكرر
─────────────────────────────────────────────────── */
.dup-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  z-index:9999;display:none;align-items:center;
  justify-content:center;backdrop-filter:blur(2px);
}
.dup-overlay.open{display:flex}
.dup-modal{
  background:var(--wh);border-radius:var(--rxl);
  width:460px;max-width:95vw;
  box-shadow:0 24px 48px rgba(0,0,0,.2);overflow:hidden;
}
.dup-modal-hd{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px}
.dup-modal-ico{width:36px;height:36px;background:var(--warn-l);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--warn);font-size:17px;flex-shrink:0}
.dup-modal-hd h3{font-size:14px;font-weight:700;color:var(--tx);margin:0}
.dup-modal-body{padding:14px 20px}
.dup-item{
  border:1px solid var(--bd);border-radius:var(--r);
  padding:10px 14px;display:flex;align-items:center;
  gap:12px;margin-bottom:8px;cursor:pointer;transition:.15s;
}
.dup-item:hover{border-color:var(--pr);background:var(--pr-l)}
.dup-item-ref{font-family:monospace;font-weight:700;color:var(--pr);font-size:13px}
.dup-item-det{flex:1;font-size:12px;color:var(--tx2)}
.dup-modal-ft{padding:14px 20px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;background:var(--bg)}

/* ── 9. Global Print Styles ─────────────────────────
   تطبق على كل الشاشات التي تستخدم assets/erp-bundle.css
─────────────────────────────────────────────────── */
@media print{
  /* إخفاء عناصر التنقل */
  .ph-right .btn,
  .save-bar,
  .form-side,
  .btn-add-row,
  .btn-del-row,
  .price-hist-btn,
  .price-warn,
  .price-lock-banner,
  .pick-drop,
  .pick-footer,
  .pr-pdrop,
  .price-hist-panel,
  .dup-overlay,
  .rel-map-section{display:none!important}

  /* تعديلات الطباعة */
  body{background:#fff!important}
  .form-body,.form-wrap{padding-bottom:0!important;gap:0!important;flex-direction:column!important}
  .form-main{width:100%!important}
  .sec{break-inside:avoid;border:1px solid #ccc!important;margin-bottom:8px}
  .ph{padding:8px 0!important;border-bottom:2px solid #000!important}
  .lt-tots,.form-summary-bar{background:#f8f8f8!important}
  table.lt th,table.lt td{border:1px solid #ddd!important}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ═══════════════════════════════════════════════════════════════
   purchase-form-shared.css — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   purchase-form-shared.css
   النمط الموحّد لكل فورم في موديول المشتريات
   مستوحى من order_form.css
   ════════════════════════════════════════════════════════ */
.pf-wrap{font-family:'Cairo',sans-serif;background:#f8fafc;min-height:calc(100vh - 60px)}
.pf-wrap *{font-family:'Cairo',sans-serif;box-sizing:border-box}

/* ── Page Header ── */
.pf-wrap .pf-ph{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 22px;display:flex;align-items:center;justify-content:space-between}
.pf-wrap .pf-ph h1{font-size:15px;font-weight:700;color:#0f172a;margin:0;display:flex;align-items:center;gap:8px}
.pf-wrap .pf-ph .pf-bc{font-size:11px;color:#94a3b8;margin-top:2px}
.pf-wrap .pf-ph-r{display:flex;gap:7px;align-items:center}

/* ── Flow Stepper ── */
.pf-wrap .pf-flow{background:#fff;border-bottom:1px solid #e2e8f0;padding:9px 22px;display:flex;align-items:center;overflow-x:auto}
.pf-wrap .pf-step{display:flex;align-items:center;gap:5px;flex-shrink:0}
.pf-wrap .pf-sc{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.pf-wrap .pf-s-done .pf-sc{background:#10b981;color:#fff}
.pf-wrap .pf-s-active .pf-sc{background:#4361ee;color:#fff}
.pf-wrap .pf-s-pending .pf-sc{background:#e2e8f0;color:#94a3b8}
.pf-wrap .pf-sl{font-size:11px;font-weight:600;white-space:nowrap}
.pf-wrap .pf-s-done .pf-sl{color:#10b981}
.pf-wrap .pf-s-active .pf-sl{color:#4361ee}
.pf-wrap .pf-s-pending .pf-sl{color:#94a3b8}
.pf-wrap .pf-sln{flex:1;height:1px;min-width:14px;max-width:50px;background:#e2e8f0;margin:0 5px}
.pf-wrap .pf-sln.done{background:#10b981}

/* ── 2-row header (pfh2 pattern) — shared across unified document forms ── */
.pf-wrap .pfh2-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pf-wrap .pfh2-tools .pfh2-icobtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;font-size:13px;cursor:pointer;color:#475569;transition:all .15s;text-decoration:none}
.pf-wrap .pfh2-tools .pfh2-icobtn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#1e293b;transform:translateY(-1px)}
.pf-wrap .pfh2-tools .pfh2-back{padding:0 11px;width:auto;height:30px;font-size:11.5px;font-weight:600;gap:4px}
.pf-wrap .pfh2-tools .pfh2-creator{display:inline-flex;align-items:center;font-size:11.5px;color:#64748b;padding:0 9px;border-right:1px solid #e2e8f0;height:22px}
.pf-wrap .pfh2-tools .pfh2-creator b{color:#334155;font-weight:700;margin-right:4px}
.pf-wrap .pfh2-flow-row{background:#fff;border-bottom:1px solid #e2e8f0;padding:8px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pf-wrap .pf-ph,.pf-wrap .pfh2-flow-row{position:sticky;background:#fff;z-index:50}
.pf-wrap .pf-ph{top:0}
.pf-wrap .pfh2-flow-row{top:50px}
@media print{.pf-wrap .pf-ph,.pf-wrap .pfh2-flow-row{position:static}}
.pf-wrap .pfh2-flow-row .pf-flow{background:transparent;border:none;padding:0;flex:1;min-width:0}
@media(max-width:780px){.pf-wrap .pfh2-tools{flex-wrap:wrap;justify-content:flex-end}}

/* ── Buttons ── */
.pf-wrap .pf-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:.15s;white-space:nowrap;text-decoration:none;line-height:1.2}
.pf-wrap .pf-btn-p{background:#4361ee;color:#fff}.pf-wrap .pf-btn-p:hover{background:#3451d1;color:#fff}
.pf-wrap .pf-btn-o{background:#fff;color:#4361ee;border:1px solid #4361ee}.pf-wrap .pf-btn-o:hover{background:#eef0fd}
.pf-wrap .pf-btn-g{background:#fff;color:#64748b;border:1px solid #e2e8f0}.pf-wrap .pf-btn-g:hover{background:#f8fafc}
.pf-wrap .pf-btn-e{background:#fff;color:#ef4444;border:1px solid #fca5a5}.pf-wrap .pf-btn-e:hover{background:#fff1f1}
.pf-wrap .pf-btn-sm{padding:5px 11px;font-size:12px}
.pf-wrap .pf-btn-full{width:100%;justify-content:center}

/* ── Body Layout ── */
.pf-wrap .pf-body{display:flex;gap:14px;padding:14px 20px 90px;align-items:flex-start}
.pf-wrap .pf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.pf-wrap .pf-side{width:216px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:14px}

/* ── Sections ── */
.pf-wrap .sec{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:visible}
.pf-wrap .sec-h{padding:10px 15px;border-bottom:1px solid #e2e8f0;font-size:12.5px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px}
.pf-wrap .sec-h .hi{width:22px;height:22px;background:#eef0fd;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.pf-wrap .sec-b{padding:14px}

/* ── Form Grid ── */
.pf-wrap .fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-wrap .fg .full{grid-column:1/-1}
.pf-wrap .fg4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pf-wrap .f-grp{display:flex;flex-direction:column;gap:4px}
.pf-wrap .f-grp label{font-size:11.5px;font-weight:600;color:#64748b}
.pf-wrap .f-grp label .req{color:#ef4444}
.pf-wrap .f-grp input,.pf-wrap .f-grp select,.pf-wrap .f-grp textarea{width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;outline:none;transition:border .15s}
.pf-wrap .f-grp input:focus,.pf-wrap .f-grp select:focus,.pf-wrap .f-grp textarea:focus{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
.pf-wrap .f-grp input[readonly],.pf-wrap .f-grp textarea[readonly]{background:#f8fafc;color:#64748b}
.pf-wrap .f-grp select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:10px;padding-left:28px}
.pf-wrap .f-grp textarea{resize:vertical;min-height:70px;line-height:1.6}
.pf-wrap .fi{width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;outline:none;transition:border .15s}
.pf-wrap .fi:focus{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
.pf-wrap .fi[readonly]{background:#f8fafc;color:#64748b}

/* ── Sidebar Cards ── */
.pf-wrap .sc-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}
.pf-wrap .sc-h{padding:9px 13px;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:700;color:#64748b}
.pf-wrap .sc-b{padding:12px 13px}
.pf-wrap .sc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid #f1f5f9}
.pf-wrap .sc-row:last-child{border:none;font-weight:700;color:#4361ee}
.pf-wrap .sc-lbl{color:#64748b}
.pf-wrap .sc-btns{padding:12px 13px;display:flex;flex-direction:column;gap:7px}

/* ── Items Table ── */
.pf-wrap .it-wrap{overflow-x:auto}
.pf-wrap table.lt{width:100%;border-collapse:collapse;font-size:12.5px}
.pf-wrap table.lt thead tr{background:#f8fafc}
.pf-wrap table.lt thead th{padding:8px 8px;text-align:right;font-weight:600;color:#64748b;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-size:11.5px}
.pf-wrap table.lt thead th.r{text-align:left}
.pf-wrap table.lt thead th.c{text-align:center}
.pf-wrap table.lt tbody td{padding:4px 4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.pf-wrap table.lt tbody tr:hover td{background:#fafbff}
.pf-wrap table.lt td input,.pf-wrap table.lt td select{width:100%;padding:6px 7px;border:1px solid transparent;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;color:#1e293b;background:transparent;transition:border .15s;outline:none}
.pf-wrap table.lt td input:focus,.pf-wrap table.lt td select:focus{border-color:#4361ee;background:#fff;box-shadow:0 0 0 2px rgba(67,97,238,.08)}
.pf-wrap .lt-tot-val{text-align:left;font-weight:700;color:#1e293b;padding:6px 7px;font-family:monospace;font-size:12px;white-space:nowrap}
.pf-wrap .lt-tots{padding:11px 15px;border-top:1px solid #e2e8f0;background:#fafbff;display:flex;flex-direction:column;gap:3px}
.pf-wrap .tot-r{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:3px 0}
.pf-wrap .tot-r.grand{font-size:14px;font-weight:700;color:#4361ee;border-top:1px solid #e2e8f0;padding-top:8px;margin-top:4px}
.pf-wrap .tot-lbl{color:#64748b}
.pf-wrap .btn-add-row{background:none;border:none;color:#4361ee;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;padding:9px 14px;transition:.15s}
.pf-wrap .btn-add-row:hover{background:#eef0fd}
.pf-wrap .btn-del-row{background:none;border:none;cursor:pointer;color:#94a3b8;padding:5px;border-radius:4px;font-size:13px;transition:.15s;display:block;margin:auto}
.pf-wrap .btn-del-row:hover{background:#fee2e2;color:#ef4444}

/* ── Save Bar ── */
.pf-wrap .save-bar{position:fixed;bottom:0;right:0;left:0;z-index:100;background:#fff;border-top:1px solid #e2e8f0;padding:11px 22px;display:flex;justify-content:flex-end;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.06)}

/* ── Status Badges ── */
.pf-wrap .bdg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pf-wrap .bdg-draft{background:#fef9c3;color:#92400e}
.pf-wrap .bdg-sent{background:#e0f2fe;color:#0369a1}
.pf-wrap .bdg-confirm,.pf-wrap .bdg-approved{background:#dcfce7;color:#15803d}
.pf-wrap .bdg-posted{background:#ede9fe;color:#5b21b6}
.pf-wrap .bdg-done{background:#dcfce7;color:#15803d}
.pf-wrap .bdg-cancelled{background:#fee2e2;color:#b91c1c}
.pf-wrap .bdg-partial{background:#fef3c7;color:#d97706}


/* ═══════════════════════════════════════════════════════════════
   erp-components.css — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   Fluid ERP — Component Library v1.0
   erp-components.css
   المرجع الموحد لكل مكونات الـ UI في السيستم
   يُستخدم بعد erp-ui.css
═══════════════════════════════════════════════════════════════════ */

/* ══ 1. FILTER PANEL ═══════════════════════════════════════════════
   استخدام: .filter-panel > .filter-grid-{2|3|4|auto}
   مثال:
   <div class="filter-panel">
     <div class="filter-grid-3">
       <div class="fg"><label class="fl">بحث</label><input class="fi"></div>
       ...
       <div class="fg filter-actions"><button class="btn btn-primary">عرض</button></div>
     </div>
   </div>
══════════════════════════════════════════════════════════════════ */
.filter-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.filter-panel .filter-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-grid-1 { display: grid; grid-template-columns: 1fr;                     gap: 12px; align-items: end; }
.filter-grid-2 { display: grid; grid-template-columns: 1fr 1fr;                 gap: 12px; align-items: end; }
.filter-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;             gap: 12px; align-items: end; }
.filter-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;         gap: 12px; align-items: end; }
.filter-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; align-items: end; }
.filter-actions { display: flex; gap: 8px; padding-bottom: 1px; }
@media (max-width: 900px) {
  .filter-grid-4 { grid-template-columns: 1fr 1fr; }
  .filter-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .filter-grid-2, .filter-grid-3, .filter-grid-4 { grid-template-columns: 1fr; }
}

/* ══ 2. KPI CARD SYSTEM ════════════════════════════════════════════
   استخدام: .kpi-strip > .kc.kc-{blue|green|red|amber|purple|teal}
   مثال:
   <div class="kpi-strip">
     <a href="?" class="kc kc-blue">
       <div class="kc-icon"><i class="fas fa-file"></i></div>
       <div class="kc-body">
         <div class="kc-val">1,234</div>
         <div class="kc-lbl">الكل</div>
       </div>
       <div class="kc-trend up">+12%</div>
     </a>
   </div>
══════════════════════════════════════════════════════════════════ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kc {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--sh-xs);
}
.kc::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 2.5px;
  background: var(--kc-clr, var(--p));
}
.kc:hover {
  border-color: var(--kc-clr, var(--p));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--kc-clr, var(--p)) 20%, transparent);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.kc.active { border-color: var(--kc-clr, var(--p)); background: color-mix(in srgb, var(--kc-clr, var(--p)) 5%, white); }
.kc-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--kc-clr, var(--p)) 12%, transparent);
  color: var(--kc-clr, var(--p));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.kc-body { flex: 1; min-width: 0; }
.kc-val  { font-size: 22px; font-weight: 900; color: var(--g900); line-height: 1; letter-spacing: -.5px; }
.kc-lbl  { font-size: 11.5px; color: var(--g500); font-weight: 600; margin-top: 3px; }
.kc-trend { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full); flex-shrink: 0; }
.kc-trend.up   { background: var(--success-l); color: var(--success-d); }
.kc-trend.down { background: var(--danger-l);  color: var(--danger-d); }

/* Color variants */
.kc-blue   { --kc-clr: var(--p); }
.kc-green  { --kc-clr: var(--success); }
.kc-red    { --kc-clr: var(--danger-d); }
.kc-amber  { --kc-clr: var(--warning-d); }
.kc-purple { --kc-clr: var(--purple-d); }
.kc-teal   { --kc-clr: var(--teal-d); }
.kc-info   { --kc-clr: var(--info-d); }
.kc-orange { --kc-clr: #f97316; }
.kc-gray   { --kc-clr: var(--g500); }

@media (max-width: 600px) { .kpi-strip { grid-template-columns: 1fr 1fr; } }

/* ══ 3. DATA TABLE ═════════════════════════════════════════════════
   استخدام: .dt-wrap > table.dt
   مثال:
   <div class="dt-wrap">
     <table class="dt">
       <thead><tr><th class="dt-chk">...</th><th class="dt-sort">العمود</th></tr></thead>
       <tbody><tr class="dt-row" data-href="...">...</tr></tbody>
       <tfoot>...</tfoot>
     </table>
   </div>
══════════════════════════════════════════════════════════════════ */
.dt-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
table.dt { width: 100%; border-collapse: collapse; }
table.dt thead th {
  background: #0f172a;
  color: #c8d3e8;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: right;
  white-space: nowrap;
  user-select: none;
  border-bottom: none;
}
table.dt thead th.dt-sort { cursor: pointer; }
table.dt thead th.dt-sort:hover { color: #fff; }
table.dt thead th.dt-sort::after { content: ' ↕'; opacity: .3; font-size: 10px; }
table.dt thead th.dt-sort.asc::after  { content: ' ↑'; opacity: .8; }
table.dt thead th.dt-sort.desc::after { content: ' ↓'; opacity: .8; }
table.dt thead th.dt-chk, table.dt tbody td.dt-chk { width: 42px; text-align: center; }
table.dt thead th.dt-num, table.dt tbody td.dt-num { text-align: left; font-variant-numeric: tabular-nums; }
table.dt thead th.dt-actions { width: 90px; text-align: center; }
table.dt tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bord-l);
  vertical-align: middle;
  font-size: 13px;
  color: var(--g800);
}
table.dt tbody tr { cursor: pointer; transition: background .1s; }
table.dt tbody tr:hover td { background: var(--p-l); }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr.inactive td { opacity: .45; }
table.dt tfoot td {
  background: var(--g50);
  font-weight: 800;
  font-size: 12px;
  border-top: 1.5px solid var(--border);
  padding: 10px 14px;
  color: var(--g700);
}
/* Row ID badge */
.dt-id { font-family: monospace; font-size: 11px; color: var(--g400); font-weight: 700; }
/* Clickable link cell */
.dt-link { font-weight: 700; color: var(--p-d); font-size: 13px; }
.dt-link:hover { text-decoration: underline; }
/* Amount cell */
.dt-amount { font-weight: 800; font-size: 13px; color: var(--g900); font-variant-numeric: tabular-nums; }
.dt-amount.positive { color: var(--success-d); }
.dt-amount.negative { color: var(--danger-d); }

/* ══ 4. STATUS BADGES ══════════════════════════════════════════════
   استخدام: <span class="sb sb-{draft|posted|done|cancelled|partial|pending}">
══════════════════════════════════════════════════════════════════ */
.sb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.sb::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.sb-draft     { background: var(--g100);       color: var(--g600);     }
.sb-confirmed { background: var(--p-l);         color: var(--p-d);      }
.sb-approved  { background: var(--p-l);         color: var(--p-d);      }
.sb-posted    { background: var(--purple-l);    color: var(--purple-d); }
.sb-done      { background: var(--success-l);   color: var(--success-d);}
.sb-paid      { background: var(--success-l);   color: var(--success-d);}
.sb-partial   { background: var(--warning-l);   color: var(--warning-d);}
.sb-pending   { background: var(--warning-l);   color: var(--warning-d);}
.sb-cancelled { background: var(--danger-l);    color: var(--danger-d); }
.sb-void      { background: var(--danger-l);    color: var(--danger-d); }
.sb-reversed  { background: var(--purple-l);    color: var(--purple-d); }
.sb-active    { background: var(--success-l);   color: var(--success-d);}
.sb-inactive  { background: var(--g100);        color: var(--g400);     }
.sb-overdue   { background: var(--danger-l);    color: var(--danger-d); }
.sb-open      { background: var(--info-l);      color: var(--info-d);   }
.sb-closed    { background: var(--g100);        color: var(--g600);     }
.sb-received  { background: var(--teal-l);      color: var(--teal-d);   }
.sb-invoiced  { background: var(--purple-l);    color: var(--purple-d); }

/* ══ 5. DOCUMENT STATUS FLOW ═══════════════════════════════════════
   استخدام:
   <div class="flow-steps">
     <div class="flow-step done">مسودة</div>
     <div class="flow-arrow"></div>
     <div class="flow-step active">مؤكد</div>
     <div class="flow-arrow"></div>
     <div class="flow-step">مرحّل</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.flow-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.flow-step {
  padding: 5px 14px; font-size: 12px; font-weight: 700;
  color: var(--g400); background: var(--g100);
  border: 1.5px solid var(--g200);
  border-radius: 0; position: relative; transition: all .2s;
}
.flow-step:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.flow-step:last-child  { border-radius: 0 var(--r-full) var(--r-full) 0; }
.flow-step.done   { background: var(--success-l); color: var(--success-d); border-color: var(--success-ll); }
.flow-step.active { background: var(--p); color: #fff; border-color: var(--p); z-index: 1; }

/* ══ 6. FORM SECTION (sec/sec-head/sec-body) ═══════════════════════
   (already in erp-ui.css — enhanced here)
══════════════════════════════════════════════════════════════════ */
.sec-head-icon.blue   { background: var(--p-l);       color: var(--p); }
.sec-head-icon.green  { background: var(--success-l);  color: var(--success-d); }
.sec-head-icon.amber  { background: var(--warning-l);  color: var(--warning-d); }
.sec-head-icon.red    { background: var(--danger-l);   color: var(--danger-d); }
.sec-head-icon.purple { background: var(--purple-l);   color: var(--purple-d); }
.sec-head-icon.teal   { background: var(--teal-l);     color: var(--teal-d); }
.sec-head-icon.gray   { background: var(--g100);       color: var(--g600); }

/* Field required indicator */
.req { color: var(--danger-d); margin-right: 2px; }

/* Field help text */
.fhelp { font-size: 11px; color: var(--g400); margin-top: 3px; }

/* Field validation error */
.ferr { font-size: 11.5px; color: var(--danger-d); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.fi.error, input.fi.error { border-color: var(--danger-d) !important; box-shadow: 0 0 0 3px rgba(229,55,78,.1) !important; }
.fi.ok, input.fi.ok { border-color: var(--success) !important; }

/* ══ 7. DOCUMENT HEADER (فاتورة، أمر شراء، إلخ) ════════════════════
   استخدام:
   <div class="doc-header">
     <div class="doc-header-main">...</div>
     <div class="doc-header-meta">...</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.doc-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--sh-xs);
}
.doc-header-title { font-size: 20px; font-weight: 900; color: var(--g900); letter-spacing: -.3px; margin-bottom: 4px; }
.doc-header-ref   { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--p-d); background: var(--p-l); padding: 3px 10px; border-radius: var(--r-full); display: inline-block; margin-bottom: 8px; }
.doc-header-meta  { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.doc-meta-item { text-align: left; }
.doc-meta-label { font-size: 10.5px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.doc-meta-val   { font-size: 14px; font-weight: 700; color: var(--g800); }
.doc-meta-sep   { width: 1px; height: 36px; background: var(--bord-l); }

/* ══ 8. LINES TABLE (أسطر الفواتير والأوامر) ══════════════════════ */
.lt-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.lt-head {
  background: var(--g50);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--g700);
}
table.lt { width: 100%; border-collapse: collapse; }
table.lt thead th {
  background: var(--g50);
  color: var(--g500);
  padding: 9px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--border);
}
table.lt thead th.lt-num { text-align: left; }
table.lt tbody td { padding: 5px 7px; border-bottom: 1px solid var(--bord-l); vertical-align: middle; }
table.lt tbody tr:hover td { background: var(--p-l); }
table.lt tbody tr:last-child td { border-bottom: none; }
.lt-foot {
  background: var(--g50);
  border-top: 1.5px solid var(--border);
  padding: 14px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  align-items: center;
}
.lt-total { text-align: left; }
.lt-total-lbl { font-size: 11px; color: var(--g400); font-weight: 600; }
.lt-total-val { font-size: 17px; font-weight: 900; color: var(--g900); font-variant-numeric: tabular-nums; }
.lt-total-val.grand { font-size: 22px; color: var(--p); }
.lt-add-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px;
  border: 1.5px dashed var(--g300);
  border-radius: var(--r-md);
  color: var(--g400); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  background: none; width: 100%;
  font-family: 'Cairo', sans-serif;
  margin-top: 4px;
}
.lt-add-row:hover { border-color: var(--p); color: var(--p); background: var(--p-l); }

/* ══ 9. DASHBOARD WIDGETS ══════════════════════════════════════════ */
.dw { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.dw-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: var(--g900);
  background: var(--g50);
}
.dw-head-actions { display: flex; gap: 6px; }
.dw-body { padding: 14px 16px; }
.dw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dw-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .dw-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dw-grid-2, .dw-grid-3 { grid-template-columns: 1fr; } }

/* Chart placeholder */
.chart-placeholder {
  background: var(--g50);
  border: 1.5px dashed var(--g200);
  border-radius: var(--r-md);
  padding: 30px;
  text-align: center;
  color: var(--g400);
  font-size: 12.5px;
  min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}

/* ══ 10. REPORT OUTPUT ════════════════════════════════════════════
   استخدام:
   <div class="rpt-wrap">
     <div class="rpt-toolbar">...</div>
     <div class="dt-wrap"><table class="dt">...</table></div>
     <div class="rpt-footer">...</div>
   </div>
══════════════════════════════════════════════════════════════════ */
.rpt-wrap { max-width: 1300px; margin: 0 auto; }
.rpt-toolbar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.rpt-export-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.rpt-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-md);
  border: 1.5px solid; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Cairo', sans-serif;
  transition: all .15s;
}
.rpt-export-btn.excel { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.rpt-export-btn.excel:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.rpt-export-btn.csv   { color: var(--info-d); border-color: var(--info-ll); background: var(--info-l); }
.rpt-export-btn.csv:hover { background: var(--info-d); color: #fff; }
.rpt-export-btn.print { color: var(--g600); border-color: var(--g200); background: var(--white); }
.rpt-export-btn.print:hover { background: var(--g100); color: var(--g800); }
.rpt-meta { font-size: 12px; color: var(--g400); }

/* ══ 11. EMPTY STATE ════════════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--g400);
}
.empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--g50);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--g300);
  margin: 0 auto 18px;
}
.empty h5 { font-size: 15px; font-weight: 800; color: var(--g600); margin-bottom: 8px; }
.empty p  { font-size: 13px; color: var(--g400); margin-bottom: 20px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ══ 12. MODAL SYSTEM ═══════════════════════════════════════════════ */
.m-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.m-overlay.open { display: flex; animation: m-fade-in .18s ease; }
@keyframes m-fade-in { from { opacity: 0 } to { opacity: 1 } }
.m-box {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%; max-width: 520px;
  margin: 0 16px;
  box-shadow: 0 32px 64px rgba(0,0,0,.22);
  overflow: hidden;
  animation: m-slide-in .2s cubic-bezier(.34,1.4,.64,1);
}
.m-box.m-lg { max-width: 780px; }
.m-box.m-xl { max-width: 1000px; }
@keyframes m-slide-in { from { transform: scale(.94) translateY(-12px); opacity: 0; } }
.m-head {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--p), #6366f1);
  color: #fff;
}
.m-head h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.m-close {
  width: 28px; height: 28px; border: none;
  background: rgba(255,255,255,.2); border-radius: 7px;
  color: #fff; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.m-close:hover { background: rgba(255,255,255,.35); }
.m-body { padding: 22px; }
.m-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--bord-l);
  background: var(--g50);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ══ 13. TABS ════════════════════════════════════════════════════════ */
.tabs { border-bottom: 1.5px solid var(--border); display: flex; gap: 0; margin-bottom: 0; }
.tab-item {
  padding: 10px 18px;
  font-size: 13px; font-weight: 700; color: var(--g500);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  font-family: 'Cairo', sans-serif;
  background: none; border-top: none; border-left: none; border-right: none;
}
.tab-item:hover { color: var(--g800); background: var(--g50); }
.tab-item.active { color: var(--p); border-bottom-color: var(--p); background: var(--p-l); }
.tab-badge { background: var(--g200); color: var(--g600); font-size: 10px; padding: 1px 6px; border-radius: var(--r-full); font-weight: 800; min-width: 18px; text-align: center; }
.tab-item.active .tab-badge { background: var(--p); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ══ 14. PAGE HEADER VARIANTS ════════════════════════════════════════ */
.page-header-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; color: #fff;
}
.ph-sub { font-size: 12px; color: var(--g500); margin-top: 2px; font-weight: 500; }

/* ══ 15. STEP WIZARD ════════════════════════════════════════════════ */
.wizard-steps {
  display: flex; align-items: center;
  gap: 0; padding: 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.wz-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.wz-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--g100); color: var(--g500);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid var(--g200);
  transition: all .25s;
}
.wz-info { flex: 1; }
.wz-title { font-size: 13px; font-weight: 700; color: var(--g400); transition: color .2s; }
.wz-sub   { font-size: 11px; color: var(--g300); transition: color .2s; }
.wz-line  { flex: 1; height: 2px; background: var(--g200); transition: background .25s; min-width: 20px; }
.wz-step.done .wz-num  { background: var(--success-l); color: var(--success-d); border-color: var(--success-ll); }
.wz-step.done .wz-title { color: var(--success-d); }
.wz-step.done .wz-line  { background: var(--success); }
.wz-step.active .wz-num { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-glow); }
.wz-step.active .wz-title { color: var(--p-d); font-weight: 800; }
.wz-step.active .wz-sub   { color: var(--g500); }

/* ══ 16. NOTIFICATION BADGE ══════════════════════════════════════════ */
.notif-dot {
  position: absolute; top: -2px; left: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger-d); border: 2px solid var(--white);
}
.notif-count {
  position: absolute; top: -5px; left: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger-d); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}

/* ══ 17. DRAG AND DROP ZONE ══════════════════════════════════════════ */
.dropzone {
  border: 2px dashed var(--g300);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  color: var(--g500);
  font-size: 13px;
  transition: all .2s;
  cursor: pointer;
  background: var(--g50);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--p);
  background: var(--p-l);
  color: var(--p-d);
}
.dropzone i { font-size: 32px; display: block; margin-bottom: 10px; opacity: .4; }

/* ══ 18. PROGRESS BAR ════════════════════════════════════════════════ */
.prog { height: 6px; background: var(--g100); border-radius: var(--r-full); overflow: hidden; }
.prog-bar {
  height: 100%; border-radius: var(--r-full);
  background: var(--p);
  transition: width .4s ease;
}
.prog-bar.green  { background: var(--success); }
.prog-bar.red    { background: var(--danger-d); }
.prog-bar.amber  { background: var(--warning-d); }
.prog-bar.purple { background: var(--purple-d); }
.prog-bar.striped {
  background: repeating-linear-gradient(
    45deg, var(--p) 0, var(--p) 10px,
    var(--p-d) 10px, var(--p-d) 20px
  );
}

/* ══ 19. POS SPECIFIC ════════════════════════════════════════════════ */
.pos-wrap { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - var(--nav-h)); gap: 0; }
.pos-products { background: var(--bg); padding: 16px; overflow-y: auto; }
.pos-cart { background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.pos-cart-head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 800; }
.pos-cart-body { flex: 1; overflow-y: auto; }
.pos-cart-foot { border-top: 1px solid var(--border); padding: 14px 16px; }
.pos-product-card {
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; cursor: pointer; transition: all .15s; text-align: center;
}
.pos-product-card:hover { border-color: var(--p); box-shadow: var(--sh-md); transform: translateY(-2px); }
.pos-product-card.out-of-stock { opacity: .4; pointer-events: none; }

/* ══ 20. PRINT STYLES ════════════════════════════════════════════════ */
@media print {
  #sidebar, #topnav, .page-header .ph-actions,
  .action-bar, .save-bar, .bulk-bar, .toolbar,
  .filter-panel, .pager, .rpt-export-btns,
  .row-acts, .act-btn, no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12px !important; }
  #main-content { margin: 0 !important; }
  .dt-wrap, .lt-wrap, .doc-header { box-shadow: none !important; border-color: #ccc !important; }
  table.dt thead th { background: #f0f0f0 !important; color: #000 !important; }
  .page-header { box-shadow: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   order_form.css (purchase + sales) — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/* Fluid ERP — Purchase Form Shared CSS v1.4.0 */

/* ═══════════════════════════════════════════════════
   FLUID ERP — Purchase Form Layout
   Shared across: PR / PO / Bill / GRN / RFQ
═══════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --p:#4361ee; --p-d:#3051d3; --p-l:#eff2ff; --p-ll:#e0e7ff;
  --white:#ffffff;
  --bg:#f4f6fb;
  --border:#e2e8f0;
  --bord-l:#f1f5f9;
  --g50:#f8f9fc; --g100:#f1f5f9; --g200:#e2e8f0;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569;
  --g700:#334155; --g800:#1e293b; --g900:#0f172a;
  --success:#16a34a; --success-l:#f0fdf4; --success-ll:#bbf7d0; --success-d:#15803d;
  --warning:#d97706; --warning-l:#fffbeb; --warning-ll:#fde68a; --warning-d:#b45309;
  --danger:#dc2626; --danger-l:#fff5f5; --danger-ll:#fecaca; --danger-d:#b91c1c;
  --info:#0284c7; --info-l:#f0f9ff; --info-ll:#bae6fd; --info-d:#0369a1;
  --purple:#7c3aed; --purple-l:#f5f3ff; --purple-ll:#ddd6fe; --purple-d:#6d28d9;
  --teal:#0891b2; --teal-l:#ecfeff; --teal-ll:#a5f3fc; --teal-d:#0e7490;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08);
}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--g800);font-size:14px;min-height:100vh;direction:rtl}

/* ── Module Navbar ──────────────────────────────── */
#module-nav{
  position:sticky;top:0;z-index:200;height:48px;
  background:var(--p);display:flex;align-items:center;
  padding:0 16px;gap:0;box-shadow:0 2px 8px rgba(67,97,238,.35)
}
.mn-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:14px;padding:0 14px 0 0;border-left:1px solid rgba(255,255,255,.2);margin-left:10px;white-space:nowrap;flex-shrink:0}
.mn-brand .mn-icon{width:30px;height:30px;background:rgba(255,255,255,.18);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}
.mn-tabs{display:flex;align-items:center;flex:1;gap:0}
.mn-tab{padding:0 14px;height:48px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:12.5px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.mn-tab:hover,.mn-tab.active{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}
.mn-tools{display:flex;align-items:center;gap:6px;margin-right:auto}
.mn-tool-btn{height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:11.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:'Cairo',sans-serif;transition:all .15s}
.mn-tool-btn:hover{background:rgba(255,255,255,.2)}
.mn-version{font-size:10px;color:rgba(255,255,255,.4);font-weight:600;padding:0 8px}

/* ── Page Header ────────────────────────────────── */
.page-header{
  background:var(--white);border-bottom:1.5px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap
}
.ph-left{display:flex;align-items:center;gap:10px}
.ph-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--p),var(--p-d))}
.ph-title{font-size:16px;font-weight:800;color:var(--g900)}
.ph-sub{font-size:11.5px;color:var(--g400);margin-top:1px}
.ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{padding:6px 14px;border-radius:var(--r-md);font-size:13px;font-weight:700;border:1.5px solid var(--border);background:var(--white);color:var(--g600);cursor:pointer;font-family:'Cairo',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--g300);background:var(--g50)}
.btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.btn-primary:hover{background:var(--p-d);border-color:var(--p-d)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-warning{background:var(--warning-l);color:var(--warning-d);border-color:var(--warning-ll)}
.btn-danger-outline{background:transparent;color:var(--danger);border-color:var(--danger-ll)}
.btn-sm{padding:4px 10px;font-size:12px}

/* ── Flow Steps ─────────────────────────────────── */
.flow-steps{
  background:var(--white);border-bottom:1.5px solid var(--border);
  padding:0 24px;display:flex;align-items:stretch;gap:0;overflow-x:auto;
  min-height:44px;
}
.flow-step{
  display:flex;align-items:center;gap:8px;padding:0 18px;
  font-size:12.5px;font-weight:600;color:var(--g400);
  border-bottom:3px solid transparent;white-space:nowrap;
  transition:all .15s;position:relative;cursor:default;
}
.flow-step.done{color:var(--success,#2f9e44);border-bottom-color:transparent}
.flow-step.active{color:var(--p,#4361ee);border-bottom-color:var(--p,#4361ee);font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(67,97,238,.04))}
.flow-step .fs-dot{
  width:9px;height:9px;border-radius:50%;
  border:2px solid currentColor;flex-shrink:0;
  transition:all .15s;background:transparent;
}
.flow-step.done .fs-dot{background:var(--success,#2f9e44);border-color:var(--success,#2f9e44)}
.flow-step.active .fs-dot{background:var(--p,#4361ee);border-color:var(--p,#4361ee);box-shadow:0 0 0 3px rgba(67,97,238,.18)}
.flow-arrow{color:var(--g200);font-size:10px;align-self:center;padding:0;flex-shrink:0}

/* ── Main Layout ────────────────────────────────── */
.doc-layout{
  display:grid;
  grid-template-columns:1fr 256px;
  min-height:calc(100vh - 48px - 54px - 46px)
}

/* ── Main Column ────────────────────────────────── */
.doc-main{background:var(--white);border-left:1.5px solid var(--border)}

/* Sections */
.doc-sec{border-bottom:1.5px solid var(--border);padding:16px 20px}
.doc-sec:last-child{border-bottom:none}
.sec-title{font-size:11px;font-weight:800;color:var(--g500);letter-spacing:.3px;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.sec-title::before{content:'';width:3px;height:13px;background:var(--p);border-radius:2px;flex-shrink:0}

/* Field grid */
.fg-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fg-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg.span-2{grid-column:span 2}
.fg.span-3{grid-column:span 3}
.fl{font-size:11.5px;font-weight:700;color:var(--g500);display:flex;align-items:center;gap:5px}
.fl .req{color:var(--danger);font-size:10px}
.fl .fl-new{font-size:10px;color:var(--p);cursor:pointer;font-weight:600;margin-right:auto}
.fl .fl-new:hover{text-decoration:underline}
.fi{
  height:36px;padding:0 10px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--g800);
  background:var(--white);width:100%;font-family:'Cairo',sans-serif;
  outline:none;transition:border-color .15s,box-shadow .15s
}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(67,97,238,.1)}
.fi:disabled,.fi[readonly]{background:var(--g50);color:var(--g400);cursor:not-allowed}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:10px;padding-left:28px;cursor:pointer}
textarea.fi{height:auto;padding:8px 10px;resize:vertical;line-height:1.6}
.badge-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;margin-top:4px;width:fit-content}
.bp-green{background:var(--success-l);color:var(--success-d);border:1px solid var(--success-ll)}
.bp-orange{background:var(--warning-l);color:var(--warning-d);border:1px solid var(--warning-ll)}
.bp-blue{background:var(--p-l);color:var(--p-d);border:1px solid var(--p-ll)}

/* ── Lines Table ────────────────────────────────── */
.lines-wrap{overflow-x:auto;overflow-y:visible}
.lt{width:100%;border-collapse:collapse;font-size:12.5px;min-width:700px}
.lt thead th{
  background:var(--g50);padding:8px 10px;text-align:right;
  font-size:11px;font-weight:700;color:var(--g500);
  border-bottom:1.5px solid var(--border);white-space:nowrap
}
.lt tbody td{
  padding:7px 10px;border-bottom:1px solid var(--bord-l);
  vertical-align:middle;color:var(--g800)
}
.lt tbody tr:hover td{background:var(--p-l)}
.lt tbody tr:last-child td{border-bottom:none}
.lt tfoot td{
  padding:8px 10px;border-top:1.5px solid var(--border);
  background:var(--g50)
}
/* Line inputs */
.li{height:30px;padding:0 8px;border:1.5px solid transparent;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--g800);background:transparent;width:100%;font-family:'Cairo',sans-serif;outline:none;transition:all .15s;text-align:left}
.li:hover{border-color:var(--g200);background:var(--white)}
.li:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 2px rgba(67,97,238,.1)}
.li.li-right{text-align:right}
select.li{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 6px center;background-size:9px;padding-left:22px}
.del-r{width:24px;height:24px;border:none;background:transparent;color:var(--g300);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s}
.del-r:hover{background:var(--danger-l);color:var(--danger)}
.line-tot{font-weight:700;font-family:monospace;font-size:13px;text-align:left;color:var(--g800)}
/* Add line link */
.add-line-btn{background:none;border:none;color:var(--p);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;padding:5px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;transition:background .12s}
.add-line-btn:hover{background:var(--p-l)}
/* empty state */
.lt-empty{text-align:center;padding:28px;color:var(--g400)}
.lt-empty i{font-size:28px;display:block;margin-bottom:8px;opacity:.25}
.lt-empty p{font-size:12.5px;font-weight:600}
/* Product search inside cell */
.prod-search-wrap{position:relative}
.prod-new-item{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--success-d,#15803d);
  cursor:pointer;padding:3px 0;margin-top:2px;
  transition:opacity .15s;
}
.prod-new-item:hover{opacity:.7}

.prod-search-input{text-align:right}
.prod-drop{display:none}
.prod-drop.open{display:block}
.prod-code{font-size:10.5px;font-family:monospace;background:var(--p-l);color:var(--p-d);padding:1px 5px;border-radius:3px;flex-shrink:0}
.prod-search-wrap input::placeholder{color:var(--g400);font-weight:500}

/* ── Save Bar ────────────────────────────────────── */
.save-bar{
  position:sticky;bottom:0;z-index:100;
  background:var(--white);border-top:1.5px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 -2px 12px rgba(0,0,0,.06)
}
.save-bar-info{font-size:11.5px;color:var(--g400)}

/* ── Sidebar ─────────────────────────────────────── */
.doc-sidebar{background:var(--g50);padding:12px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:visible}
.card-head{padding:9px 14px;border-bottom:1px solid var(--bord-l);display:flex;align-items:center;gap:9px;background:var(--g50)}
.card-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.card-title{font-size:12.5px;font-weight:700;color:var(--g800)}
.card-sub{font-size:10.5px;color:var(--g400);margin-top:1px}
.card-body{padding:10px 14px}

/* Status steps */
.st-step{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11.5px;color:var(--g400);border-bottom:1px solid var(--bord-l)}
.st-step:last-child{border-bottom:none}
.st-step.done{color:var(--success)}
.st-step.active{color:var(--p);font-weight:700}
.st-step.cancelled{color:var(--danger)}
.st-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex-shrink:0}
.st-dot.filled{background:currentColor}
.st-lbl{flex:1}
.st-check{font-size:9px;opacity:.8}

/* Financial summary */
.fin-row{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--bord-l)}
.fin-row:last-child{border-bottom:none}
.fin-row.grand{border-top:2px solid var(--border);padding-top:10px;margin-top:4px}
.fin-lbl{font-size:11px;color:var(--g400);font-weight:600}
.fin-val{font-size:14px;font-weight:700;font-family:monospace;color:var(--g800)}
.fin-val.grand-val{font-size:20px;color:var(--p-d);font-weight:900}
.fin-lbl{color:var(--g500)}
.fin-val{font-weight:700;font-family:monospace;color:var(--g800)}
.fin-val.grand-val{font-size:16px;color:var(--p-d);font-weight:900}

/* Action buttons */
.action-btn{width:100%;padding:7px 10px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;border:1.5px solid;cursor:pointer;font-family:'Cairo',sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;margin-bottom:6px}
.action-btn:last-child{margin-bottom:0}
.ab-review{background:var(--info-l);color:var(--info-d);border-color:var(--info-ll)}
.ab-review:hover{background:var(--info);color:#fff;border-color:var(--info)}
.ab-approve{background:var(--success-l);color:var(--success-d);border-color:var(--success-ll)}
.ab-approve:hover{background:var(--success);color:#fff;border-color:var(--success)}
.ab-cancel{background:transparent;color:var(--danger);border-color:var(--danger-ll)}
.ab-cancel:hover{background:var(--danger-l)}

/* Quick links */
.ql-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11.5px;color:var(--g500);cursor:pointer;border-bottom:1px solid var(--bord-l);transition:color .12s}
.ql-item:last-child{border-bottom:none}
.ql-item:hover{color:var(--p)}
.ql-ico{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}

/* Totals row below table */
.totals-row{background:var(--g50);padding:12px 20px;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border);display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px}
.tot-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:200px}
.tot-lbl{color:var(--g500)}
.tot-val{font-weight:700;font-family:monospace;color:var(--g800);text-align:left}
.tot-val.grand{font-size:15px;color:var(--p-d)}

/* Responsive */
@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{min-height:auto}
  .fg-grid-4{grid-template-columns:1fr 1fr}
  .fg-grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .fg-grid-4,.fg-grid-3,.fg-grid-2{grid-template-columns:1fr}
  .mn-tab{display:none}
  .mn-tab.active{display:flex}
}
@media print{
  #module-nav,.ph-actions,.save-bar,.action-btn,.del-r,.add-line-btn{display:none!important}
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{display:none}
  .lt{font-size:11px}
}

.li-dd-wrap{position:relative;width:100%}
.li-dd-inp{width:100%}
.li-dd-drop{display:none}

/* ── li-dd portal dropdown items (fix overflow clipping) ── */
.li-dd-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Cairo, sans-serif;
  font-weight: 500;
  color: var(--g700, #334155);
  border-bottom: 1px solid var(--bord-l, #f1f5f9);
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.li-dd-item:last-child { border-bottom: none; }
.li-dd-item:hover { background: var(--p-l, #eff2ff); color: var(--p, #4361ee); }

/* ── Tax column wider ── */
.lt thead th:nth-child(6),
.lt tbody td:nth-child(6) { min-width: 140px; }


/* ═══════════════════════════════════════════════════════════════
   grn_form.css / delivery_form.css — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/**
 * grn_form.css — إذن استلام البضاعة (GRN)
 * Fluid ERP v1.4 — Apr 2026
 * module-specific overrides فقط — assets/erp-bundle.css للـ shared components
 */

/* ── Tab System ────────────────────────────────────── */
.grn-tabs{
  display:flex;gap:0;border-bottom:2px solid #e2e8f0;
  padding:0 20px;background:#fff;flex-shrink:0;
  position:sticky;top:48px;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}
.grn-tab{
  display:flex;align-items:center;gap:6px;padding:12px 18px;
  font-size:13.5px;font-weight:700;color:#64748b;cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  text-decoration:none;transition:.15s;white-space:nowrap
}
.grn-tab:hover{color:#4361ee;background:#fafbff}
.grn-tab.on{color:#4361ee;border-bottom-color:#4361ee}
.grn-tab-pane{display:none}
.grn-tab-pane.on{display:contents}

/* ── JE Badges ─────────────────────────────────────── */
.je-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.je-draft   {background:#fef3c7;color:#92400e}
.je-posted  {background:#dcfce7;color:#15803d}
.je-cancelled{background:#fee2e2;color:#991b1b}

/* ── JE Table ──────────────────────────────────────── */
.je-table-wrap{overflow-x:auto;margin:14px}
table.jet{width:100%;border-collapse:collapse;font-size:12.5px}
table.jet thead tr{background:#1e293b}
table.jet th{padding:9px 13px;text-align:right;font-weight:600;font-size:11px;color:#e2e8f0;white-space:nowrap}
table.jet td{padding:9px 13px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.jet tbody tr:hover td{background:#fafbff}
table.jet .dr{color:#dc2626;font-weight:700;direction:ltr;text-align:left}
table.jet .cr{color:#15803d;font-weight:700;direction:ltr;text-align:left}
table.jet .zero{color:#94a3b8}
table.jet tfoot td{background:#f8fafc;font-weight:700;border-top:2px solid #e2e8f0}

/* ── UOM Picker ────────────────────────────────────── */
.uom-cell{position:relative}
.uom-btn{width:100%;padding:5px 6px;border:1.5px solid #e2e8f0;border-radius:6px;
  background:#fff;cursor:pointer;text-align:right;font-family:'Cairo',sans-serif;
  font-size:12px;color:#1e293b;display:flex;align-items:center;justify-content:space-between;gap:3px}
.uom-btn:hover{border-color:#4361ee}
.uom-drop{position:fixed;min-width:120px;max-height:200px;overflow-y:auto;
  background:#fff;border:1.5px solid #4361ee;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:9999999;display:none}
.uom-drop.open{display:block}
.uom-opt{padding:7px 10px;font-size:12px;cursor:pointer;white-space:nowrap;direction:rtl}
.uom-opt:hover{background:#eef0fd;color:#4361ee}
.uom-opt.sel{background:#eef0fd;font-weight:700;color:#4361ee}

/* ── GRN Product Portal ────────────────────────────── */
.grn-pdrop{position:fixed;z-index:999999;display:none;background:#fff;
  border:1px solid #e2e8f0;border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);overflow:hidden;min-width:320px;max-width:460px}
.grn-pdrop-hd{padding:8px 12px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
.grn-pdrop-hd input{width:100%;border:1px solid #e2e8f0;border-radius:6px;
  padding:6px 10px;font-size:12.5px;font-family:'Cairo',sans-serif;outline:none;direction:rtl}
.grn-pdrop-hd input:focus{border-color:#4361ee}
.grn-pdrop-list{max-height:260px;overflow-y:auto}
.grn-pdrop-item{padding:9px 13px;cursor:pointer;display:flex;align-items:center;
  gap:9px;border-bottom:1px solid #f8fafc;font-size:12.5px}
.grn-pdrop-item:hover{background:#eef0fd}
.grn-pdrop-code{font-size:10.5px;color:#94a3b8;font-family:monospace;flex-shrink:0;min-width:55px}
.grn-pdrop-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grn-pdrop-empty{padding:14px;text-align:center;color:#94a3b8;font-size:12px}

/* ── Lines table ───────────────────────────────────── */
table.lt td{overflow:visible}
table.lt td select,table.lt td input{width:100%;box-sizing:border-box}
.it-wrap{overflow:visible!important}

/* ── Diff column ───────────────────────────────────── */
.lt-diff-pos{color:#10b981;font-weight:700;font-size:12px;text-align:center}
.lt-diff-neg{color:#ef4444;font-weight:700;font-size:12px;text-align:center}

/* ── Alerts ────────────────────────────────────────── */
.alert-warn{background:#fffbeb;border:1px solid #fcd34d;color:#92400e;
  padding:9px 14px;border-radius:8px;font-size:12.5px;font-weight:600;margin:0 0 10px}
.alert-ok{background:#f0fdf4;border:1px solid #86efac;color:#065f46;
  padding:9px 14px;border-radius:8px;font-size:12.5px;font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:6px}

/* ── Sc-card overrides ─────────────────────────────── */
#poFormWrap .sc-card{overflow:visible!important}

/* ── Print ─────────────────────────────────────────── */
@media print{
  .grn-tabs,.ph-right .btn,
  .save-bar,.form-side,.btn-add-row,
  .btn-del-row,.grn-pdrop{display:none!important}
  .form-body{padding-bottom:0!important}
  .form-main{width:100%!important}
  .sec{break-inside:avoid;border:1px solid #ccc!important;margin-bottom:8px}
}

/* ── GRN Layout overrides ──────────────────────────── */
/* Sidebar wider to show all cards */
.form-body .form-side{
  width:230px;
  max-height:none;
  overflow-y:visible;
}
/* Wider field grid for GRN (8 fields across) */
#poFormWrap .fg{
  grid-template-columns:repeat(2,1fr);
}

/* ── pf-* layout fallback ── */
.pf-wrap .pf-body,.pf-body,.form-body{display:flex;gap:14px;align-items:flex-start}
.pf-wrap .pf-main,.pf-main,.form-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.pf-wrap .pf-side,.pf-side,.form-side{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:160px}


/* ═══════════════════════════════════════════════════════════════
   modules/purchase/order_form.css — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/* ════ order_form — scoped under #poFormWrap ════ */
#poFormWrap{font-family:'Cairo',sans-serif;background:#f8fafc;min-height:calc(100vh - 60px)}
#poFormWrap *{font-family:'Cairo',sans-serif;box-sizing:border-box}
:root{--ind:#4361ee;--indl:#eef0fd;--indd:#3451d1;--tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;--bd:#e2e8f0;--bg:#f8fafc;--wh:#fff;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--r:8px;--rl:12px}
/* page header */
#poFormWrap .pf-ph{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 22px;display:flex;align-items:center;justify-content:space-between}
#poFormWrap .pf-ph h1{font-size:15px;font-weight:700;color:#0f172a;margin:0;display:flex;align-items:center;gap:8px}
#poFormWrap .pf-ph .pf-bc{font-size:11px;color:#94a3b8;margin-top:2px}
#poFormWrap .pf-ph-r{display:flex;gap:7px;align-items:center}
/* flow steps */
#poFormWrap .pf-flow{background:#fff;border-bottom:1px solid #e2e8f0;padding:9px 22px;display:flex;align-items:center;overflow-x:auto}
#poFormWrap .pf-step{display:flex;align-items:center;gap:5px;flex-shrink:0}
#poFormWrap .pf-sc{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
#poFormWrap .pf-s-done .pf-sc{background:#10b981;color:#fff}
#poFormWrap .pf-s-active .pf-sc{background:#4361ee;color:#fff}
#poFormWrap .pf-s-pending .pf-sc{background:#e2e8f0;color:#94a3b8}
#poFormWrap .pf-sl{font-size:11px;font-weight:600;white-space:nowrap}
#poFormWrap .pf-s-done .pf-sl{color:#10b981}
#poFormWrap .pf-s-active .pf-sl{color:#4361ee}
#poFormWrap .pf-s-pending .pf-sl{color:#94a3b8}
#poFormWrap .pf-sln{flex:1;height:1px;min-width:14px;max-width:50px;background:#e2e8f0;margin:0 5px}
#poFormWrap .pf-sln.done{background:#10b981}
/* buttons */
#poFormWrap .pf-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:.15s;white-space:nowrap;text-decoration:none;line-height:1.2}
#poFormWrap .pf-btn-p{background:#4361ee;color:#fff}#poFormWrap .pf-btn-p:hover{background:#3451d1;color:#fff}
#poFormWrap .pf-btn-o{background:#fff;color:#4361ee;border:1px solid #4361ee}#poFormWrap .pf-btn-o:hover{background:#eef0fd}
#poFormWrap .pf-btn-g{background:#fff;color:#64748b;border:1px solid #e2e8f0}#poFormWrap .pf-btn-g:hover{background:#f8fafc}
#poFormWrap .pf-btn-e{background:#fff;color:#ef4444;border:1px solid #fca5a5}#poFormWrap .pf-btn-e:hover{background:#fff1f1}
#poFormWrap .pf-btn-sm{padding:5px 11px;font-size:12px}
#poFormWrap .pf-btn-full{width:100%;justify-content:center}
/* layout */
#poFormWrap .pf-body{display:flex;gap:14px;padding:14px 20px 90px;align-items:flex-start}
#poFormWrap .pf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
#poFormWrap .pf-side{width:216px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:14px}
/* sections */
#poFormWrap .sec{background:#fff;border:1px solid #e2e8f0;border-radius:var(--rl);overflow:visible}
#poFormWrap .sec-h{padding:10px 15px;border-bottom:1px solid #e2e8f0;font-size:12.5px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px}
#poFormWrap .sec-h .hi{width:22px;height:22px;background:#eef0fd;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
#poFormWrap .sec-b{padding:14px}
/* form grid */
#poFormWrap .fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#poFormWrap .fg .full{grid-column:1/-1}
#poFormWrap .f-grp{display:flex;flex-direction:column;gap:4px}
#poFormWrap .f-grp label{font-size:11.5px;font-weight:600;color:#64748b}
#poFormWrap .f-grp label .req{color:#ef4444}
#poFormWrap .f-grp input,#poFormWrap .f-grp select,#poFormWrap .f-grp textarea{
  width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:var(--r);
  font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;
  outline:none;transition:border .15s}
#poFormWrap .f-grp input:focus,#poFormWrap .f-grp select:focus,#poFormWrap .f-grp textarea:focus{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
#poFormWrap .f-grp input[readonly],#poFormWrap .f-grp textarea[readonly]{background:#f8fafc;color:#64748b}
#poFormWrap .f-grp select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:10px;padding-left:28px}
#poFormWrap .f-grp textarea{resize:vertical;min-height:70px;line-height:1.6}
/* picker btn */
#poFormWrap .pick-btn{width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border .15s;outline:none;user-select:none}
#poFormWrap .pick-btn:hover,#poFormWrap .pick-btn.open{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
/* field badge */
#poFormWrap .f-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:3px;width:fit-content}
#poFormWrap .f-badge-blue{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
#poFormWrap .f-badge-green{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}
/* pick dropdown */
#poFormWrap .pick-drop{display:none;position:absolute;top:calc(100% + 2px);right:0;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:9999;overflow:hidden;min-width:200px}
#poFormWrap .pick-drop input{width:100%;border:none;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;font-family:'Cairo',sans-serif;outline:none;background:#f8fafc}
#poFormWrap .pick-drop input:focus{border-color:#4361ee}
#poFormWrap .pick-list{max-height:220px;overflow-y:auto}
#poFormWrap .pick-item{padding:8px 12px;cursor:pointer;font-size:12.5px;border-bottom:1px solid #f8fafc;transition:background .1s}
#poFormWrap .pick-item:hover{background:#f0f4ff;color:#4361ee}
#poFormWrap .pick-footer{padding:8px 12px;cursor:pointer;font-size:12px;font-weight:700;color:#10b981;display:flex;align-items:center;gap:6px;border-top:1.5px solid #f1f5f9;position:sticky;bottom:0;background:#fff}
#poFormWrap .pick-footer:hover{background:#f0fdf4}
/* items table */
#poFormWrap .it-wrap{overflow-x:auto}
#poFormWrap table.lt{width:100%;border-collapse:collapse;font-size:12.5px}
#poFormWrap table.lt thead tr{background:#f8fafc}
#poFormWrap table.lt thead th{padding:8px 8px;text-align:right;font-weight:600;color:#64748b;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-size:11.5px;background:#f8fafc}
#poFormWrap table.lt thead th.r{text-align:left}
#poFormWrap table.lt thead th.c{text-align:center}
#poFormWrap table.lt tbody td{padding:4px 4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
#poFormWrap table.lt tbody tr:last-child td{border-bottom:none}
#poFormWrap table.lt tbody tr:hover td{background:#fafbff}
#poFormWrap table.lt td input,#poFormWrap table.lt td select{width:100%;padding:6px 7px;border:1px solid transparent;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;color:#1e293b;background:transparent;transition:border .15s;outline:none}
#poFormWrap table.lt td input:hover,#poFormWrap table.lt td select:hover{border-color:#e2e8f0}
#poFormWrap table.lt td input:focus,#poFormWrap table.lt td select:focus{border-color:#4361ee;background:#fff;box-shadow:0 0 0 2px rgba(67,97,238,.08)}
#poFormWrap table.lt td select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 6px center;background-size:9px;padding-left:22px}
#poFormWrap .lt-tot-val{text-align:left;font-weight:700;color:#1e293b;padding:6px 7px;font-family:monospace;font-size:12px;white-space:nowrap}
/* totals */
#poFormWrap .lt-tots{padding:11px 15px;border-top:1px solid #e2e8f0;background:#fafbff;display:flex;flex-direction:column;gap:3px}
#poFormWrap .tot-r{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:3px 0}
#poFormWrap .tot-r.grand{font-size:14px;font-weight:700;color:#4361ee;border-top:1px solid #e2e8f0;padding-top:8px;margin-top:4px}
#poFormWrap .tot-lbl{color:#64748b}
#poFormWrap .btn-add-row{background:none;border:none;color:#4361ee;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;padding:9px 14px;transition:.15s}
#poFormWrap .btn-add-row:hover{background:#eef0fd}
#poFormWrap .btn-del-row{background:none;border:none;cursor:pointer;color:#94a3b8;padding:5px;border-radius:4px;font-size:13px;transition:.15s;display:block;margin:auto}
#poFormWrap .btn-del-row:hover{background:#fee2e2;color:#ef4444}
/* product search */
#poFormWrap .prod-drop-portal{position:fixed;z-index:999999;display:none;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);overflow:hidden;min-width:320px;max-width:460px}
#poFormWrap .prod-drop-portal-hd{padding:8px 12px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
#poFormWrap .prod-drop-portal-hd input{width:100%;border:1px solid #e2e8f0;border-radius:6px;padding:6px 10px;font-size:12px;font-family:'Cairo',sans-serif;outline:none}
#poFormWrap .prod-drop-portal-hd input:focus{border-color:#4361ee}
#poFormWrap .prod-drop-portal-list{max-height:280px;overflow-y:auto}
#poFormWrap .pdrop-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid #f8fafc;font-size:12px;display:flex;align-items:center;gap:8px}
#poFormWrap .pdrop-item:hover{background:#f0f4ff}
/* tax picker */
#poFormWrap .tax-pick-btn{width:100%;padding:6px 7px;background:#fff;border:1px solid transparent;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;color:#4361ee;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;transition:border .15s;outline:none}
#poFormWrap .tax-pick-btn:hover{border-color:#e2e8f0}
#poFormWrap .tax-pick-btn:focus{border-color:#4361ee;box-shadow:0 0 0 2px rgba(67,97,238,.08)}
/* sidebar */
#poFormWrap .sc-card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--rl);overflow:hidden}
#poFormWrap .sc-h{padding:9px 13px;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:700;color:#64748b}
#poFormWrap .sc-b{padding:12px 13px}
#poFormWrap .sc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid #f1f5f9}
#poFormWrap .sc-row:last-child{border:none;font-weight:700;color:#4361ee}
#poFormWrap .sc-lbl{color:#64748b}
#poFormWrap .sc-btns{padding:12px 13px;display:flex;flex-direction:column;gap:7px}
#poFormWrap .tl{margin-top:8px;border-top:1px solid #e2e8f0;padding-top:9px}
#poFormWrap .tl-item{display:flex;gap:7px;margin-bottom:7px}
#poFormWrap .tl-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
#poFormWrap .tl-txt{font-size:11px;color:#64748b}
#poFormWrap .tl-date{font-size:10px;color:#94a3b8}
/* badges */
#poFormWrap .po-bdg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
#poFormWrap .po-draft{background:#fef9c3;color:#92400e}
#poFormWrap .po-review{background:#e0f2fe;color:#0369a1}
#poFormWrap .po-confirm{background:#ede9fe;color:#5b21b6}
#poFormWrap .po-approved{background:#dcfce7;color:#15803d}
#poFormWrap .po-ordered{background:#cffafe;color:#0e7490}
#poFormWrap .po-received{background:#dcfce7;color:#15803d}
#poFormWrap .po-invoiced{background:#fae8ff;color:#86198f}
#poFormWrap .po-cancelled{background:#fee2e2;color:#b91c1c}
/* save bar */
#poFormWrap .save-bar{position:fixed;bottom:0;right:0;left:0;z-index:100;background:#fff;border-top:1px solid #e2e8f0;padding:11px 22px;display:flex;justify-content:flex-end;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.06)}
/* attach */
#poFormWrap .att-zone{border:1.5px dashed #e2e8f0;border-radius:var(--r);padding:14px;text-align:center;color:#94a3b8;font-size:12px;cursor:pointer;transition:.15s}
#poFormWrap .att-zone:hover{border-color:#4361ee;color:#4361ee;background:#eef0fd}

/* ═══════════════════════════════════════════════════════════════
   modules/sales/order_form.css — merged into bundle
   ═══════════════════════════════════════════════════════════════ */
/* ════ order_form — scoped under #soFormWrap ════ */
#soFormWrap{font-family:'Cairo',sans-serif;background:#f8fafc;min-height:calc(100vh - 60px)}
#soFormWrap *{font-family:'Cairo',sans-serif;box-sizing:border-box}
:root{--ind:#4361ee;--indl:#eef0fd;--indd:#3451d1;--tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;--bd:#e2e8f0;--bg:#f8fafc;--wh:#fff;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--r:8px;--rl:12px}
/* page header */
#soFormWrap .pf-ph{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 22px;display:flex;align-items:center;justify-content:space-between}
#soFormWrap .pf-ph h1{font-size:15px;font-weight:700;color:#0f172a;margin:0;display:flex;align-items:center;gap:8px}
#soFormWrap .pf-ph .pf-bc{font-size:11px;color:#94a3b8;margin-top:2px}
#soFormWrap .pf-ph-r{display:flex;gap:7px;align-items:center}
/* flow steps */
#soFormWrap .pf-flow{background:#fff;border-bottom:1px solid #e2e8f0;padding:9px 22px;display:flex;align-items:center;overflow-x:auto}
#soFormWrap .pf-step{display:flex;align-items:center;gap:5px;flex-shrink:0}
#soFormWrap .pf-sc{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
#soFormWrap .pf-s-done .pf-sc{background:#10b981;color:#fff}
#soFormWrap .pf-s-active .pf-sc{background:#4361ee;color:#fff}
#soFormWrap .pf-s-pending .pf-sc{background:#e2e8f0;color:#94a3b8}
#soFormWrap .pf-sl{font-size:11px;font-weight:600;white-space:nowrap}
#soFormWrap .pf-s-done .pf-sl{color:#10b981}
#soFormWrap .pf-s-active .pf-sl{color:#4361ee}
#soFormWrap .pf-s-pending .pf-sl{color:#94a3b8}
#soFormWrap .pf-sln{flex:1;height:1px;min-width:14px;max-width:50px;background:#e2e8f0;margin:0 5px}
#soFormWrap .pf-sln.done{background:#10b981}
/* buttons */
#soFormWrap .pf-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:.15s;white-space:nowrap;text-decoration:none;line-height:1.2}
#soFormWrap .pf-btn-p{background:#4361ee;color:#fff}#soFormWrap .pf-btn-p:hover{background:#3451d1;color:#fff}
#soFormWrap .pf-btn-o{background:#fff;color:#4361ee;border:1px solid #4361ee}#soFormWrap .pf-btn-o:hover{background:#eef0fd}
#soFormWrap .pf-btn-g{background:#fff;color:#64748b;border:1px solid #e2e8f0}#soFormWrap .pf-btn-g:hover{background:#f8fafc}
#soFormWrap .pf-btn-e{background:#fff;color:#ef4444;border:1px solid #fca5a5}#soFormWrap .pf-btn-e:hover{background:#fff1f1}
#soFormWrap .pf-btn-sm{padding:5px 11px;font-size:12px}
#soFormWrap .pf-btn-full{width:100%;justify-content:center}
/* layout */
#soFormWrap .pf-body{display:flex;gap:14px;padding:14px 20px 90px;align-items:flex-start}
#soFormWrap .pf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
#soFormWrap .pf-side{width:216px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;position:sticky;top:14px}
/* sections */
#soFormWrap .sec{background:#fff;border:1px solid #e2e8f0;border-radius:var(--rl);overflow:visible}
#soFormWrap .sec-h{padding:10px 15px;border-bottom:1px solid #e2e8f0;font-size:12.5px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px}
#soFormWrap .sec-h .hi{width:22px;height:22px;background:#eef0fd;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
#soFormWrap .sec-b{padding:14px}
/* form grid */
#soFormWrap .fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#soFormWrap .fg .full{grid-column:1/-1}
#soFormWrap .f-grp{display:flex;flex-direction:column;gap:4px}
#soFormWrap .f-grp label{font-size:11.5px;font-weight:600;color:#64748b}
#soFormWrap .f-grp label .req{color:#ef4444}
#soFormWrap .f-grp input,#soFormWrap .f-grp select,#soFormWrap .f-grp textarea{
  width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:var(--r);
  font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;
  outline:none;transition:border .15s}
#soFormWrap .f-grp input:focus,#soFormWrap .f-grp select:focus,#soFormWrap .f-grp textarea:focus{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
#soFormWrap .f-grp input[readonly],#soFormWrap .f-grp textarea[readonly]{background:#f8fafc;color:#64748b}
#soFormWrap .f-grp select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:10px;padding-left:28px}
#soFormWrap .f-grp textarea{resize:vertical;min-height:70px;line-height:1.6}
/* picker btn */
#soFormWrap .pick-btn{width:100%;padding:7px 10px;border:1px solid #e2e8f0;border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12.5px;color:#1e293b;background:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border .15s;outline:none;user-select:none}
#soFormWrap .pick-btn:hover,#soFormWrap .pick-btn.open{border-color:#4361ee;box-shadow:0 0 0 3px rgba(67,97,238,.08)}
/* field badge */
#soFormWrap .f-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:3px;width:fit-content}
#soFormWrap .f-badge-blue{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}
#soFormWrap .f-badge-green{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}
/* pick dropdown */
#soFormWrap .pick-drop{display:none;position:absolute;top:calc(100% + 2px);right:0;left:0;background:#fff;border:1px solid #e2e8f0;border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:9999;overflow:hidden;min-width:200px}
#soFormWrap .pick-drop input{width:100%;border:none;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;font-family:'Cairo',sans-serif;outline:none;background:#f8fafc}
#soFormWrap .pick-drop input:focus{border-color:#4361ee}
#soFormWrap .pick-list{max-height:220px;overflow-y:auto}
#soFormWrap .pick-item{padding:8px 12px;cursor:pointer;font-size:12.5px;border-bottom:1px solid #f8fafc;transition:background .1s}
#soFormWrap .pick-item:hover{background:#f0f4ff;color:#4361ee}
#soFormWrap .pick-footer{padding:8px 12px;cursor:pointer;font-size:12px;font-weight:700;color:#10b981;display:flex;align-items:center;gap:6px;border-top:1.5px solid #f1f5f9;position:sticky;bottom:0;background:#fff}
#soFormWrap .pick-footer:hover{background:#f0fdf4}
/* items table */
#soFormWrap .it-wrap{overflow-x:auto}
#soFormWrap table.lt{width:100%;border-collapse:collapse;font-size:12.5px}
#soFormWrap table.lt thead tr{background:#f8fafc}
#soFormWrap table.lt thead th{padding:8px 8px;text-align:right;font-weight:600;color:#64748b;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-size:11.5px;background:#f8fafc}
#soFormWrap table.lt thead th.r{text-align:left}
#soFormWrap table.lt thead th.c{text-align:center}
#soFormWrap table.lt tbody td{padding:4px 4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
#soFormWrap table.lt tbody tr:last-child td{border-bottom:none}
#soFormWrap table.lt tbody tr:hover td{background:#fafbff}
#soFormWrap table.lt td input,#soFormWrap table.lt td select{width:100%;padding:6px 7px;border:1px solid transparent;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;color:#1e293b;background:transparent;transition:border .15s;outline:none}
#soFormWrap table.lt td input:hover,#soFormWrap table.lt td select:hover{border-color:#e2e8f0}
#soFormWrap table.lt td input:focus,#soFormWrap table.lt td select:focus{border-color:#4361ee;background:#fff;box-shadow:0 0 0 2px rgba(67,97,238,.08)}
#soFormWrap table.lt td select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 6px center;background-size:9px;padding-left:22px}
#soFormWrap .lt-tot-val{text-align:left;font-weight:700;color:#1e293b;padding:6px 7px;font-family:monospace;font-size:12px;white-space:nowrap}
/* totals */
#soFormWrap .lt-tots{padding:11px 15px;border-top:1px solid #e2e8f0;background:#fafbff;display:flex;flex-direction:column;gap:3px}
#soFormWrap .tot-r{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:3px 0}
#soFormWrap .tot-r.grand{font-size:14px;font-weight:700;color:#4361ee;border-top:1px solid #e2e8f0;padding-top:8px;margin-top:4px}
#soFormWrap .tot-lbl{color:#64748b}
#soFormWrap .btn-add-row{background:none;border:none;color:#4361ee;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;padding:9px 14px;transition:.15s}
#soFormWrap .btn-add-row:hover{background:#eef0fd}
#soFormWrap .btn-del-row{background:none;border:none;cursor:pointer;color:#94a3b8;padding:5px;border-radius:4px;font-size:13px;transition:.15s;display:block;margin:auto}
#soFormWrap .btn-del-row:hover{background:#fee2e2;color:#ef4444}
/* product search */
#soFormWrap .prod-drop-portal{position:fixed;z-index:999999;display:none;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);overflow:hidden;min-width:320px;max-width:460px}
#soFormWrap .prod-drop-portal-hd{padding:8px 12px;border-bottom:1px solid #f1f5f9;background:#f8fafc}
#soFormWrap .prod-drop-portal-hd input{width:100%;border:1px solid #e2e8f0;border-radius:6px;padding:6px 10px;font-size:12px;font-family:'Cairo',sans-serif;outline:none}
#soFormWrap .prod-drop-portal-hd input:focus{border-color:#4361ee}
#soFormWrap .prod-drop-portal-list{max-height:280px;overflow-y:auto}
#soFormWrap .pdrop-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid #f8fafc;font-size:12px;display:flex;align-items:center;gap:8px}
#soFormWrap .pdrop-item:hover{background:#f0f4ff}
/* tax picker */
#soFormWrap .tax-pick-btn{width:100%;padding:6px 7px;background:#fff;border:1px solid transparent;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;color:#4361ee;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;transition:border .15s;outline:none}
#soFormWrap .tax-pick-btn:hover{border-color:#e2e8f0}
#soFormWrap .tax-pick-btn:focus{border-color:#4361ee;box-shadow:0 0 0 2px rgba(67,97,238,.08)}
/* sidebar */
#soFormWrap .sc-card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--rl);overflow:hidden}
#soFormWrap .sc-h{padding:9px 13px;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:700;color:#64748b}
#soFormWrap .sc-b{padding:12px 13px}
#soFormWrap .sc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid #f1f5f9}
#soFormWrap .sc-row:last-child{border:none;font-weight:700;color:#4361ee}
#soFormWrap .sc-lbl{color:#64748b}
#soFormWrap .sc-btns{padding:12px 13px;display:flex;flex-direction:column;gap:7px}
#soFormWrap .tl{margin-top:8px;border-top:1px solid #e2e8f0;padding-top:9px}
#soFormWrap .tl-item{display:flex;gap:7px;margin-bottom:7px}
#soFormWrap .tl-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
#soFormWrap .tl-txt{font-size:11px;color:#64748b}
#soFormWrap .tl-date{font-size:10px;color:#94a3b8}
/* badges */
#soFormWrap .po-bdg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
#soFormWrap .po-draft{background:#fef9c3;color:#92400e}
#soFormWrap .po-review{background:#e0f2fe;color:#0369a1}
#soFormWrap .po-confirm{background:#ede9fe;color:#5b21b6}
#soFormWrap .po-approved{background:#dcfce7;color:#15803d}
#soFormWrap .po-ordered{background:#cffafe;color:#0e7490}
#soFormWrap .po-received{background:#dcfce7;color:#15803d}
#soFormWrap .po-invoiced{background:#fae8ff;color:#86198f}
#soFormWrap .po-cancelled{background:#fee2e2;color:#b91c1c}
/* save bar */
#soFormWrap .save-bar{position:fixed;bottom:0;right:0;left:0;z-index:100;background:#fff;border-top:1px solid #e2e8f0;padding:11px 22px;display:flex;justify-content:flex-end;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.06)}
/* attach */
#soFormWrap .att-zone{border:1.5px dashed #e2e8f0;border-radius:var(--r);padding:14px;text-align:center;color:#94a3b8;font-size:12px;cursor:pointer;transition:.15s}
#soFormWrap .att-zone:hover{border-color:#4361ee;color:#4361ee;background:#eef0fd}