/*
  Admin Dashboard — EE CP Design System
  Housing Management System
  Reusable components throughout
*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/*
:root{--accent:#3D3D3D;--accent-dark:#4e1f7a;--accent-medium:#c4a0e3;--accent-light:#f0e8f7;--main-bg:#f7f7fb;--bg-blank:#fff;--border:#dfe0ef;--border-dark:#cbcbda;--text:#0d0d19;--text-secondary:#8f90b0;--text-faded:#adaec5;--sb-w:200px;--sb-w-collapsed:59px;--sb-bg:#fff;--sb-text:#8082a5;--sb-text-primary:#0d0d19;--sb-text-active:#3D3D3D;--sb-bg-active:#f7f7fb;--sb-border:#dfe0ef;--sb-title-bg:#fff;--sb-title-border:#dfe0ef;--sec-sb-bg:#ecedf5;--success:#00C571;--success-light:#dffff1;--warning:#FFB40B;--warning-light:#fff6e1;--danger:#FA5252;--danger-light:#fee7e7;--radius:6px;--radius-sm:5px;--shadow-sm:0 2px 2px 0 rgba(0,0,0,.03);--shadow-drop:0 8px 24px rgba(0,0,0,.1);font-family:'M PLUS Rounded 1c',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--text)}

Orginal colors
*/
:root{--accent:#3D3D3D;--accent-dark:#1A1A1A;--accent-medium:#D4D4D0;--accent-light:#F5F5F0;--main-bg:#F5F5F0;--bg-blank:#fff;--border:#D4D4D0;--border-dark:#A0A0A0;--text:#1A1A1A;--text-secondary:#6B6B6B;--text-faded:#A0A0A0;--sb-w:200px;--sb-w-collapsed:59px;--sb-bg:#fff;--sb-text:#6B6B6B;--sb-text-primary:#1A1A1A;--sb-text-active:#3D3D3D;--sb-bg-active:#F5F5F0;--sb-border:#D4D4D0;--sb-title-bg:#fff;--sb-title-border:#D4D4D0;--sec-sb-bg:#D4D4D0;--success:#00C571;--success-light:#dffff1;--warning:#FFB40B;--warning-light:#fff6e1;--danger:#FA5252;--danger-light:#fee7e7;--radius:6px;--radius-sm:5px;--shadow-sm:0 2px 2px 0 rgba(0,0,0,.03);--shadow-drop:0 8px 24px rgba(0,0,0,.1);font-family:'M PLUS Rounded 1c',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--text)}
[dir="rtl"]{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
[data-theme="dark"]{--main-bg:#121212;--bg-blank:#1a1a1a;--border:#2a2a2a;--border-dark:#383838;--text:#dedede;--text-secondary:#6b6b6b;--text-faded:#525252;--sb-bg:#1f1f1f;--sb-text:#9e9e9e;--sb-text-primary:#fff;--sb-text-active:#fff;--sb-bg-active:#121212;--sb-border:#1f1f1f;--sb-title-bg:#292929;--sb-title-border:#292929;--sec-sb-bg:#1f1f1f;--accent-light:rgba(98,41,152,.25);--shadow-drop:0 8px 24px rgba(0,0,0,.5)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--main-bg);display:flex;min-height:100vh;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-dark)}
img{max-width:100%;display:block}::selection{background:var(--accent-light)}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sidebar{width:var(--sb-w);min-height:100vh;flex-shrink:0;z-index:100;background:var(--sb-bg);border-right:1px solid var(--sb-border);display:flex;flex-direction:column;transition:width .2s ease;overflow:visible;padding-bottom:60px}
[dir="rtl"] #sidebar{left:auto;right:0;border-right:none;border-left:1px solid var(--sb-border)}
.sb-title{display:flex;align-items:center;gap:10px;padding:0 20px;height:70px;min-height:70px;background:var(--sb-title-bg);border-bottom:1px solid var(--sb-title-border);box-shadow:var(--shadow-sm);margin-bottom:20px;color:var(--sb-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;cursor:pointer;flex-shrink:0}
.sb-title:hover{color:var(--sb-text-primary)}.sb-title .sb-icon{width:16px;height:16px;flex-shrink:0}
.sb-section{text-transform:uppercase;letter-spacing:1px;font-size:85%;color:var(--sb-text);opacity:.6;font-weight:500;padding:12px 20px 6px;display:block}
.sb-item{display:block;height:35px;line-height:35px;padding:0 20px;margin:0 7px 2px;border-radius:var(--radius-sm);color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:background .2s,color .2s}
.sb-item i,.sb-item .sb-ico{margin-right:10px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}
[dir="rtl"] .sb-item i,[dir="rtl"] .sb-item .sb-ico{margin-right:0;margin-left:10px}
.sb-item:hover,.sb-item.active{background:var(--sb-bg-active);color:var(--sb-text-active)}
.sb-bottom{position:fixed;bottom:0;left:0;width:var(--sb-w);z-index:101;background:var(--sb-bg);border-top:1px solid var(--sb-border);border-right:1px solid var(--sb-border);transition:width .2s ease}
[dir="rtl"] .sb-bottom{left:auto;right:0;border-right:none;border-left:1px solid var(--sb-border)}
.sb-bottom-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 20px;cursor:pointer;background:none;border:none;color:var(--sb-text);font-size:.82rem;font-family:inherit;transition:background .15s,color .15s}
.sb-bottom-btn:hover{background:var(--sb-bg-active);color:var(--sb-text-active)}
.sb-bottom-btn .sb-onyx-logo{width:18px;height:18px;flex-shrink:0;opacity:.7}
.sb-bottom-btn .sb-bottom-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[dir="rtl"] .sb-bottom-btn .sb-bottom-label{text-align:right}
.sb-bottom-btn .sb-bottom-chevron{width:12px;height:12px;opacity:.4;transition:transform .2s}
.sb-popup{display:none;position:absolute;bottom:100%;left:8px;width:280px;background:var(--sb-bg);border:1px solid var(--sb-border);border-radius:var(--radius);box-shadow:0 -4px 24px rgba(0,0,0,.15);overflow:hidden;margin-bottom:6px}
[data-theme="dark"] .sb-popup{box-shadow:0 -4px 24px rgba(0,0,0,.5)}
[dir="rtl"] .sb-popup{left:auto;right:8px}
[data-theme="dark"] .sb-popup{box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.sb-popup.open{display:block}
.sb-popup-header{padding:14px 16px;border-bottom:1px solid var(--sb-border);display:flex;align-items:center;justify-content:space-between}
.sb-popup-title{font-weight:600;font-size:.9rem;color:var(--sb-text-primary)}
.sb-popup-ver{font-size:.75rem;color:var(--sb-text)}
.sb-popup-links{padding:6px 0}
.sb-popup-link{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--sb-text);font-size:.83rem;text-decoration:none;transition:background .12s,color .12s}
.sb-popup-link:hover{background:var(--sb-bg-active);color:var(--sb-text-active)}
.sb-popup-link i{width:16px;height:16px;opacity:.5}
.sb-popup-link:hover i{opacity:1}
    
.sb-popup-status{padding:10px 16px;background: #622998;color: #ffffff;font-size:.78rem;font-weight:500;text-align:center;letter-spacing:.3px;border-top:1px solid var(--sb-border)}
.sb-badge{display:inline-block;padding:1px 8px;border-radius:50px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;margin-left:4px;vertical-align:middle}

/* Collapsed */
body.sb-collapsed #sidebar{width:var(--sb-w-collapsed)}
body.sb-collapsed .sb-title span{display:none}body.sb-collapsed .sb-title{justify-content:center;padding:0}
body.sb-collapsed .sb-section{display:none}
body.sb-collapsed .sb-item{text-overflow:inherit;border-radius:0;margin:0;text-align:center;padding:0}
body.sb-collapsed .sb-item i,body.sb-collapsed .sb-item .sb-ico{margin:0}
body.sb-collapsed .sb-item span{display:none}
body.sb-collapsed .sb-bottom{width:var(--sb-w-collapsed)}
body.sb-collapsed .sb-bottom-btn .sb-bottom-label,body.sb-collapsed .sb-bottom-btn .sb-bottom-chevron,body.sb-collapsed .sb-badge{display:none}
body.sb-collapsed .sb-bottom-btn{justify-content:center;padding:10px}
body.sb-collapsed .sb-popup{min-width:240px}
body.sb-collapsed .sb-item{position:relative}
body.sb-collapsed .sb-item::after{content:attr(title);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--text);color:var(--bg-blank);padding:3px 10px;border-radius:var(--radius-sm);font-size:.72rem;white-space:nowrap;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .12s;z-index:200}
[dir="rtl"] body.sb-collapsed .sb-item::after{left:auto;right:calc(100% + 8px)}
body.sb-collapsed .sb-item:hover::after{opacity:1}

.sb-toggle{width:26px;height:26px;position:fixed;top:22px;left:calc(var(--sb-w) - 13px);z-index:110;cursor:pointer;border-radius:1000px;color:var(--sb-text);background:var(--sb-bg);border:1px solid var(--sb-border);box-shadow:0 1px 2px 0 rgba(0,0,0,.06);font-size:12px;display:none;align-items:center;justify-content:center;padding:0;transition:left .2s ease}
[dir="rtl"] .sb-toggle{left:auto;right:calc(var(--sb-w) - 13px);transition:right .2s ease}
.sb-toggle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#sidebar:hover ~ .sb-toggle,.sb-toggle:hover{display:flex}
body.sb-collapsed .sb-toggle{display:flex!important;left:calc(var(--sb-w-collapsed) - 13px)}
[dir="rtl"] body.sb-collapsed .sb-toggle{left:auto;right:calc(var(--sb-w-collapsed) - 13px)}
body.sb-collapsed .sb-toggle .chevron{transform:translate(-50%,-50%) rotate(180deg)}
[dir="rtl"] .sb-toggle .chevron{transform:translate(-50%,-50%) rotate(180deg)}
[dir="rtl"] body.sb-collapsed .sb-toggle .chevron{transform:translate(-50%,-50%) rotate(0deg)}
@media(max-width:999px){.sb-toggle{display:none!important}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN + TOPBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main{flex:1;min-height:100vh;display:flex;flex-direction:column;transition:margin .2s ease}
#topbar{height:70px;min-height:70px;display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 20px 0 30px;box-shadow:var(--shadow-sm);background:var(--main-bg);top:0;z-index:50}
.tb-breadcrumb{flex:1;min-width:0;display:flex;align-items:center;gap:6px;margin-left:-3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[dir="rtl"] .tb-breadcrumb{margin-left:0;margin-right:-3px}
.tb-breadcrumb a{color:var(--text-secondary);display:flex;align-items:center}.tb-breadcrumb a:hover{color:var(--accent)}
.tb-breadcrumb .sep{color:var(--text-faded);font-size:.99em;padding:0 15px;}
.tb-breadcrumb .current{color:var(--text);font-weight:400;text-transform:uppercase;font-size:.85rem;letter-spacing:.03em}
.tb-jump{position:absolute;top:13px;right:82px}[dir="rtl"] .tb-jump{right:auto;left:82px}
.tb-jump-wrap{position:relative}
.tb-jump input{min-width:400px;height:42px;padding:0 3rem 0 2.2rem;font-family:inherit;font-size:.88rem;color:var(--text);background:var(--accent-medium);border:1px solid transparent;border-radius:1000px;outline:none;transition:all .2s}
.tb-jump input::placeholder{color:var(--text-faded)}
.tb-jump input:focus{background:var(--bg-blank);border-color:var(--border);box-shadow:0 3px 6px -3px rgba(0,0,0,.08)}
.tb-jump .j-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faded);pointer-events:none;display:flex}
[dir="rtl"] .tb-jump .j-icon{left:auto;right:12px}
.tb-jump kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:.7rem;padding:2px 6px;border:1px solid var(--border);border-radius:4px;color:var(--text-faded);background:var(--bg-blank);pointer-events:none}
[dir="rtl"] .tb-jump kbd{right:auto;left:12px}
.tb-account{position:absolute;right:20px;top:13px}[dir="rtl"] .tb-account{right:auto;left:20px}
.tb-avatar-btn{-webkit-appearance:none;appearance:none;width:42px;height:42px;border:none;border-radius:1000px;cursor:pointer;padding:0;background:var(--sec-sb-bg);color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
.tb-avatar-btn:hover{background:var(--border)}
.tb-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;width:240px;background:var(--bg-blank);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-drop);z-index:200;overflow:hidden}
[dir="rtl"] .tb-dropdown{right:auto;left:0}
.tb-dropdown.open{display:block}
.dd-head{padding:16px 18px;border-bottom:1px solid var(--border)}.dd-head strong{display:block;font-size:.95rem}.dd-head small{color:var(--text-secondary);font-size:.8rem}
.dd-link{display:flex;align-items:center;gap:10px;padding:10px 18px;color:var(--text);font-size:.88rem;cursor:pointer;text-decoration:none;transition:background .1s;border:none;background:none;width:100%;font-family:inherit;text-align:left}
[dir="rtl"] .dd-link{text-align:right;direction:rtl}.dd-link:hover{background:var(--main-bg)}
.dd-link svg,.dd-link i[data-lucide]{width:16px;height:16px;color:var(--text-secondary);flex-shrink:0}
.dd-link--danger{color:var(--danger)}.dd-link--danger i,.dd-link--danger svg{color:var(--danger)}
.dd-divider{height:1px;background:var(--border);margin:4px 0}
.dd-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);padding:12px 18px 5px}
.mobile-toggle{display:none;-webkit-appearance:none;appearance:none;border:none;background:none;cursor:pointer;color:var(--text);padding:4px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTENT + PANEL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.content-area{flex:1;padding:30px 30px 40px}
.panel{background:var(--bg-blank);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:20px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-heading h2{font-size:1.1rem;font-weight:700;margin:0}.panel-heading p{font-size:.78rem;color:var(--text-secondary);margin:2px 0 0}
.panel-heading__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.panel-body{padding:20px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS — EE spec sizes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-primary{background:#E2E052;color:#3D3D3D;border-color:#E2E052}
.btn-primary:hover{background:#C8C730;color:#3D3D3D}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:5px;font-family:inherit;font-size:1rem;line-height:1.6;font-weight:500;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s;user-select:none;box-shadow:0 1px 2px 0 rgba(0,0,0,.06)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-default{background:var(--bg-blank);color:var(--text);border-color:var(--border-dark)}.btn-default:hover{background:var(--main-bg)}
.btn-sm{padding:5px 14px;font-size:.82rem;line-height:1.5}
.btn-xsm{padding:2px 8px;font-size:.72rem;line-height:1.4}
.btn.light{background-color: var(--bg-blank);}
/* btn-group + save dropdown */
.btn-group{display:inline-flex;position:relative}
.btn-group .btn{box-shadow:none}
.btn-group .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.btn-caret{padding:8px 12px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:1px solid rgba(255,255,255,.25)}
.save-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:80;min-width:160px;background:var(--bg-blank);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-drop);overflow:hidden}
.save-dropdown.open{display:block}
.sd-link{display:block;width:100%;padding:8px 14px;font-family:inherit;font-size:.82rem;color:var(--text);text-align:left;background:none;border:none;cursor:pointer;transition:background .1s}
.sd-link:hover{background:var(--main-bg)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATUS BADGES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.status{display:inline-block;padding:2px 10px;border-radius:50px;font-size:.7rem;font-weight:600}
.status-open{background:var(--success-light);color:#007945}
.status-closed{background:var(--danger-light);color:#c00}
.status-draft{background:var(--warning-light);color:#be8300}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;padding:10px 16px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);border-bottom:1px solid var(--border);}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:hover{background:var(--main-bg)}.tbl a{color:var(--accent)}.tbl a:hover{text-decoration:underline}
.tbl input[type="checkbox"]{accent-color:var(--accent)}
.tbl-wrap{overflow-x:auto}
.sort-active{font-weight:700;color:var(--text)!important}
.sort-desc::after{content:" ↓";font-size:.7em;opacity:.5}
.sort-asc::after{content:" ↑";font-size:.7em;opacity:.5}
.tbl-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.bulk-wrap{display:flex;align-items:center;gap:6px}
.pg-text{font-size:.78rem;color:var(--text-secondary)}
.pg-info{font-size:.78rem;color:var(--text-secondary);margin-right:8px}
.pagination{list-style:none;display:flex;align-items:center;gap:3px}
.pg-link{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--radius-sm);font-size:.78rem;color:var(--text-secondary);text-decoration:none;border:1px solid var(--border);background:var(--bg-blank);transition:all .12s}
.pg-link:hover{background:var(--main-bg);color:var(--text)}
.pg-link.active,.pg-link.pg-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pg-divider{color:var(--text-faded);font-size:.82rem;padding:0 4px}
.col-check{width:40px;text-align:center}
.cell-muted{color:var(--text-secondary);font-size:.82rem}
.cell-code{font-size:.78rem;padding:2px 6px;background:var(--main-bg);border-radius:3px;color:var(--text-secondary);font-family:'IBM Plex Sans',monospace}
.cell-with-thumb{display:flex;align-items:center;gap:10px}
.cell-thumb{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;border:1px solid var(--border)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER BAR — listing pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.filter-bar__filters{display:flex;flex-wrap:wrap;gap:6px}
.filter-bar__end{display:flex;align-items:center;gap:6px;flex-shrink:0}
.filter-select{padding:6px 28px 6px 10px;font-family:inherit;font-size:.82rem;border:1px solid var(--border-dark);border-radius:var(--radius);color:var(--text);background:var(--bg-blank);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238f90b0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.filter-select:focus{border-color:var(--accent)}
.filter-select--sm{font-size:.75rem;padding:4px 24px 4px 8px}
.filter-select--compact{padding:6px 26px 6px 10px;font-size:.8rem}
.filter-search-wrap{position:relative;display:flex;align-items:center}
.fss-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-faded);pointer-events:none}
.filter-search-input{padding:6px 10px 6px 30px;width:200px;font-family:inherit;font-size:.82rem;color:var(--text);background:var(--bg-blank);border:1px solid var(--border-dark);border-radius:var(--radius);outline:none;transition:border .15s}
.filter-search-input:focus{border-color:var(--accent)}

/* Filter Row (EE DNA — equal-width selects) */
.filter-row{display:flex;align-items:center;gap:8px;padding:10px 20px;flex-wrap:wrap;background: var(--main-bg);}
.filter-row .filter-select{flex:1 1 0;min-width:120px;padding:8px 30px 8px 12px;font-size:.85rem}

/* Search Row (EE DNA) */
.search-row{display:flex;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--border);background: var(--main-bg);}
.search-row__input{flex:1;position:relative;display:flex;align-items:center}
.search-row__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faded);pointer-events:none}
.search-row__field{width:100%;padding:8px 12px 8px 34px;font-family:inherit;font-size:.88rem;color:var(--text);background:var(--bg-blank);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border .15s}
.search-row__field:focus{border-color:var(--accent)}
.search-row__end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.search-row__check{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-blank)}
.search-row__check input{accent-color:var(--accent)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TAB BAR — form pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tab-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 20px;min-height:56px;border-bottom:2px solid var(--border);position:sticky;top:0px;z-index:40;background:var(--bg-blank)}
.tab-bar__tabs{display:flex;gap:0}
.tab-bar__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tab-btn{padding:16px 20px;font-family:inherit;font-size:.92rem;font-weight:500;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Form Separators (Alternative to Tabs) ── */
.onyx-form-separator {
  width: 100%;
  margin: 32px 0 16px 0;
  padding: 5px 25px;
  
  /* لضمان أخذ الفاصل العرض كاملاً في حال كان النموذج يستخدم Grid */
  grid-column: 1 / -1; 
}

.onyx-form-separator h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* إزالة المسافة العلوية إذا كان الفاصل هو أول عنصر في النموذج */
.onyx-form-separator:first-of-type {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   CSS — Sticky Save Buttons Only
   Add to admin-v4.css
   ═══════════════════════════════════════════════════════════ */

.panel-heading__actions.is-floating {
  position: fixed;
  top: -2px;
  right: 28px;
  z-index: 45;
  padding: 8px 14px;

  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s, transform .2s;
}

[dir="rtl"] .panel-heading__actions.is-floating {
  right: auto;
  left: 28px;
}

/* Adjust for sidebar width */
body:not(.sb-collapsed) .panel-heading__actions.is-floating {
  right: 28px;
}

[dir="rtl"] body:not(.sb-collapsed) .panel-heading__actions.is-floating {
  right: auto;
  left: 28px;
}

@media (max-width: 999px) {
  .panel-heading__actions.is-floating {
    right: 16px;
  }
  [dir="rtl"] .panel-heading__actions.is-floating {
    right: auto;
    left: 16px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM FIELDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.field-row{padding:14px 20px;border-bottom:1px solid var(--border);border:none;margin:0}
.field-required .field-instruct label::after{content:" *";color:var(--danger);font-weight:400}
.field-instruct{margin-bottom:6px}
.field-instruct label{display:block;font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:1px}
.field-note{display:block;font-size:.75rem;color:var(--text-secondary);font-style:normal;margin-top:1px}
.field-control{max-width:100%}
.field-control--inline{display:flex;gap:8px}
.form-input,.form-textarea,.form-select{width:100%;padding:10px 14px;font-family:inherit;font-size:.88rem;color:var(--text);background:var(--bg-blank);border:1px solid var(--border-dark);border-radius:var(--radius);outline:none;transition:border .15s,box-shadow .15s}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 3px 6px -3px rgba(98,41,152,.14)}
.form-input[readonly]{background:var(--main-bg);color:var(--text-secondary);cursor:default}
.form-textarea{resize:vertical;line-height:1.6}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f90b0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* Field Grid — w-full / w-half / w-third */
.field-grid{display:flex;flex-wrap:wrap;padding: 15px;}
.field-grid>.field-row{flex:0 0 100%;max-width:100%}
.field-grid>.field-row.w-half{flex:0 0 50%;max-width:50%}
.field-grid>.field-row.w-third{flex:0 0 33.333%;max-width:33.333%}

/* Field group header */
.field-group-header{padding:12px 20px;margin:0;background:var(--main-bg);border-bottom:1px solid var(--border)}
.field-group-header h3{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin:0}

/* Notice block */
.notice{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;margin:20px;border-radius:var(--radius);font-size:.88rem}
.notice-info{background:var(--accent-light);color:var(--accent-dark);border:1px solid var(--accent-medium)}
.notice-info a{color:var(--accent);font-weight:500}
.notice strong{display:block;margin-bottom:2px}
.notice p{margin:0;font-size:.82rem;opacity:.85}

/* Radio / Toggle */
.radio-label{display:flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer;padding:3px 0}
.radio-label input{accent-color:var(--accent)}
.toggle-label{font-size:.82rem;color:var(--text-secondary);margin-left:4px}
.file-chosen{display:flex;align-items:center;gap:14px;padding:10px 14px;margin-bottom:8px;background:var(--main-bg);border:1px solid var(--border);border-radius:var(--radius)}
.file-thumb img{width:100px;height:66px;object-fit:cover;border-radius:var(--radius-sm)}
.file-name{font-size:.85rem;font-weight:500;display:block;margin-bottom:4px}
.file-actions{display:flex;gap:4px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECONDARY SIDEBAR — Enhanced (EE DNA)
   Used in: fields, settings, compound details
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sec-layout{display:flex;align-items:stretch;position:relative;min-height:calc(100vh - 170px)}
.sec-sidebar{flex:0 0 280px;max-width:280px;background:none;overflow-y:auto;overflow-x:hidden;transition:flex .25s ease,max-width .25s ease,opacity .25s ease;position:relative}
.sec-sidebar__inner{padding:16px 0}
.sec-sidebar.sec-collapsed{flex:0 0 0;max-width:0;opacity:0;overflow:hidden;padding:0;border-right:none}

/* Toggle button — circular (EE DNA) */
.sec-sb-toggle{position:absolute;top:16px;z-index:10;width:28px;height:28px;border-radius:1000px;cursor:pointer;background:var(--bg-blank);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;transition:all .25s ease;color:var(--text-secondary);padding:0;font-size:0}
.sec-sb-toggle:hover{background:var(--main-bg);color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sec-sb-toggle svg{width:14px;height:14px;transition:transform .25s ease}
.sec-sidebar:not(.sec-collapsed) ~ .sec-sb-toggle{left:266px}
.sec-sidebar.sec-collapsed ~ .sec-sb-toggle{left:-13px}
.sec-sidebar.sec-collapsed ~ .sec-sb-toggle svg{transform:rotate(180deg)}
.sec-sb-toggle::after{content:"";position:absolute;top:28px;left:50%;width:1px;height:100px;background:linear-gradient(var(--border),transparent);pointer-events:none}
.sec-sidebar.sec-collapsed ~ .sec-sb-toggle::after{display:none}

/* Section title */
.sec-sb-title{display:flex;align-items:center;justify-content:space-between;margin:0;padding:20px 16px 15px;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;font-weight:400;color:var(--sb-text);border-bottom: 1px solid var(--border);}
.sec-sb-title:first-child{padding-top:8px}
.sec-sb-title .btn{margin-left:auto}

/* Links */
.sec-sb-link{display:flex;align-items:center;gap:8px;padding:8px 16px;margin:5px 8px;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);font-size:.88rem;transition:background .1s,color .1s;border-left:3px solid transparent}
.sec-sb-link i,.sec-sb-link svg{color:var(--text-secondary);width:15px;height:15px;flex-shrink:0}
.sec-sb-link:hover{background:var(--accent-medium);color:var(--text)}
.sec-sb-link.active{background:var(--accent-medium);color:var(--accent);font-weight: 500;}
.sec-sb-link.active i,.sec-sb-link.active svg{color:var(--accent)}

/* Folder items (fields page) */
.sec-sb-folder{padding:0;margin:1px 8px;position:relative}
.sec-sb-folder a{display:flex;align-items:center;gap:8px;padding:8px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);font-size:.88rem;transition:background .1s;border-left:3px solid transparent}
.sec-sb-folder a:hover{background:var(--sec-sb-bg)}
.sec-sb-folder a.active{background:var(--sec-sb-bg);color:var(--accent);border-left-color:var(--accent)}
.sec-sb-folder a i,.sec-sb-folder a svg{color:var(--text-secondary);width:15px;height:15px;flex-shrink:0}
.sec-sb-scroll{max-height:calc(100vh - 300px);overflow-y:auto}

/* Main content area */
.sec-content{flex:1 1 0;min-width:0;position:relative}

/* Main nav (page title bar) */
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 30px 16px;gap:12px;flex-wrap:wrap}
.main-nav h1{font-size:1.85rem;font-weight:500;margin:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--main-bg)}
.login-card{width:100%;max-width:400px;background:var(--bg-blank);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,.06);padding:40px 32px}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo h2{font-size:1.4rem;font-weight:700;color:var(--accent)}
.login-logo p{color:var(--text-secondary);font-size:.88rem;margin-top:4px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.82rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
.toggle-wrap{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-wrap input{display:none}
.toggle-track{width:36px;height:20px;background:var(--border-dark);border-radius:50px;position:relative;transition:background .2s}
.toggle-track::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s}
.toggle-wrap input:checked+.toggle-track{background:var(--accent)}
.toggle-wrap input:checked+.toggle-track::after{transform:translateX(16px)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD — Grids, Stats, Charts
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Layout grids */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}

/* Stat cards */
.stat-card{background:var(--bg-blank);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.stat-label{font-size:.78rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.stat-value{font-size:1.8rem;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:6px}
.stat-trend{font-size:.75rem;font-weight:500}
.trend-up{color:var(--success)}
.trend-down{color:var(--danger)}
.trend-flat{color:var(--text-secondary)}

/* Panel head (dashboard variant — no border-bottom padding) */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-head h2{font-size:1.1rem;font-weight:700;margin:0}
.panel-head p{font-size:.78rem;color:var(--text-secondary);margin:2px 0 0}

/* Progress bars */
.progress-wrap{display:flex;align-items:center;gap:10px}
.progress-bar{flex:1;height:8px;background:var(--main-bg);border-radius:50px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:50px;transition:width .4s ease}

/* Activity feed */
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:7px}
.activity-time{font-size:.75rem;color:var(--text-faded);margin-left:8px;white-space:nowrap}



/* ═══════════════════════════════════════════════════════════
   CSS PATCH — CRUD Enhancements
   
   ═══════════════════════════════════════════════════════════ */

/* Field error state */
.field-has-error .form-input,
.field-has-error .form-textarea,
.field-has-error .form-select{border-color:var(--danger);box-shadow:0 0 0 2px rgba(250,82,82,.12)}
.field-error{color:var(--danger);font-size:.75rem;margin-top:4px;font-weight:500}

/* ═══════════════════════════════════════════════════════════════════
   ONYX — Time Picker CSS
   ═══════════════════════════════════════════════════════════════════
   PATCH: أضف في style.css بعد .field-has-error section (سطر ~420)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Time Input ── */
.onyx-time-input {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  background: var(--bg-blank);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  outline: none;
  transition: border .15s, box-shadow .15s;
  /* إزالة السهم الافتراضي للمتصفح في بعض المتصفحات */
  -webkit-appearance: none;
  appearance: none;
}

.onyx-time-input:focus {
  border-color: var(--accent);
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, .12);
}

.onyx-time-input:disabled,
.onyx-time-input[readonly] {
  background: var(--main-bg);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* ── ضبط لون clock icon في المتصفحات المختلفة ── */
.onyx-time-input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  filter: var(--calendar-icon-filter, none);
}
[data-theme="dark"] .onyx-time-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
}

/* ── Error state ── */
.field-has-error .onyx-time-input {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(250, 82, 82, .12);
}

/* ── Hint label (إذا استُخدم options.label) ── */
.onyx-time-hint {
  display: block;
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Time Range في الـ filter row (datatable) ── */
.filter-time-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-time-range input[type="time"] {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-family: inherit;
  font-size: .82rem;
  color: var(--text);
  background: var(--bg-blank);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  outline: none;
}

.filter-time-range input[type="time"]:focus {
  border-color: var(--accent);
}

.filter-time-range .range-sep {
  color: var(--text-faded);
  font-size: .8rem;
  flex-shrink: 0;
  white-space: nowrap;
}

[data-theme="dark"] .filter-time-range input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
}

/* Onyx field wrapper — used by custom_fields loop */
.onyx-field{transition:opacity .2s}
.onyx-field[style*="display: none"]{margin:0;padding:0;border:none}

/* Required mark */
.field-required-mark{color:var(--danger);font-weight:400;margin-right:2px}
[dir="rtl"] .field-required-mark{margin-right:0;margin-left:2px}

/* Native EE fields inside Onyx — scope overrides */
.onyx-field .grid-field{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.onyx-field .grid-field th{background:var(--main-bg);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:8px 12px;border-bottom:1px solid var(--border)}
.onyx-field .grid-field td{padding:8px 12px;border-bottom:1px solid var(--border)}
.onyx-field .grid-field input,.onyx-field .grid-field select,.onyx-field .grid-field textarea{font-family:inherit;font-size:.88rem;padding:8px 12px;border:1px solid var(--border-dark);border-radius:var(--radius);background:var(--bg-blank);color:var(--text);width:100%}
.onyx-field .grid-field input:focus,.onyx-field .grid-field select:focus,.onyx-field .grid-field textarea:focus{border-color:var(--accent);outline:none}

/* Relationship field override */
.onyx-field .relate-wrap{border:1px solid var(--border);border-radius:var(--radius)}
.onyx-field .relate-wrap .list-item{border-color:var(--border);font-family:inherit;font-size:.88rem}

/* File field override */
.onyx-field .file-field-filepicker{font-family:inherit}


/* ═══════════════════════════════════════════════════════════
   CSS PATCH: Error Banner + Inline Errors
   ═══════════════════════════════════════════════════════════ */

/* ── Global Error Banner ── */
.onyx-error-banner {
  position: relative;
  margin: 16px 24px;
  padding: 14px 40px 14px 18px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--danger, #e74c3c);
  border-radius: var(--radius, 6px);
  font-size: .88rem;
  line-height: 1.5;
}
.onyx-error-banner strong {
  display: block;
  color: var(--danger, #e74c3c);
  margin-bottom: 6px;
  font-size: .9rem;
}
.onyx-error-banner ul {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.onyx-error-banner li { padding: 2px 0; }
.onyx-error-banner li::before {
  content: "•";
  color: var(--danger, #e74c3c);
  margin-right: 6px;
  margin-left: 0;
}
.onyx-error-banner .onyx-error-link {
  color: var(--text, #3D3D3D);
  text-decoration: underline;
  text-decoration-color: var(--danger, #e74c3c);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .2s;
}
.onyx-error-banner .onyx-error-link:hover {
  color: var(--danger, #e74c3c);
}
.onyx-error-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted, #888);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.onyx-error-close:hover { color: var(--danger, #e74c3c); }

/* ── RTL ── */
[dir="rtl"] .onyx-error-banner {
  border-left: 1px solid #fecaca;
  border-right: 4px solid var(--danger, #e74c3c);
  padding: 14px 18px 14px 40px;
}
[dir="rtl"] .onyx-error-banner ul { padding: 0 16px 0 0; }
[dir="rtl"] .onyx-error-banner li::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .onyx-error-close { right: auto; left: 12px; }

/* ── Dark Theme ── */
[data-theme="dark"] .onyx-error-banner {
  background: rgba(231, 76, 60, .08);
  border-color: rgba(231, 76, 60, .25);
  border-left-color: var(--danger, #e74c3c);
}
[data-theme="dark"] .onyx-error-banner .onyx-error-link { color: var(--text, #e5e5e5); }
[data-theme="dark"][dir="rtl"] .onyx-error-banner {
  border-left-color: rgba(231, 76, 60, .25);
  border-right-color: var(--danger, #e74c3c);
}


/* Loading state for AJAX */
.is-loading { opacity: 0.5; pointer-events: none; position: relative; }
.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #d1d5db;
    border-top-color: #5b6abf;
    border-radius: 50%;
    animation: onyx-spin .6s linear infinite;
}
@keyframes onyx-spin { to { transform: rotate(360deg); } }


/* Cell actions (view/edit buttons) */
.cell-actions { white-space: nowrap; }
.cell-actions .btn-xs { padding: 0.25rem 0.4rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILE UPLOAD FIELD — Onyx Design System
   Overrides EE native .file_field markup
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container */
.file_field {
  position: relative;
}

/* ── Upload Zone (dropzone style) ── */
.file_field .file_upload .no_file {
  border: 2px dashed var(--border-dark);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  background: var(--main-bg);
  transition: border-color .2s, background .2s;
}
.file_field .file_upload .no_file:hover,
.file_field .file_upload .no_file.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Native file input — styled */
.file_field input[type="file"] {
  width: 100%;
  padding: 10px 0;
  font-family: inherit;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}
.file_field input[type="file"]::file-selector-button {
  padding: 6px 16px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--bg-blank);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  margin-inline-end: 10px;
}
.file_field input[type="file"]::file-selector-button:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Existing File Select (edit mode only) ── */
.file_field .file_existing {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.file_field .file_existing select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  font-family: inherit;
  font-size: .85rem;
  color: var(--text);
  background: var(--bg-blank);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f90b0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border .15s;
}
.file_field .file_existing select:focus {
  border-color: var(--accent);
  box-shadow: 0 3px 6px -3px rgba(98,41,152,.14);
}

/* Hide existing file select in ADD mode */
body.crud-add .file_field .file_existing {
  display: none;
}

/* ── Image Preview (injected by JS) ── */
.file-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--bg-blank);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: fadeIn .2s ease;
}
.file-preview__img {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.file-preview__info {
  flex: 1;
  min-width: 0;
}
.file-preview__name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.file-preview__size {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.file-preview__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 1000px;
  background: var(--danger-light);
  color: var(--danger);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
  padding: 0;
  font-size: 0;
}
.file-preview__remove:hover {
  background: var(--danger);
  color: #fff;
}
.file-preview__remove svg {
  width: 14px;
  height: 14px;
}

/* ── Current File (edit mode — already saved) ── */
.file_field .file_set {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.file_field .file_set .filename {
  flex: 1;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.file_field .file_set .filename br {
  display: none;
}

/* Remove File link → styled as danger button */
.file_field .remove_file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  color: var(--danger);
  background: var(--danger-light);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.file_field .remove_file:hover {
  background: var(--danger);
  color: #fff;
}

/* Undo Remove */
.file_field .undo_remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  color: var(--warning);
  background: var(--warning-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all .15s;
}
.file_field .undo_remove:hover {
  background: var(--warning);
  color: #fff;
}

/* Sub filename area */
.file_field .sub_filename {
  margin: 0;
}

/* ── Hidden by JS (EE native) ── */
.file_field .js_hide {
  display: none !important;
}
/* Show when file is set */
.file_field.has-file .file_set.js_hide {
  display: flex !important;
}
.file_field.has-file .file_upload {
  display: none;
}

/* ── Drag & Drop State ── */
.file_field .no_file.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}
.file_field .no_file.drag-over::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
}

/* ── Non-image file icon placeholder ── */
.file-preview__icon {
  width: 80px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.file-preview__icon svg {
  width: 24px;
  height: 24px;
}

/* ── Validation Error State ── */
.file_field.field-error .file_upload .no_file {
  border-color: var(--danger);
  background: var(--danger-light);
}

/* ── RTL Support ── */
[dir="rtl"] .file_field .file_set {
  direction: rtl;
}
[dir="rtl"] .file-preview {
  direction: rtl;
}
[dir="rtl"] .file_field .file_existing select {
  padding: 8px 12px 8px 30px;
  background-position: left 12px center;
}
[dir="rtl"] .file_field input[type="file"]::file-selector-button {
  margin-inline-end: 10px;
}

/* ── Animation ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RTL — all components
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[dir="rtl"] .main-nav{direction:rtl}
[dir="rtl"] .panel-head{direction:rtl}
[dir="rtl"] .panel-heading{direction:rtl}
[dir="rtl"] .panel-heading__actions{direction:rtl}
[dir="rtl"] .stat-card{text-align:right;direction:rtl}
[dir="rtl"] .progress-wrap{direction:rtl}
[dir="rtl"] .activity-item{direction:rtl}
[dir="rtl"] .activity-time{margin-left:0;margin-right:8px}
[dir="rtl"] .sec-layout{direction:rtl}
[dir="rtl"] .sec-sidebar{border-right:none;}
[dir="rtl"] .sec-sidebar:not(.sec-collapsed) ~ .sec-sb-toggle{left:auto;right:266px}
[dir="rtl"] .sec-sidebar.sec-collapsed ~ .sec-sb-toggle{left:auto;right:-13px}
[dir="rtl"] .sec-sb-toggle svg{transform:rotate(180deg)}
[dir="rtl"] .sec-sidebar.sec-collapsed ~ .sec-sb-toggle svg{transform:rotate(0deg)}
[dir="rtl"] .sec-sb-toggle::after{left:auto;right:50%}
[dir="rtl"] .sec-content{margin-left:0}
[dir="rtl"] .sec-sb-link{border-left:none;border-right:3px solid transparent}
[dir="rtl"] .sec-sb-folder a{border-left:none;border-right:3px solid transparent}
[dir="rtl"] .sec-sb-folder a.active{border-right-color:var(--accent)}
[dir="rtl"] .sec-sb-title .btn{margin-left:0;margin-right:auto}
[dir="rtl"] .sec-sb-link i,[dir="rtl"] .sec-sb-link svg{margin:0}
[dir="rtl"] .sec-sb-folder a i,[dir="rtl"] .sec-sb-folder a svg{margin:0}
[dir="rtl"] .dd-link{direction:rtl;text-align:right}
[dir="rtl"] .dd-head{text-align:right}
[dir="rtl"] .dd-label{text-align:right}
[dir="rtl"] .tbl th{text-align:right}
[dir="rtl"] .tbl td{text-align:right}
[dir="rtl"] .sb-section{text-align:right}
[dir="rtl"] .sb-item{direction:rtl;text-align:right}
[dir="rtl"] .sb-title{direction:rtl}
[dir="rtl"] .filter-bar{direction:rtl}
[dir="rtl"] .filter-select{padding:6px 10px 6px 28px;background-position:left 8px center}
[dir="rtl"] .filter-row{direction:rtl}
[dir="rtl"] .filter-row .filter-select{padding:8px 12px 8px 30px}
[dir="rtl"] .fss-icon{left:auto;right:10px}
[dir="rtl"] .filter-search-input{padding:6px 30px 6px 10px}
[dir="rtl"] .search-row{direction:rtl}
[dir="rtl"] .search-row__icon{left:auto;right:12px}
[dir="rtl"] .search-row__field{padding:8px 34px 8px 12px}
[dir="rtl"] .search-row__end{direction:rtl}
[dir="rtl"] .field-instruct{direction:rtl;text-align:right}
[dir="rtl"] .field-control{direction:rtl}
[dir="rtl"] .field-grid{direction:rtl}
[dir="rtl"] .form-select{background-position:left 12px center}
[dir="rtl"] .toggle-label{margin-left:0;margin-right:4px}
[dir="rtl"] .tab-bar{direction:rtl}
[dir="rtl"] .tab-bar__actions{direction:rtl}
[dir="rtl"] .tab-bar__actions--scroll{direction:rtl}
/* [dir="rtl"] .btn-group{flex-direction:row-reverse} */
 [dir="rtl"] .btn-group .btn:first-child{border-radius:0 5px 5px 0} 
 [dir="rtl"] .btn-caret{border-radius:5px 0 0 5px;border-left:none;border-right:1px solid rgba(255,255,255,.25)}
[dir="rtl"] .save-dropdown{right:auto;left:0}
[dir="rtl"] .sd-link{text-align:right}
[dir="rtl"] .bulk-wrap{direction:rtl}
[dir="rtl"] .tbl-footer{direction:rtl}
[dir="rtl"] .pg-info{margin-right:0;margin-left:8px}
[dir="rtl"] .file-chosen{direction:rtl}
[dir="rtl"] .cell-with-thumb{direction:rtl}
[dir="rtl"] .pagination{direction:rtl}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:999px){
  #sidebar{transform:translateX(-100%);position:fixed;width:var(--sb-w)!important}
  [dir="rtl"] #sidebar{transform:translateX(100%)}
  #sidebar.mob-open{transform:translateX(0)}
  #main,body.sb-collapsed #main{margin-left:0!important}
  [dir="rtl"] #main,[dir="rtl"] body.sb-collapsed #main{margin-right:0!important}
  .mobile-toggle{display:block}
  .tb-breadcrumb{display:none}
  .tb-jump{position:static}
  .tb-jump input{min-width:200px}
  .tb-account{position:static}
  .content-area,.main-nav{padding-left:20px;padding-right:20px}
  .grid-4{grid-template-columns:1fr 1fr}
  .sec-sidebar{flex:0 0 100%!important;max-width:100%!important;border-right:none;border-bottom:1px solid var(--border)}
  .sec-layout{flex-direction:column}
  .sec-sb-toggle{display:none!important}
  .sec-sidebar.sec-collapsed{display:none}
  .sec-content{margin-left:0!important;margin-right:0!important}
  .main-nav{padding:16px 20px 12px}
  .main-nav h1{font-size:1.2rem}
  .tab-bar{flex-wrap:wrap}
  .tab-bar__actions,.tab-bar__actions--scroll{width:100%;justify-content:flex-end;padding:6px 0}
  .filter-bar__end{width:100%;margin-top:4px}
  .filter-row{gap:6px;padding:8px 16px}
  .filter-row .filter-select{min-width:100px}
  .search-row{flex-wrap:wrap}
  .search-row__end{width:100%;justify-content:flex-end;margin-top:4px}
  .field-grid>.field-row.w-half,
  .field-grid>.field-row.w-third{flex:0 0 100%;max-width:100%}
}
@media(max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .tb-jump input{min-width:150px}
  .tb-jump kbd{display:none}
  .filter-search-input{width:140px}
}

#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:99}
#sidebar-overlay.vis{display:block}


/* ═══════════════════════════════════════════════════════════
   COMPOUND PORTAL
   Append to END of: assets/style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Portal Wrapper — keeps header above sec-layout ── */
.compound-portal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.compound-portal .sec-layout {
  flex: 1;
}

/* ── Header Band ── */
.compound-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 24px;
  background: #F5F5F0;
  border-bottom: 1px solid #e8e8e4;
  flex-shrink: 0;
}
.compound-header__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compound-header__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #3D3D3D;
}
.compound-header__title-ar {
  font-size: 0.9rem;
  color: #888;
}
.compound-header__code {
  font-size: 0.78rem;
  padding: 2px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
}
.compound-header__actions {
  display: flex;
  gap: 8px;
}
.compound-header .btn {
  padding: 5px 12px;
  font-size: 0.82rem;
}

/* ── Sidebar Divider ── */
.sec-sb-divider {
  height: 1px;
  background: #e8e8e4;
  margin: 8px 12px;
}

/* ── Dark ── */
[data-theme="dark"] .compound-header { background: #2a2a2a; border-bottom-color: #444; }
[data-theme="dark"] .compound-header__title { color: #F5F5F0; }
[data-theme="dark"] .compound-header__title-ar { color: #999; }
[data-theme="dark"] .compound-header__code { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .sec-sb-divider { background: #444; }

/* ── RTL ── */
[dir="rtl"] .compound-header { direction: rtl; }

/* ═══════════════════════════════════════════════════════════
   COMPOUND PORTAL
   Append to END of: assets/style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Portal Wrapper ── */
.compound-portal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.compound-portal .sec-layout {
  flex: 1;
}

/* ── Entry Meta in main-nav ── */
.entry-meta__code {
  font-size: 0.78rem;
  padding: 2px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin: 0 8px;
}

/* ── Sidebar Divider ── */
.sec-sb-divider {
  height: 1px;
  background: #e8e8e4;
  margin: 8px 12px;
}

/* ── Dark ── */
[data-theme="dark"] .entry-meta__code { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .sec-sb-divider { background: #444; }

.filter-select[multiple] {
  height: 34px;
  overflow: hidden;
}
.filter-select[multiple]:focus {
  height: auto;
  max-height: 160px;
}


/* ═══════════════════════════════════════════════════════════
   ONYX — Live Search Select Styles
   Add to style.css or relationships_css.css
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.onyx-ls {
  position: relative;
  width: 100%;
}

/* ── Input ── */
.onyx-ls__input {
  width: 100%;
  padding: 12px 70px 12px 12px;
  border: 1px solid var(--border-dark, #ddd);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #3D3D3D;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
}
[dir="rtl"] .onyx-ls__input {
  padding: 12px 12px 12px 70px;
}
.onyx-ls__input:focus {
  border-color: #3D3D3D;
  box-shadow: 0 0 0 2px rgba(61, 61, 61, 0.1);
}
.onyx-ls--open .onyx-ls__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── Clear Button ── */
.onyx-ls__clear {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
[dir="rtl"] .onyx-ls__clear {
  right: auto;
  left: 36px;
}
.onyx-ls__clear:hover {
  background: #eee;
  color: #666;
}

/* ── Search Icon ── */
.onyx-ls__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
[dir="rtl"] .onyx-ls__icon {
  right: auto;
  left: 12px;
}

/* ── Dropdown ── */
.onyx-ls__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #3D3D3D;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: none;
}
.onyx-ls__dropdown--open {
  display: block;
}

/* ── Items ── */
.onyx-ls__item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #f0f0f0;
}
.onyx-ls__item:last-child {
  border-bottom: none;
}
.onyx-ls__item:hover,
.onyx-ls__item--active {
  background: #F5F5F0;
}
.onyx-ls__item--selected {
  background: #F5F5F0;
}
.onyx-ls__item--selected .onyx-ls__item-main::after {
  content: '✓';
  margin-left: 8px;
  color: #3D3D3D;
}
[dir="rtl"] .onyx-ls__item--selected .onyx-ls__item-main::after {
  margin-left: 0;
  margin-right: 8px;
}

/* ── Item Main Line ── */
.onyx-ls__item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #3D3D3D;
  font-weight: 500;
}

/* ── Channel Badge ── */
.onyx-ls__badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: #E2E052;
  color: #3D3D3D;
  border-radius: 3px;
}

/* ── URL Title Code ── */
.onyx-ls__code {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: #888;
  direction: ltr;
}

/* ── Loading & Empty ── */
.onyx-ls__loading,
.onyx-ls__empty {
  padding: 16px 14px;
  font-size: 13px;
  color: #888;
  text-align: center;
}
.onyx-ls__loading {
  font-style: italic;
}

/* ── Dark Theme ── */
[data-theme="dark"] .onyx-ls__input {
  background: #2a2a2a;
  border-color: #555;
  color: #F5F5F0;
}
[data-theme="dark"] .onyx-ls__input:focus {
  border-color: #E2E052;
  box-shadow: 0 0 0 2px rgba(226, 224, 82, 0.15);
}
[data-theme="dark"] .onyx-ls__clear:hover {
  background: #444;
  color: #ccc;
}
[data-theme="dark"] .onyx-ls__dropdown {
  background: #2a2a2a;
  border-color: #E2E052;
}
[data-theme="dark"] .onyx-ls__item {
  border-bottom-color: #444;
}
[data-theme="dark"] .onyx-ls__item:hover,
[data-theme="dark"] .onyx-ls__item--active {
  background: #3a3a2e;
}
[data-theme="dark"] .onyx-ls__item--selected {
  background: #3a3a2e;
}
[data-theme="dark"] .onyx-ls__item-main {
  color: #F5F5F0;
}
[data-theme="dark"] .onyx-ls__code {
  color: #999;
}
[data-theme="dark"] .onyx-ls__loading,
[data-theme="dark"] .onyx-ls__empty {
  color: #999;
}

/* ═══════════════════════════════════════════════════════════
   PATCH: style.css — أضف في نهاية الملف
   Toggle Button (EE native toggle field)
   ═══════════════════════════════════════════════════════════ */

/* ── Toggle Switch ── */
.toggle-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid var(--border-dark);
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
}
.toggle-btn .slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.toggle-btn[data-state="on"],
.toggle-btn[aria-checked="true"] {
  background: var(--accent, #3D3D3D);
  border-color: var(--accent, #3D3D3D);
}
.toggle-btn[data-state="on"] .slider,
.toggle-btn[aria-checked="true"] .slider {
  transform: translateX(20px);
}
[dir="rtl"] .toggle-btn .slider {
  left: auto;
  right: 2px;
}
[dir="rtl"] .toggle-btn[data-state="on"] .slider,
[dir="rtl"] .toggle-btn[aria-checked="true"] .slider {
  transform: translateX(-20px);
}
.toggle-btn .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Dark theme */
[data-theme="dark"] .toggle-btn {
  background: #555;
  border-color: #666;
}
[data-theme="dark"] .toggle-btn[data-state="on"],
[data-theme="dark"] .toggle-btn[aria-checked="true"] {
  background: var(--accent, #E2E052);
  border-color: var(--accent, #E2E052);
}
[data-theme="dark"] .toggle-btn .slider {
  background: #eee;
}

/* ── Enhanced Grid ── */
.onyx-enhanced-grid{width:100%}
.onyx-enhanced-grid .table-responsive{overflow-x:auto}
.onyx-enhanced-grid table.grid-field__table{width:100%;border-collapse:collapse;table-layout:fixed}
.onyx-enhanced-grid table.grid-field__table th{background:var(--main-bg);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;border-bottom:2px solid var(--border);color:var(--text-muted);text-align:start}
.onyx-enhanced-grid table.grid-field__table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.onyx-enhanced-grid table.grid-field__table tr:hover td{background:rgba(226,224,82,.04)}
/* Column widths */
.onyx-enhanced-grid table.grid-field__table th:first-child,
.onyx-enhanced-grid table.grid-field__table td:first-child{width:55%}
.onyx-enhanced-grid table.grid-field__table th:nth-child(2),
.onyx-enhanced-grid table.grid-field__table td:nth-child(2){width:30%}
.onyx-enhanced-grid table.grid-field__table .grid-field__column--tools{width:15%;text-align:center}
/* Select */
.onyx-grid-select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-blank);font-size:.88rem;font-family:inherit;color:var(--text);appearance:auto;-webkit-appearance:auto}
/* Quantity */
.onyx-grid-qty{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-blank);font-size:.88rem;font-family:inherit;color:var(--text);text-align:center}
.onyx-grid-select:focus,.onyx-grid-qty:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(226,224,82,.15)}
/* Error state */
.onyx-grid-error{border-color:#FA5252 !important;box-shadow:0 0 0 3px rgba(250,82,82,.12) !important;animation:onyx-shake .3s}
@keyframes onyx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Remove button */
.onyx-grid-remove{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;cursor:pointer;color:var(--text-muted);transition:all .15s;display:inline-flex;align-items:center;justify-content:center}
.onyx-grid-remove:hover{border-color:#FA5252;color:#FA5252;background:rgba(250,82,82,.06)}
/* Badge */
.onyx-grid-badge{display:inline-block;background:var(--accent);color:var(--accent-light);font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-inline-start:8px;vertical-align:middle}
/* Total bar */
.onyx-grid-total{text-align:end;padding:10px 14px;font-weight:700;font-size:.88rem;border-top:2px solid var(--accent);background:var(--main-bg);color:var(--text);border-radius:0 0 var(--radius) var(--radius)}
/* Footer */
.onyx-enhanced-grid .grid-field__footer{padding:12px 0}
.onyx-enhanced-grid .grid-field__footer .button-group{display:none}
/* Hide no-results */
.onyx-enhanced-grid tr.no-results{display:none !important}
/* Dark theme */
[data-theme="dark"] .onyx-enhanced-grid table.grid-field__table th{background:var(--charcoal)}
[data-theme="dark"] .onyx-enhanced-grid table.grid-field__table tr:hover td{background:rgba(255,255,255,.03)}
[data-theme="dark"] .onyx-grid-remove:hover{background:rgba(250,82,82,.12)}

/* Hide native grid tools before JS enhancement */
.onyx-enhanced-grid .js-grid-reorder-handle{display:none !important}
.onyx-enhanced-grid .grid-field__column-tools .button{display:none}
.onyx-enhanced-grid .grid-field__column-tools .onyx-grid-remove{display:inline-flex}


/* ═══════════════════════════════════════════════════════════
   ONYX — iframe Panel (Reusable)
   Add to end of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.onyx-ip-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;opacity:0;pointer-events:none;transition:opacity .25s ease}
.onyx-ip-overlay.open{opacity:1;pointer-events:auto}

/* ── Panel ── */
.onyx-ip-panel{position:fixed;top:0;right:0;width:640px;max-width:92vw;height:100vh;background:var(--bg-blank);z-index:910;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.15)}
[dir="rtl"] .onyx-ip-panel{right:auto;left:0;transform:translateX(-100%)}
.onyx-ip-panel.open{transform:translateX(0)}
[dir="rtl"] .onyx-ip-panel.open{transform:translateX(0)}

/* ── Header ── */
.onyx-ip-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-dark);flex-shrink:0}
.onyx-ip-title{font-size:1.05rem;font-weight:600;margin:0}
.onyx-ip-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:var(--radius);transition:color .15s}
.onyx-ip-close:hover{color:var(--text)}

/* ── Body ── */
.onyx-ip-body{flex:1;overflow:hidden;position:relative}
.onyx-ip-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-blank)}
.onyx-ip-iframe{width:100%;height:100%;border:none;display:block}

/* ── Items Panel (for WO view Sub Tasks tab) ── */
.panel--items{margin-top:16px}
.panel--items .panel-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.panel--items .panel-heading h3{font-size:1rem;font-weight:600;margin:0}
.panel--items .tbl{width:100%;border-collapse:collapse}
.panel--items .tbl th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--border-dark);text-align:start}
.panel--items .tbl td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.panel--items .tbl tr:hover{background:var(--bg-hover)}
.panel--items .woi-cat{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:500}
.panel--items .woi-cat--checklist{background:rgba(226,224,82,.15);color:var(--accent)}
.panel--items .woi-cat--part{background:rgba(34,139,230,.12);color:#228BE6}
.panel--items .woi-actions button{background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--radius);color:var(--muted);transition:color .15s,background .15s}
.panel--items .woi-actions button:hover{color:var(--text);background:var(--bg-hover)}

/* ── Dark theme ── */
[data-theme="dark"] .onyx-ip-panel{background:var(--bg-card);box-shadow:-4px 0 24px rgba(0,0,0,.4)}
[data-theme="dark"] .onyx-ip-overlay{background:rgba(0,0,0,.6)}
[data-theme="dark"] .onyx-ip-loading{background:var(--bg-card)}




/* ═══════════════════════════════════════════════════════════
   ONYX — View Mode + Revisions Styles
   ═══════════════════════════════════════════════════════════ */

/* ── View Mode ── */
.field-row.view-mode .field-control { font-size: 14px; line-height: 1.5; padding-top: 2px; }
.view-grid .field-row.view-last { border-bottom: none !important; }
.panel-heading h2 [class^="st-"] { font-size: 12px; vertical-align: middle; margin-inline-start: 8px; }

.view-val { display: inline; }
.view-empty { color: #ccc; }

.view-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text, #3D3D3D); text-decoration: none; transition: color 0.15s; }
.view-link:hover { color: #000; text-decoration: underline; }
.view-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.5; }

.view-thumb { display: inline-block; border-radius: 6px; overflow: hidden; border: 1px solid var(--border, #e8e8e4); transition: box-shadow 0.2s; }
.view-thumb:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.view-thumb img { display: block; max-width: 160px; max-height: 100px; object-fit: cover; }

.view-code { display: inline-block; padding: 2px 10px; font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; font-size: 13px; background: var(--bg-alt, #f5f5f0); border: 1px solid var(--border, #e8e8e4); border-radius: 4px; letter-spacing: 0.03em; }

.view-badge { display: inline-flex; padding: 2px 10px; font-size: 12px; font-weight: 500; background: var(--bg-alt, #f5f5f0); border: 1px solid var(--border, #e8e8e4); border-radius: 4px; margin-inline-end: 4px; }

.view-toggle { display: inline-flex; padding: 2px 12px; font-size: 12px; font-weight: 500; border-radius: 20px; }
.view-toggle--on  { background: #e8f5e9; color: #2e7d32; }
.view-toggle--off { background: var(--bg-alt, #f5f5f0); color: #999; }

.view-longtext { padding: 10px 14px; background: var(--bg-alt, #fafaf8); border-radius: 6px; border: 1px solid var(--border, #f0f0ec); line-height: 1.7; }
.view-richtext { line-height: 1.7; }
.view-richtext p { margin: 0 0 10px; }
.view-richtext img { max-width: 100%; height: auto; border-radius: 6px; }

.view-table-wrap { overflow-x: auto; border-radius: 6px; border: 1px solid var(--border, #e8e8e4); }
.view-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.view-table td { padding: 8px 12px; border-bottom: 1px solid var(--border, #f0f0ec); }
.view-table tr:last-child td { border-bottom: none; }
.view-table tr:nth-child(even) { background: var(--bg-alt, #fafaf8); }

.view-meta { display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-top: 1px solid var(--border, #e8e8e4); font-size: 11px; color: #999; }
.view-meta span { display: inline-flex; align-items: center; gap: 4px; }
.view-meta svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════
   REVISIONS
   ═══════════════════════════════════════════════════════════ */
.rev-section { padding: 0; }

/* ── Diff Panel ── */
.rev-diff-panel { min-height: 80px; position: relative; }
.rev-diff-loading {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0; background: rgba(255,255,255,0.8); z-index: 2;
}
.rev-spinner {
  width: 24px; height: 24px; border: 3px solid #e8e8e4;
  border-top-color: #3D3D3D; border-radius: 50%;
  animation: rev-spin 0.6s linear infinite;
}
@keyframes rev-spin { to { transform: rotate(360deg); } }

.rev-diff { margin: 16px 20px; border: 1px solid var(--border, #e8e8e4); border-radius: 8px; overflow: hidden; }
.rev-diff--empty, .rev-diff--hint, .rev-diff--error {
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 20px; text-align: center; color: #888;
}
.rev-diff--empty p, .rev-diff--hint p, .rev-diff--error p { margin: 4px 0 0; font-size: 13px; }
.rev-diff--error p { color: #c62828; }

.rev-diff__header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--bg-alt, #f9f9f6);
  border-bottom: 1px solid var(--border, #e8e8e4);
  font-size: 13px; font-weight: 500; color: var(--text, #3D3D3D);
}
.rev-diff__count {
  margin-inline-start: auto; font-size: 11px; font-weight: 600;
  color: #e65100; background: #fff3e0; padding: 2px 8px; border-radius: 10px;
}

.rev-diff__row { padding: 12px 16px; border-bottom: 1px solid var(--border, #f0f0ec); }
.rev-diff__row:last-child { border-bottom: none; }

.rev-diff__label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: #999; margin-bottom: 6px;
}
.rev-diff__values { display: flex; flex-direction: column; gap: 4px; }

.rev-diff__old, .rev-diff__new {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 6px 10px; border-radius: 4px;
  line-height: 1.5; word-break: break-word;
}
.rev-diff__old { background: #fce4ec; color: #b71c1c; text-decoration: line-through; }
.rev-diff__old.rev-diff__empty { background: none; color: #ccc; text-decoration: none; }
.rev-diff__new { background: #e8f5e9; color: #1b5e20; }

.rev-diff__tag {
  display: inline-flex; padding: 1px 6px; font-size: 10px; font-weight: 600;
  border-radius: 3px; flex-shrink: 0; text-transform: uppercase;
  letter-spacing: 0.03em; text-decoration: none;
}
.rev-diff__tag--old { background: #ef9a9a; color: #b71c1c; }
.rev-diff__tag--new { background: #a5d6a7; color: #1b5e20; }

.rev-diff__meta {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 20px; font-size: 11px; color: #999;
}

/* ── Timeline ── */
.rev-timeline { padding: 16px 20px; border-top: 1px solid var(--border, #e8e8e4); }
.rev-timeline__header {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: #999; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border, #f0f0ec);
}

.rev-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  transition: background 0.12s;
  background-color: var(--accent-light);
  position: relative;
  margin:10px 0;
}
.rev-item:last-child { border-bottom: none; }
.rev-item:hover { background: var(--bg-alt, #fafaf8); }
.rev-item.rev-latest { background: #f0faf0; border: 1px solid #c8e6c9; margin-bottom: 4px; }

/* Clickable revisions */
.rev-item.rev-clickable { cursor: pointer; }
.rev-item.rev-clickable:hover { background: #f5f5ff; }
.rev-item.rev-active { background: #e8eaf6; border-color: #7986cb; }

.rev-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.rev-latest .rev-dot { background: #4caf50; box-shadow: 0 0 0 3px rgba(76,175,80,0.2); }
.rev-active .rev-dot { background: #3f51b5; box-shadow: 0 0 0 3px rgba(63,81,181,0.2); }

.rev-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-alt, #f0f0ec); display: flex; align-items: center; justify-content: center; }
.rev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rev-initial { font-size: 13px; font-weight: 600; color: #888; }

.rev-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rev-name { font-size: 13px; font-weight: 500; color: var(--text, #3D3D3D); }
.rev-date { font-size: 11px; color: #999; }

.rev-current { display: inline-flex; padding: 2px 10px; font-size: 11px; font-weight: 600; background: #e8f5e9; color: #2e7d32; border-radius: 12px; flex-shrink: 0; }
.rev-version { display: inline-flex; padding: 2px 8px; font-size: 11px; color: #999; background: var(--bg-alt, #f5f5f0); border-radius: 10px; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; }

.rev-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; color: #999; }
.rev-empty p { margin: 0; font-size: 14px; }

/* ── Dark Theme ── */
[data-theme="dark"] .rev-diff { border-color: #444; }
[data-theme="dark"] .rev-diff__header { background: #333; border-color: #444; color: #F5F5F0; }
[data-theme="dark"] .rev-diff__count { background: #4a3000; color: #ffb74d; }
[data-theme="dark"] .rev-diff__row { border-color: #3a3a3a; }
[data-theme="dark"] .rev-diff__label { color: #777; }
[data-theme="dark"] .rev-diff__old { background: #3a1a1a; color: #ef9a9a; }
[data-theme="dark"] .rev-diff__new { background: #1a3a1a; color: #a5d6a7; }
[data-theme="dark"] .rev-diff__tag--old { background: #5a2020; color: #ef9a9a; }
[data-theme="dark"] .rev-diff__tag--new { background: #1a4a1a; color: #a5d6a7; }
[data-theme="dark"] .rev-diff-loading { background: rgba(42,42,42,0.8); }
[data-theme="dark"] .rev-spinner { border-color: #444; border-top-color: #E2E052; }
[data-theme="dark"] .rev-timeline { border-color: #444; }
[data-theme="dark"] .rev-timeline__header { color: #777; border-color: #3a3a3a; }
[data-theme="dark"] .rev-item { border-color: #3a3a3a; }
[data-theme="dark"] .rev-item:hover { background: #333; }
[data-theme="dark"] .rev-item.rev-latest { background: #2a3a2a; border-color: #4a6a4a; }
[data-theme="dark"] .rev-item.rev-clickable:hover { background: #2a2a3a; }
[data-theme="dark"] .rev-item.rev-active { background: #2a2a4a; border-color: #5c6bc0; }
[data-theme="dark"] .rev-active .rev-dot { background: #7986cb; }
[data-theme="dark"] .rev-name { color: #F5F5F0; }
[data-theme="dark"] .rev-current { background: #2a3a2a; color: #81c784; }
[data-theme="dark"] .rev-version { background: #333; color: #888; }
[data-theme="dark"] .rev-initial { color: #aaa; }
[data-theme="dark"] .rev-avatar { background: #3a3a3a; }
[data-theme="dark"] .rev-diff__meta { color: #777; }

[data-theme="dark"] .view-code { background: #333; border-color: #444; color: #E2E052; }
[data-theme="dark"] .view-badge { background: #333; border-color: #444; }
[data-theme="dark"] .view-thumb { border-color: #444; }
[data-theme="dark"] .view-longtext { background: #333; border-color: #444; }
[data-theme="dark"] .view-table-wrap { border-color: #444; }
[data-theme="dark"] .view-table td { border-color: #3a3a3a; }
[data-theme="dark"] .view-table tr:nth-child(even) { background: #333; }
[data-theme="dark"] .view-meta { border-color: #444; }
[data-theme="dark"] .view-toggle--off { background: #333; }



/* ═══════════════════════════════════════════
   CSS PATCH — Add AFTER existing .woi-actions styles (line 1551)
   ═══════════════════════════════════════════ */

/* ── WOI Expand Row ── */
.woi-chevron-cell{width:28px;text-align:center;padding-left:8px!important;padding-right:4px!important}
.woi-chevron{color:var(--text-faded);transition:transform .2s ease}
.woi-expandable:hover .woi-chevron{color:var(--text)}
.woi-detail-row:hover{background:transparent!important}
.woi-detail-row td{padding-top:0!important;border-bottom:1px solid var(--border)}
.woi-detail{display:flex;flex-wrap:wrap;gap:16px;padding:4px 0 12px}
.woi-detail__field{flex:1 1 200px;min-width:0}
.woi-detail__label{display:block;font-size:.72rem;font-weight:600;color:var(--text-faded);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.woi-detail__text{font-size:.85rem;color:var(--text);margin:0;white-space:pre-line;line-height:1.5}
.woi-detail__thumb-link{display:inline-block}
.woi-detail__thumb{width:80px;height:80px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);transition:opacity .15s}
.woi-detail__thumb:hover{opacity:.8}

/* ── Dark theme ── */
[data-theme="dark"] .woi-detail__thumb{border-color:var(--border-dark)}

/* ── RTL ── */
[dir="rtl"] .woi-chevron-cell{padding-left:4px!important;padding-right:8px!important}



/* ── Confirmation Dialog ── */
.onyx-dialog{border:none;border-radius:var(--radius);padding:0;max-width:380px;width:90%;box-shadow:var(--shadow-drop)}

.onyx-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
.onyx-dialog::backdrop{background:rgba(0,0,0,.35)}
.onyx-dialog__body{padding:24px 24px 16px;text-align:center}
.onyx-dialog__icon{width:36px;height:36px;color:var(--warning);margin-bottom:12px}
.onyx-dialog__body h3{margin:0 0 6px;font-size:1rem;font-weight:600}
.onyx-dialog__body p{margin:0;font-size:.85rem;color:var(--text-secondary);line-height:1.5}
.onyx-dialog__actions{display:flex;gap:8px;padding:12px 24px 20px;justify-content:center}
.onyx-dialog__actions .btn{min-width:100px}
.btn-danger{background:var(--danger);color:#fff;border:none}
.btn-danger:hover{background:#e03e3e}
[data-theme="dark"] .onyx-dialog{background:var(--bg-card)}


/* ── Global Dot Loader ── */
.onyx-loader{width:10px;height:10px;border-radius:50%;display:block;margin:15px auto;position:relative;color:var(--accent);left:-100px;box-sizing:border-box;animation:onyxDotRoll 2s linear infinite}
@keyframes onyxDotRoll{
  0%{box-shadow:0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0)}
  12%{box-shadow:100px 0 var(--accent),0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0)}
  25%{box-shadow:110px 0 var(--accent),100px 0 var(--accent),0px 0 rgba(0,0,0,0),0px 0 rgba(0,0,0,0)}
  36%{box-shadow:120px 0 var(--accent),110px 0 var(--accent),100px 0 var(--accent),0px 0 rgba(0,0,0,0)}
  50%{box-shadow:130px 0 var(--accent),120px 0 var(--accent),110px 0 var(--accent),100px 0 var(--accent)}
  62%{box-shadow:200px 0 rgba(0,0,0,0),130px 0 var(--accent),120px 0 var(--accent),110px 0 var(--accent)}
  75%{box-shadow:200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0),130px 0 var(--accent),120px 0 var(--accent)}
  87%{box-shadow:200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0),130px 0 var(--accent)}
  100%{box-shadow:200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0),200px 0 rgba(0,0,0,0)}
}


/* ══════════════════════════════════════════════════════════
   Children Panel — .panel--children + .cp-* classes
   Mirrors .panel--items / .woi-* pattern for children panels.
   ══════════════════════════════════════════════════════════ */
.panel--children{margin-top:16px}
.panel--children .panel-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.panel--children .panel-heading h3{font-size:1rem;font-weight:600;margin:0}
.panel--children .tbl{width:100%;border-collapse:collapse}
.panel--children .tbl th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--border-dark);text-align:start}
.panel--children .tbl td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.panel--children .tbl tr:hover{background:var(--bg-hover)}

/* Actions (edit/delete buttons) */
.panel--children .cp-actions button{background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--radius);color:var(--muted);transition:color .15s,background .15s}
.panel--children .cp-actions button:hover{color:var(--text);background:var(--bg-hover)}

/* Expand: chevron + detail row */
.cp-chevron-cell{width:28px;text-align:center;padding-left:8px!important;padding-right:4px!important}
.cp-chevron{color:var(--text-faded);transition:transform .2s ease}
.cp-expandable:hover .cp-chevron{color:var(--text)}
.cp-detail-row:hover{background:transparent!important}
.cp-detail-row td{padding-top:0!important;border-bottom:1px solid var(--border)}
.cp-detail{display:flex;flex-wrap:wrap;gap:16px;padding:4px 0 12px}
.cp-detail__field{flex:1 1 200px;min-width:0}
.cp-detail__label{display:block;font-size:.72rem;font-weight:600;color:var(--text-faded);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.cp-detail__text{font-size:.85rem;color:var(--text);margin:0;white-space:pre-line;line-height:1.5}

/* RTL adjustments */
[dir="rtl"] .cp-chevron-cell{padding-left:4px!important;padding-right:8px!important}

/* Dark theme */
[data-theme="dark"] .panel--children .tbl th{border-bottom-color:var(--border-dark)}


/* ═══════════════════════════════════════════════════════════
   QR Code Tab — View Pages
   ═══════════════════════════════════════════════════════════ */
.qr-tab__body{display:flex;gap:40px;padding:30px 20px;align-items:flex-start}
.qr-tab__preview{flex-shrink:0;text-align:center}
.qr-tab__svg{width:220px;height:220px;border:1px solid var(--border,#e8e8e4);border-radius:8px;padding:12px;background:#fff}
.qr-tab__svg .qr-svg{width:100%;height:100%}
.qr-tab__code{margin-top:10px}
.qr-tab__code code{font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:12px;padding:3px 10px;background:var(--bg-alt,#f5f5f0);border:1px solid var(--border,#e8e8e4);border-radius:4px;letter-spacing:0.03em;color:#666}
.qr-tab__info{flex:1;min-width:0}
.qr-tab__title{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--text,#3D3D3D)}
.qr-tab__url{margin-bottom:20px;padding:10px 14px;background:var(--bg-alt,#fafaf8);border:1px solid var(--border,#f0f0ec);border-radius:6px;font-size:13px;word-break:break-all}
.qr-tab__url a{color:var(--text,#3D3D3D);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.qr-tab__url a:hover{text-decoration:underline}
.qr-tab__url svg{width:14px;height:14px;opacity:0.5;flex-shrink:0}
.qr-tab__actions{display:flex;flex-wrap:wrap;gap:8px}

/* Responsive: stack on narrow screens */
@media(max-width:768px){
  .qr-tab__body{flex-direction:column;align-items:center;text-align:center}
  .qr-tab__actions{justify-content:center}
}

/* RTL */
[dir="rtl"] .qr-tab__body{direction:rtl}

/* Dark theme */
[data-theme="dark"] .qr-tab__svg{background:#2a2a2a;border-color:var(--border-dark,#444)}
[data-theme="dark"] .qr-tab__svg .qr-svg rect[fill="#fff"]{fill:#2a2a2a}
[data-theme="dark"] .qr-tab__svg .qr-svg rect[fill="#3D3D3D"]{fill:#E2E052}
[data-theme="dark"] .qr-tab__code code{background:#333;border-color:#444;color:#E2E052}
[data-theme="dark"] .qr-tab__url{background:#2a2a2a;border-color:#444}


.st-reviewed { background: #dbeafe; color: #1d4ed8; }
.st-linked   { background: #ede9fe; color: #6d28d9; }


/* ═══════════════════════════════════════════════════════
   CATEGORIES MANAGER
   ═══════════════════════════════════════════════════════ */

/* Loading skeleton */
.cm-loading{display:flex;align-items:center;gap:10px;padding:40px 20px;color:var(--text-secondary)}

/* Group accordion */
.cm-group{margin-bottom:16px}
.cm-group-header{user-select:none}
.cm-group-header:hover{background:var(--bg-hover)}
.cm-group-title-area{flex:1;min-width:0}
.cm-used-in{font-size:.78rem;color:var(--text-secondary);margin:2px 0 0}

/* Count badge */
.cm-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:.75rem;font-weight:600;background:var(--accent);color:#fff}

/* Chevron toggle */
.cm-chevron{display:inline-flex;transition:transform .2s}
.cm-chevron--open{transform:rotate(180deg)}
[dir="rtl"] .cm-chevron--open{transform:rotate(-180deg)}

/* Group body */
.cm-group-body{padding:0 20px 16px}
.cm-cat-list{min-height:10px}

/* Category row */
.cm-cat-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .15s}
.cm-cat-row:hover{background:var(--bg-hover)}
.cm-cat-row:last-child{border-bottom:none}
.cm-cat-row--disabled{opacity:.5}

/* Grip handle */
.cm-grip{cursor:grab;color:var(--text-secondary);flex-shrink:0;width:20px;display:flex;align-items:center}
.cm-cat-row--disabled .cm-grip{visibility:hidden}

/* Names */
.cm-cat-name{font-weight:600;flex:1;min-width:80px}
.cm-cat-name-ar{flex:1;min-width:60px;color:var(--text-secondary);direction:rtl;text-align:start}

/* Status badges */
.cm-status-badge{font-size:.72rem;font-weight:500;padding:2px 10px;border-radius:20px;white-space:nowrap}
.cm-status--active{background:rgba(76,175,80,.12);color:#388e3c}
.cm-status--disabled{background:rgba(244,67,54,.1);color:#c62828}
[data-theme="dark"] .cm-status--active{background:rgba(76,175,80,.2);color:#81c784}
[data-theme="dark"] .cm-status--disabled{background:rgba(244,67,54,.15);color:#ef9a9a}

/* Usage count */
.cm-usage{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;min-width:70px}

/* Action buttons */
.cm-actions{display:flex;gap:4px;flex-shrink:0}
.cm-action-btn{border:none;background:none;cursor:pointer;padding:4px 6px;border-radius:4px;color:var(--text-secondary);transition:background .15s,color .15s}
.cm-action-btn:hover{background:var(--bg-hover);color:var(--text)}
.cm-action-delete:hover{color:var(--danger,#e74c3c)}
.cm-action-enable:hover{color:#388e3c}
.cm-action--blocked{opacity:.3;cursor:not-allowed}
.cm-action--blocked:hover{background:none;color:var(--text-secondary)}

/* Add button */
.cm-add-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px}

/* Disabled list separator */
.cm-disabled-list{border-top:1px dashed var(--border-dark);margin-top:8px;padding-top:4px}

/* SortableJS ghost */
.cm-sortable-ghost{opacity:.4;background:var(--accent-bg,rgba(226,224,82,.1))}

/* Side panel form fields (reuses onyx-ip-panel) */
.cm-panel-form{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto}
.cm-field-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.cm-field-input{width:100%;padding:8px 12px;border:1px solid var(--border-dark);border-radius:var(--radius,6px);font-size:.9rem;background:var(--bg-blank);color:var(--text);font-family:inherit}
.cm-field-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(226,224,82,.25)}
.cm-field-readonly{background:var(--main-bg);color:var(--text-secondary);cursor:not-allowed}
.cm-panel-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0}

/* Responsive */
@media(max-width:768px){
  .cm-cat-row{flex-wrap:wrap;gap:6px}
  .cm-cat-name,.cm-cat-name-ar{flex-basis:40%}
  .cm-status-badge,.cm-usage{font-size:.7rem}
}


/* ═══ Pell Editor (Documentation) ═══ */
.pell-wrap{border:1px solid var(--border-dark);border-radius:var(--radius,6px);overflow:hidden}
.pell-wrap .pell-actionbar{background:var(--main-bg);border-bottom:1px solid var(--border);padding:4px 8px;display:flex;gap:2px;flex-wrap:wrap}
.pell-wrap .pell-button{background:none;border:1px solid transparent;border-radius:4px;padding:4px 8px;cursor:pointer;color:var(--text);font-size:.85rem;font-weight:600}
.pell-wrap .pell-button:hover{background:var(--bg-hover);border-color:var(--border)}
.pell-wrap .pell-content{min-height:200px;padding:12px 16px;font-family:inherit;font-size:.9rem;line-height:1.7;color:var(--text);outline:none}
.pell-wrap .pell-content:focus{box-shadow:inset 0 0 0 2px rgba(226,224,82,.25)}
.pell-wrap .pell-content h1{font-size:1.3rem;font-weight:700;margin:8px 0}
.pell-wrap .pell-content h2{font-size:1.1rem;font-weight:600;margin:6px 0}
.pell-wrap .pell-content ul,.pell-wrap .pell-content ol{padding-inline-start:24px;margin:6px 0}
.pell-wrap .pell-content a{color:var(--accent);text-decoration:underline}
[data-theme="dark"] .pell-wrap .pell-actionbar{background:var(--bg-card)}


/* ═══ Documentation Content Typography ═══ */
body[data-channel="documentation"] .view-val,
body[data-channel="documentation"] .field-control p,
body[data-channel="documentation"] .field-control h2,
body[data-channel="documentation"] .field-control h3,
body[data-channel="documentation"] .field-control ul,
body[data-channel="documentation"] .field-control ol{max-width:820px}

body[data-channel="documentation"] .field-control h2{font-size:1.25rem;font-weight:700;margin:28px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--text)}
body[data-channel="documentation"] .field-control h2:first-child{margin-top:0}
body[data-channel="documentation"] .field-control h3{font-size:1.05rem;font-weight:600;margin:22px 0 8px;color:var(--text)}
body[data-channel="documentation"] .field-control p{font-size:.9rem;line-height:1.8;margin:0 0 12px;color:var(--text)}
body[data-channel="documentation"] .field-control ol,
body[data-channel="documentation"] .field-control ul{margin:0 0 16px;padding-inline-start:24px}
body[data-channel="documentation"] .field-control li{font-size:.9rem;line-height:1.8;margin-bottom:4px;color:var(--text)}
body[data-channel="documentation"] .field-control ul li{list-style:disc}
body[data-channel="documentation"] .field-control ol li{list-style:decimal}
body[data-channel="documentation"] .field-control li ul,
body[data-channel="documentation"] .field-control li ol{margin:6px 0 6px;padding-inline-start:20px}
body[data-channel="documentation"] .field-control li ul li{list-style:circle}
body[data-channel="documentation"] .field-control strong{font-weight:600;color:var(--text)}
body[data-channel="documentation"] .field-control a{color:var(--accent);text-decoration:underline}
body[data-channel="documentation"] .field-control code{background:var(--main-bg);padding:2px 6px;border-radius:4px;font-size:.82rem;font-family:monospace}