/*
  b.ox / Business Ox — Core Components System v8
  One visual source of truth for every workspace and every future module.
  Colors and typography come from core/AppearanceEngine.php as CSS variables.
*/
:root{
  --bos-version:"core-components-v8";
  --ui-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  --ui-primary:#c1121f;--ui-primary-rgb:193,18,31;--ui-primary-soft:rgba(193,18,31,.12);
  --ui-secondary:#111827;--ui-accent:#2563eb;--ui-accent-rgb:37,99,235;
  --ui-success:#16a34a;--ui-success-rgb:22,163,74;--ui-danger:#dc2626;--ui-danger-rgb:220,38,38;--ui-warning:#d97706;--ui-warning-rgb:217,119,6;--ui-info:#0284c7;--ui-info-rgb:2,132,199;
  --ui-bg:#f6f7fb;--ui-surface:#fff;--ui-surface-2:#f1f3f8;--ui-text:#111827;--ui-heading:#0f172a;--ui-muted:#667085;--ui-border:#e4e7ec;--ui-hover:#f9fafb;
  --ui-button-text:#fff;--ui-secondary-button-bg:#f1f3f8;--ui-secondary-button-text:#111827;
  --ui-shadow:none;--ui-radius:18px;--ui-radius-sm:12px;--ui-card-radius:22px;--ui-button-radius:16px;--ui-sidebar:282px;--ui-topbar:76px;--ui-gap:16px;--ui-card-padding:20px;--ui-content-padding:20px;--ui-control-height:44px;
  --ui-font-size-base:14px;--ui-font-size-xs:11px;--ui-font-size-sm:13px;--ui-font-size-md:16px;--ui-font-size-lg:18px;--ui-font-size-xl:22px;--ui-font-size-page:25px;--ui-font-size-number:30px;
  --box-ease:cubic-bezier(.2,.8,.2,1);--primary:var(--ui-primary);--muted:var(--ui-muted);--border:var(--ui-border);--surface:var(--ui-surface);--bg:var(--ui-bg);--shadow-sm:none;
}
html[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}html{min-width:0;overflow-x:hidden;scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-font);font-size:var(--ui-font-size-base);line-height:1.65}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{border:0}img,svg,video,canvas{max-width:100%;height:auto}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}table{max-width:100%}h1,h2,h3,h4,h5,h6{color:var(--ui-heading);margin-top:0}.is-hidden,[hidden]{display:none!important}.box-muted,.ui-muted,.ui-muted-text{color:var(--ui-muted)!important}.box-mt,.ui-mt{margin-top:16px}.box-mb,.ui-mb{margin-bottom:16px}.box-small,.ui-btn-sm,.sm{font-size:var(--ui-font-size-sm)}
/* Layout System: shell/sidebar/topbar remain global, not page-specific */
.ui-app-shell{min-height:100vh;min-width:0}.ui-sidebar{position:fixed;inset-block:0;right:0;width:var(--ui-sidebar);max-width:calc(100vw - 24px);background:var(--ui-surface);border-left:1px solid var(--ui-border);padding:16px;display:flex;flex-direction:column;gap:14px;z-index:80;overflow:hidden}.ui-sidebar-head{flex:0 0 auto}.ui-brand{min-height:62px;border-radius:20px;background:linear-gradient(135deg,var(--ui-primary),color-mix(in srgb,var(--ui-primary) 62%,#111827));color:#fff;display:flex;align-items:center;gap:12px;padding:12px 14px}.ui-brand>span,.ui-mini-logo{width:42px;height:42px;min-width:42px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:950}.ui-brand strong{display:flex;flex-direction:column;font-size:16px;line-height:1.25}.ui-brand small{font-size:12px;opacity:.85}.ui-nav-scroll{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:2px}.ui-nav-group{display:flex;flex-direction:column;gap:6px}.ui-nav-group small{padding:8px 12px 2px;color:var(--ui-muted);font-weight:900}.ui-nav-link{display:flex;align-items:center;gap:10px;min-height:43px;border-radius:14px;padding:10px 12px;color:var(--ui-muted);font-weight:850;white-space:nowrap}.ui-nav-link:hover{background:var(--ui-hover);color:var(--ui-text)}.ui-nav-link.is-active{background:var(--ui-primary-soft);color:var(--ui-primary)}.ui-main{min-width:0;margin-right:var(--ui-sidebar);min-height:100vh}.ui-sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.46);border:0;z-index:70}.ui-topbar{height:var(--ui-topbar);position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ui-bg) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--ui-border);display:flex;align-items:center;gap:12px;padding:12px var(--ui-content-padding);min-width:0}.ui-page-title{min-width:0;margin-inline-end:auto}.ui-page-title h1{margin:0;font-size:clamp(18px,2vw,var(--ui-font-size-page));font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-page-title p{margin:2px 0 0;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-top-actions{display:flex;align-items:center;gap:8px;min-width:0}.ui-user-chip{border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:16px;min-height:44px;padding:7px 10px;display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer}.ui-user-chip span{min-width:0}.ui-user-chip b,.ui-user-chip small{display:block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-user-chip small{color:var(--ui-muted);font-size:12px}.ui-top-profile-menu{position:relative}.ui-top-profile-menu summary{list-style:none}.ui-top-profile-menu summary::-webkit-details-marker{display:none}.ui-top-profile-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;padding:8px;z-index:100}.ui-top-profile-dropdown a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;font-weight:850}.ui-top-profile-dropdown a:hover{background:var(--ui-hover)}.ui-top-profile-dropdown .danger{color:var(--ui-danger)}.ui-content{width:100%;max-width:1480px;margin:0 auto;padding:var(--ui-content-padding);min-width:0}
/* Core grids */
.box-grid,.ui-grid,.cmd-grid,.box-form-grid,.ui-form-grid{display:grid;gap:var(--ui-gap);grid-template-columns:repeat(12,minmax(0,1fr));min-width:0}.box-grid-2,.ui-grid-2,.box-form-grid-2,.ui-form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.box-grid-3,.ui-grid-3,.cmd-grid-3,.box-form-grid-3,.ui-form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.box-grid-4,.ui-grid-4,.box-form-grid-4,.ui-form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.box-span-2,.ui-span-2,.cmd-span-2{grid-column:span 2}.box-form-full,.ui-form-full,.ui-span-full{grid-column:1/-1}
/* Core Cards */
.box-card,.ui-card,.clean-card,.cmd-panel,.reports-os-panel,.employee-panel,.info-card,.bos-layer-card,.ui-stat-card,.pt-card,.notify-approval-card,.msg-user-card,.msg-directory-card,.reports-market-card{min-width:0;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);padding:var(--ui-card-padding);box-shadow:var(--ui-shadow);color:var(--ui-text)}.box-card-header,.ui-card-header,.ui-card-head,.cmd-panel-head,.reports-os-panel-head,.employee-panel-head,.notify-head,.msg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;min-width:0}.box-card-title,.ui-card-title{margin:0;font-size:var(--ui-font-size-lg);font-weight:950;color:var(--ui-heading)}.box-card-subtitle,.ui-card-subtitle{margin:4px 0 0;color:var(--ui-muted)}
/* Core Stats / Empty */
.box-stat,.ui-stat,.ui-mini-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.box-stat b,.ui-stat b{display:block;font-size:clamp(22px,3vw,var(--ui-font-size-number));font-weight:950;line-height:1.1;overflow-wrap:anywhere}.box-stat span,.ui-stat span{color:var(--ui-muted);font-weight:850}.box-stat-icon,.ui-stat-icon,.box-empty-icon,.ui-empty-icon{width:48px;height:48px;min-width:48px;border-radius:16px;background:var(--ui-primary-soft);color:var(--ui-primary);display:grid;place-items:center}.box-empty,.ui-empty{min-height:300px;display:grid;place-items:center;text-align:center;align-content:center;gap:12px}.box-empty-mini,.ui-empty-mini{padding:18px;text-align:center;color:var(--ui-muted);border:1px dashed var(--ui-border);border-radius:16px}
/* Core Buttons / icon buttons / dropdown badge */
.box-btn,.box-btn-primary,.box-btn-secondary,.box-btn-danger,.box-btn-outline,.ui-btn,.ui-btn-primary,.ui-btn-secondary,.ui-btn-danger,.ui-btn-light,.ui-btn-outline,.pt-btn,.bos-doc-btn,.bos-doc-tool-action,.cmd-action,.employee-action,.msg-action,.notify-action{min-height:var(--ui-control-height);border:1px solid transparent;border-radius:var(--ui-button-radius);padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-button-text);font-weight:900;cursor:pointer;max-width:100%;white-space:nowrap;transition:background .18s var(--box-ease),border-color .18s var(--box-ease),color .18s var(--box-ease),transform .18s var(--box-ease)}.box-btn:hover,.box-btn-primary:hover,.box-btn-secondary:hover,.box-btn-danger:hover,.box-btn-outline:hover,.ui-btn:hover{transform:translateY(-1px)}.box-btn:active,.ui-btn:active{transform:translateY(0)}.box-btn.secondary,.box-btn-secondary,.box-btn-outline,.ui-btn.secondary,.ui-btn-secondary,.ui-btn-light,.ui-btn-outline,.ghost{background:var(--ui-secondary-button-bg);color:var(--ui-secondary-button-text);border-color:var(--ui-border)}.box-btn.danger,.box-btn-danger,.ui-btn.danger,.ui-btn-danger{background:var(--ui-danger);color:#fff}.box-btn.success,.box-btn-success{background:var(--ui-success);color:#fff}.box-btn.warning,.box-btn-warning{background:var(--ui-warning);color:#fff}.box-btn-sm,.box-sm,.ui-btn-sm,.sm{min-height:34px;padding:0 10px;font-size:12px}.box-icon-btn,.ui-icon-btn{width:44px;height:44px;min-width:44px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface);color:var(--ui-text);display:inline-grid;place-items:center;cursor:pointer;position:relative}.box-icon-btn:hover,.ui-icon-btn:hover{background:var(--ui-hover)}.box-action-badge,.ui-action-badge{position:absolute;min-width:18px;height:18px;border-radius:99px;background:var(--ui-danger);color:#fff;font-size:11px;display:grid;place-items:center;transform:translate(-12px,-12px)}.ui-theme-sun{display:none}html[data-theme="dark"] .ui-theme-moon{display:none}html[data-theme="dark"] .ui-theme-sun{display:inline-flex}
/* Core Forms */
.box-form,.ui-form,.ui-smart-form,.pt-form,.register-pro-form{display:grid;gap:14px}.box-field,.ui-field,.pt-field,.files20-field{display:grid;gap:7px;min-width:0}.box-field label,.ui-field label,.pt-field label,.files20-field label{font-weight:900}.box-input,.ui-input,input,select,textarea{width:100%;max-width:100%;min-width:0;border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:13px;min-height:var(--ui-control-height);padding:0 12px;outline:none}.box-input,.ui-input{display:flex;align-items:center;gap:8px}.box-input input,.box-input select,.ui-input input,.ui-input select{border:0;background:transparent;padding:0;min-height:40px}.box-input:focus-within,.ui-input:focus-within,input:focus,select:focus,textarea:focus{border-color:var(--ui-primary);box-shadow:0 0 0 3px var(--ui-primary-soft)}textarea{padding:12px;min-height:110px;resize:vertical}.box-form-hint,.ui-form-hint,.ui-field-hint{color:var(--ui-muted);font-size:12px}.ui-check,.ui-switch-row{display:flex;align-items:center;gap:10px;color:var(--ui-muted);font-weight:850}.ui-switch input,.ui-check input{width:auto;min-height:auto}.box-filters,.box-actionbar,.ui-filters,.ui-filters-simple,.ui-invoice-filters,.ui-actionbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px;min-width:0}.box-filters .box-field,.ui-filters .ui-field{min-width:180px;flex:1}.box-search-field,.ui-search-field{min-width:min(320px,100%)}
/* Core Tables */
.box-table-wrap,.ui-table-wrap,.cmd-table-wrap,.ui-invoice-table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);background:var(--ui-surface);-webkit-overflow-scrolling:touch}.box-table,.ui-table,.cmd-table,.smart-table,.ui-table-clean,.ui-table-invoices,.ui-table-employees,.reports-os-table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0}.box-table th,.box-table td,.ui-table th,.ui-table td,.cmd-table th,.cmd-table td,.smart-table th,.smart-table td{padding:13px 14px;text-align:right;border-bottom:1px solid var(--ui-border);vertical-align:middle}.box-table th,.ui-table th,.cmd-table th,.smart-table th{font-size:12px;color:var(--ui-muted);background:var(--ui-surface-2);font-weight:950;position:sticky;top:0;z-index:1}.box-table tr:hover td,.ui-table tr:hover td,.cmd-table tr:hover td{background:var(--ui-hover)}.box-cell-sub,.ui-cell-sub{display:block;color:var(--ui-muted);font-size:12px}.box-row-actions,.ui-row-actions,.ui-actionbar-actions,.pt-actions,.ui-inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.box-table-empty-cell,.ui-table-empty-cell{text-align:center;color:var(--ui-muted);padding:30px!important}.ui-table-footer{padding:12px 14px;color:var(--ui-muted);font-weight:850;border:1px solid var(--ui-border);border-top:0;border-radius:0 0 var(--ui-card-radius) var(--ui-card-radius);background:var(--ui-surface)}
/* Core Badges / Alerts */
.box-badge,.ui-badge,.box-status,.ui-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--ui-primary-soft);color:var(--ui-primary);padding:6px 10px;font-size:12px;font-weight:900;white-space:nowrap}.box-status.ok,.ui-status.ok,.ok,.success{color:var(--ui-success)}.box-status.danger,.ui-status.danger,.danger{color:var(--ui-danger)}.warning{color:var(--ui-warning)}.box-alert,.ui-alert{display:block;position:relative;border-radius:14px;padding:12px 14px;background:var(--ui-surface-2);border:1px solid var(--ui-border);font-weight:850}.box-alert.ok,.ui-alert.ok{background:rgba(var(--ui-success-rgb),.10);color:var(--ui-success);border-color:rgba(var(--ui-success-rgb),.22)}.box-alert.danger,.ui-alert.danger{background:rgba(var(--ui-danger-rgb),.10);color:var(--ui-danger);border-color:rgba(var(--ui-danger-rgb),.22)}.box-alert.warning,.ui-alert.warning{background:rgba(var(--ui-warning-rgb),.10);color:var(--ui-warning);border-color:rgba(var(--ui-warning-rgb),.22)}
/* Core Modals / popups / dialogs */
.box-modal,.ui-modal,.box-modal-backdrop,.ui-modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px}.box-modal.is-open,.ui-modal.is-open,.box-modal-backdrop.is-open,.ui-modal-backdrop.is-open{display:flex}.box-modal[aria-hidden="false"]{display:flex}.box-modal-panel,.ui-modal-panel,.ui-file-modal-panel,.ui-invoice-modal,.bos-report-modal,.reports-system-modal{width:min(980px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:22px;padding:18px}.ui-modal-wide{width:min(1180px,100%)}.ui-modal-small{width:min(620px,100%)}.box-modal-header,.ui-modal-header,.bos-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.box-modal-footer,.ui-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}.box-modal-close,.ui-modal-x,.reports-modal-close{border:0;background:var(--ui-surface-2);border-radius:12px;width:38px;height:38px;cursor:pointer;color:var(--ui-text)}body.ui-modal-locked{overflow:hidden}
/* Document / print preview components use the same variables */
.bos-doc-paper,.bos-live-template-page,.receipt-paper-copy,.bos-receipt-full-a4,.bos-default-invoice-template,.bos-default-receipt-template{background:#fff;color:#111827;border:1px solid var(--ui-border);border-radius:18px;padding:22px;max-width:100%;box-shadow:none}.bos-doc-actions,.bos-doc-inline-tools,.bos-doc-topbar,.receipt-bottom,.receipt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.bos-doc-service-grid,.bos-doc-var-grid,.bos-doc-page-list,.bos-workflow-actions-grid{display:grid;gap:var(--ui-gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.bos-doc-start-card,.bos-workflow-action-card,.workflow-service-form-card,.workflow-stage-editor-card,.workflow-services-panel,.workflow-editor-panel{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);padding:var(--ui-card-padding)}
/* Public tracking/auth keep same component foundation */
.ui-auth-body,.pt-shell{min-height:100vh;background:var(--ui-bg);color:var(--ui-text)}.ui-auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px)}.ui-auth-panel{padding:40px;background:linear-gradient(135deg,var(--ui-primary),color-mix(in srgb,var(--ui-primary) 52%,#111827));color:#fff;display:flex;flex-direction:column;justify-content:space-between}.ui-auth-card{align-self:center;width:min(460px,calc(100% - 32px));margin:auto;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);padding:24px}.ui-auth-head h1{margin-bottom:4px}.pt-shell{padding:20px}.pt-hero,.pt-kpis,.pt-mini-grid{display:grid;gap:var(--ui-gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pt-kpi,.pt-lookup-card,.pt-progress-box{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);padding:var(--ui-card-padding)}
@media (max-width:1180px){.ui-sidebar{transform:translateX(105%);transition:transform .2s var(--box-ease)}.ui-sidebar.is-open{transform:none}.ui-main{margin-right:0}.ui-sidebar-backdrop:not([hidden]){display:block}}@media (min-width:1181px){.ui-sidebar-backdrop{display:none!important}.ui-sidebar{transform:none}.is-sidebar-collapsed .ui-sidebar{transform:translateX(105%)}.is-sidebar-collapsed .ui-main{margin-right:0}}
@media (max-width:760px){:root{--ui-topbar:64px;--ui-content-padding:12px;--ui-gap:12px}.ui-topbar{gap:8px}.ui-page-title p{display:none}.ui-top-actions{gap:6px}.ui-user-chip{padding:0;border:0;background:transparent}.ui-user-chip b,.ui-user-chip small{display:none}.box-grid,.ui-grid,.cmd-grid,.box-form-grid,.ui-form-grid,.box-grid-2,.ui-grid-2,.box-grid-3,.ui-grid-3,.box-grid-4,.ui-grid-4,.box-form-grid-2,.box-form-grid-3,.box-form-grid-4{grid-template-columns:1fr}.box-span-2,.ui-span-2,.cmd-span-2{grid-column:auto}.box-card,.ui-card,.clean-card,.cmd-panel,.reports-os-panel,.employee-panel,.info-card,.bos-layer-card,.ui-stat-card{padding:14px;border-radius:16px}.box-card-header,.ui-card-header,.ui-card-head,.cmd-panel-head,.reports-os-panel-head{flex-direction:column;align-items:stretch}.box-btn,.ui-btn,.ui-btn-primary,.ui-btn-secondary,.ui-btn-danger,.ui-btn-light,.ui-btn-outline,.pt-btn{width:100%}.box-row-actions .box-btn,.ui-row-actions .ui-btn,.ui-actionbar-actions .ui-btn,.pt-actions .pt-btn{width:auto;flex:1}.box-table,.ui-table,.cmd-table,.smart-table,.ui-table-clean,.ui-table-invoices,.ui-table-employees{min-width:680px}.ui-auth-shell{grid-template-columns:1fr}.ui-auth-panel{display:none}.box-modal,.ui-modal,.box-modal-backdrop,.ui-modal-backdrop{padding:10px}.box-modal-panel,.ui-modal-panel,.ui-file-modal-panel,.ui-invoice-modal,.bos-report-modal,.reports-system-modal{border-radius:16px;padding:14px}}

/* b.ox v9 Core Layout / Navigation / Modal / Components final layer */
.box-layout-shell{min-height:100vh;background:var(--ui-bg);color:var(--ui-text)}
.box-layout-sidebar,.box-layout-topbar,.box-layout-content,.box-layout-main{box-sizing:border-box}
.box-layout-content{width:100%;max-width:100%;overflow-x:hidden}.box-page-title h1{color:var(--ui-heading)}
.box-nav-link{border-radius:14px}.box-dropdown,.box-menu,.ui-top-profile-dropdown{background:var(--ui-surface);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow);border-radius:16px;z-index:80}.box-dropdown a,.box-menu a,.ui-top-profile-dropdown a{display:flex;align-items:center;gap:10px;color:var(--ui-text);text-decoration:none;padding:10px 12px;border-radius:12px}.box-dropdown a:hover,.box-menu a:hover,.ui-top-profile-dropdown a:hover{background:var(--ui-hover)}.box-dropdown [class*=danger],.box-menu [class*=danger],.ui-top-profile-dropdown .danger{color:var(--ui-danger)}
.box-menu-trigger,.box-dropdown-trigger{position:relative}.box-menu-panel{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px}.box-menu.is-open .box-menu-panel,.box-dropdown.is-open .box-menu-panel{display:block}.box-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;background:var(--ui-surface-2);border:1px solid var(--ui-border);font-weight:900;color:var(--ui-muted)}
.box-stat{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-card-radius);padding:var(--ui-card-padding);box-shadow:var(--ui-shadow);min-width:0}.box-stat-icon{width:44px;height:44px;border-radius:14px;background:var(--ui-primary-soft);color:var(--ui-primary);display:grid;place-items:center}.box-muted{color:var(--ui-muted)}.box-mt{margin-top:var(--ui-gap)}.box-mb{margin-bottom:var(--ui-gap)}.box-small{font-size:12px}.box-empty,.box-empty-mini{display:grid;place-items:center;text-align:center;gap:10px;color:var(--ui-muted);padding:24px}.box-empty-icon{width:54px;height:54px;border-radius:18px;background:var(--ui-primary-soft);color:var(--ui-primary);display:grid;place-items:center}
.box-btn-outline,.box-btn.ghost,.box-btn.secondary,.box-btn-neutral{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text)}.box-btn.is-soft,.box-btn-soft{background:var(--ui-primary-soft);color:var(--ui-primary);border-color:transparent}.box-btn[disabled],.box-icon-btn[disabled]{opacity:.55;cursor:not-allowed}.box-btn-group{display:flex;gap:8px;flex-wrap:wrap}.box-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.box-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--ui-border);padding-bottom:8px}.box-tab{border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:999px;padding:9px 13px;font-weight:900;text-decoration:none}.box-tab.is-active{background:var(--ui-primary);color:#fff;border-color:var(--ui-primary)}
.box-modal-body{display:grid;gap:var(--ui-gap)}.box-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,100%);background:var(--ui-surface);border-inline-start:1px solid var(--ui-border);box-shadow:var(--ui-shadow);z-index:210;transform:translateX(-110%);transition:transform .2s var(--box-ease);padding:18px;overflow:auto}.box-drawer.is-open{transform:none}html[dir="rtl"] .box-drawer{transform:translateX(110%)}html[dir="rtl"] .box-drawer.is-open{transform:none}
.box-component-contract{display:none!important}
@media(max-width:760px){.box-toolbar{align-items:stretch}.box-toolbar>*{width:100%}.box-btn-group .box-btn{flex:1}.box-menu-panel{position:fixed;inset:auto 10px 10px 10px;min-width:0}.box-layout-content{padding-bottom:24px}}

/* b.ox v10 Core Layout System — single source for shell/sidebar/topbar/actionbar */
:root{
  --ui-sidebar-expanded:282px;
  --ui-sidebar-collapsed:82px;
  --ui-sidebar:var(--ui-sidebar-expanded);
  --ui-topbar:76px;
}
.box-layout-shell,.ui-app-shell{min-height:100vh;background:var(--ui-bg);color:var(--ui-text);}
.box-layout-sidebar,.ui-sidebar{
  width:var(--ui-sidebar-expanded);
  transition:width .22s var(--box-ease),transform .22s var(--box-ease),padding .22s var(--box-ease),box-shadow .22s var(--box-ease);
  will-change:width,transform;
}
.box-layout-main,.ui-main{transition:margin .22s var(--box-ease);}
.box-layout-brand,.ui-brand{overflow:hidden;}
.box-layout-brand strong,.ui-brand strong,.box-nav-link span,.ui-nav-link span,.box-layout-nav-group small,.ui-nav-group small{transition:opacity .16s var(--box-ease),width .16s var(--box-ease),transform .16s var(--box-ease);}
.box-layout-nav-scroll,.ui-nav-scroll{scrollbar-width:thin;}
.box-nav-link,.ui-nav-link{position:relative;isolation:isolate;}
.box-nav-link .ui-icon,.ui-nav-link .ui-icon,.box-layout-toggle .ui-icon{display:grid;place-items:center;min-width:22px;}
.box-layout-topbar,.ui-topbar{box-shadow:0 1px 0 var(--ui-border);}
.box-layout-top-actions,.ui-top-actions{flex-shrink:0;}
.box-layout-content,.ui-content{display:block;}
.box-layout-actionbar,.box-actionbar{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-card-radius);
  padding:14px;
  margin-bottom:var(--ui-gap);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:var(--ui-shadow);
}
.box-actionbar-title{min-width:0;}
.box-actionbar-title h2{margin:0;color:var(--ui-heading);font-size:var(--ui-font-size-lg);font-weight:950;}
.box-actionbar-title p{margin:2px 0 0;color:var(--ui-muted);}
.box-actionbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
@media (min-width:1181px){
  .ui-sidebar{transform:none!important;}
  .ui-main{margin-right:var(--ui-sidebar-expanded);}
  .is-sidebar-collapsed .ui-sidebar{
    width:var(--ui-sidebar-collapsed);
    padding-inline:12px;
    overflow:visible;
  }
  .is-sidebar-collapsed .ui-main{margin-right:var(--ui-sidebar-collapsed);}
  .is-sidebar-collapsed .ui-brand{justify-content:center;padding-inline:10px;border-radius:18px;}
  .is-sidebar-collapsed .ui-brand strong{opacity:0;width:0;max-width:0;overflow:hidden;transform:translateX(8px);}
  .is-sidebar-collapsed .ui-brand>span{width:44px;height:44px;min-width:44px;}
  .is-sidebar-collapsed .ui-nav-scroll{overflow:visible;padding-inline:0;}
  .is-sidebar-collapsed .ui-nav-group{align-items:center;gap:8px;position:relative;}
  .is-sidebar-collapsed .ui-nav-group small{opacity:0;width:0;height:0;overflow:hidden;padding:0;margin:0;}
  .is-sidebar-collapsed .ui-nav-link{
    width:54px;
    min-height:52px;
    padding:0;
    justify-content:center;
    border-radius:18px;
    gap:0;
  }
  .is-sidebar-collapsed .ui-nav-link span{opacity:0;width:0;max-width:0;overflow:hidden;transform:translateX(8px);}
  .is-sidebar-collapsed .ui-nav-link::after{
    content:attr(data-tooltip);
    position:absolute;
    inset-inline-end:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) scale(.98);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    background:var(--ui-heading);
    color:var(--ui-surface);
    border-radius:12px;
    padding:8px 11px;
    font-size:12px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(15,23,42,.16);
    z-index:300;
  }
  .is-sidebar-collapsed .ui-nav-link:hover::after,.is-sidebar-collapsed .ui-nav-link:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1);}
  .is-sidebar-collapsed .ui-sidebar-backdrop{display:none!important;}
}
@media (max-width:1180px){
  .ui-sidebar{width:min(var(--ui-sidebar-expanded),calc(100vw - 24px));transform:translateX(105%);box-shadow:0 24px 60px rgba(15,23,42,.18);}
  .ui-sidebar.is-open{transform:none;}
  .ui-main{margin-right:0!important;}
  .is-sidebar-collapsed .ui-sidebar{width:min(var(--ui-sidebar-expanded),calc(100vw - 24px));}
}
@media (max-width:760px){
  .box-layout-actionbar,.box-actionbar{align-items:stretch;flex-direction:column;}
  .box-actionbar-actions{justify-content:stretch;}
  .box-actionbar-actions .box-btn{flex:1;}
}

/* b.ox v11 — collapsed sidebar icon fix and centering
   The previous collapsed rule hid every span inside .ui-nav-link, including .ui-icon.
   This layer keeps icons visible and hides only text labels. */
@media (min-width:1181px){
  .is-sidebar-collapsed .ui-sidebar{
    width:76px!important;
    padding:14px 10px!important;
    overflow:visible!important;
  }
  .is-sidebar-collapsed .ui-main{margin-right:76px!important;}
  .is-sidebar-collapsed .ui-brand{
    width:52px;
    height:58px;
    min-height:58px;
    margin-inline:auto;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:18px!important;
  }
  .is-sidebar-collapsed .ui-brand>span{
    opacity:1!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    display:grid!important;
    place-items:center!important;
    transform:none!important;
    font-size:12px;
  }
  .is-sidebar-collapsed .ui-brand strong{display:none!important;}
  .is-sidebar-collapsed .ui-nav-scroll{
    align-items:center!important;
    gap:10px!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
    padding:2px 0 8px!important;
  }
  .is-sidebar-collapsed .ui-nav-scroll [data-main-nav]{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .is-sidebar-collapsed .ui-nav-group{
    width:100%;
    align-items:center!important;
    gap:8px!important;
  }
  .is-sidebar-collapsed .ui-nav-group small{display:none!important;}
  .is-sidebar-collapsed .ui-nav-link{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    padding:0!important;
    margin:0 auto!important;
    display:grid!important;
    place-items:center!important;
    gap:0!important;
    overflow:visible!important;
    border-radius:18px!important;
    color:var(--ui-muted)!important;
  }
  .is-sidebar-collapsed .ui-nav-link.is-active{
    color:var(--ui-primary)!important;
    background:var(--ui-primary-soft)!important;
  }
  .is-sidebar-collapsed .ui-nav-link .ui-icon{
    opacity:1!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    transform:none!important;
    color:currentColor!important;
  }
  .is-sidebar-collapsed .ui-nav-link .ui-icon svg{
    width:22px!important;
    height:22px!important;
    display:block!important;
    opacity:1!important;
    stroke:currentColor!important;
  }
  .is-sidebar-collapsed .ui-nav-link > span:not(.ui-icon){
    display:none!important;
  }
  .is-sidebar-collapsed .ui-nav-link::after{
    inset-inline-end:calc(100% + 10px)!important;
    z-index:999!important;
  }
}

/* b.ox v12 Core Topbar System — single source for topbar icons/buttons/dropdowns/search */
:root{
  --ui-topbar-icon-size:44px;
  --ui-topbar-menu-width:240px;
  --ui-topbar-search-width:clamp(220px,28vw,430px);
}
.box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(220px,var(--ui-topbar-search-width)) auto;
  align-items:center;
  gap:12px;
  color:var(--ui-text);
}
.box-topbar-start{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;}
.box-layout-topbar .ui-page-title,.ui-topbar .ui-page-title{margin-inline-end:0;min-width:0;}
.box-layout-topbar .ui-page-title h1,.ui-topbar .ui-page-title h1{color:var(--ui-heading);font-size:clamp(17px,1.8vw,var(--ui-font-size-page));line-height:1.2;}
.box-layout-topbar .ui-page-title p,.ui-topbar .ui-page-title p{color:var(--ui-muted);font-size:var(--ui-font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;}
.box-layout-top-actions,.ui-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.box-topbar-icon-btn,.box-layout-topbar .box-icon-btn,.ui-topbar .box-icon-btn{
  width:var(--ui-topbar-icon-size);height:var(--ui-topbar-icon-size);min-width:var(--ui-topbar-icon-size);
  border:1px solid var(--ui-border);border-radius:calc(var(--ui-button-radius) - 2px);
  background:var(--ui-surface);color:var(--ui-text);display:inline-grid;place-items:center;
  cursor:pointer;position:relative;transition:background .18s var(--box-ease),border-color .18s var(--box-ease),color .18s var(--box-ease),transform .18s var(--box-ease);
}
.box-topbar-icon-btn:hover,.box-layout-topbar .box-icon-btn:hover,.ui-topbar .box-icon-btn:hover{background:var(--ui-hover);border-color:color-mix(in srgb,var(--ui-primary) 30%,var(--ui-border));color:var(--ui-primary);transform:translateY(-1px);}
.box-topbar-icon-btn:active{transform:translateY(0);}
.box-topbar-icon-btn svg,.box-layout-topbar .box-icon-btn svg,.ui-topbar .box-icon-btn svg{width:20px;height:20px;display:block;}
.box-layout-toggle{background:var(--ui-primary)!important;color:var(--ui-button-text)!important;border-color:var(--ui-primary)!important;}
.box-layout-toggle:hover{background:color-mix(in srgb,var(--ui-primary) 88%,#000)!important;color:var(--ui-button-text)!important;}
.box-topbar-search{height:var(--ui-topbar-icon-size);min-width:0;width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);border-radius:calc(var(--ui-button-radius) + 2px);background:var(--ui-surface);padding:0 12px;color:var(--ui-muted);}
.box-topbar-search:focus-within{border-color:var(--ui-primary);box-shadow:0 0 0 3px var(--ui-primary-soft);}
.box-topbar-search svg{width:18px;height:18px;flex:0 0 auto;}
.box-topbar-search input{border:0;background:transparent;min-height:40px;padding:0;outline:none;color:var(--ui-text);flex:1;min-width:0;}
.box-topbar-search button{height:32px;padding:0 12px;border-radius:999px;background:var(--ui-secondary-button-bg);color:var(--ui-secondary-button-text);font-weight:900;cursor:pointer;}
.box-topbar-search button:hover{background:var(--ui-primary-soft);color:var(--ui-primary);}
.box-topbar-dropdown,.box-topbar-profile{position:relative;display:inline-flex;min-width:0;}
.box-topbar-dropdown>summary,.box-topbar-profile>summary{list-style:none;}
.box-topbar-dropdown>summary::-webkit-details-marker,.box-topbar-profile>summary::-webkit-details-marker{display:none;}
.box-topbar-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:var(--ui-topbar-menu-width);max-width:calc(100vw - 24px);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:18px;padding:8px;box-shadow:0 18px 45px rgba(15,23,42,.12);z-index:120;display:grid;gap:4px;}
html[data-theme="dark"] .box-topbar-menu{box-shadow:0 20px 50px rgba(0,0,0,.35);}
.box-topbar-menu a{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 10px;border-radius:12px;color:var(--ui-text);font-weight:850;text-decoration:none;}
.box-topbar-menu a:hover{background:var(--ui-hover);color:var(--ui-primary);}
.box-topbar-menu a.danger{color:var(--ui-danger);}
.box-topbar-menu svg{width:18px;height:18px;flex:0 0 auto;}
.box-user-chip,.ui-user-chip{height:var(--ui-topbar-icon-size);min-width:0;display:flex;align-items:center;gap:10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-text);padding:4px 5px 4px 12px;cursor:pointer;max-width:280px;}
.box-user-chip:hover,.ui-user-chip:hover{background:var(--ui-hover);border-color:color-mix(in srgb,var(--ui-primary) 28%,var(--ui-border));}
.box-user-chip-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;text-align:start;}
.box-user-chip-text b{font-size:var(--ui-font-size-sm);color:var(--ui-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
.box-user-chip-text small{font-size:var(--ui-font-size-xs);color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
.ui-avatar.topbar{width:36px;height:36px;min-width:36px;border-radius:50%;display:grid;place-items:center;background:var(--ui-primary-soft);color:var(--ui-primary);font-weight:950;overflow:hidden;}
.ui-avatar.topbar img{width:100%;height:100%;object-fit:cover;display:block;}
.box-action-badge{position:absolute;top:-5px;inset-inline-start:-5px;transform:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--ui-danger);color:#fff;font-size:10px;font-weight:950;display:grid;place-items:center;border:2px solid var(--ui-surface);}
.box-topbar-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
body[dir="rtl"] .box-topbar-menu{right:auto;left:0;}
@media (max-width:1080px){
  .box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{grid-template-columns:minmax(160px,1fr) auto;}
  .box-topbar-search{display:none;}
  .box-layout-topbar .ui-page-title p,.ui-topbar .ui-page-title p{max-width:38vw;}
}
@media (max-width:760px){
  .box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{grid-template-columns:1fr auto;padding-inline:12px;height:var(--ui-topbar);}
  .box-topbar-start{gap:8px;}
  .box-layout-topbar .ui-page-title h1,.ui-topbar .ui-page-title h1{font-size:17px;}
  .box-layout-topbar .ui-page-title p,.ui-topbar .ui-page-title p{display:none;}
  .box-topbar-icon-btn,.box-layout-topbar .box-icon-btn,.ui-topbar .box-icon-btn{--ui-topbar-icon-size:40px;border-radius:13px;}
  .box-layout-top-actions,.ui-top-actions{gap:6px;}
  .box-topbar-dropdown{display:none;}
  .box-user-chip,.ui-user-chip{width:40px;min-width:40px;padding:2px;justify-content:center;border-radius:13px;}
  .box-user-chip-text{display:none;}
  .box-topbar-profile .box-topbar-menu{position:fixed;top:calc(var(--ui-topbar) + 8px);inset-inline:12px;width:auto;max-width:none;}
}
@media (max-width:480px){
  .box-layout-top-actions .box-topbar-icon-btn:nth-of-type(n+3){display:none;}
  .box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{gap:8px;}
}

/* b.ox v14 Core Topbar + Context Bar System
   Topbar ثابت: البحث الرئيسي + الحساب + الإشعارات.
   Contextbar ثابت تحت Topbar: أزرار القسم فقط بدون بحث وبدون عناصر زائدة. */
:root{
  --ui-contextbar:62px;
  --ui-sticky-bars:calc(var(--ui-topbar) + var(--ui-contextbar));
}
.box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{
  grid-template-columns:minmax(220px,1fr) minmax(240px,var(--ui-topbar-search-width)) auto;
  border-bottom:1px solid var(--ui-border);
  box-shadow:0 1px 0 var(--ui-border);
  position:sticky;
  top:0;
  z-index:70;
}
.box-layout-topbar[data-topbar-system="core"] .box-topbar-dropdown{display:none!important;}
.box-contextbar{
  position:sticky;
  top:var(--ui-topbar);
  z-index:65;
  min-height:var(--ui-contextbar);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:9px var(--ui-content-padding);
  background:color-mix(in srgb,var(--ui-bg) 94%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ui-border);
  box-shadow:0 1px 0 var(--ui-border);
}
.box-contextbar-actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.box-context-action{min-height:40px;white-space:nowrap;}
.box-context-action svg{width:17px;height:17px;flex:0 0 auto;}
.box-layout-content,.ui-content{padding-top:var(--ui-content-padding);}
@media (max-width:1080px){
  .box-contextbar-actions{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:thin;}
  .box-context-action{flex:0 0 auto;}
}
@media (max-width:760px){
  :root{--ui-contextbar:58px;}
  .box-layout-topbar[data-topbar-system="core"],.ui-topbar[data-topbar-system="core"]{grid-template-columns:1fr auto;}
  .box-contextbar{top:var(--ui-topbar);padding:8px 12px;}
  .box-contextbar-actions{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;}
  .box-context-action{width:auto!important;flex:0 0 auto;}
  .box-context-action span{display:inline;}
}
@media (max-width:480px){
  .box-topbar-search{display:none;}
  .box-context-action span{display:none;}
  .box-context-action{width:42px!important;height:42px;min-width:42px;padding-inline:0;display:inline-grid;place-items:center;}
}

/* b.ox v15 — fixed shell bars
   Topbar + Context Bar must stay pinned to the viewport, independent from content scrolling. */
:root{
  --ui-fixed-topbar:var(--ui-topbar,76px);
  --ui-fixed-contextbar:var(--ui-contextbar,62px);
  --ui-fixed-bars:calc(var(--ui-fixed-topbar) + var(--ui-fixed-contextbar));
}
@media (min-width:1181px){
  .box-layout-topbar[data-topbar-system="core"],
  .ui-topbar[data-topbar-system="core"]{
    position:fixed!important;
    top:0!important;
    right:var(--ui-sidebar-expanded)!important;
    left:0!important;
    height:var(--ui-fixed-topbar)!important;
    z-index:180!important;
    background:color-mix(in srgb,var(--ui-bg) 96%,transparent)!important;
  }
  .box-contextbar{
    position:fixed!important;
    top:var(--ui-fixed-topbar)!important;
    right:var(--ui-sidebar-expanded)!important;
    left:0!important;
    height:var(--ui-fixed-contextbar)!important;
    min-height:var(--ui-fixed-contextbar)!important;
    z-index:170!important;
    background:color-mix(in srgb,var(--ui-bg) 96%,transparent)!important;
  }
  .box-layout-content,.ui-content{
    padding-top:calc(var(--ui-fixed-bars) + var(--ui-content-padding))!important;
  }
  .is-sidebar-collapsed .box-layout-topbar[data-topbar-system="core"],
  .is-sidebar-collapsed .ui-topbar[data-topbar-system="core"],
  .is-sidebar-collapsed .box-contextbar{
    right:76px!important;
  }
}
@media (max-width:1180px){
  .box-layout-topbar[data-topbar-system="core"],
  .ui-topbar[data-topbar-system="core"]{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    height:var(--ui-fixed-topbar)!important;
    z-index:180!important;
    background:color-mix(in srgb,var(--ui-bg) 96%,transparent)!important;
  }
  .box-contextbar{
    position:fixed!important;
    top:var(--ui-fixed-topbar)!important;
    right:0!important;
    left:0!important;
    height:var(--ui-fixed-contextbar)!important;
    min-height:var(--ui-fixed-contextbar)!important;
    z-index:170!important;
    background:color-mix(in srgb,var(--ui-bg) 96%,transparent)!important;
  }
  .box-layout-content,.ui-content{
    padding-top:calc(var(--ui-fixed-bars) + var(--ui-content-padding))!important;
  }
}
@media (max-width:760px){
  :root{--ui-fixed-topbar:64px;--ui-fixed-contextbar:58px;}
}