@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700&family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Lexend:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
/* UI/UX advance round (2026-09) — a real 4-way theme system replaces the old single fixed
   palette. Every rule in this file still reads color through var(--primary)/var(--primary2)/
   var(--ink)/var(--sidebar-*), so a theme is just a different value for these tokens, set on
   <body data-theme="...">. "Emerald Studio" is the default (kept close to the previous teal
   look, so an existing tenant sees no surprise change until they pick something else) and has
   a bold dark sidebar; "Aurora Minimal" is its light/airy counterpart with a white sidebar
   (reviving the original v1.0 light-sidebar rules further down, which a later dark-gradient
   override had been shadowing for every tenant regardless of preference). Each of the two has
   its own blue accent variant, so the picker offers 4 total looks. Buttons deliberately do NOT
   use these gradients — see the flattened .btn.primary etc. further down; gradients stay only
   on decorative washes/tiles, per the brief ("button e gradient na, kintu overall clean/soft").
*/
*{box-sizing:border-box}
:root{
  --blue:#2563eb;--green:#16a34a;--purple:#7c3aed;--orange:#ea580c;--red:#dc2626;
  --ink:#101827;--muted:#66736c;--muted2:#94a3b8;--line:#e6ebe9;--bg:#f5f8f7;--surface:#fff;--soft:#f8faf9;
  --shadow:0 10px 32px rgba(16,24,39,.07);--shadow-sm:0 4px 14px rgba(16,24,39,.06);--shadow-lg:0 24px 60px rgba(16,24,39,.16);
  --radius:18px;--radius-sm:11px;--radius-lg:22px;
  --glass-bg:rgba(255,255,255,.72);--glass-border:rgba(255,255,255,.5);--glass-blur:18px;
  /* default = Emerald Studio, so an untouched tenant keeps today's look */
  --primary:#059669;--primary2:#10b981;--primary-dark:#047857;
  --sidebar-bg:linear-gradient(180deg,#064e3b 0%,#059669 55%,#052e2b 100%);
  --sidebar-text:rgba(255,255,255,.86);--sidebar-text-dim:rgba(255,255,255,.58);
  --sidebar-hover-bg:rgba(255,255,255,.10);--sidebar-active-bg:#fff;--sidebar-active-text:#047857;
  --sidebar-active-icon-bg:#d1fae5;--sidebar-border:rgba(255,255,255,.12);--sidebar-section-bg:rgba(255,255,255,.05);
  --sidebar-search-bg:rgba(255,255,255,.10);--sidebar-border-right:0;--sidebar-footer-bg:rgba(255,255,255,.09);
}
body[data-theme="emerald"]{--primary:#059669;--primary2:#10b981;--primary-dark:#047857;--sidebar-bg:linear-gradient(180deg,#064e3b 0%,#059669 55%,#052e2b 100%);--sidebar-active-text:#047857;--sidebar-active-icon-bg:#d1fae5;}
body[data-theme="emerald-blue"]{--primary:#2563eb;--primary2:#3b82f6;--primary-dark:#1d4ed8;--sidebar-bg:linear-gradient(180deg,#0c2c58 0%,#1d4ed8 55%,#0a2547 100%);--sidebar-text:rgba(255,255,255,.86);--sidebar-text-dim:rgba(255,255,255,.58);--sidebar-hover-bg:rgba(255,255,255,.10);--sidebar-active-bg:#fff;--sidebar-active-text:#1d4ed8;--sidebar-active-icon-bg:#dbeafe;--sidebar-border:rgba(255,255,255,.12);--sidebar-section-bg:rgba(255,255,255,.05);--sidebar-search-bg:rgba(255,255,255,.10);--sidebar-border-right:0;--sidebar-footer-bg:rgba(255,255,255,.09);}
body[data-theme="aurora"]{--primary:#6366f1;--primary2:#818cf8;--primary-dark:#4338ca;--sidebar-bg:#fff;--sidebar-text:#4a5568;--sidebar-text-dim:#94a0ab;--sidebar-hover-bg:rgba(99,102,241,.06);--sidebar-active-bg:#eef0ff;--sidebar-active-text:#4338ca;--sidebar-active-icon-bg:#fff;--sidebar-border:var(--line);--sidebar-section-bg:transparent;--sidebar-search-bg:#f6f7fb;--sidebar-border-right:1px solid var(--line);--sidebar-footer-bg:#f6f7fb;}
body[data-theme="aurora-blue"]{--primary:#3b82f6;--primary2:#60a5fa;--primary-dark:#1d4ed8;--sidebar-bg:#fff;--sidebar-text:#4a5568;--sidebar-text-dim:#94a0ab;--sidebar-hover-bg:rgba(59,130,246,.06);--sidebar-active-bg:#eaf2ff;--sidebar-active-text:#1d4ed8;--sidebar-active-icon-bg:#fff;--sidebar-border:var(--line);--sidebar-section-bg:transparent;--sidebar-search-bg:#f6f7fb;--sidebar-border-right:1px solid var(--line);--sidebar-footer-bg:#f6f7fb;}
/* Subtle grain so large flat surfaces (topbar, sidebar, cards) read as soft material rather than
   flat plastic — an SVG turbulence tile at very low opacity, never enough to be "noticeable",
   layered under content via ::before so it never interferes with text/click targets. */
body{position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar,.layout{position:relative;z-index:1}
html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(135deg,#f7faf9 0%,#f3f7f6 100%);color:var(--ink);font-family:Inter,Hind Siliguri,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.bn{font-family:Hind Siliguri,sans-serif}.ref,.sku{font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:.01em}.metric{font-family:Space Grotesk,Inter,sans-serif}.page-title,h1,h2{font-family:Montserrat,Hind Siliguri,sans-serif}
.topbar{height:72px;position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand{display:flex;align-items:center;gap:12px;min-width:240px}.logo{width:44px;height:44px;flex:none;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:#fff;font-weight:800;font-family:Montserrat;box-shadow:0 8px 18px rgba(15,118,110,.18);overflow:hidden}.logo img{width:100%;height:100%;object-fit:cover}.brand h1{font-size:17px;margin:0;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.brand small{display:block;color:var(--muted);margin-top:2px;font-size:11px}.plan-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:99px;vertical-align:middle;background:#f1f5f3;color:#64736b}.plan-badge-essential{background:#dbeafe;color:#1d4ed8}.plan-badge-professional{background:#ede9fe;color:#6d28d9}.plan-badge-enterprise{background:#fef3c7;color:#92400e}.top-actions{display:flex;align-items:center;gap:9px}.search-global{width:min(360px,28vw);position:relative}.search-global input{padding-left:36px}.search-global .search-mark{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted2)}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;color:#526059;position:relative}.icon-btn:hover{background:#f3fbf7;color:var(--primary)}.count-dot{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;display:grid;place-items:center;border:2px solid #fff}.profile{display:flex;align-items:center;gap:9px;padding:5px 7px 5px 5px;border:1px solid var(--line);border-radius:13px;background:#fff}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#e0f7f1,#c9f5e8);display:grid;place-items:center;color:var(--primary);font-weight:800;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar-sm{width:26px;height:26px;border-radius:8px;font-size:11px}.avatar-lg{width:64px;height:64px;border-radius:16px;font-size:24px}.profile b{font-size:12px;display:block}.profile small{color:var(--muted);font-size:10px}
.layout{display:grid;grid-template-columns:258px minmax(0,1fr);min-height:calc(100vh - 72px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:15px 12px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto;z-index:60}.nav-title{font-size:10px;color:#a0aaa5;text-transform:uppercase;letter-spacing:.1em;padding:14px 10px 6px;font-weight:700}.nav-btn{width:100%;border:0;background:transparent;padding:10px 10px;border-radius:11px;display:flex;gap:10px;align-items:center;text-align:left;color:#4e5b55;font-weight:600;margin:2px 0;transition:.18s ease}.nav-btn:hover,.nav-btn.active{background:#ecfdf5;color:var(--primary)}.nav-icon{width:30px;height:30px;border-radius:9px;background:#f3f6f4;display:grid;place-items:center;flex:none}.nav-btn.active .nav-icon{background:#dff8ed}.nav-label{flex:1}.nav-badge{font-size:10px;padding:2px 7px;border-radius:99px;background:#f1f5f3;color:#64736b}.sidebar-footer{margin-top:18px;padding:12px;border-radius:13px;background:linear-gradient(135deg,#f0fdfa,#f7fcfa);border:1px solid #d7f5ea}.sidebar-footer b{display:block;font-size:11px}.sidebar-footer small{color:var(--muted);font-size:10px}
.main{padding:26px 28px 40px;max-width:1600px;width:100%;overflow:hidden}.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:15px}.breadcrumbs{font-size:11px;color:var(--muted2);margin-bottom:7px}.page-title{font-size:27px;margin:0;line-height:1.2}.page-desc{margin:7px 0 0;color:var(--muted);max-width:760px}.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notice-strip{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#eff8ff,#f0fdfa);border:1px solid #d8edf0;border-radius:13px;padding:10px 13px;margin-bottom:16px;overflow:hidden}.notice-strip .tag{font-size:10px;background:#fff;padding:4px 8px;border-radius:8px;font-weight:800;color:var(--primary);flex:none}.notice-strip .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.notice-strip time{font-size:10px;color:var(--muted2);flex:none}
/* Round of "clean it up" polish: assist_box() used to render as an always-open, full-width
   two-language paragraph — with 40+ call sites across the app, that added up to a lot of
   permanently-visible reading material the user specifically flagged as clutter. It's now a
   small "i" hint chip that reveals its text in a popover on hover/focus/tap, so the guidance is
   one click away instead of always taking up space — nothing was removed, just tucked away.
   The one exception is the uncosted-products P&L warning, which carries an inline style="..."
   (actual actionable content, not a tip) — .assist[style] below restores the old always-visible
   banner layout for that one case specifically, using the attribute selector so no PHP call site
   needs to change. */
.assist{position:relative;display:inline-flex;vertical-align:middle;margin:6px 0 14px}
.assist-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--primary);font-weight:800;font-family:Inter;font-size:11px;flex:none;border:1px solid var(--line);cursor:help}
.assist-icon:hover,.assist-icon:focus{background:var(--primary);color:#fff;outline:0}
.assist>span:last-child{position:absolute;left:0;top:calc(100% + 8px);z-index:45;width:max-content;max-width:min(340px,80vw);background:var(--ink);color:#fff;padding:10px 13px;border-radius:10px;font-family:Hind Siliguri,Inter,sans-serif;font-size:12.5px;line-height:1.55;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s ease;pointer-events:none}
.assist:hover>span:last-child,.assist:focus-within>span:last-child,.assist.open>span:last-child{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.assist[style]{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border:1px solid #ccfbf1;border-radius:11px;font-family:Hind Siliguri,Inter,sans-serif;font-size:12.5px;line-height:1.55;margin:10px 0 16px;position:static}
.assist[style] .assist-icon{position:static;cursor:default;border:0}
.assist[style]>span:last-child{position:static;background:none;color:inherit;box-shadow:none;opacity:1;visibility:visible;transform:none;padding:0;font-weight:400;width:auto;max-width:none}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}.stats:has(.stat:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.stats:has(.stat:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* UI/UX round 6 — the Dashboard can now render a 5th card (Profit/Loss, company-wide roles only),
   so its stat grid specifically uses auto-fit instead of the fixed/has()-based column count above:
   4 cards keep today's 4-per-row layout, 5 cards flow to a clean wrap rather than a lopsided 5th
   column or the :has() rules above forcing an unrelated 3-per-row shrink. Other .stats usages
   sitewide (Reports, Expiry Watch, etc.) are untouched, so this only affects the dashboard.
*/
.dashboard-stats{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat:after{content:"";position:absolute;right:-20px;top:-22px;width:75px;height:75px;border-radius:50%;background:rgba(20,184,166,.045)}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#effaf7;color:var(--primary)}.stat .label{font-size:11px;color:var(--muted);font-weight:600}.stat .value{font-size:27px;font-weight:700;margin-top:10px;letter-spacing:-.03em}.stat .note{font-size:10.5px;color:var(--muted2);margin-top:6px}.trend-up{color:var(--green);font-weight:700}.trend-down{color:var(--red);font-weight:700}
.stat-pl-pos{background:linear-gradient(145deg,#ffffff,#ecfdf5)}.stat-pl-pos .stat-icon{background:#d1fae5;color:#059669}.stat-pl-pos .value{color:#059669}
.stat-pl-neg{background:linear-gradient(145deg,#ffffff,#fef2f2)}.stat-pl-neg .stat-icon{background:#fee2e2;color:#dc2626}.stat-pl-neg .value{color:#dc2626}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}.quick{background:#334155;border:0;border-radius:16px;padding:17px;color:white;text-align:left;min-height:108px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.2s}.quick:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.12)}.quick:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:rgba(255,255,255,.1);right:-25px;bottom:-35px}.quick b{display:block;font-size:14px}.quick small{display:block;margin-top:7px;opacity:.86;line-height:1.4}.q1{background:#2563eb}.q2{background:#7c3aed}.q3{background:#168245}.q4{background:#ea580c}.q5{background:#0f766e}.q6{background:#be123c}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* UI/UX round 6 — the 'general' dashboard now renders 2 single-axis charts + the approval queue
   card in this row (previously 1 combined dual-axis chart + the queue), so it needs a 3-item-aware
   flow instead of the fixed 2-column .grid2; auto-fit keeps every other .grid2 usage unaffected. */
.grid2-charts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}.card-head{padding:16px 17px;display:flex;justify-content:space-between;gap:12px;align-items:center}.card-title{font-weight:800;font-size:14px}.card-sub{font-size:11px;color:var(--muted);margin-top:3px}.card-body{padding:0 17px 17px}.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:0 17px 15px}.toolbar input,.toolbar select{max-width:250px}.toolbar .grow{flex:1;max-width:none;min-width:210px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:880px}th{font-size:10.5px;color:var(--muted);text-align:left;padding:11px 14px;background:#f8faf9;border-block:1px solid var(--line);font-weight:700;white-space:nowrap}td{padding:12px 14px;border-bottom:1px solid #eef2f0;font-size:12.5px;vertical-align:middle}tbody tr:hover{background:#fbfdfc}.cell-title{font-weight:700}.cell-sub{font-size:10px;color:var(--muted2);margin-top:3px}.empty{text-align:center;padding:46px 20px!important;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:700;white-space:nowrap;background:#f1f5f9;color:#475569}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.success{background:#ecfdf5;color:#087443}.badge.warning{background:#fff7ed;color:#c2410c}.badge.danger{background:#fff1f2;color:#be123c}.badge.info{background:#eff6ff;color:#2563eb}.badge.purple{background:#f5f3ff;color:#7c3aed}.badge.gold{background:#fffbeb;color:#b45309}
.btn{border-radius:11px;padding:9px 13px;font-weight:700;border:1px solid var(--line);background:#fff;color:#46554e;display:inline-flex;align-items:center;gap:7px;justify-content:center;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.btn:hover{background:#f8faf9}.btn.primary{border:0;background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(16,24,39,.14)}.btn.primary:hover{background:var(--primary-dark)}.btn.primary:active{transform:translateY(1px)}.btn.danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}.btn.warning{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.btn.small{padding:6px 9px;font-size:11px}.btn.icon{width:36px;height:36px;padding:0}.btn.btn-loading,.btn:disabled.btn-loading{opacity:.75;cursor:progress;pointer-events:none}.btn-spinner{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:btn-spin .6s linear infinite;vertical-align:-1px}@keyframes btn-spin{to{transform:rotate(360deg)}}.danger-zone{border:1px solid #fecdd3;background:#fffafa;border-radius:15px;padding:16px}.danger-zone h3{color:#be123c;margin:0 0 6px;font-family:Montserrat}.danger-zone p{color:#7f1d1d;margin:0 0 12px;font-size:12px}
.form-card{padding:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-group{margin-bottom:12px}.form-group label{display:block;font-size:11px;font-weight:700;color:#45534c;margin-bottom:6px}.field-help{font-family:Hind Siliguri,Inter,sans-serif;font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.4}input,select,textarea{width:100%;border:1px solid #d7dfdc;border-radius:10px;padding:10px 11px;background:#fff;color:var(--ink);outline:0;min-height:42px}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.08)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366736c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:13px;padding-right:34px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}select:hover{border-color:#b7c7c1}select[multiple]{background-image:none;padding-right:11px}textarea{min-height:86px;resize:vertical}.input-inline{display:flex;gap:8px;flex-wrap:wrap}.form-span2{grid-column:1/-1}.section-box{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;background:#fbfdfc}.section-title{font-weight:800;margin-bottom:3px}.section-help{font-family:Hind Siliguri,Inter,sans-serif;font-size:11px;color:var(--muted);margin-bottom:12px}.source-tag{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--primary);background:#e6f7f4;padding:2px 8px;border-radius:6px;margin-bottom:6px}
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);padding:0 16px}.tab{padding:11px 10px;border:0;background:transparent;color:var(--muted);font-weight:700;border-bottom:2px solid transparent}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.approval-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;background:#fff}.approval-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10.5px;margin-top:6px}.approval-actions{display:flex;gap:6px}
.activity-list{padding:0 16px 10px}.activity-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #eef2f0;align-items:flex-start}.activity-icon{width:30px;height:30px;border-radius:9px;background:#f0fdfa;color:var(--primary);display:grid;place-items:center;flex:none}.activity-main{flex:1;min-width:0}.activity-name{font-weight:700;font-size:12px}.activity-meta{font-size:10.5px;color:var(--muted);margin-top:3px}.activity-amount{font-family:Space Grotesk;font-weight:700;white-space:nowrap}
.pl-statement{padding:6px 20px 20px;max-width:640px}.pl-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-family:Space Grotesk,Inter,sans-serif}.pl-row span{color:#45534c}.pl-row.pl-item{padding-left:14px;font-size:12.5px}.pl-row.pl-item span{color:var(--muted)}.pl-row.pl-sub{border-top:1px solid #eef2f0;font-weight:700}.pl-row.pl-total{font-weight:800;font-size:15px;padding:11px 0}.pl-row.pl-highlight{background:#f8faf9;border-radius:10px;padding:11px 12px;margin:4px 0}.pl-row.pl-net{border-top:2px solid var(--ink);margin-top:6px;font-size:17px}.pl-row.pl-net.pl-positive b{color:#047857}.pl-row.pl-net.pl-negative b{color:#be123c}.pl-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);font-weight:800;margin-top:14px;padding-bottom:4px;border-bottom:1px solid #eef2f0}
.chart-box{padding:16px}.bar-chart{height:190px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line);padding:0 5px 6px}.bar-group{height:100%;flex:1;display:flex;align-items:flex-end;gap:3px;position:relative}.bar{width:50%;border-radius:6px 6px 2px 2px;min-height:4px;background:linear-gradient(180deg,#14b8a6,#0f766e)}.bar.alt{background:linear-gradient(180deg,#60a5fa,#2563eb)}.bar-label{position:absolute;bottom:-24px;width:100%;text-align:center;font-size:9px;color:var(--muted2)}.chart-legend{display:flex;gap:14px;margin-top:28px;font-size:10px;color:var(--muted)}.legend-dot{width:8px;height:8px;border-radius:3px;background:var(--primary);display:inline-block;margin-right:4px}.legend-dot.alt{background:var(--blue)}
.settings-layout{display:grid;grid-template-columns:210px 1fr;gap:15px}.settings-nav{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;height:max-content}.settings-nav a{display:block;padding:10px 11px;border-radius:9px;font-size:12px;font-weight:650}.settings-nav a:hover,.settings-nav a.active{background:#ecfdf5;color:var(--primary)}.settings-section{padding:18px}.setting-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(240px,1.2fr);gap:22px;padding:16px 0;border-bottom:1px solid #eef2f0}.setting-row:last-child{border-bottom:0}.setting-label b{display:block}.setting-label small{display:block;color:var(--muted);margin-top:4px;line-height:1.5}.toggle{display:inline-flex;align-items:center;gap:8px}.toggle input{width:18px;height:18px;min-height:auto}
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.52);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:18px}.modal-overlay.show{display:flex}.modal{width:100%;max-width:860px;max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(15,23,42,.25)}.modal.small{max-width:520px}.modal-head{position:sticky;top:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);z-index:5;padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;font-family:Montserrat;font-size:16px}.close{border:0;background:#f3f5f4;width:36px;height:36px;border-radius:10px;font-size:19px}.modal-body{padding:18px}.modal-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 18px;display:flex;justify-content:flex-end;gap:8px}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:3000}.toast{padding:11px 13px;border-radius:11px;color:#fff;background:var(--primary);box-shadow:var(--shadow);margin-top:8px;max-width:360px}.toast.error{background:#be123c}.toast.warning{background:#ea580c}
.dropdown{position:absolute;right:16px;top:63px;width:min(390px,calc(100vw - 30px));background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:0 18px 55px rgba(15,23,42,.16);display:none;overflow:hidden}.dropdown.show{display:block}.dropdown-head{padding:13px 14px;border-bottom:1px solid var(--line);font-weight:800}.dropdown-list{max-height:390px;overflow:auto}.dropdown-item{padding:12px 14px;border-bottom:1px solid #eef2f0}.dropdown-item.unread{background:#f4fbf8}.dropdown-item b{font-size:12px}.dropdown-item small{display:block;color:var(--muted);margin-top:4px}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#f5f8f7}.login-hero{padding:60px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(20,184,166,.18),transparent 38%),linear-gradient(145deg,#083f3b,#0f766e 52%,#14b8a6);color:#fff;position:relative;overflow:hidden}.login-hero:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;border:1px solid rgba(255,255,255,.12);right:-140px;bottom:-120px}.login-mark{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:18px;font-weight:800;font-family:Montserrat;backdrop-filter:blur(8px)}.login-hero h1{font-size:42px;max-width:650px;margin:26px 0 12px;line-height:1.1}.login-hero p{max-width:590px;line-height:1.7;opacity:.86}.login-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;max-width:620px}.login-point{padding:11px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:12px}.login-box{display:grid;place-items:center;padding:30px}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 22px 60px rgba(15,23,42,.09)}.login-card h2{margin:0 0 5px}.login-card>p{color:var(--muted);margin:0 0 20px}.login-card .btn{width:100%;min-height:44px}.login-footer{text-align:center;color:var(--muted2);font-size:10.5px;margin-top:18px}
.alert{padding:11px 13px;border-radius:11px;margin-bottom:12px}.alert.error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.alert.success{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}.code-note{font-family:Space Grotesk,Inter,sans-serif;font-size:11px;background:#f7faf9;border:1px solid var(--line);border-radius:10px;padding:10px}
.mobile-menu{display:none}.mobile-only{display:none}
@media(max-width:1180px){.stats{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.search-global{display:none}}
@media(max-width:880px){.layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;top:72px;width:258px;transition:.22s;box-shadow:15px 0 45px rgba(15,23,42,.12)}.sidebar.open{left:0}.mobile-menu{display:grid}.main{padding:20px 16px 86px}.brand{min-width:0}.profile .profile-text{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto;white-space:nowrap}.setting-row{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-hero{display:none}.login-box{min-height:100vh}.mobile-only{display:block}
/* Round 5 UX polish — the attendance tab bar grew to 6 tabs (Entry/Exit/Finalized/Manual/Monthly/
   Corrections) and, at this width, no longer fits: .main has overflow:hidden (to contain other
   wide content like tables), which was silently clipping the tab bar instead of wrapping or
   scrolling it — Manual Entry, Monthly Sheet and Corrections were simply unreachable on a phone.
   Switching the bar itself to a horizontally-scrollable strip (own overflow-x, full width instead
   of width:max-content) fixes that: it now scrolls within its own box, so .main's overflow:hidden
   never has anything to clip, and every tab stays reachable with a swipe. */
.att-tabs{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap:nowrap}
.att-tab{flex:none}
}
@media(max-width:620px){.topbar{padding:0 10px}.brand h1{font-size:14px}.brand h1 .plan-badge{display:none}.brand small{display:none}.logo{width:39px;height:39px}.main{padding:16px 10px 82px}.page-head{flex-direction:column}.page-title{font-size:23px}.head-actions{width:100%}.head-actions .btn{flex:1}.stats,.quick-grid,.grid2,.grid3,.form-grid{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat .value{font-size:23px}.quick{min-height:100px;padding:15px}.modal-overlay{align-items:flex-end;padding:0}.modal{border-radius:20px 20px 0 0;max-height:94vh}.form-grid{grid-template-columns:1fr}.approval-card{grid-template-columns:1fr}.approval-actions{justify-content:flex-start}.login-card{padding:22px;border-radius:18px}.notice-strip time{display:none}.dyn-row select,.dyn-row input{width:100%!important}}
@media(max-width:430px){.stats,.quick-grid,.grid2,.grid3{grid-template-columns:1fr}.top-actions .icon-btn:nth-of-type(2){display:none}.page-title{font-size:21px}}

@media print{.topbar,.sidebar,.head-actions,.quick-grid,.assist,.notice-strip,.toolbar,.btn,.dropdown{display:none!important}.layout{display:block}.main{padding:0;max-width:none}.card,.stat{box-shadow:none}.page-head{margin-bottom:12px}body{background:#fff}}

/* v1.1 Running-company visual hierarchy */
body{--section:#0f766e;--section-soft:#ecfdf5}
body.page-products{--section:#16a34a;--section-soft:#f0fdf4}body.page-materials{--section:#d97706;--section-soft:#fffbeb}body.page-equipment{--section:#64748b;--section-soft:#f8fafc}body.page-suppliers{--section:#e11d48;--section-soft:#fff1f2}body.page-procurement{--section:#ea580c;--section-soft:#fff7ed}body.page-production{--section:#7c3aed;--section-soft:#f5f3ff}body.page-warehouses{--section:#0891b2;--section-soft:#ecfeff}body.page-stock{--section:#2563eb;--section-soft:#eff6ff}body.page-supply{--section:#4f46e5;--section-soft:#eef2ff}body.page-sales{--section:#db2777;--section-soft:#fdf2f8}body.page-accounts{--section:#059669;--section-soft:#ecfdf5}body.page-hr{--section:#9333ea;--section-soft:#faf5ff}body.page-payroll{--section:#ca8a04;--section-soft:#fefce8}body.page-requests{--section:#0284c7;--section-soft:#f0f9ff}body.page-applications{--section:#8b5cf6;--section-soft:#f5f3ff}body.page-notices{--section:#f97316;--section-soft:#fff7ed}body.page-activity{--section:#475569;--section-soft:#f8fafc}body.page-reports{--section:#0d9488;--section-soft:#f0fdfa}body.page-settings{--section:#334155;--section-soft:#f8fafc}
.page-head{padding:15px 16px;border:1px solid var(--line);border-left:5px solid var(--section);border-radius:16px;background:linear-gradient(120deg,var(--section-soft),#fff 72%);box-shadow:0 5px 20px rgba(15,23,42,.035)}
.module-card{border-top:3px solid var(--section)}

/* Every value here now comes from the --sidebar-* tokens the active theme sets above, so the
   "Emerald Studio" dark-glass sidebar and the "Aurora Minimal" light sidebar are the SAME rules
   rendering differently — no per-theme duplication of layout/structure, only color values differ. */
/* No position here on purpose: the base .sidebar rule already sets position:sticky (desktop) and the
   max-width:880px media query overrides it to position:fixed (mobile off-canvas). This rule sits
   AFTER that media query in source order, so redeclaring position here — even to the same-looking
   "relative" — would win the cascade on every viewport (media-query specificity doesn't beat later
   source order) and silently cancel the mobile fixed/off-canvas behavior.
   Note: this block used to also define a `.sidebar:before{inset:0;backdrop-filter:blur(2px)}` glass
   overlay here. On desktop the sidebar is a static grid column with nothing behind it to blur, and
   because that pseudo-element was position:absolute it painted ABOVE the sidebar's own in-flow nav
   text (positioned descendants paint after static in-flow content), so it visibly blurred the
   sidebar's own labels for no visual benefit. Removed. The intentional mobile glass effect (where the
   sidebar genuinely slides over page content) is the separate, correctly-scoped rule below. */
.sidebar{background:var(--sidebar-bg);border-right:var(--sidebar-border-right);color:var(--sidebar-text);padding:12px 10px}
.nav-section{padding:5px 6px 7px;border-radius:14px;margin-bottom:8px;border:1px solid var(--sidebar-border);background:var(--sidebar-section-bg)}
.sidebar .nav-title{color:var(--sidebar-text-dim);padding:8px 8px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:8px}.sidebar .nav-title:hover{color:var(--sidebar-text);background:var(--sidebar-hover-bg)}.nav-chevron{transition:transform .16s ease;flex:none;opacity:.8}.nav-section.collapsed .nav-chevron{transform:rotate(-90deg)}.nav-section.collapsed>.nav-btn{display:none}
.sidebar-search{position:relative;display:flex;align-items:center;gap:6px;background:var(--sidebar-search-bg);border:1px solid var(--sidebar-border);border-radius:11px;padding:0 10px;margin-bottom:10px}.sidebar-search svg,.sidebar-search i{color:var(--sidebar-text-dim);flex:none}.sidebar-search input{flex:1;background:transparent;border:0;outline:0;color:var(--sidebar-text);padding:9px 0;font-size:13px;font-weight:600;min-width:0}.sidebar-search input::placeholder{color:var(--sidebar-text-dim)}.sidebar-search-clear{background:transparent;border:0;color:var(--sidebar-text-dim);cursor:pointer;padding:4px;display:none;align-items:center;border-radius:6px}.sidebar-search-clear:hover{color:var(--sidebar-text);background:var(--sidebar-hover-bg)}.sidebar-search.has-value .sidebar-search-clear{display:inline-flex}.nav-section.search-empty{display:none}
.sidebar .nav-btn{color:var(--sidebar-text)}.sidebar .nav-btn:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-text)}.sidebar .nav-btn.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);box-shadow:var(--shadow-sm)}
.sidebar .nav-icon{background:var(--sidebar-hover-bg);color:var(--sidebar-text)}.sidebar .nav-btn.active .nav-icon{background:var(--sidebar-active-icon-bg);color:var(--sidebar-active-text)}.sidebar .nav-badge{background:var(--sidebar-hover-bg);color:var(--sidebar-text)}.sidebar .nav-btn.active .nav-badge{background:var(--sidebar-active-icon-bg);color:var(--sidebar-active-text)}
.sidebar-footer{background:var(--sidebar-footer-bg);border-color:var(--sidebar-border);color:var(--sidebar-text)}.sidebar-footer small{color:var(--sidebar-text-dim)}
/* Round 28 — Attributes rendered as a nested sub-item directly under Products (not its own top-level
   menu entry): smaller icon/text + left indent + a thin connector line so it visually reads as part
   of the Products menu, matching the WooCommerce-style admin menu this app has been following. */
.nav-btn.nav-subitem{margin-left:20px;width:calc(100% - 20px);padding:7px 10px;font-weight:600;font-size:12.5px;position:relative}
.nav-btn.nav-subitem:before{content:'';position:absolute;left:-11px;top:0;bottom:0;width:1px;background:var(--sidebar-border)}
.nav-btn.nav-subitem .nav-icon{width:24px;height:24px}
/* Round 29 — Add Product's Step 1 "which type is this" picker: same card-with-hidden-radio pattern
   as the Settings Theme picker (.theme-pick), just with a title/description instead of a swatch, so
   the modal shows ONLY this choice first and every other field waits until one is picked. */
.type-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-width:640px;margin-top:6px}
/* Specificity note: this label sits inside a .form-group, and .form-group label{display:block} (base
   styles) has higher specificity than a plain .type-pick class rule would — bumping to
   ".type-pick-grid label.type-pick" beats that unconditionally instead of relying on source order. */
.type-pick-grid label.type-pick{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1.5px solid var(--line);border-radius:var(--radius-sm,12px);background:var(--surface,#fff);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;position:relative;margin-bottom:0}
.type-pick-grid label.type-pick:hover{border-color:#a7d7c5}
.type-pick-grid label.type-pick:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.type-pick-grid label.type-pick input{position:absolute;opacity:0;pointer-events:none}
.type-pick-grid label.type-pick .type-pick-title{display:block;font-size:14px;font-weight:700;color:var(--ink,#0f172a)}
.type-pick-grid label.type-pick .type-pick-desc{display:block;font-size:11.5px;color:var(--muted,#64748b);line-height:1.4}
.new-product-changetype{font-size:12px;color:var(--muted);margin-bottom:12px}
.new-product-changetype a{color:var(--primary);font-weight:600}

/* Clean interactive lists: neutral rows, hover-only highlight */
.color-list tbody tr{background:#fff;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.color-list tbody tr:hover{background:#f0fdfa!important;box-shadow:inset 3px 0 0 var(--section),0 4px 16px rgba(15,118,110,.06)}
.activity-list{padding:8px 12px 12px}.activity-item{border:1px solid transparent;border-radius:12px;padding:10px 11px;margin-bottom:7px;transition:.18s ease}.activity-item:hover{background:#f8fafc;border-color:var(--line);transform:translateX(2px)}
.approval-card{transition:.18s ease}.approval-card:hover{background:#fafcff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.06)}
.stat{transition:.22s ease}.stat-c1{background:linear-gradient(145deg,#ffffff,#eff6ff)}.stat-c1 .stat-icon{background:#dbeafe;color:#2563eb}.stat-c2{background:linear-gradient(145deg,#ffffff,#ecfdf5)}.stat-c2 .stat-icon{background:#d1fae5;color:#059669}.stat-c3{background:linear-gradient(145deg,#ffffff,#f5f3ff)}.stat-c3 .stat-icon{background:#ede9fe;color:#7c3aed}.stat-c4{background:linear-gradient(145deg,#ffffff,#fff7ed)}.stat-c4 .stat-icon{background:#ffedd5;color:#ea580c}
.sidebar-logout{margin-top:10px}.sidebar-logout-btn{width:100%;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff}.sidebar-logout-btn:hover{background:#fff;color:#0f766e}
.role-chips{display:flex;gap:4px;flex-wrap:wrap}.role-chips span{font-size:10px;padding:4px 7px;border-radius:99px;background:#eef2ff;color:#4f46e5;font-weight:700}
.att-tabs{display:flex;gap:8px;align-items:center;padding:6px;background:#f4f8f7;border:1px solid var(--line);border-radius:12px;width:max-content}.att-tab{border:0;background:transparent;border-radius:9px;padding:9px 16px;font-weight:800;color:var(--muted)}.att-tab.active{background:#fff;color:var(--primary);box-shadow:0 5px 15px rgba(15,23,42,.07)}.att-panel{display:none}.att-panel.active{display:block}.att-row{display:flex;align-items:center;gap:12px}.att-person{flex:1;min-width:0}.att-person b{display:block}.att-person small{color:var(--muted);font-size:10px}.att-actions{display:flex;gap:6px;flex-wrap:wrap}.att-action{min-width:76px}.att-action.present{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.att-action.late{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.att-action.absent{background:#fff1f2;color:#be123c;border-color:#fecdd3}.att-action.exit{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}.att-empty{padding:35px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px;background:#fbfdfc}
.att-grid{min-width:100%;border-collapse:collapse}.att-grid th,.att-grid td{border:1px solid #eef2f0;padding:0;text-align:center}.att-grid th{background:#f8faf9;font-size:10px;color:var(--muted);padding:8px 4px;white-space:nowrap}.att-grid-name{text-align:left!important;min-width:150px;padding:8px 12px!important;position:sticky;left:0;background:#fff;z-index:1}.att-grid-name small{color:var(--muted);font-size:10px}.att-cell{width:30px;height:34px;font-size:10.5px;font-weight:800;cursor:default}.att-cell-present{background:#ecfdf5;color:#047857}.att-cell-late{background:#fff7ed;color:#c2410c}.att-cell-absent{background:#fff1f2;color:#be123c}.att-cell-half{background:#eff6ff;color:#2563eb}.att-cell-leave{background:#f5f3ff;color:#7c3aed}.att-cell-blank{color:var(--muted2)}
.soft-rule{border:0;border-top:1px solid var(--line);margin:18px 0}.edit-btn{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}
/* On mobile the sidebar becomes a fixed panel sliding OVER the page content (unlike the desktop
   grid column, which just sits beside it) — that's a real overlay, so real glass makes sense
   here specifically: a translucent tint of the theme's own sidebar color plus a blur of whatever
   page content is visible behind its edges while it's sliding in/out. */
@media(max-width:880px){.sidebar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0 4px}.pagination .page-indicator{font-size:12px;color:var(--muted);font-weight:650}.pagination .btn.disabled{opacity:.4;pointer-events:none}
.api-key-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #eef2f0}.api-key-row:last-child{border-bottom:0}.api-key-value{font-family:Space Grotesk,Inter,sans-serif;font-weight:700;background:#f0fdfa;border:1px solid #ccfbf1;border-radius:9px;padding:8px 10px;font-size:12px;word-break:break-all;user-select:all}

/* v1.7 — smart/advanced visual pass: motion, clickable-card affordance, bank-style balance
   cards, payment/file chips, richer color, custom scrollbar. Kept as small reusable utility
   classes layered on top of the existing design tokens rather than rewriting them. */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(194,65,12,.35)}70%{box-shadow:0 0 0 6px rgba(194,65,12,0)}100%{box-shadow:0 0 0 0 rgba(194,65,12,0)}}
@keyframes shimmer{0%{background-position:-220px 0}100%{background-position:calc(220px + 100%) 0}}
@media (prefers-reduced-motion: no-preference){
  .main>section,.main>.page-head,.main>.card,.main>.stats,.main>.grid2,.main>.grid3,.main>.quick-grid{animation:fadeInUp .28s ease both}
  tbody tr{animation:fadeInUp .24s ease both}
  .modal-overlay.show .modal{animation:popIn .22s cubic-bezier(.2,.8,.2,1)}
}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c9d4d0;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#a9bab3}

/* Clickable stat/KPI cards: server marks the ones that actually do something with
   .stat-clickable, so hover affordance always matches real behavior. */
.stat-clickable{cursor:pointer;text-align:left;display:block;width:100%;font:inherit;color:inherit}
.stat-clickable .stat-go{position:absolute;right:14px;bottom:12px;color:var(--muted2);opacity:0;transform:translateX(-3px);transition:.18s ease}
.stat-clickable:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 18px 40px rgba(15,23,42,.14)}
.stat-clickable:hover .stat-go{opacity:1;transform:translateX(0)}
.stat-clickable:active{transform:translateY(-1px) scale(.99)}
.stat.filter-active{outline:2px solid var(--primary);outline-offset:2px}
.stat.filter-active:after{background:rgba(15,118,110,.12)}

/* Quick-action shine sweep */
.quick{isolation:isolate}
.quick:before{content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:.55s ease;z-index:0}
.quick:hover:before{left:130%}
.quick b,.quick small{position:relative;z-index:1}

/* Gentle pulse on pending/warning badges so attention-needing states stand out */
.badge.warning{animation:badgePulse 2.4s infinite}

/* Bank-card style balance tiles (Accounts payment-channel/category KPIs) */
.balance-card{position:relative;border-radius:18px;padding:19px 20px;color:#fff;overflow:hidden;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 32px rgba(15,23,42,.18);transition:.22s ease}
.balance-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% -15%,rgba(255,255,255,.24),transparent 55%)}
.balance-card:after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07)}
.balance-card:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(15,23,42,.22)}
.balance-card .bc-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.balance-card .bc-chip{width:32px;height:24px;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.55));display:grid;place-items:center;color:#0f766e}
.balance-card .bc-icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.balance-card .bc-label{font-size:10.5px;opacity:.86;font-weight:800;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}
.balance-card .bc-amount{font-family:'Space Grotesk',Inter,sans-serif;font-size:23px;font-weight:700;letter-spacing:.02em;margin-top:3px;position:relative;z-index:1}
.balance-card .bc-sub{font-size:10.5px;opacity:.82;margin-top:5px;position:relative;z-index:1}
.bc-cash{background:#0f766e}
.bc-bank{background:#1d4ed8}
.bc-mobile{background:#7c3aed}
.bc-default{background:#334155}
.bc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:16px}

/* Payment-method / channel chips used inline on Sales & Accounts rows */
.pm-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;font-size:10.5px;font-weight:700;white-space:nowrap}
.pm-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pm-cash{background:#ecfdf5;color:#047857}.pm-bank{background:#eff6ff;color:#1d4ed8}.pm-mobile{background:#f5f3ff;color:#7c3aed}.pm-card{background:#fff7ed;color:#c2410c}.pm-other{background:#f1f5f9;color:#475569}

/* Uploaded-file link chip — one consistent look wherever an attachment is shown */
.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #bfdbfe;border-radius:9px;background:#eff6ff;font-size:11px;font-weight:700;color:#1d4ed8;transition:.15s ease}
.file-chip:hover{background:#dbeafe;border-color:#93c5fd;transform:translateY(-1px);box-shadow:0 6px 14px rgba(37,99,235,.14)}
.file-chip svg{flex:none}
.no-file{color:var(--muted2);font-size:11px}

/* Account-number style monospaced tag, matching .ref/.sku treatment */
.acct-number{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:.09em;color:#334155}

/* KPI-driven table filters */
.filter-chip-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:0 17px 13px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:#f0fdfa;color:var(--primary);border:1px solid #ccfbf1;font-size:11px;font-weight:800}
.filter-chip button{border:0;background:transparent;color:inherit;padding:0;display:grid;place-items:center;cursor:pointer}

.skeleton{background:linear-gradient(90deg,#eef2f0 25%,#f7faf9 37%,#eef2f0 63%);background-size:220px 100%;animation:shimmer 1.3s linear infinite;border-radius:8px}
@media(max-width:620px){.bc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.bc-grid{grid-template-columns:1fr}}

/* Add/Edit User — role picker: a Primary Role dropdown plus a checkbox-chip list of every other
   role, replacing the old cramped <select multiple> (tiny scroll box, no visible "primary" concept). */
.role-pick-list{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.role-pick{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:#475569;cursor:pointer;transition:.15s ease;user-select:none}
.role-pick:hover{border-color:#c7d2fe;background:#eef2ff;transform:translateY(-1px)}
.role-pick input{accent-color:var(--primary);margin:0;cursor:pointer}
.role-pick.is-primary{background:var(--primary);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(16,24,39,.18)}
.role-pick.is-primary:after{content:"★ Primary";font-size:9.5px;font-weight:800;letter-spacing:.04em;opacity:.9}

/* UI/UX round 6 — Theme picker (Settings > General). Each swatch previews its theme's sidebar,
   primary and secondary colors as three dots, independent of the theme currently active on this
   very page, so a user can compare all four before switching. */
.theme-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;max-width:640px}
.theme-pick{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm,12px);background:var(--surface,#fff);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;position:relative}
.theme-pick:hover{border-color:#c7d2fe}
.theme-pick.is-active,.theme-pick:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,23,42,.16);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.theme-pick input{position:absolute;opacity:0;pointer-events:none}
.theme-pick-swatch{display:flex;gap:5px}
.theme-pick-swatch i{width:16px;height:16px;border-radius:6px;display:block}
.theme-pick-name{font-size:12.5px;font-weight:700;color:var(--ink,#0f172a)}
.theme-pick-desc{font-size:11px;color:var(--muted,#64748b)}
.theme-pick-emerald .theme-pick-swatch i:nth-child(1){background:#064e3b}
.theme-pick-emerald .theme-pick-swatch i:nth-child(2){background:#059669}
.theme-pick-emerald .theme-pick-swatch i:nth-child(3){background:#10b981}
.theme-pick-emerald-blue .theme-pick-swatch i:nth-child(1){background:#0c2c58}
.theme-pick-emerald-blue .theme-pick-swatch i:nth-child(2){background:#1d4ed8}
.theme-pick-emerald-blue .theme-pick-swatch i:nth-child(3){background:#3b82f6}
.theme-pick-aurora .theme-pick-swatch i:nth-child(1){background:#fff;border:1px solid #e2e0f5}
.theme-pick-aurora .theme-pick-swatch i:nth-child(2){background:#6366f1}
.theme-pick-aurora .theme-pick-swatch i:nth-child(3){background:#818cf8}
.theme-pick-aurora-blue .theme-pick-swatch i:nth-child(1){background:#fff;border:1px solid #dde7f5}
.theme-pick-aurora-blue .theme-pick-swatch i:nth-child(2){background:#3b82f6}
.theme-pick-aurora-blue .theme-pick-swatch i:nth-child(3){background:#60a5fa}

/* v1.8 — Phase 6: partial delivery dispatch cards, procurement/supplier multi-item polish, company
   logo upload preview. Additive only — nothing above this block is touched. */
.dispatch-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow)}
.dispatch-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.dispatch-card-head b{font-size:13.5px;color:var(--ink)}
.dispatch-table{width:100%}
.dispatch-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.dispatch-table td{padding:8px;border-bottom:1px solid #f1f5f4;font-size:12.5px}
.dispatch-table input[type=number]{width:90px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.logo-upload-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-upload-preview{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;overflow:hidden;flex-shrink:0}
.logo-upload-preview img{width:100%;height:100%;object-fit:cover}

/* Round 25 — the "1:1 ratio te product image" ask. Always a true square box regardless of the
   source photo's own aspect ratio: aspect-ratio locks the box to 1:1 and object-fit:cover crops
   whatever gets uploaded (portrait, landscape, already-square) to fill it, centered, with no
   stretching — so the Products list thumbnail, the Add/Edit Product preview and any future picker
   all show the exact same square regardless of what the merchant actually uploaded. .product-photo
   is the small 44px row thumbnail; .product-photo-lg is the bigger 96px Add/Edit Product preview.*/
.product-photo{width:44px;height:44px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#f1f5f4;flex-shrink:0}
.product-photo img{width:100%;height:100%;object-fit:cover;display:block}
.product-photo-empty{color:var(--muted2)}
.product-photo-lg{width:96px;height:96px;border-radius:16px}
.product-photo-upload-row{display:flex;align-items:center;gap:14px}
.product-photo-upload-row input[type=file]{flex:1;min-width:0}
/* Round 32 — multi-category checkboxes (Product Categories & Tags section) and the Photo Gallery
   grid (extra images beyond the single main product photo). */
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 12px;border:1px solid var(--line);border-radius:12px;padding:12px;max-height:220px;overflow:auto}
.checkbox-grid .toggle{font-size:12.5px}
.gallery-grid{display:flex;flex-wrap:wrap;gap:14px}
.gallery-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.gallery-item .product-photo{width:72px;height:72px;border-radius:12px}
.variant-frag-pane .empty{padding:22px;text-align:center;color:var(--muted)}
/* Round 26 — the inline "+ New Attribute" / "+ Add value" mini-forms on the Attributes tab, and the
   per-variation photo picker on the Variants tab. inline-quick-form keeps a text input + button on
   one compact row (used both standalone and repeated once per attribute in a form-grid). The photo
   picker reuses the same .product-photo square as everywhere else, wrapped in a <label> so clicking
   the thumbnail itself opens the file dialog — the actual <input type=file> is visually hidden. */
.inline-quick-form{display:flex;gap:8px;align-items:center;margin-bottom:14px;max-width:420px}
.inline-quick-form input[type=text]{flex:1;min-width:0}
.variant-photo-pick{display:inline-flex;cursor:pointer;position:relative}
.variant-photo-pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Phase 4 — compact bulk controls for the Product/Material variation matrix. */
.variant-bulk-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding:10px 0 12px}.variant-bulk-bar label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}.variant-bulk-bar input{width:120px}.phase4-attribute-grid{margin-top:10px}

/* ========================================================================== 
   Phase 9.5 — UI/UX System V2 · Midnight Teal Pro
   Premium ERP workspace. Additive overrides so business logic/templates remain
   backward compatible while the visual system becomes consistent site-wide.
   ========================================================================== */
body[data-theme="midnight-teal"]{
  --primary:#0f9b8e;--primary2:#22c7b8;--primary-dark:#0b786f;
  --ink:#142238;--muted:#6f7f91;--muted2:#9aa7b5;--line:#e2e9ee;
  --bg:#f3f7f8;--surface:#ffffff;--soft:#f7fafb;
  --shadow:0 8px 28px rgba(20,34,56,.065);--shadow-sm:0 3px 12px rgba(20,34,56,.055);--shadow-lg:0 26px 70px rgba(7,22,39,.18);
  --radius:18px;--radius-sm:12px;--radius-lg:24px;
  --sidebar-bg:linear-gradient(180deg,#071d2c 0%,#0a2c3a 52%,#07352f 100%);
  --sidebar-text:rgba(232,246,247,.90);--sidebar-text-dim:rgba(208,231,234,.56);
  --sidebar-hover-bg:rgba(52,211,190,.10);--sidebar-active-bg:linear-gradient(135deg,rgba(45,212,191,.19),rgba(14,165,233,.10));
  --sidebar-active-text:#ffffff;--sidebar-active-icon-bg:rgba(45,212,191,.16);
  --sidebar-border:rgba(148,210,211,.13);--sidebar-section-bg:rgba(255,255,255,.025);
  --sidebar-search-bg:rgba(255,255,255,.07);--sidebar-border-right:0;--sidebar-footer-bg:rgba(255,255,255,.055);
}

/* Theme swatch */
.theme-pick-midnight-teal .theme-pick-swatch i:nth-child(1){background:#071d2c}
.theme-pick-midnight-teal .theme-pick-swatch i:nth-child(2){background:#0f9b8e}
.theme-pick-midnight-teal .theme-pick-swatch i:nth-child(3){background:#58d9cd}

/* Workspace */
body.ui-v2{background:
  radial-gradient(circle at 92% 5%,rgba(34,199,184,.065),transparent 24%),
  radial-gradient(circle at 15% 92%,rgba(14,165,233,.04),transparent 26%),
  var(--bg);letter-spacing:-.005em}
body.ui-v2:before{opacity:.016}
body.ui-v2 .topbar{height:76px;padding:0 24px;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(211,223,229,.84);backdrop-filter:blur(22px) saturate(145%);box-shadow:0 1px 0 rgba(255,255,255,.85),0 7px 28px rgba(20,34,56,.035)}
body.ui-v2 .layout{grid-template-columns:272px minmax(0,1fr);min-height:calc(100vh - 76px)}
body.ui-v2 .sidebar{top:76px;height:calc(100vh - 76px);width:auto;padding:14px 12px 18px;background:var(--sidebar-bg);border-right:var(--sidebar-border-right);box-shadow:12px 0 32px rgba(7,29,44,.055);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
body.ui-v2 .main{padding:30px 32px 50px;max-width:1680px}

/* Brand / topbar */
body.ui-v2 .logo{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#092b3a,#0f9b8e);box-shadow:0 10px 24px rgba(15,155,142,.22);border:1px solid rgba(255,255,255,.18)}
body.ui-v2 .brand h1{font-size:16px;color:#142238;letter-spacing:-.025em}
body.ui-v2 .brand small{color:#8090a0;font-weight:550;letter-spacing:.01em}
body.ui-v2 .search-global{width:min(390px,30vw)}
body.ui-v2 .search-global input{border-color:#e2e9ee;background:#f7fafb;min-height:42px;border-radius:13px;transition:.18s ease}
body.ui-v2 .search-global input:focus{background:#fff;box-shadow:0 0 0 4px rgba(15,155,142,.085),0 8px 22px rgba(20,34,56,.045)}
body.ui-v2 .icon-btn{border-color:#e2e9ee;border-radius:13px;background:#fff;box-shadow:0 2px 7px rgba(20,34,56,.025);transition:.18s ease}
body.ui-v2 .icon-btn:hover{transform:translateY(-1px);background:#f1fbfa;border-color:#bce7e2;box-shadow:0 7px 18px rgba(15,155,142,.09)}
body.ui-v2 .profile{border-color:#e2e9ee;border-radius:14px;padding:5px 9px 5px 5px;box-shadow:0 2px 9px rgba(20,34,56,.025);transition:.18s ease}
body.ui-v2 .profile:hover{border-color:#c7ddd9;box-shadow:0 8px 20px rgba(20,34,56,.055);transform:translateY(-1px)}
body.ui-v2 .avatar{border-radius:11px;background:linear-gradient(145deg,#ddf8f4,#c9eee9);color:#087b72}
body.ui-v2 .plan-badge{border:1px solid rgba(148,163,184,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* Sidebar navigation */
body.ui-v2 .sidebar-search{margin:2px 3px 12px;background:var(--sidebar-search-bg);border:1px solid var(--sidebar-border);border-radius:13px;color:var(--sidebar-text-dim);transition:.18s ease}
body.ui-v2 .sidebar-search:focus-within{background:rgba(255,255,255,.105);border-color:rgba(94,234,212,.28);box-shadow:0 0 0 3px rgba(45,212,191,.06)}
body.ui-v2 .sidebar-search input{color:var(--sidebar-text);background:transparent;border:0;box-shadow:none;min-height:38px}
body.ui-v2 .sidebar-search input::placeholder{color:var(--sidebar-text-dim)}
body.ui-v2 .sidebar-search-clear{color:var(--sidebar-text-dim)}
body.ui-v2 .nav-section{padding:3px 0 8px;border-radius:14px}
body.ui-v2 .nav-title{display:flex;align-items:center;justify-content:space-between;color:var(--sidebar-text-dim);padding:12px 11px 6px;font-size:9.5px;font-weight:800;letter-spacing:.13em}
body.ui-v2 .nav-btn{color:var(--sidebar-text);padding:9px 9px;border-radius:12px;margin:3px 2px;font-size:12.5px;font-weight:650;position:relative;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
body.ui-v2 .nav-btn:hover{background:var(--sidebar-hover-bg);color:#fff;transform:translateX(2px)}
body.ui-v2 .nav-btn.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);box-shadow:inset 0 0 0 1px rgba(94,234,212,.11),0 7px 20px rgba(0,0,0,.08)}
body.ui-v2 .nav-btn.active:before{content:"";position:absolute;left:-2px;top:11px;bottom:11px;width:3px;border-radius:4px;background:#5eead4;box-shadow:0 0 10px rgba(94,234,212,.5)}
body.ui-v2 .nav-icon{width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.055);color:rgba(231,246,247,.78);transition:.18s ease}
body.ui-v2 .nav-btn:hover .nav-icon,body.ui-v2 .nav-btn.active .nav-icon{background:var(--sidebar-active-icon-bg);color:#8bf1e5}
body.ui-v2 .nav-subitem{padding-left:18px;font-size:11.7px}
body.ui-v2 .nav-subitem .nav-icon{width:27px;height:27px;border-radius:9px}
body.ui-v2 .nav-badge{background:rgba(255,255,255,.09);color:#bfe9e7;border:1px solid rgba(255,255,255,.07);font-size:9px}
body.ui-v2 .sidebar-footer{margin-top:16px;background:var(--sidebar-footer-bg);border:1px solid var(--sidebar-border);color:var(--sidebar-text);border-radius:15px;padding:13px}
body.ui-v2 .sidebar-footer small{color:var(--sidebar-text-dim);display:block;margin-top:3px}
body.ui-v2 .sidebar-logout-btn{width:100%;margin-top:10px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#d8eeee}
body.ui-v2 .sidebar-logout-btn:hover{background:rgba(244,63,94,.11);border-color:rgba(251,113,133,.14);color:#ffd8df}

/* Page hierarchy */
body.ui-v2 .page-head{margin-bottom:20px;align-items:center}
body.ui-v2 .breadcrumbs{font-size:10.5px;letter-spacing:.025em;color:#9aa7b5}
body.ui-v2 .page-title{font-family:Space Grotesk,Montserrat,Hind Siliguri,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.035em;color:#142238}
body.ui-v2 .page-desc{font-size:12.5px;line-height:1.65;color:#748496}
body.ui-v2 .head-actions{gap:9px}

/* Premium surfaces */
body.ui-v2 .card,body.ui-v2 .stat,body.ui-v2 .dispatch-card{border-color:#e2e9ee;background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(20,34,56,.055);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
body.ui-v2 .card{border-radius:18px}
body.ui-v2 .card:hover{border-color:#d6e2e6;box-shadow:0 12px 34px rgba(20,34,56,.075)}
body.ui-v2 .card-head{padding:17px 19px}
body.ui-v2 .card-title{font-size:13.5px;color:#1a2b41;letter-spacing:-.012em}
body.ui-v2 .card-sub{color:#8493a2;line-height:1.5}
body.ui-v2 .card-body{padding:0 19px 19px}
body.ui-v2 .stat{padding:18px;border-radius:17px;overflow:hidden}
body.ui-v2 .stat:hover{transform:translateY(-2px);border-color:#cfe2df;box-shadow:0 15px 34px rgba(20,34,56,.085)}
body.ui-v2 .stat:after{right:-24px;top:-28px;width:94px;height:94px;background:radial-gradient(circle,rgba(34,199,184,.08),transparent 69%)}
body.ui-v2 .stat-icon{width:37px;height:37px;border-radius:12px;background:#eaf9f7;color:#0f8e83;border:1px solid #d7f1ed}
body.ui-v2 .stat .label{font-size:10.5px;color:#718294;text-transform:uppercase;letter-spacing:.045em;font-weight:750}
body.ui-v2 .stat .value{font-family:Space Grotesk,Inter,sans-serif;font-size:28px;color:#142238}
body.ui-v2 .stat .note{color:#91a0ae}
body.ui-v2 .quick{border-radius:17px;min-height:112px;box-shadow:0 9px 26px rgba(20,34,56,.075);border:1px solid rgba(255,255,255,.12)}
body.ui-v2 .quick:hover{transform:translateY(-3px) scale(1.005);box-shadow:0 18px 36px rgba(20,34,56,.13)}

/* Buttons */
body.ui-v2 .btn{border-radius:11px;padding:9px 14px;border-color:#dfe7eb;background:#fff;color:#45566a;font-weight:720;box-shadow:0 1px 2px rgba(20,34,56,.02);transition:.18s ease}
body.ui-v2 .btn:hover{background:#f7fafb;border-color:#cfdcdf;transform:translateY(-1px);box-shadow:0 7px 16px rgba(20,34,56,.055)}
body.ui-v2 .btn.primary{background:linear-gradient(135deg,#0f9186,#11a99c);border:1px solid #0e8f84;color:#fff;box-shadow:0 8px 20px rgba(15,155,142,.19)}
body.ui-v2 .btn.primary:hover{background:linear-gradient(135deg,#0b7e75,#0e958b);box-shadow:0 11px 25px rgba(15,155,142,.25)}
body.ui-v2 .btn.danger{background:#fff7f8;color:#bf3650;border-color:#f5d2d9}
body.ui-v2 .btn.warning{background:#fffaf0;color:#a86111;border-color:#f3dfb7}
body.ui-v2 .btn.small{border-radius:9px}

/* Form system */
body.ui-v2 input,body.ui-v2 select,body.ui-v2 textarea{border-color:#d9e3e8;border-radius:11px;background:#fff;min-height:42px;color:#23364c;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
body.ui-v2 input:hover,body.ui-v2 select:hover,body.ui-v2 textarea:hover{border-color:#c6d5db}
body.ui-v2 input:focus,body.ui-v2 select:focus,body.ui-v2 textarea:focus{border-color:#5bc8be;box-shadow:0 0 0 4px rgba(15,155,142,.085);background:#fff}
body.ui-v2 .form-group label{font-size:10.5px;color:#4e6073;letter-spacing:.012em}
body.ui-v2 .field-help{color:#8796a5}
body.ui-v2 .section-box{background:#f8fbfb;border-color:#e0e9ed;border-radius:15px}
body.ui-v2 .settings-nav{border-color:#e2e9ee;border-radius:17px;box-shadow:0 6px 22px rgba(20,34,56,.04)}
body.ui-v2 .settings-nav a:hover,body.ui-v2 .settings-nav a.active{background:#eaf9f7;color:#0c8178}

/* Tables */
body.ui-v2 .table-wrap{border-radius:0 0 18px 18px;scrollbar-width:thin;scrollbar-color:#d7e2e6 transparent}
body.ui-v2 table{font-variant-numeric:tabular-nums}
body.ui-v2 th{padding:12px 14px;background:#f6f9fa;border-color:#e5ecef;color:#758698;font-size:9.8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
body.ui-v2 td{padding:13px 14px;border-color:#edf2f4;color:#33465a}
body.ui-v2 tbody tr{transition:background .14s ease,box-shadow .14s ease}
body.ui-v2 tbody tr:hover{background:#f6fbfa;box-shadow:inset 3px 0 0 rgba(15,155,142,.32)}
body.ui-v2 .cell-title{color:#24384d;font-weight:750}
body.ui-v2 .cell-sub{color:#91a0ae}

/* Tabs / badges / alerts */
body.ui-v2 .tabs{gap:3px;border-bottom-color:#e4ebee;padding:0 18px;overflow:auto}
body.ui-v2 .tab{padding:12px 11px;color:#7f8e9e;border-bottom-width:2px;white-space:nowrap;transition:.16s ease}
body.ui-v2 .tab:hover{color:#40556a;background:#f7fafb;border-radius:10px 10px 0 0}
body.ui-v2 .tab.active{color:#0c8178;border-bottom-color:#12a99b}
body.ui-v2 .badge{border:1px solid rgba(100,116,139,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
body.ui-v2 .alert{border-radius:13px;padding:12px 14px;box-shadow:0 4px 14px rgba(20,34,56,.035)}
body.ui-v2 .notice-strip{border-radius:15px;background:linear-gradient(135deg,#edf9fa,#f5fbf8);border-color:#d5ecea;box-shadow:0 5px 18px rgba(20,34,56,.035)}

/* Modal / dropdown */
body.ui-v2 .modal-overlay{background:rgba(4,18,31,.58);backdrop-filter:blur(9px)}
body.ui-v2 .modal{border-radius:23px;border:1px solid rgba(255,255,255,.75);box-shadow:0 34px 90px rgba(4,18,31,.27)}
body.ui-v2 .modal-head{padding:17px 20px;background:rgba(255,255,255,.94);border-color:#e4ebee}
body.ui-v2 .modal-body{padding:20px}
body.ui-v2 .modal-foot{padding:13px 20px;background:rgba(255,255,255,.96);border-color:#e4ebee}
body.ui-v2 .close{border-radius:11px;background:#f3f7f8;color:#657688;transition:.15s ease}
body.ui-v2 .close:hover{background:#e8f4f3;color:#0c8178;transform:rotate(3deg)}
body.ui-v2 .dropdown{top:68px;border-radius:20px;border-color:#dce7e9;background:rgba(255,255,255,.94);backdrop-filter:blur(22px);box-shadow:0 26px 60px rgba(4,18,31,.17)}
body.ui-v2 .dropdown-item:hover{background:#f4faf9}
body.ui-v2 .dropdown-item.unread{background:#eefaf8}

/* Login V2 */
body.ui-v2 .login-page{background:#f3f7f8}
body.ui-v2 .login-hero{background:
  radial-gradient(circle at 18% 12%,rgba(60,230,210,.20),transparent 28%),
  radial-gradient(circle at 86% 74%,rgba(14,165,233,.14),transparent 33%),
  linear-gradient(145deg,#061a29 0%,#092d39 48%,#07584f 100%)}
body.ui-v2 .login-mark{border-radius:17px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 35px rgba(0,0,0,.13)}
body.ui-v2 .login-point{border-radius:13px;background:rgba(255,255,255,.055);backdrop-filter:blur(6px)}
body.ui-v2 .login-card{border-radius:24px;border-color:#e0e8ec;box-shadow:0 28px 80px rgba(13,34,50,.10);padding:31px}

/* Product variants / workflow / assets common interaction improvements */
body.ui-v2 .variant-bulk-bar{background:#f7fafb;border:1px solid #e3eaee;border-radius:14px;padding:12px;margin-bottom:12px}
body.ui-v2 .approval-card{border-radius:15px;border-color:#e2e9ee;box-shadow:0 4px 14px rgba(20,34,56,.035);transition:.17s ease}
body.ui-v2 .approval-card:hover{border-color:#cfe2df;box-shadow:0 10px 24px rgba(20,34,56,.065);transform:translateY(-1px)}
body.ui-v2 .activity-icon{background:#eaf9f7;color:#0b8178;border:1px solid #d8f1ee}
body.ui-v2 .file-chip{border-radius:10px}
body.ui-v2 .role-pick{border-radius:11px}
body.ui-v2 .theme-pick{border-radius:14px;padding:13px 14px;box-shadow:0 2px 8px rgba(20,34,56,.025)}
body.ui-v2 .theme-pick:hover{border-color:#9edbd5;box-shadow:0 9px 20px rgba(20,34,56,.055);transform:translateY(-1px)}

/* Responsive V2 */
@media(max-width:1180px){body.ui-v2 .layout{grid-template-columns:248px minmax(0,1fr)}body.ui-v2 .main{padding:25px 22px 42px}}
@media(max-width:880px){body.ui-v2 .layout{grid-template-columns:1fr}body.ui-v2 .sidebar{top:76px;width:272px;left:-290px}body.ui-v2 .sidebar.open{left:0}body.ui-v2 .main{padding:20px 15px 84px}body.ui-v2 .page-title{font-size:24px}}
@media(max-width:560px){body.ui-v2 .topbar{padding:0 13px;height:68px}body.ui-v2 .layout{min-height:calc(100vh - 68px)}body.ui-v2 .sidebar{top:68px;height:calc(100vh - 68px)}body.ui-v2 .logo{width:41px;height:41px}body.ui-v2 .top-actions{gap:6px}body.ui-v2 .page-head{align-items:flex-start}body.ui-v2 .page-title{font-size:22px}}

/* Phase 9.5 — standalone ERP workspaces inherit the same premium visual language. */
body.ui-v2 .ast-wrap,body.ui-v2 .mfg-wrap,body.ui-v2 .qm-wrap{max-width:1580px;padding:26px 30px 48px}
body.ui-v2 .ast-top h2,body.ui-v2 .mfg-top h1,body.ui-v2 .qm-top h1{font-family:Space Grotesk,Montserrat,sans-serif;letter-spacing:-.035em;color:#172a40}
body.ui-v2 .ast-card,body.ui-v2 .mfg-card,body.ui-v2 .qm-card{background:rgba(255,255,255,.97);border-color:#e2e9ee!important;border-radius:18px!important;box-shadow:0 8px 27px rgba(20,34,56,.055);transition:.18s ease}
body.ui-v2 .ast-card:hover,body.ui-v2 .mfg-card:hover,body.ui-v2 .qm-card:hover{border-color:#d1e0e4!important;box-shadow:0 13px 32px rgba(20,34,56,.072)}
body.ui-v2 .ast-category{border-color:#e1e9ed!important;border-radius:17px!important;box-shadow:0 6px 20px rgba(20,34,56,.04)}
body.ui-v2 .ast-category:hover{border-color:#bfe1dc!important;transform:translateY(-3px);box-shadow:0 15px 31px rgba(20,34,56,.08)}
body.ui-v2 .ast-icon{background:#eaf9f7!important;color:#0d8178;border:1px solid #d6f0ec}
body.ui-v2 .ast-tabs,body.ui-v2 .mfg-tabs,body.ui-v2 .qm-tabs,body.ui-v2 .acct-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:rgba(255,255,255,.76);border:1px solid #e0e8ec;border-radius:14px;width:max-content;max-width:100%;box-shadow:0 4px 16px rgba(20,34,56,.035)}
body.ui-v2 .ast-tabs a,body.ui-v2 .mfg-tabs a,body.ui-v2 .qm-tabs a,body.ui-v2 .acct-tabs a{background:transparent!important;border:0!important;border-radius:10px!important;padding:8px 11px!important;color:#718295!important;font-size:12px;font-weight:700;transition:.16s ease}
body.ui-v2 .ast-tabs a:hover,body.ui-v2 .mfg-tabs a:hover,body.ui-v2 .qm-tabs a:hover,body.ui-v2 .acct-tabs a:hover{background:#f2f8f8!important;color:#335066!important}
body.ui-v2 .ast-tabs a.active,body.ui-v2 .mfg-tabs a.active,body.ui-v2 .qm-tabs a.active,body.ui-v2 .acct-tabs a.active{background:#e6f8f5!important;color:#087b72!important;box-shadow:inset 0 0 0 1px #ccece7}
body.ui-v2 .ast-table th,body.ui-v2 .mfg-table th,body.ui-v2 .qm-table th{background:#f7fafb!important;color:#77899b!important;font-size:10px;text-transform:uppercase;letter-spacing:.055em;border-color:#e5ecef!important}
body.ui-v2 .ast-table td,body.ui-v2 .mfg-table td,body.ui-v2 .qm-table td{border-color:#edf2f4!important;color:#385067}
body.ui-v2 .ast-table tr:hover td,body.ui-v2 .mfg-table tr:hover td,body.ui-v2 .qm-table tr:hover td{background:#f5fbfa}
body.ui-v2 .mfg-subcard{background:#f7fafb!important;border-color:#e2e9ed!important;border-radius:13px!important}
body.ui-v2 .mfg-material-row{background:#fbfdfd;border-color:#e2e9ed!important;border-radius:13px!important}
body.ui-v2 .mfg-status{border-radius:999px!important;border:1px solid rgba(100,116,139,.08)}
body.ui-v2 .mfg-bar{background:#e9eff2!important}.ui-v2 .mfg-bar span{background:linear-gradient(90deg,#0f9b8e,#2dc6b7)!important}
body.ui-v2 .app-shell>.content{padding:28px 30px 48px;max-width:1580px!important}
body.ui-v2 .statement{background:#fff;border:1px solid #e2e9ed;border-radius:17px;padding:8px 18px;box-shadow:0 7px 23px rgba(20,34,56,.045)}
body.ui-v2 .statement-row{border-color:#edf2f4!important}
body.ui-v2 .je-line{padding:7px;border-radius:12px;background:#f8fbfb;border:1px solid #e5ecef}
@media(max-width:880px){body.ui-v2 .ast-wrap,body.ui-v2 .mfg-wrap,body.ui-v2 .qm-wrap,body.ui-v2 .app-shell>.content{padding:20px 14px 80px}}

/* ========================================================================
   Phase 9.6 — Responsive UX Hardening
   Larger touch targets, fluid typography, overflow safety and dense-workflow
   layouts. This layer intentionally contains only presentation overrides.
   ======================================================================== */
html,body{max-width:100%}
body.ui-v2{overflow-x:hidden;font-size:clamp(14px,13.2px + .08vw,15px)}
body.ui-v2 .layout,body.ui-v2 .main,body.ui-v2 .content,body.ui-v2 .app-shell,
body.ui-v2 .card,body.ui-v2 .card-body,body.ui-v2 .card-head,body.ui-v2 .section-box,
body.ui-v2 .form-group,body.ui-v2 .toolbar,body.ui-v2 .page-head,body.ui-v2 .head-actions,
body.ui-v2 .grid2,body.ui-v2 .grid3,body.ui-v2 .stats,body.ui-v2 .quick-grid{min-width:0;max-width:100%}
body.ui-v2 h1,body.ui-v2 h2,body.ui-v2 h3,body.ui-v2 h4,body.ui-v2 p,
body.ui-v2 .page-title,body.ui-v2 .page-desc,body.ui-v2 .card-title,body.ui-v2 .card-sub,
body.ui-v2 .cell-title,body.ui-v2 .cell-sub,body.ui-v2 .muted,body.ui-v2 .notice-strip .text{
  overflow-wrap:anywhere;word-break:normal;min-width:0
}
body.ui-v2 img,body.ui-v2 canvas,body.ui-v2 video{max-width:100%;height:auto}
body.ui-v2 .main{overflow-x:clip;padding-inline:clamp(14px,2.1vw,32px)}
body.ui-v2 .page-head{flex-wrap:wrap}
body.ui-v2 .head-actions{max-width:100%}
body.ui-v2 .card{border-radius:20px}
body.ui-v2 .card-head{padding:clamp(15px,1.2vw,20px)}
body.ui-v2 .card-body{padding-inline:clamp(15px,1.2vw,20px)}
body.ui-v2 .form-group label{font-size:clamp(11px,10.3px + .08vw,12px);line-height:1.35}
body.ui-v2 input,body.ui-v2 select,body.ui-v2 textarea{
  min-width:0;max-width:100%;min-height:46px;padding:11px 12px;font-size:clamp(13px,12.4px + .06vw,14px)
}
body.ui-v2 textarea{min-height:96px}
body.ui-v2 .btn{min-height:42px;padding:9px 14px;white-space:normal;text-align:center;line-height:1.25}
body.ui-v2 .btn.small{min-height:36px}
body.ui-v2 .table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body.ui-v2 table{max-width:none}
body.ui-v2 th,body.ui-v2 td{overflow-wrap:break-word;word-break:normal}
body.ui-v2 .modal{width:min(920px,calc(100vw - 24px))}
body.ui-v2 .stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
body.ui-v2 .quick-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
body.ui-v2 .stat .label{font-size:12px}
body.ui-v2 .stat .value{font-size:clamp(24px,1.2vw + 18px,31px)}
body.ui-v2 .stat .note{font-size:11px;line-height:1.45}
body.ui-v2 .quick b{font-size:15px}
body.ui-v2 .quick small{font-size:11.5px}

/* Standalone operational modules share the same responsive safety rules. */
body.ui-v2 .mfg-wrap,body.ui-v2 .qm-wrap,body.ui-v2 .ast-wrap,
body.ui-v2 .content{width:100%;max-width:1680px!important;min-width:0}
body.ui-v2 .mfg-card,body.ui-v2 .mfg-subcard,body.ui-v2 .qm-card,body.ui-v2 .ast-card{
  min-width:0;max-width:100%;overflow-wrap:anywhere
}
body.ui-v2 .qm-card,body.ui-v2 .ast-card{overflow-x:auto}
body.ui-v2 .qm-table,body.ui-v2 .ast-table{min-width:720px!important}
body.ui-v2 .qm-form,body.ui-v2 .ast-form{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:12px!important
}
body.ui-v2 .qm-form .wide,body.ui-v2 .ast-form .wide{grid-column:1/-1!important}
body.ui-v2 .qm-param{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
body.ui-v2 .ast-category-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
body.ui-v2 .statement{max-width:100%}
body.ui-v2 .statement-row{min-width:0;flex-wrap:wrap}

@media(max-width:760px){
  body.ui-v2 .main{padding-inline:12px}
  body.ui-v2 .stats,body.ui-v2 .quick-grid{grid-template-columns:1fr}
  body.ui-v2 .head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  body.ui-v2 .head-actions .btn{width:100%}
  body.ui-v2 .qm-table,body.ui-v2 .ast-table{min-width:640px!important}
}
@media(max-width:460px){
  body.ui-v2 .head-actions{grid-template-columns:1fr}
  body.ui-v2 input,body.ui-v2 select,body.ui-v2 textarea{font-size:16px} /* avoids mobile browser zoom */
}


/* ========================================================================
   Phase 13 — ERP UI Fit & Overflow Refinement
   Presentation-only safety layer. Keeps dense ERP content readable across
   large desktop, laptop, tablet and mobile widths.
   ======================================================================== */
body.ui-v2 .grid2>*,body.ui-v2 .grid3>*,body.ui-v2 .stats>*,body.ui-v2 .quick-grid>*,body.ui-v2 .form-grid>*,
body.ui-v2 .toolbar>*,body.ui-v2 .card-head>*,body.ui-v2 .page-head>*,body.ui-v2 .head-actions>*{min-width:0;max-width:100%}
body.ui-v2 .card,body.ui-v2 .section-box,body.ui-v2 .approval-card,body.ui-v2 .dispatch-card,body.ui-v2 .stat,body.ui-v2 .quick{overflow-wrap:anywhere;word-break:normal}
body.ui-v2 .card a:not(.btn),body.ui-v2 .section-box a:not(.btn){overflow-wrap:anywhere;word-break:break-word}
body.ui-v2 .card pre,body.ui-v2 .section-box pre{max-width:100%;overflow:auto}
body.ui-v2 .toolbar{row-gap:10px}
body.ui-v2 .toolbar .grow{flex:1 1 300px;min-width:min(100%,240px)}
body.ui-v2 .table-wrap{border:1px solid #e7edef;border-radius:14px}
body.ui-v2 .table-wrap table{min-width:720px}
body.ui-v2 .card>.table-wrap{margin-inline:0}
body.ui-v2 .badge,body.ui-v2 .plan-badge{max-width:100%;white-space:normal;text-align:center}
body.ui-v2 .page-desc{max-width:920px}
body.ui-v2 .head-actions .btn{flex:0 1 auto}
@media(min-width:1500px){body.ui-v2 .main{padding-inline:36px}body.ui-v2 .stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:760px){body.ui-v2 .table-wrap table{min-width:640px}body.ui-v2 .toolbar>*{flex:1 1 100%;max-width:none!important}}

/* ========================================================================
   Phase 14 — Quick Production Composer V2
   Replaces fixed-width production rows with labeled, full-size responsive
   controls. Existing action names and backend production logic stay intact.
   ======================================================================== */
body.ui-v2 #productionModal .production-modal-card{max-width:1180px;width:min(1180px,calc(100vw - 28px));overflow-x:hidden}
body.ui-v2 #productionModal .modal-head h3{font-size:clamp(17px,.35vw + 15px,20px)}
body.ui-v2 #productionModal .modal-body{padding:clamp(16px,2vw,26px)}
body.ui-v2 #productionModal .form-grid{grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px}
body.ui-v2 #productionModal .section-box{padding:clamp(15px,1.7vw,22px);border-radius:18px;margin-bottom:18px;overflow:hidden}
body.ui-v2 #productionModal .section-title{font-size:15px;line-height:1.35;margin-bottom:5px}
body.ui-v2 #productionModal .section-help{font-size:12px;line-height:1.6;max-width:940px;margin-bottom:15px}
body.ui-v2 #productionModal input,body.ui-v2 #productionModal select,body.ui-v2 #productionModal textarea{min-height:48px;border-radius:12px;font-size:14px}
body.ui-v2 #productionModal textarea{min-height:110px}

.production-composer-row{display:grid!important;grid-template-columns:minmax(260px,2.1fr) minmax(185px,1.15fr) minmax(240px,1.5fr) minmax(130px,.75fr) 48px;gap:12px;align-items:end;margin:0 0 12px!important;padding:15px;border:1px solid #e1e9ec;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdfd);box-shadow:0 3px 12px rgba(22,43,65,.035);min-width:0}
.production-output-row{grid-template-columns:minmax(280px,2.05fr) minmax(190px,1.15fr) repeat(3,minmax(125px,.72fr)) 48px}
.production-composer-row:hover{border-color:#cfe2df;box-shadow:0 7px 20px rgba(15,118,110,.06)}
.production-field{min-width:0}.production-field label{display:block;margin:0 0 7px;font-size:11.5px;font-weight:800;line-height:1.3;color:#455b6d;letter-spacing:.01em}
.production-field select,.production-field input{width:100%!important;min-width:0!important;margin:0}
.production-field-variant{position:relative}.production-static-hint{min-height:48px;display:flex;align-items:center;padding:11px 13px;border:1px dashed #dbe4e7;border-radius:12px;background:#f8fafb;color:#85929c;font-size:12px}
.production-field-variant select:not([style*="display: none"]):not([style*="display:none"])+.production-static-hint{display:none}
.production-row-stock-note{display:block;margin-top:6px;min-height:16px;font-size:10.5px;line-height:1.4;color:#708190;overflow-wrap:anywhere}
.production-row-stock-note.stock-ok{color:#18786f;font-weight:700}.production-row-stock-note.stock-empty{color:#b54b4b;font-weight:700}
.production-remove{width:48px!important;height:48px;min-width:48px!important;padding:0!important;border-radius:12px!important;font-size:20px!important;align-self:end}
#productionModal #productionRows:empty:after,#productionModal #productionOutRows:empty:after{content:"No rows added yet.";display:block;padding:18px;border:1px dashed #d7e2e5;border-radius:13px;text-align:center;color:#7b8b97;font-size:12px}
#productionModal .section-box>.btn.small{min-height:42px;padding:9px 13px;border-radius:11px;font-size:12px}
#productionModal .modal-foot{gap:10px;padding:14px clamp(16px,2vw,26px)}
#productionModal .modal-foot .btn.primary{min-height:46px;padding-inline:20px;font-size:13px}

@media(max-width:1060px){
 body.ui-v2 #productionModal .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .production-composer-row,.production-output-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .production-field-item,.production-field-warehouse{grid-column:1/-1}
 .production-remove{width:100%!important;grid-column:1/-1}
}
@media(max-width:620px){
 body.ui-v2 #productionModal .production-modal-card{width:100%;max-width:none}
 body.ui-v2 #productionModal .form-grid,.production-composer-row,.production-output-row{grid-template-columns:1fr}
 .production-field-item,.production-field-warehouse,.production-remove{grid-column:auto}
 .production-composer-row{padding:13px;gap:10px;border-radius:14px}
 .production-remove{width:100%!important}
 body.ui-v2 #productionModal .section-box{padding:13px}
}

/* ========================================================================== 
   Phase 15 — Navigation + workflow UX foundation
   ========================================================================== */
.sidebar-collapse-control{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--sidebar-border);background:rgba(255,255,255,.055);color:var(--sidebar-text);border-radius:11px;padding:8px 10px;margin:0 0 9px;cursor:pointer;font-size:11px;font-weight:800;transition:.18s ease}
.sidebar-collapse-control:hover{background:var(--sidebar-hover-bg);color:#fff}.sidebar-collapse-control svg{flex:none}
@media(min-width:881px){
 body.ui-v2.sidebar-compact .layout{grid-template-columns:78px minmax(0,1fr)}
 body.ui-v2.sidebar-compact .sidebar{padding-inline:9px}
 body.ui-v2.sidebar-compact .sidebar-collapse-control span,body.ui-v2.sidebar-compact .sidebar-search input,body.ui-v2.sidebar-compact .sidebar-search-clear,body.ui-v2.sidebar-compact .nav-title span,body.ui-v2.sidebar-compact .nav-label,body.ui-v2.sidebar-compact .nav-badge,body.ui-v2.sidebar-compact .sidebar-footer>b,body.ui-v2.sidebar-compact .sidebar-footer>small,body.ui-v2.sidebar-compact .sidebar-logout-btn{display:none!important}
 body.ui-v2.sidebar-compact .sidebar-collapse-control{width:44px;height:38px;margin-inline:auto;padding:0}
 body.ui-v2.sidebar-compact .sidebar-search{width:44px;height:38px;margin-inline:auto;padding:0;justify-content:center}
 body.ui-v2.sidebar-compact .nav-section{padding:4px;margin-bottom:7px}
 body.ui-v2.sidebar-compact .nav-title{height:12px;padding:2px;justify-content:center}.sidebar-compact .nav-title .nav-chevron{display:none}
 body.ui-v2.sidebar-compact .nav-btn{width:46px;height:44px;margin:3px auto;padding:0;justify-content:center;transform:none}
 body.ui-v2.sidebar-compact .nav-btn .nav-icon{width:34px;height:34px;margin:0}
 body.ui-v2.sidebar-compact .nav-btn.active:before{left:-7px;top:8px;bottom:8px}
 body.ui-v2.sidebar-compact .nav-btn.nav-subitem{display:none!important}
 body.ui-v2.sidebar-compact .nav-submenu-expander{display:none!important}
 body.ui-v2.sidebar-compact .sidebar-footer{padding:7px;margin-top:9px;background:transparent;border:0}.sidebar-compact .sidebar-footer form{margin:0}
}
.nav-submenu-expander{width:calc(100% - 22px);margin:2px 2px 2px 20px;border:0;background:transparent;color:var(--sidebar-text-dim);padding:6px 9px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:800;cursor:pointer;text-align:left}.nav-submenu-expander:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-text)}.nav-submenu-expander svg{transition:transform .16s ease}.nav-submenu-expander.collapsed svg{transform:rotate(-90deg)}.nav-subitem.submenu-hidden{display:none!important}
.nav-section:has(.nav-btn.active)>.nav-title{color:#a9eee5}

.workspace-page-head{margin-bottom:12px}.workspace-frame-shell{height:calc(100vh - 188px);min-height:620px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.workspace-frame{width:100%;height:100%;border:0;background:#f6f8fb;display:block}
@media(max-width:880px){.sidebar-collapse-control{display:none}.workspace-frame-shell{height:calc(100vh - 205px);min-height:560px;border-radius:15px}}

/* Receipt allocation — one purchase, multiple physical locations, one submission. */
.receipt-composer{padding:2px 0}.receipt-summary-grid{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(110px,.7fr));gap:9px;margin-bottom:13px}.receipt-summary-grid>div{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;min-width:0}.receipt-summary-grid span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.receipt-summary-grid b{display:block;margin-top:3px;font-size:14px}.receipt-summary-grid small{display:block;color:var(--muted);margin-top:3px}.receipt-summary-grid .receipt-remaining{background:#ecfdf5;border-color:#bbf7d0}.receipt-summary-grid .receipt-remaining b{color:#087443;font-size:17px}
.receipt-allocation-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}.receipt-allocation-head small{display:block;color:var(--muted);font-weight:500;margin-top:2px}.receipt-allocation-list{display:grid;gap:8px}.receipt-allocation-row{display:grid;grid-template-columns:minmax(210px,1.6fr) minmax(135px,.65fr) 38px;gap:9px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}.receipt-allocation-row .form-group{margin:0}.receipt-allocation-row .receipt-remove{margin-bottom:1px}.receipt-allocation-row.duplicate-warehouse{border-color:#f59e0b;background:#fffbeb}.receipt-allocation-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.receipt-total-note{margin-right:auto;display:flex;align-items:baseline;gap:5px;color:var(--muted);font-size:11px}.receipt-total-note b{font-size:17px;color:var(--ink)}.receipt-balance{padding:5px 9px;border-radius:99px;font-size:10.5px;font-weight:800;background:#f1f5f9;color:#64748b}.receipt-balance.ok{background:#ecfdf5;color:#087443}.receipt-balance.bad{background:#fff1f2;color:#be123c}
@media(max-width:720px){.receipt-summary-grid{grid-template-columns:1fr 1fr}.receipt-allocation-row{grid-template-columns:1fr 1fr}.receipt-allocation-row .receipt-remove{grid-column:2;justify-self:end}.receipt-allocation-head{align-items:flex-start;flex-direction:column}}
@media(max-width:470px){.receipt-summary-grid,.receipt-allocation-row{grid-template-columns:1fr}.receipt-allocation-row .receipt-remove{grid-column:1}}

/* Module color language: content stays white/clean, but page context is immediately recognizable. */
body.ui-v2{--module-accent:#0f9b8e;--module-soft:#ecfdf5}
body.page-products{--module-accent:#059669;--module-soft:#ecfdf5}body.page-materials{--module-accent:#d97706;--module-soft:#fffbeb}body.page-equipment{--module-accent:#7c3aed;--module-soft:#f5f3ff}body.page-procurement{--module-accent:#2563eb;--module-soft:#eff6ff}body.page-production{--module-accent:#9333ea;--module-soft:#faf5ff}body.page-stock,body.page-warehouses{--module-accent:#0f766e;--module-soft:#f0fdfa}body.page-supply{--module-accent:#0284c7;--module-soft:#f0f9ff}body.page-sales{--module-accent:#2563eb;--module-soft:#eff6ff}body.page-accounts{--module-accent:#4f46e5;--module-soft:#eef2ff}body.page-hr{--module-accent:#db2777;--module-soft:#fdf2f8}body.page-payroll{--module-accent:#7c3aed;--module-soft:#f5f3ff}body.page-requests{--module-accent:#ea580c;--module-soft:#fff7ed}body.page-reports{--module-accent:#0891b2;--module-soft:#ecfeff}body.page-settings{--module-accent:#475569;--module-soft:#f8fafc}
body.ui-v2:not(.page-dashboard) .page-head .breadcrumbs{color:var(--module-accent);font-weight:800}.page-title:after{content:"";display:block;width:42px;height:3px;border-radius:99px;background:var(--module-accent);margin-top:9px}.page-dashboard .page-title:after{display:none}
body.ui-v2:not(.page-dashboard) .card.module-card,body.ui-v2:not(.page-dashboard) .card.settings-section{border-top:3px solid color-mix(in srgb,var(--module-accent) 68%,transparent)}
body.ui-v2 .section-box{border-left:3px solid color-mix(in srgb,var(--module-accent) 62%,transparent)}

/* Phase 15 — dense transaction rows should adapt to the screen instead of preserving old fixed px widths. */
body.ui-v2 .pr-row,body.ui-v2 .pur-row,body.ui-v2 .sale-row,body.ui-v2 .recipe-row{
  border:1px solid var(--line)!important;border-left:4px solid var(--module-accent)!important;border-radius:13px!important;padding:10px!important;gap:8px!important;align-items:center!important
}
body.ui-v2 .pr-row{background:linear-gradient(90deg,#fffaf2,#fff)!important}
body.ui-v2 .pur-row{background:linear-gradient(90deg,#f4f8ff,#fff)!important}
body.ui-v2 .sale-row{background:linear-gradient(90deg,#f2fcf8,#fff)!important}
body.ui-v2 .pr-row>*,body.ui-v2 .pur-row>*,body.ui-v2 .sale-row>*{width:auto!important;min-width:105px;flex:1 1 120px}
body.ui-v2 .pr-row>.grow,body.ui-v2 .pur-row>.grow,body.ui-v2 .sale-row>.grow,
body.ui-v2 .pr-row-item,body.ui-v2 .pur-row-item,body.ui-v2 .sale-row-item{flex:2 1 220px;min-width:min(100%,210px)!important}
body.ui-v2 .pr-row .btn,body.ui-v2 .pur-row .btn,body.ui-v2 .sale-row .btn{flex:0 0 auto;min-width:38px!important}
body.ui-v2 .pur-row-total,body.ui-v2 .sale-row-total{flex:0 1 120px!important;min-width:92px!important;padding:8px 9px;border-radius:9px;background:#fff;border:1px solid var(--line);text-align:right!important}
body.ui-v2 .pr-row-linked{width:auto!important;min-width:170px;flex:1 1 190px}
body.ui-v2 .pr-row-linked>*{width:100%!important;min-width:0!important}
@media(max-width:620px){body.ui-v2 .pr-row>*,body.ui-v2 .pur-row>*,body.ui-v2 .sale-row>*{flex-basis:100%;min-width:100%!important}body.ui-v2 .pr-row .btn,body.ui-v2 .pur-row .btn,body.ui-v2 .sale-row .btn{min-width:44px!important;flex-basis:auto}}

/* ========================================================================
   Phase 15 — Audited correction UX
   ======================================================================== */
.correction-btn{border-color:#ddd6fe!important;background:#faf8ff!important;color:#6d4fc2!important}
.correction-btn:hover{background:#f2edff!important;border-color:#c4b5fd!important}
.correction-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:14px;border:1px solid #ddd6fe;border-radius:15px;background:linear-gradient(135deg,#faf8ff,#fff)}
.correction-banner>div:first-child{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;background:#ede9fe;color:#6d4fc2}.correction-banner svg{width:19px;height:19px}.correction-banner b{display:block;color:#44337a}.correction-banner span{display:block;color:#667085;font-size:12px;margin-top:3px;line-height:1.5}
.correction-safety{border-left:4px solid #f59e0b!important;background:#fffbeb!important}.correction-safety .section-title{color:#92400e}.correction-reason{padding:13px 14px;border:1px solid #fed7aa;border-radius:14px;background:#fff7ed}.correction-reason textarea{min-height:92px}.correction-reason .required{color:#dc2626}.read-only-total{min-height:45px;display:flex;align-items:center;padding:0 13px;border:1px solid #c7e8e3;border-radius:10px;background:#effaf8;color:#0f766e;font-size:16px;font-weight:850}.is-readonly{background:#f3f4f6!important;color:#6b7280!important;cursor:not-allowed}
@media(max-width:760px){#purchaseCorrectionModal .form-grid{grid-template-columns:1fr!important}.correction-banner{padding:12px}.wide-modal{width:min(96vw,760px)!important}}

/* Phase 16 — submenu chevron sits on the actual parent menu item. */
body.ui-v2 .nav-btn.has-submenu{position:relative;padding-right:7px}
body.ui-v2 .nav-btn.has-submenu .nav-parent-toggle{margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--sidebar-text-dim);transition:background .16s ease,color .16s ease}
body.ui-v2 .nav-btn.has-submenu .nav-parent-toggle:hover,body.ui-v2 .nav-btn.has-submenu .nav-parent-toggle:focus-visible{background:var(--sidebar-hover-bg);color:var(--sidebar-text);outline:none}
body.ui-v2 .nav-btn.has-submenu .nav-parent-toggle svg{transition:transform .18s ease}
body.ui-v2 .nav-btn.has-submenu.submenu-collapsed .nav-parent-toggle svg{transform:rotate(-90deg)}
body.ui-v2.sidebar-compact .nav-parent-toggle{display:none!important}
@media(max-width:880px){body.ui-v2 .nav-btn.has-submenu .nav-parent-toggle{width:34px;height:32px}}

/* ========================================================================
   Phase 18 — Inventory Control Center + Demo / Practice
   ======================================================================== */
body.page-practice_guide{--module-accent:#7c3aed;--module-soft:#f5f3ff}
.inventory-control-card{border-top:3px solid #0f766e!important}.inventory-formula{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 9px;border-radius:11px;background:#f0fdfa;border:1px solid #ccfbf1;font-size:10.5px;color:#0f766e;font-weight:800}.inventory-formula span{padding:3px 7px;border-radius:999px;background:#fff}.inventory-formula .formula-available{background:#0f766e;color:#fff}.inventory-available{display:inline-flex;min-width:44px;justify-content:center;padding:4px 8px;border-radius:8px;background:#ecfdf5;color:#087443}.inventory-available.is-empty{background:#fff1f2;color:#be123c}.table-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.table-actions .btn{white-space:nowrap}
.stock-correction-banner{border-color:#bae6fd;background:linear-gradient(135deg,#f0f9ff,#fff)}.stock-correction-banner>div:first-child{background:#e0f2fe;color:#0369a1}.stock-correction-banner b{color:#0c4a6e}.stock-correction-metrics{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:9px;margin:0 0 14px}.stock-correction-metrics>div{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.stock-correction-metrics span{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.stock-correction-metrics b{display:block;margin-top:4px;font-size:17px}.stock-correction-preview{margin:11px 0 14px;padding:11px 13px;border-radius:12px;border:1px dashed #cbd5e1;background:#f8fafc;color:#64748b;font-weight:750}.stock-correction-preview.positive{border-style:solid;border-color:#bbf7d0;background:#ecfdf5;color:#087443}.stock-correction-preview.negative{border-style:solid;border-color:#fed7aa;background:#fff7ed;color:#b45309}.stock-correction-preview.danger{border-style:solid;border-color:#fecdd3;background:#fff1f2;color:#be123c}.stock-correction-preview.neutral{border-style:solid;border-color:#dbeafe;background:#eff6ff;color:#1d4ed8}
.practice-intro{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid #ddd6fe;border-radius:16px;background:linear-gradient(135deg,#faf8ff,#fff)}.practice-intro>div:first-child{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;background:#ede9fe;color:#6d4fc2}.practice-intro b{display:block;color:#44337a}.practice-intro span{display:block;margin-top:4px;color:#667085;line-height:1.55}.practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.practice-card{position:relative;display:flex;gap:13px;padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.practice-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#7c3aed,#0f9b8e)}.practice-step{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:#f5f3ff;color:#6d28d9;font-family:Space Grotesk,Inter,sans-serif;font-weight:900}.practice-card h3{margin:1px 0 6px;font-size:14px}.practice-card p{margin:0 0 8px;color:var(--muted);font-size:12px}.practice-card ol{margin:7px 0 0;padding-left:19px;color:#334155;font-size:12px;line-height:1.65}.practice-card li+li{margin-top:3px}.practice-result{margin-top:10px;padding:9px 10px;border-radius:10px;background:#f0fdfa;color:#0f766e;font-size:11.5px;font-weight:700;line-height:1.5}.practice-flow{padding:0 17px 17px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.practice-flow span{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;font-size:11px;font-weight:800}.practice-flow svg{color:#7c3aed;width:15px;height:15px}
@media(max-width:900px){.practice-grid{grid-template-columns:1fr}.stock-correction-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.inventory-formula{align-items:flex-start}.stock-correction-metrics{grid-template-columns:1fr}.practice-card{padding:14px 12px}.practice-flow{align-items:stretch;flex-direction:column}.practice-flow svg{transform:rotate(90deg);align-self:center}}

/* Phase 19 — Learning Center replaces the old isolated practice page. */
body.page-learning{--module-accent:#0f8f84;--module-soft:#edf9f7}

/* ========================================================================
   Phase 22 — Calm Workbench UI / UX System
   One visual language for the whole ERP: lower visual noise, clearer hierarchy,
   calmer semantic colour, flatter interactions, better section indexing and
   stronger scanability without hiding functionality.
   ======================================================================== */
body.ui-v2{
  --ink:#172033;--muted:#6f7b8a;--muted2:#98a2b1;--line:#e3e8ef;--bg:#f4f6f8;--surface:#ffffff;--soft:#f7f9fb;
  --primary:#0f766e;--primary2:#0f766e;--primary-dark:#0b5f59;
  --module-accent:#0f766e;--module-soft:#ecf8f6;
  background:#f4f6f8;color:#172033;font-family:Inter,Hind Siliguri,system-ui,sans-serif;font-size:14px;
}
body.ui-v2:before{display:none}
body.ui-v2 .topbar{height:70px;background:#fff;backdrop-filter:none;border-bottom:1px solid #e4e9ef;box-shadow:0 1px 0 rgba(15,23,42,.02);padding-inline:20px}
body.ui-v2 .logo{background:#0f766e;box-shadow:none;border-radius:11px}
body.ui-v2 .brand h1{font-family:Inter,Hind Siliguri,sans-serif;font-weight:720;letter-spacing:-.015em;color:#172033}
body.ui-v2 .brand small{color:#7f8a98}
body.ui-v2 .layout{grid-template-columns:254px minmax(0,1fr);min-height:calc(100vh - 70px)}
body.ui-v2 .sidebar{top:70px;height:calc(100vh - 70px);background:#12202f;border-right:0;box-shadow:none;padding:14px 11px 18px}
body.ui-v2 .sidebar-collapse-control{width:38px;height:34px;margin:0 0 8px auto;padding:0;border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#9eb0c1;border-radius:9px}
body.ui-v2 .sidebar-collapse-control span{display:none}
body.ui-v2 .sidebar-collapse-control:hover{background:rgba(255,255,255,.08);color:#fff}
body.ui-v2 .sidebar-search{margin:0 2px 12px;background:#172738;border:1px solid rgba(255,255,255,.08);border-radius:10px;min-height:40px}
body.ui-v2 .sidebar-search:focus-within{background:#1a2b3d;border-color:rgba(94,234,212,.22);box-shadow:none}
body.ui-v2 .sidebar-search input{min-height:38px;color:#e8eff6;font-size:12.5px}
body.ui-v2 .sidebar-search input::placeholder{color:#7f93a6}
body.ui-v2 .nav-section{padding:0 0 10px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.055);border-radius:0}
body.ui-v2 .nav-section:last-of-type{border-bottom:0}
body.ui-v2 .nav-title{min-height:30px;padding:9px 8px 5px;color:#73879b;font-size:9.5px;font-weight:800;letter-spacing:.11em;cursor:pointer}
body.ui-v2 .nav-title span{display:flex;align-items:center;gap:8px}
body.ui-v2 .nav-title span:before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.055);color:#92a8bb;font:700 9px/1 Inter,sans-serif;letter-spacing:0}
body.ui-v2 .nav-overview>.nav-title span:before{content:"01"}
body.ui-v2 .nav-operations>.nav-title span:before{content:"02"}
body.ui-v2 .nav-business>.nav-title span:before{content:"03"}
body.ui-v2 .nav-workflow>.nav-title span:before{content:"04"}
body.ui-v2 .nav-system>.nav-title span:before{content:"05"}
body.ui-v2 .nav-btn{min-height:42px;margin:2px 1px;padding:7px 8px;color:#c4d0dc;border-radius:9px;font-size:12.5px;font-weight:620;transform:none!important;box-shadow:none!important}
body.ui-v2 .nav-btn:hover{background:rgba(255,255,255,.055);color:#fff}
body.ui-v2 .nav-btn.active{background:rgba(20,184,166,.12);color:#f4fffd;border:1px solid rgba(45,212,191,.12)}
body.ui-v2 .nav-btn.active:before{left:-1px;top:9px;bottom:9px;width:3px;background:#42c7ba;box-shadow:none}
body.ui-v2 .nav-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.045);color:#91a6b8}
body.ui-v2 .nav-btn:hover .nav-icon{background:rgba(255,255,255,.07);color:#dbe8f1}
body.ui-v2 .nav-btn.active .nav-icon{background:rgba(45,212,191,.12);color:#6edfd3}
body.ui-v2 .nav-subitem{margin-left:20px;width:calc(100% - 21px);min-height:36px;padding-block:4px;color:#9fb0c0;font-size:11.5px}
body.ui-v2 .nav-subitem .nav-icon{width:25px;height:25px;background:transparent}
body.ui-v2 .nav-parent-toggle{color:#7f93a6!important}
body.ui-v2 .nav-parent-toggle:hover{background:rgba(255,255,255,.06)!important;color:#d7e3ec!important}
body.ui-v2 .nav-badge{background:rgba(255,255,255,.08);color:#c9d7e2;border:0}
body.ui-v2 .sidebar-footer{background:#172738;border-color:rgba(255,255,255,.07);border-radius:11px;box-shadow:none}

/* Page hierarchy and calmer indexing */
body.ui-v2 .main{padding:24px clamp(16px,2vw,30px) 44px;max-width:1660px}
body.ui-v2 .page-head{position:relative;align-items:flex-start;margin-bottom:18px;padding:4px 0 15px;border-bottom:1px solid #e3e8ef}
body.ui-v2 .breadcrumbs{margin-bottom:6px;color:#7e8a99!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.08em}
body.ui-v2 .page-title{font-family:Inter,Hind Siliguri,sans-serif;font-size:clamp(22px,1.15vw + 16px,29px);font-weight:750;letter-spacing:-.028em;color:#172033}
body.ui-v2 .page-title:after{display:none!important}
body.ui-v2 .page-desc{margin-top:6px;color:#748091;font-size:12.5px;line-height:1.6;max-width:840px}
body.ui-v2 .head-actions{gap:7px}
.section-index{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;margin-right:8px;padding:0 7px;border-radius:7px;background:var(--module-soft);color:var(--module-accent);font:800 9px/1 Inter,sans-serif;letter-spacing:.04em;vertical-align:middle}

/* Surfaces: less glass, less motion, stronger grouping */
body.ui-v2 .card,body.ui-v2 .stat,body.ui-v2 .dispatch-card,body.ui-v2 .approval-card{background:#fff;border:1px solid #e2e7ee;box-shadow:0 2px 8px rgba(15,23,42,.035);border-radius:14px;transition:border-color .14s ease,box-shadow .14s ease}
body.ui-v2 .card:hover,body.ui-v2 .stat:hover,body.ui-v2 .approval-card:hover,body.ui-v2 .dispatch-card:hover{transform:none!important;box-shadow:0 3px 10px rgba(15,23,42,.045);border-color:#d9e0e8}
body.ui-v2 .card-head{padding:15px 16px;border-bottom:1px solid #edf0f4}
body.ui-v2 .card-title{font-family:Inter,Hind Siliguri,sans-serif;font-size:13.5px;font-weight:750;color:#202b3c;letter-spacing:-.012em}
body.ui-v2 .card-sub{color:#84909f;font-size:11.5px;line-height:1.5}
body.ui-v2 .card-body{padding:16px}
body.ui-v2 .section-box{background:#f8fafc;border:1px solid #e6eaf0!important;border-left:3px solid color-mix(in srgb,var(--module-accent) 55%,#d8e0e8)!important;border-radius:12px;box-shadow:none}
body.ui-v2 .stats{gap:10px}
body.ui-v2 .stat{padding:15px 16px;border-radius:13px;min-height:112px;overflow:hidden}
body.ui-v2 .stat:after{display:none}
body.ui-v2 .stat-icon{width:34px;height:34px;border-radius:9px;background:var(--module-soft);color:var(--module-accent);border:0}
body.ui-v2 .stat .label{font-size:10px;color:#7f8b99;letter-spacing:.055em}
body.ui-v2 .stat .value{font-family:Inter,Hind Siliguri,sans-serif;font-size:clamp(22px,1vw + 17px,28px);font-weight:760;color:#172033;letter-spacing:-.025em}
body.ui-v2 .stat .note{font-size:10.5px;color:#96a0ad}
body.ui-v2 .stat-clickable:hover{transform:none!important;box-shadow:0 3px 10px rgba(15,23,42,.045)}
body.ui-v2 .stat-clickable .stat-go{opacity:.45;transform:none}
body.ui-v2 .quick{min-height:96px;border-radius:13px!important;box-shadow:none!important;transform:none!important;background:#fff!important;color:#273446!important;border:1px solid #e2e7ee!important}
body.ui-v2 .quick:before{display:none}
body.ui-v2 .quick:hover{border-color:color-mix(in srgb,var(--module-accent) 28%,#dbe2ea)!important;background:var(--module-soft)!important;transform:none!important;box-shadow:none!important}
body.ui-v2 .quick b{color:#243043;font-size:13px}
body.ui-v2 .quick small{color:#7d8897}

/* Button hierarchy: one strong action, everything else quiet */
body.ui-v2 .btn{min-height:38px;padding:8px 12px;border-radius:9px;border:1px solid #dce2e9;background:#fff;color:#536172;font-size:12px;font-weight:680;box-shadow:none;transform:none!important;transition:background .13s ease,border-color .13s ease,color .13s ease}
body.ui-v2 .btn:hover{background:#f6f8fa;border-color:#cfd7e1;box-shadow:none;transform:none}
body.ui-v2 .btn.primary{background:#0f766e;border-color:#0f766e;color:#fff;box-shadow:none}
body.ui-v2 .btn.primary:hover{background:#0b655f;border-color:#0b655f;box-shadow:none}
body.ui-v2 .btn.warning{background:#fff9ec;color:#9a6516;border-color:#edd9ad}
body.ui-v2 .btn.danger{background:#fff5f5;color:#b24752;border-color:#eccfd3}
body.ui-v2 .edit-btn,body.ui-v2 .correction-btn{background:#f6f5ff!important;color:#6255a4!important;border-color:#dedaf2!important}
body.ui-v2 .btn.small{min-height:32px;padding:6px 9px;border-radius:8px;font-size:11px}
body.ui-v2 .head-actions .btn:not(.primary){background:#f7f9fb;color:#637183}
body.ui-v2 .table-actions{gap:5px}
body.ui-v2 .table-actions .btn:not(.primary):not(.danger):not(.warning){background:#f8fafc;color:#657285;border-color:#e1e6ed}

/* Forms: calmer focus and easier grouping */
body.ui-v2 input,body.ui-v2 select,body.ui-v2 textarea{min-height:42px;border:1px solid #dbe1e8;border-radius:9px;background:#fff;color:#263244;font-size:13px;box-shadow:none}
body.ui-v2 input:hover,body.ui-v2 select:hover,body.ui-v2 textarea:hover{border-color:#cdd5df}
body.ui-v2 input:focus,body.ui-v2 select:focus,body.ui-v2 textarea:focus{border-color:#6aa8a2;box-shadow:0 0 0 3px rgba(15,118,110,.08)}
body.ui-v2 .form-group label{font-size:10.5px;font-weight:750;color:#5f6c7c}
body.ui-v2 .field-help{font-size:10.5px;color:#929ca8}
body.ui-v2 .role-pick-list{background:#f7f9fb;border-color:#e2e7ed}
body.ui-v2 .role-pick{border-radius:8px;box-shadow:none;transform:none!important}
body.ui-v2 .role-pick:hover{background:#f2f6f8;border-color:#cfd8e0;transform:none}

/* Tables: readable ledger rhythm */
body.ui-v2 .table-wrap{border:1px solid #e3e7ed;border-radius:11px;background:#fff}
body.ui-v2 table{font-variant-numeric:tabular-nums}
body.ui-v2 th{position:sticky;top:0;z-index:2;padding:10px 12px;background:#f5f7f9;color:#737f8f;border-color:#e7ebf0;font-size:9.5px;font-weight:800;letter-spacing:.06em}
body.ui-v2 td{padding:11px 12px;border-color:#edf0f4;color:#3b4758;font-size:12.25px;line-height:1.45}
body.ui-v2 tbody tr:nth-child(even){background:#fbfcfd}
body.ui-v2 tbody tr:hover{background:#f2f8f7;box-shadow:inset 3px 0 0 rgba(15,118,110,.24)}
body.ui-v2 .cell-title{color:#273345;font-weight:720}
body.ui-v2 .cell-sub{color:#8a95a3}

/* Semantic states: quiet backgrounds, readable text */
body.ui-v2 .badge{box-shadow:none;border:0;font-weight:700}
body.ui-v2 .badge.warning{animation:none!important}
body.ui-v2 .notice-strip{background:#f5f9f8;border:1px solid #dfe8e6;border-radius:11px;box-shadow:none}
body.ui-v2 .alert{box-shadow:none;border-radius:10px}
body.ui-v2 .pm-chip{border-radius:7px}
body.ui-v2 .inventory-formula{background:#f4f9f8;border-color:#dbe8e5;color:#386e69}
body.ui-v2 .inventory-formula .formula-available{background:#0f766e}

/* Modals: task-first, no glass or decorative rotation */
body.ui-v2 .modal-overlay{background:rgba(15,23,42,.46);backdrop-filter:none}
body.ui-v2 .modal{border-radius:15px;border:1px solid #dde3ea;box-shadow:0 24px 64px rgba(15,23,42,.20)}
body.ui-v2 .modal-head{padding:15px 17px;background:#fff;border-color:#e6eaf0}
body.ui-v2 .modal-body{padding:17px;background:#fff}
body.ui-v2 .modal-foot{padding:12px 17px;background:#f8fafc;border-color:#e6eaf0}
body.ui-v2 .close{border-radius:8px;background:#f4f6f8;color:#687587;transform:none!important}
body.ui-v2 .close:hover{background:#e9edf2;color:#334155;transform:none}
body.ui-v2 .dropdown{background:#fff;backdrop-filter:none;border-radius:13px;border-color:#dde4eb;box-shadow:0 18px 44px rgba(15,23,42,.13)}

/* Standalone/integrated workspaces share the same calm surfaces. */
body.ui-v2 .ast-card,body.ui-v2 .mfg-card,body.ui-v2 .qm-card{background:#fff!important;border:1px solid #e2e7ed!important;border-radius:13px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important;transform:none!important}
body.ui-v2 .ast-card:hover,body.ui-v2 .mfg-card:hover,body.ui-v2 .qm-card:hover{box-shadow:0 3px 10px rgba(15,23,42,.045)!important;transform:none!important}
body.ui-v2 .ast-top h2,body.ui-v2 .mfg-top h1,body.ui-v2 .qm-top h1{font-family:Inter,Hind Siliguri,sans-serif!important;letter-spacing:-.025em!important}
body.ui-v2 .ast-tabs,body.ui-v2 .mfg-tabs,body.ui-v2 .qm-tabs,body.ui-v2 .acct-tabs{background:#f5f7f9!important;border:1px solid #e1e6ec!important;border-radius:10px!important;box-shadow:none!important}
body.ui-v2 .ast-tabs a,body.ui-v2 .mfg-tabs a,body.ui-v2 .qm-tabs a,body.ui-v2 .acct-tabs a{border-radius:7px!important;color:#6c7888!important}
body.ui-v2 .ast-tabs a.active,body.ui-v2 .mfg-tabs a.active,body.ui-v2 .qm-tabs a.active,body.ui-v2 .acct-tabs a.active{background:#fff!important;color:#0f766e!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important}
body.ui-v2 .workspace-frame-shell{border-radius:13px;border-color:#e1e6ec;box-shadow:0 2px 8px rgba(15,23,42,.035)}

/* Learning Center also follows the same reading-first system. */
body.page-learning .learning-hero,body.page-learning .learning-focus{background:#fff!important;border-color:#e2e7ed!important;border-radius:14px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)}
body.page-learning .learning-kicker{background:#eef6f5!important;color:#0f766e!important;border-radius:7px!important}
body.page-learning .learning-flow span{border-color:#e2e7ed!important;border-radius:8px!important;background:#f8fafc!important}
body.page-learning .learning-card{border-color:#e2e7ed!important;border-radius:12px!important;box-shadow:none!important}
body.page-learning .learning-card-head:hover{background:#f7f9fb!important}
body.page-learning .learning-icon{border-radius:9px!important;background:#eef6f5!important;color:#0f766e!important}
body.page-learning .process-node{border-color:#e2e7ed!important;border-radius:11px!important;box-shadow:none!important}
body.page-learning .process-line:after{animation:none!important}

/* Stop decorative motion. Keep only functional open/close transitions. */
body.ui-v2 .main>section,body.ui-v2 .main>.page-head,body.ui-v2 .main>.card,body.ui-v2 .main>.stats,body.ui-v2 .main>.grid2,body.ui-v2 .main>.grid3,body.ui-v2 .main>.quick-grid,body.ui-v2 tbody tr{animation:none!important}
body.ui-v2 .balance-card,body.ui-v2 .theme-pick,body.ui-v2 .approval-card,body.ui-v2 .ast-category{transform:none!important}
body.ui-v2 .balance-card:hover,body.ui-v2 .theme-pick:hover,body.ui-v2 .ast-category:hover{transform:none!important}

@media(max-width:1180px){body.ui-v2 .layout{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:880px){body.ui-v2 .layout{grid-template-columns:1fr}body.ui-v2 .sidebar{top:70px;height:calc(100vh - 70px);width:274px;left:-292px;box-shadow:12px 0 34px rgba(15,23,42,.16)}body.ui-v2 .sidebar.open{left:0}body.ui-v2 .main{padding:18px 12px 80px}}
@media(max-width:620px){body.ui-v2 .topbar{height:66px}.profile-text,.brand small{display:none}.section-index{min-width:25px;height:20px;margin-right:6px}body.ui-v2 .page-title{font-size:22px}}
/* Calm module accents: distinct enough to orient the user, muted enough not to compete. */
body.ui-v2.page-products{--module-accent:#287a5f;--module-soft:#eef7f3}
body.ui-v2.page-materials{--module-accent:#95691f;--module-soft:#faf6ed}
body.ui-v2.page-equipment{--module-accent:#6f6498;--module-soft:#f3f1f8}
body.ui-v2.page-procurement{--module-accent:#416f9b;--module-soft:#eef4f8}
body.ui-v2.page-production{--module-accent:#765985;--module-soft:#f5f1f6}
body.ui-v2.page-stock,body.ui-v2.page-warehouses{--module-accent:#3b7771;--module-soft:#eef7f6}
body.ui-v2.page-supply{--module-accent:#3f7d91;--module-soft:#eef6f8}
body.ui-v2.page-sales{--module-accent:#456f9b;--module-soft:#eff4f9}
body.ui-v2.page-accounts{--module-accent:#5c6595;--module-soft:#f1f2f8}
body.ui-v2.page-hr{--module-accent:#956075;--module-soft:#f8f1f4}
body.ui-v2.page-payroll{--module-accent:#756096;--module-soft:#f4f1f8}
body.ui-v2.page-requests{--module-accent:#986743;--module-soft:#faf4ef}
body.ui-v2.page-reports{--module-accent:#4b7b8a;--module-soft:#eff6f7}
body.ui-v2.page-settings{--module-accent:#64748b;--module-soft:#f3f5f7}
body.ui-v2.page-learning{--module-accent:#3b7771;--module-soft:#eef7f6}

/* Phase 22 — calm overrides for embedded/standalone feature-specific templates. */
body.ui-v2 .process-explainer{background:#fff!important;border:1px solid #e2e7ed!important;border-radius:13px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important}
body.ui-v2 .process-mini-flow span{background:#f8fafc!important;border-color:#e1e6ec!important;border-radius:8px!important;color:#4d5a6b!important}
body.ui-v2 .process-mini-flow i{color:#6b8f8b!important}
body.ui-v2 .process-stage-editor,body.ui-v2 .pack-item-editor,body.ui-v2 .pack-plan-row{background:#f8fafc!important;border-color:#e2e7ed!important;border-radius:11px!important}
body.ui-v2 .process-stage{background:#f8fafc!important;border-color:#e2e7ed!important}
body.ui-v2 .process-stage.is-current{background:#eef7f6!important;border-color:#bdd8d4!important}
body.ui-v2 .process-stage.is-completed{background:#f2f7f4!important}
body.ui-v2 .stage-dot{background:#e8edf2!important;color:#526171!important;border-radius:7px!important}
body.ui-v2 .is-current .stage-dot{background:#0f766e!important;color:#fff!important}
body.ui-v2 .late-pack-card,body.ui-v2 .trace-card,body.ui-v2 .ast-correction{background:#fff!important;border-color:#e2e7ed!important}
body.ui-v2 .cost-bridge>div,body.ui-v2 .trace-row{background:#f8fafc!important;border-color:#e2e7ed!important;border-radius:9px!important}
body.ui-v2 .cost-bridge .cost-wip{background:#eef7f6!important;border-color:#cfe2df!important}
body.ui-v2 .ast-category{border-radius:11px!important;box-shadow:none!important;transform:none!important}
body.ui-v2 .ast-category:hover{box-shadow:none!important;transform:none!important;background:#f8fafc!important}
body.ui-v2 .ast-correction .correction-reason,body.ui-v2 .correction-reason{background:#fffaf0!important;border-color:#ead8b9!important;border-radius:10px!important}
body.ui-v2 .correction-banner,body.ui-v2 .stock-correction-banner{background:#f8fafc!important;border-color:#e2e7ed!important;border-radius:11px!important}
body.ui-v2 .correction-banner>div:first-child{background:#f0eef8!important;color:#625b87!important;border-radius:8px!important}

/* Executive cockpit: keep an executive identity, but remove oversized gradient/glow language. */
body.ui-v2 .xec-shell{background:#f4f6f8!important}
body.ui-v2 .xec-hero{background:#12202f!important;border-radius:16px!important;box-shadow:none!important;padding:22px!important}
body.ui-v2 .xec-hero:after{display:none!important}
body.ui-v2 .xec-kicker{color:#75c9c0!important;font-size:10px!important}
body.ui-v2 .xec-title{font-family:Inter,Hind Siliguri,sans-serif!important;font-size:clamp(25px,2vw,34px)!important;font-weight:760!important;letter-spacing:-.03em!important}
body.ui-v2 .xec-sub{color:#b8c5d1!important}
body.ui-v2 .xec-actions a,body.ui-v2 .xec-actions button{background:#1a2b3c!important;border-color:#2b3c4d!important;border-radius:8px!important;box-shadow:none!important}
body.ui-v2 .xec-periods a{border-radius:8px!important;border-color:#314353!important;color:#c5d1db!important}
body.ui-v2 .xec-periods a.active{background:#eef7f6!important;color:#0f5f59!important;border-color:#eef7f6!important}
body.ui-v2 .xec-signal{background:#172a3b!important;border-color:#2b3e4e!important;border-radius:9px!important}
body.ui-v2 .xec-card{border:1px solid #e2e7ed!important;border-radius:13px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important}
body.ui-v2 .xec-kpi{padding:15px!important}
body.ui-v2 .xec-kpi-icon{width:35px!important;height:35px!important;border-radius:9px!important;background:#eef6f5!important;color:#0f766e!important}
body.ui-v2 .xec-kpi-value{font-family:Inter,Hind Siliguri,sans-serif!important;font-size:clamp(21px,1.4vw,28px)!important;font-weight:760!important}
body.ui-v2 .xec-alert{border-radius:9px!important;transition:none!important}
body.ui-v2 .xec-alert:hover{transform:none!important;box-shadow:none!important;background:#f8fafc!important}
body.ui-v2 .xec-mini-box,body.ui-v2 .xec-aging div{border-radius:9px!important;background:#f7f9fb!important}
body.ui-v2 .xec-link{border-radius:9px!important}.xec-link:hover{background:#f3f7f6!important;border-color:#d0dfdc!important}

/* Login should feel deliberate, not glossy. */
body.ui-v2 .login-hero{background:#12202f!important}
body.ui-v2 .login-mark{border-radius:12px!important;background:#0f766e!important;border:0!important;box-shadow:none!important}
body.ui-v2 .login-point{background:#172a3b!important;border:1px solid #26394a!important;backdrop-filter:none!important;border-radius:9px!important}
body.ui-v2 .login-card{border-radius:15px!important;box-shadow:0 14px 40px rgba(15,23,42,.08)!important}