@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  /* -- أكاديمية اليقين palette: deep pine green + warm gold + cream paper -- */
  --ink:#0f3a2a;--ink-2:#155038;--ink-3:#2c7050;
  --paper:#f5f1e2;--paper-2:#ece4cd;--card:#ffffff;
  --line:#e6ddc3;--line-strong:#d6c99f;
  --accent:#d7a13c;--accent-dark:#b3822c;--accent-soft:#f7ebcd;
  --success:#1f8a55;--success-soft:#dcf3e2;--success-text:#146339;
  --danger:#d1503f;--danger-soft:#fbe2dd;--danger-text:#a3341f;
  --info:#2f6fa8;--info-soft:#e1edf7;
  --warn2:#e08a2b;--warn2-soft:#fbe9d4;
  --text:#1b241d;--text2:#5c6457;--text3:#98988a;
  --nav-h:70px;--header-h:64px;
  --r-sm:12px;--r:18px;--r-lg:26px;--r-pill:999px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --shadow:0 2px 14px rgba(15,58,42,.08);
  --shadow-lg:0 20px 44px -14px rgba(10,40,28,.34);
  --f-arabic:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --f-mono:'IBM Plex Mono','Courier New',monospace;
  --input-bg:rgba(15,58,42,.04);--input-focus-bg:#ffffff;
  --row-even:#faf7ec;--row-hover:#eef7f1;--row-selected:var(--accent-soft);
  --live-bg:linear-gradient(135deg,#eaf6ee 0%,var(--card) 55%);--live-border:#1f8a55;--live-glow:rgba(31,138,85,.30);
}

/* ============ THEMES (يُحفظ الاختيار في localStorage) ============ */
/* الوضع الليلي فقط هو الغامق — بتباين محسّن. باقي الاستايلات (ذهبي/أزرق/زجاجي) فاتحة بمزيج ألوان متناسق. */
[data-theme="dark"]{
  --ink:#0e2c20;--ink-2:#134430;--ink-3:#1d6244;
  --paper:#121815;--paper-2:#1b2420;--card:#212b26;
  --line:#36443c;--line-strong:#48584d;
  --accent:#e8b959;--accent-dark:#c99a3d;--accent-soft:#3d3018;
  --success:#3ec281;--success-soft:#173a29;--success-text:#7fe6ae;
  --danger:#ec7563;--danger-soft:#402420;--danger-text:#f4a294;
  --info:#5b9fda;--info-soft:#182f42;
  --warn2:#eeae57;--warn2-soft:#3d2e16;
  --text:#f4f7f3;--text2:#c7d0c8;--text3:#8b978d;
  --input-bg:rgba(255,255,255,.06);--input-focus-bg:#283630;
  --row-even:#1e2925;--row-hover:#28362f;--row-selected:#3d3018;
  --shadow:0 2px 14px rgba(0,0,0,.35);
  --live-bg:linear-gradient(135deg,#173a29 0%,var(--card) 55%);--live-border:#3ec281;--live-glow:rgba(62,194,129,.35);
}

/* ذهبي فاخر — فاتح مع لمسات ذهبية/بنية دافئة */
[data-theme="gold"]{
  --ink:#4a3110;--ink-2:#5c3d14;--ink-3:#7a531d;
  --paper:#faf3e4;--paper-2:#f3e6c9;--card:#fffdf7;
  --line:#e9d6a8;--line-strong:#dcc282;
  --accent:#c68f2e;--accent-dark:#a5741f;--accent-soft:#f6e6bf;
  --success:#1f8a55;--success-soft:#dcf3e2;--success-text:#146339;
  --danger:#c94e3c;--danger-soft:#fbe2dd;--danger-text:#9c3120;
  --info:#2f6fa8;--info-soft:#e1edf7;
  --warn2:#c07a1e;--warn2-soft:#fbe9d4;
  --text:#2c2109;--text2:#6b5a37;--text3:#a1906a;
  --input-bg:rgba(198,143,46,.07);--input-focus-bg:#ffffff;
  --row-even:#faf3de;--row-hover:#f6ecd2;--row-selected:var(--accent-soft);
  --shadow:0 2px 14px rgba(120,83,20,.12);
  --live-bg:linear-gradient(135deg,#fbf1da 0%,var(--card) 55%);--live-border:#a5741f;--live-glow:rgba(165,116,31,.28);
}

/* تدرج أزرق — فاتح بلمسات كحلية ونهرية */
[data-theme="blue"]{
  --ink:#0d3b66;--ink-2:#124d84;--ink-3:#1c67aa;
  --paper:#eef4fb;--paper-2:#dfebf8;--card:#ffffff;
  --line:#cddef2;--line-strong:#b3cbe8;
  --accent:#2f7fd6;--accent-dark:#1f63ad;--accent-soft:#dcebfa;
  --success:#1f8a55;--success-soft:#dcf3e2;--success-text:#146339;
  --danger:#d1503f;--danger-soft:#fbe2dd;--danger-text:#a3341f;
  --info:#2f7fd6;--info-soft:#dcebfa;
  --warn2:#e08a2b;--warn2-soft:#fbe9d4;
  --text:#132436;--text2:#4c6480;--text3:#8ba0b8;
  --input-bg:rgba(47,127,214,.06);--input-focus-bg:#ffffff;
  --row-even:#f3f8fd;--row-hover:#e7f1fb;--row-selected:var(--accent-soft);
  --shadow:0 2px 14px rgba(13,59,102,.10);
  --live-bg:linear-gradient(135deg,#e1eefc 0%,var(--card) 55%);--live-border:#1f63ad;--live-glow:rgba(31,99,173,.28);
}

/* زجاجي — فاتح شفاف (Glassmorphism) فوق خلفية باستيل ناعمة */
[data-theme="glass"]{
  --ink:#3d2f66;--ink-2:#4c3b80;--ink-3:#5f4ba0;
  --paper:#f1eefb;--paper-2:#e7e1f7;--card:rgba(255,255,255,.62);
  --line:rgba(90,70,140,.16);--line-strong:rgba(90,70,140,.28);
  --accent:#8b5cf6;--accent-dark:#6d3fe0;--accent-soft:rgba(139,92,246,.14);
  --success:#1f8a55;--success-soft:rgba(31,138,85,.14);--success-text:#146339;
  --danger:#d1503f;--danger-soft:rgba(209,80,63,.14);--danger-text:#a3341f;
  --info:#3d7dd6;--info-soft:rgba(61,125,214,.14);
  --warn2:#e08a2b;--warn2-soft:rgba(224,138,43,.14);
  --text:#2a2340;--text2:#5f5580;--text3:#948bab;
  --input-bg:rgba(139,92,246,.06);--input-focus-bg:rgba(255,255,255,.9);
  --row-even:rgba(255,255,255,.35);--row-hover:rgba(255,255,255,.55);--row-selected:rgba(139,92,246,.16);
  --shadow:0 8px 28px -10px rgba(90,70,140,.22);
  --live-bg:linear-gradient(135deg,rgba(139,92,246,.20) 0%,var(--card) 60%);--live-border:#8b5cf6;--live-glow:rgba(139,92,246,.35);
}
[data-theme="glass"] body{
  background-image: radial-gradient(circle at 12% 8%, rgba(139,92,246,.16), transparent 45%), radial-gradient(circle at 88% 92%, rgba(61,125,214,.14), transparent 45%), linear-gradient(160deg,#f1eefb,#e7e1f7 60%,#f4eef9) !important;
}
[data-theme="glass"] .card,[data-theme="glass"] .dash-card,[data-theme="glass"] .session-card,[data-theme="glass"] .list-row,[data-theme="glass"] #app-header,[data-theme="glass"] #bottom-nav{
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid var(--line);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
html,body{height:100%;font-family:var(--f-arabic);background:var(--paper);color:var(--text);overflow-x:hidden;}
body{
  background:
    radial-gradient(circle at 100% 0%, rgba(215,161,60,.10), transparent 45%),
    radial-gradient(circle at 0% 20%, rgba(15,58,42,.05), transparent 40%),
    var(--paper);
  background-attachment:fixed;
}
button,input,select,textarea{font-family:inherit;}

/* ============ LOGIN ============ */
#login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;flex-direction:column;gap:20px;
}
.login-card{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:30px 24px;width:100%;max-width:360px;border:1px solid var(--line);
}
.login-logo{text-align:center;margin-bottom:18px;}
.login-logo .li-icon{font-size:42px;color:var(--accent);}
.login-logo h1{font-size:19px;font-weight:800;color:var(--ink);margin-top:8px;}
.login-logo p{font-size:11.5px;color:var(--text2);margin-top:4px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.login-field input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  font-size:14px;background:var(--paper);color:var(--text);outline:none;transition:border-color .15s;
}
.login-field input:focus{border-color:var(--accent);background:var(--input-focus-bg);}
.login-error{background:var(--danger-soft);color:var(--danger-text);font-size:12px;font-weight:700;padding:10px 14px;border-radius:var(--r);margin-bottom:12px;display:none;text-align:center;}
.login-error.show{display:block;}

/* ============ SIDE MENU ============ */
.side-menu-overlay{position:fixed;inset:0;background:rgba(15,30,22,.55);z-index:150;display:none;backdrop-filter:blur(2px);}
.side-menu-overlay.open{display:block;}
.side-menu{
  position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;
  background:var(--card);z-index:160;transform:translateX(100%);
  transition:transform .3s ease;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.side-menu.open{transform:translateX(0);pointer-events:auto;}
.side-menu-header{
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);
  color:#fff;padding:24px 20px;position:relative;
}
.side-menu-close{
  position:absolute;top:12px;left:12px;width:32px;height:32px;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;
}
.side-menu-close:active{background:rgba(255,255,255,.28);}
.side-menu-avatar{font-size:48px;margin-bottom:10px;color:var(--accent);}
.side-menu-user-name{font-size:16px;font-weight:800;margin-bottom:4px;}
.side-menu-user-username{font-size:12px;opacity:.72;margin-bottom:8px;font-family:var(--f-mono);}
.side-menu-user-role{display:flex;align-items:center;gap:8px;margin-top:8px;}
.side-role-badge{
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;
  padding:3px 10px;border-radius:var(--r-pill);font-family:var(--f-mono);
}
.side-menu-body{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;}
.side-menu-section{margin-bottom:16px;padding:12px;background:var(--paper-2);border-radius:var(--r);}
.side-menu-divider{height:1px;background:var(--line);margin:8px 0;}
.side-menu-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  border-radius:var(--r);cursor:pointer;transition:background .15s;
  font-size:13px;font-weight:700;color:var(--text);
}
.side-menu-item:hover{background:var(--paper-2);}
.side-menu-item i{font-size:16px;width:24px;text-align:center;}
/* تسجيل الخروج يبقى مثبتًا أسفل اللوحة بدل تركه عائمًا بعد قسم فارغ ومساحة بيضاء طويلة بلا فائدة */
.side-menu-item[onclick*="logout"]{margin-top:auto;}
/* قائمة أقسام التطبيق داخل لوحة الحساب: تظهر فقط على الحاسوب (انظر الميديا كويري أدناه) حيث تندمج
   القائمتان في واحدة؛ على الموبايل/التابلت يبقى التنقل بالشريط السفلي كما هو دون تكرار. */
.side-menu-navlist{display:none;}

/* ============ HEADER ============ */
#app-header{
  position:fixed;top:0;left:0;right:0;
  min-height:var(--header-h);
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);color:#fff;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 14px;
  padding-top:max(10px, env(safe-area-inset-top, 10px));
  box-shadow:var(--shadow-lg);
}
#header-title{font-family:var(--f-arabic);font-weight:800;letter-spacing:.2px;font-size:14.5px;text-align:center;}
#header-date{font-size:10.5px;opacity:.72;margin-top:3px;font-family:var(--f-mono);letter-spacing:.3px;text-align:center;}
.header-zone{display:flex;align-items:center;gap:6px;}
.header-zone.header-zone-end{justify-content:flex-end;}
.icon-pill-btn{
  width:32px;height:32px;border-radius:var(--r-pill);border:none;position:relative;
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s;
  flex-shrink:0;
}
.icon-pill-btn:active{background:rgba(255,255,255,.28);}
.icon-pill-btn .mini-badge{
  position:absolute;top:-3px;left:-3px;background:var(--danger);color:#fff;border-radius:var(--r-pill);
  font-size:9px;font-weight:800;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;
  font-family:var(--f-mono);box-shadow:0 0 0 2px var(--ink);
}
.icon-pill-btn .mini-badge.show{display:flex;}
.sync-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:6px 11px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;
}
.header-sync-dot{width:8px;height:8px;border-radius:50%;background:#4ad999;display:inline-block;box-shadow:0 0 0 4px rgba(74,217,153,.20);animation:beacon-pulse 2.6s ease-in-out infinite;}
.header-sync-dot.offline{background:#f0685a;box-shadow:0 0 0 4px rgba(240,104,90,.20);animation:none;}
@keyframes beacon-pulse{0%,100%{box-shadow:0 0 0 4px rgba(215,161,60,.22);}50%{box-shadow:0 0 0 7px rgba(215,161,60,.04);}}
@media (max-width:370px){.sync-pill span:not(.header-sync-dot){display:none;}.sync-pill{padding:6px 8px;}#header-title{font-size:13px;}}

/* ============ MAIN / NAV ============ */
#main-content{padding-top:calc(var(--header-h) + env(safe-area-inset-top, 10px) + 8px);padding-bottom:0;min-height:100vh;}
.screen{display:none;padding:14px 12px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 20px);}
.screen.active{display:block;}
#bottom-nav{
  position:fixed;bottom:0;left:0;right:0;min-height:var(--nav-h);
  background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);
  display:flex;z-index:100;box-shadow:0 -10px 26px rgba(0,0,0,.24);
  padding-bottom:env(safe-area-inset-bottom, 0px);overflow-x:auto;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;min-width:58px;
  justify-content:center;gap:4px;border:none;background:none;
  color:#9fb0a4;font-size:9.5px;font-weight:600;cursor:pointer;padding:10px 2px;
  transition:all .2s;position:relative;
}
.nav-btn .nav-icon{font-size:19px;transition:transform .2s;display:inline-block;color:#fff;}
.nav-btn.active{color:var(--accent);}
.nav-btn.active .nav-icon{transform:translateY(-3px) scale(1.08);}
.nav-btn.active::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:26px;height:26px;background:rgba(215,161,60,.16);border-radius:var(--r-pill);z-index:-1;}
.nav-btn .badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--danger);color:#fff;border-radius:var(--r-pill);font-size:9px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center;display:none;font-family:var(--f-mono);box-shadow:0 0 0 2px var(--ink);}
.nav-btn .badge.show{display:block;}

/* ============ CARDS ============ */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.card-header{padding:13px 16px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;letter-spacing:.2px;border-bottom:1px solid var(--line);}
.card-body{padding:14px;}
.section-title{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:11px;display:flex;align-items:center;gap:8px;letter-spacing:.2px;}
.section-title::before{content:'';width:5px;height:16px;background:var(--accent);border-radius:var(--r-pill);flex-shrink:0;}

/* ============ TOOLBAR / BUTTONS ============ */
.toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:11px;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:var(--r-pill);border:none;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.1px;}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(15,58,42,.5);}
.btn-primary:active{background:var(--ink-2);transform:scale(.97);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:active{background:var(--success-text);transform:scale(.97);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:active{background:var(--danger-text);transform:scale(.97);}
.btn-secondary{background:var(--paper-2);color:var(--ink);border:1.5px solid var(--line-strong);}
.btn-secondary:active{background:var(--line);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 14px -6px rgba(215,161,60,.6);}
.btn-accent:active{background:var(--accent-dark);transform:scale(.97);}
.btn-warn{background:var(--warn2);color:#fff;}
.btn-sm{padding:7px 11px;font-size:11px;}
.btn-icon{padding:8px;min-width:36px;justify-content:center;border-radius:var(--r-pill);}
.btn:disabled{opacity:.45;pointer-events:none;}
.btn-block{width:100%;justify-content:center;}

/* ============ FORM ELEMENTS ============ */
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--r);
  font-size:13.5px;background:var(--paper);color:var(--text);outline:none;transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--input-focus-bg);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field-hint{font-size:10.5px;color:var(--text3);margin-top:4px;}
.chip-toggle{display:flex;gap:8px;background:var(--paper-2);padding:4px;border-radius:var(--r-pill);}
.chip-toggle button{flex:1;padding:9px 4px;border:none;background:transparent;border-radius:var(--r-pill);font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;}
.chip-toggle button.active{background:var(--ink);color:#fff;}

/* ============ TABLES ============ */
/* FIXED: تمت إزالة أسلوب "الهامش السالب" الذي كان يجعل آخر عمود (الإجراءات) يلتصق بحافة الشاشة فيبدو مقطوعًا.
   الآن الجدول محتوى داخل حشو آمن مع مساحة فارغة واضحة بعد آخر عمود. */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border-radius:var(--r);border:1px solid var(--line);}
.btn-icon-sm{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:11px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.btn-icon-sm:active{background:var(--line);}
tr.wh-expand-row td{background:var(--paper-2);padding:0;}
.wh-expand-panel{padding:10px 12px;max-height:220px;overflow-y:auto;}
.wh-units-grid{display:flex;flex-wrap:wrap;gap:6px;}
.wh-unit-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;padding:5px 7px;border-radius:9px;background:var(--card);border:1px solid var(--line);}
.wh-unit-chip .wh-unit-num{font-size:9.5px;font-weight:800;color:var(--accent-dark);font-family:var(--f-mono);}
.wh-unit-chip .wh-unit-w{font-size:10px;font-weight:700;color:var(--text2);}

/* ============ THEME PICKER MODAL ============ */
.theme-options{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.theme-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;text-align:right;}
.theme-opt.active{border-color:var(--accent);background:var(--accent-soft);}
.theme-swatch{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex-shrink:0;}
.theme-swatch-light{background:linear-gradient(135deg,#f5f1e2,#d7a13c);color:#0f3a2a;}
.theme-swatch-dark{background:linear-gradient(135deg,#121815,#e8b959);}
.theme-swatch-gold{background:linear-gradient(135deg,#faf3e4,#c68f2e);color:#4a3110;}
.theme-swatch-blue{background:linear-gradient(135deg,#eef4fb,#2f7fd6);color:#0d3b66;}
.theme-swatch-glass{background:linear-gradient(135deg,#f1eefb,#8b5cf6);color:#3d2f66;}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);}
thead tr{background:var(--paper-2);}
thead th{color:var(--ink);padding:11px 10px;font-size:10.5px;font-weight:800;text-align:center;white-space:nowrap;letter-spacing:.2px;border-bottom:2px solid var(--accent-soft);border-inline-start:1px solid var(--line);}
thead th:first-child{border-inline-start:none;}
thead th:last-child{padding-inline-end:16px;}
tbody tr{border-bottom:1px solid var(--line);transition:background .15s;}
tbody tr:nth-child(even){background:var(--row-even);}
tbody tr:hover{background:var(--row-hover);}
tbody td{padding:9px 9px;text-align:center;font-size:12px;white-space:nowrap;border-inline-start:1px solid var(--line);vertical-align:middle;}
tbody td:first-child{border-inline-start:none;}
tbody td:last-child{padding-inline-end:16px;}
tbody td input,tbody td select{padding:8px 6px;border:1.5px solid transparent;border-radius:8px;font-size:12.5px;text-align:center;background:var(--input-bg);color:var(--text);transition:border-color .15s,background .15s;outline:none;box-sizing:border-box;}
/* حقول رقمية قصيرة (العرض/الطول/الجرام/العدد/الوزن/عدد البكر): حجم يتبع طول الرقم فعليًا، صغير وواضح ويتسع حتى 5 أرقام بدون تضخم */
tbody td input[type="number"]{font-family:var(--f-mono);font-weight:700;width:6.5ch;min-width:52px;max-width:84px;padding-inline:4px;}
/* حقول نصية (النوع/الملاحظات/رقم الماكينة) وقوائم الاختيار: تتمدد لتناسب حجم النص فعليًا بدل التضييق العشوائي */
tbody td input[type="text"],tbody td input:not([type]),tbody td select{width:100%;min-width:92px;}
tbody td textarea{width:100%;min-width:120px;resize:vertical;}
tbody td input:focus,tbody td select:focus,tbody td textarea:focus{border-color:var(--accent);background:var(--input-focus-bg);box-shadow:0 0 0 3px rgba(215,161,60,.18);}
tbody td input[readonly]{color:var(--text);opacity:.92;}
tbody td:not(:has(input)):not(:has(select)){font-weight:600;color:var(--text);}
tbody td .cell-sub{display:block;font-size:9.5px;color:var(--text3);font-weight:500;margin-top:2px;}
.tfoot-total{background:var(--accent-soft);font-weight:800;}
.tfoot-total td{color:var(--ink);font-family:var(--f-mono);border-inline-start:1px solid rgba(15,58,42,.12);}

/* FIXED: Statistics table styling — عرض تلقائي (auto) للأعمدة حسب حجم النص بدل التقسيم المتساوي القسري
   الذي كان يضغط النصوص الطويلة (مثل "برستول كوشيه") ويجعلها تلتف على سطرين وتتداخل مع الأرقام. */
.stats-table{table-layout:auto;}
.stats-table th,.stats-table td{padding:10px 10px;font-size:12px;text-align:center;white-space:nowrap;}
#stat-tfoot td{padding:10px 10px;font-weight:800;text-align:center;white-space:nowrap;}

/* ============ COLOR CODING FOR ORDER ITEMS ============ */
/* Row done - all completed (green) */
tbody tr.row-done{background:var(--success-soft) !important;}
tbody tr.row-done td{color:var(--success-text);}
/* Row partial - partially done (orange/yellow) */
tbody tr.row-partial{background:var(--warn2-soft) !important;}
tbody tr.row-partial td{color:#7a4a10;}
/* Row pending - not started (default) */
tbody tr.row-pending{background:transparent;}

/* ============ STATUS BADGES / PILLS ============ */
.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-pill);font-size:10.5px;font-weight:800;}
.pill-success{background:var(--success-soft);color:var(--success-text);}
.pill-danger{background:var(--danger-soft);color:var(--danger-text);}
.pill-info{background:var(--info-soft);color:var(--info);}
.pill-warn{background:var(--warn2-soft);color:var(--warn2);}
.pill-muted{background:var(--paper-2);color:var(--text2);}
.role-badge{font-family:var(--f-mono);font-weight:800;}

/* ============ DASHBOARD ============ */
.dash-hero{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 60%,var(--ink-3) 100%);color:#fff;border-radius:var(--r-lg);padding:20px 20px 22px;margin-bottom:16px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.dash-hero::before{content:'';position:absolute;left:-30px;top:-30px;width:140px;height:140px;background:rgba(215,161,60,.14);border-radius:50%;}
.dash-hero-content{position:relative;z-index:1;}
.dash-hero .dash-hero-title{font-size:16px;font-weight:800;margin-bottom:6px;}
.dash-hero .dash-hero-sub{font-size:11.5px;opacity:.8;line-height:1.9;}
.dash-hero-badge{background:rgba(255,255,255,.14);border-radius:var(--r);width:56px;height:56px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-mono);position:relative;z-index:1;border:1px solid rgba(255,255,255,.2);}
.dash-hero-badge .badge-month{font-size:9px;color:var(--accent);font-weight:700;letter-spacing:.5px;}
.dash-hero-badge .badge-day{font-size:19px;font-weight:800;color:#fff;}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px;}
.dash-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center;box-shadow:var(--shadow);min-width:0;position:relative;overflow:hidden;}
.dash-card-icon{width:34px;height:34px;border-radius:var(--r-pill);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:16px;margin:0 auto 8px;color:var(--ink);}
.dash-card .dash-val{font-size:24px;font-weight:800;color:var(--ink);font-family:var(--f-mono);line-height:1.1;}
.dash-card .dash-lbl{font-size:11px;color:var(--text2);margin-top:6px;font-weight:600;}

/* live machine session cards — لون هادي مأخوذ من متغيرات كل ستايل على حدة، بحيث يبقى متناسقًا مع كل مظهر
   ويظل مميزًا وواضحًا عن سجل الجلسات أدناه عبر: خلفية/حدود مخصصة + شارة "مباشر الآن" نصية + نقطة نبض خضراء صغيرة عالمية */
.session-card{
  background:var(--live-bg);
  border:1.5px solid var(--live-border);border-radius:var(--r);
  padding:14px 16px;margin-bottom:12px;
  box-shadow:0 10px 24px -14px var(--live-glow), var(--shadow);
  position:relative;overflow:hidden;
}
.session-card::before{content:'';position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--live-border);}
.session-card .sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap;}
.session-card .sc-machine{font-weight:800;color:var(--ink);font-size:13px;display:flex;align-items:center;gap:7px;}
.session-card .sc-machine::before{
  content:'';width:9px;height:9px;border-radius:50%;background:#2ecc71;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(46,204,113,.25);animation:live-pulse-ring 1.8s ease-in-out infinite;
}
.session-card .sc-top-actions{display:flex;align-items:center;gap:8px;}
.session-card .sc-timer{font-family:var(--f-mono);font-weight:800;color:#fff;background:var(--live-border);padding:4px 11px;border-radius:var(--r-pill);font-size:12px;box-shadow:0 4px 10px -3px var(--live-glow);}
.session-card .sc-spec{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.session-card .sc-customer{font-size:12px;color:var(--text2);}
.session-card .sc-actions{display:flex;gap:6px;margin-top:10px;}
.session-card:last-of-type{margin-bottom:22px;}
@keyframes live-pulse-ring{0%,100%{box-shadow:0 0 0 3px rgba(46,204,113,.25);}50%{box-shadow:0 0 0 6px transparent;}}

/* شارة "مباشر" نصية — تُستخدم داخل بطاقة الجلسة وبجانب عنوان القسم، لتمييز واضح لا يعتمد على اللون فقط */
.live-badge{display:inline-flex;align-items:center;gap:5px;background:#2ecc71;color:#fff;font-size:9.5px;font-weight:800;padding:3px 10px;border-radius:var(--r-pill);letter-spacing:.3px;white-space:nowrap;}
.live-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:live-pulse-dot 1.4s ease-in-out infinite;}
@keyframes live-pulse-dot{0%,100%{opacity:1;}50%{opacity:.3;}}
.same-roll-alert{background:var(--warn2-soft);border:1px solid var(--warn2);border-radius:var(--r);padding:10px 12px;margin-top:8px;font-size:11.5px;color:#7a4a10;}
.same-roll-alert .sra-title{font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.same-roll-alert .sra-item{padding:4px 0;border-top:1px dashed rgba(122,74,16,.25);font-family:var(--f-mono);}

/* ============ SEARCH / STATS ============ */
.search-bar{display:flex;gap:7px;margin-bottom:11px;}
.search-bar input{flex:1;padding:11px 15px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-size:13px;background:var(--card);outline:none;box-shadow:var(--shadow);}
.search-bar input:focus{border-color:var(--accent);}
.stats-bar{display:flex;gap:8px;margin-bottom:11px;flex-wrap:wrap;}
.stat-chip{background:var(--card);border-radius:var(--r-pill);padding:9px 15px;font-size:11px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;gap:6px;align-items:center;flex:1;justify-content:center;min-width:70px;}
.stat-chip .stat-val{font-weight:800;color:var(--ink);font-size:15px;font-family:var(--f-mono);}
.stat-chip .stat-lbl{color:var(--text2);}

/* ============ EMPTY STATE ============ */
.empty-state{text-align:center;padding:42px 20px;color:var(--text3);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);}
.empty-state .empty-icon{font-size:38px;margin-bottom:11px;}
.empty-state p{font-size:12.5px;}

/* ============ TOAST ============ */
#toast-container{position:fixed;top:calc(var(--header-h)+14px);left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none;width:min(320px,calc(100vw - 20px));}
.toast{padding:11px 16px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:#fff;box-shadow:var(--shadow-lg);animation:slideDown .22s ease;pointer-events:auto;display:flex;align-items:center;gap:8px;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
.toast.info{background:var(--ink);}
.toast.warn{background:var(--warn2);}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

/* ============ MODAL ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,30,22,.55);z-index:200;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:520px;padding:22px 20px;max-height:85vh;overflow-y:auto;animation:slideUp .25s ease;}
.modal::before{content:'';display:block;width:40px;height:4px;background:var(--line-strong);border-radius:var(--r-pill);margin:0 auto 14px;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal h3{font-size:15px;font-weight:800;margin-bottom:14px;color:var(--ink);}
.modal-option{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;}
.modal-option:last-of-type{border-bottom:none;}
.modal-option input[type="radio"],.modal-option input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);}
.modal-option label{font-size:13px;cursor:pointer;flex:1;}
.modal-footer{margin-top:14px;display:flex;gap:8px;}
.modal-footer .btn{flex:1;justify-content:center;}
.modal-close-x{position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:none;color:var(--text2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ============ CALCULATOR ============ */
.calc-tabs{display:flex;gap:6px;margin-bottom:11px;background:var(--paper-2);padding:5px;border-radius:var(--r-pill);}
.calc-tab{flex:1;padding:10px 4px;border:none;background:transparent;border-radius:var(--r-pill);font-size:11px;font-weight:700;cursor:pointer;color:var(--text2);transition:all .2s;}
.calc-tab.active{background:var(--ink);color:#fff;box-shadow:var(--shadow);}
.calc-panel{display:none;}
.calc-panel.active{display:block;}
.calc-input-group{margin-bottom:11px;}
.calc-input-group label{display:block;font-size:12px;color:var(--ink);margin-bottom:5px;font-weight:700;}
.calc-input-group input,.calc-input-group select{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-size:14px;font-family:var(--f-mono);background:var(--paper);color:var(--text);outline:none;transition:border-color .15s;}
.calc-input-group input:focus{border-color:var(--accent);background:var(--input-focus-bg);}
.calc-result-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.calc-result{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);color:#fff;border-radius:var(--r);padding:16px 10px;box-shadow:var(--shadow);text-align:center;border:none;cursor:pointer;transition:transform .2s;user-select:all;min-height:90px;display:flex;flex-direction:column;justify-content:center;gap:4px;}
.calc-result:active{transform:scale(.96);}
.calc-result .res-label{font-size:11px;color:rgba(255,255,255,.85);margin-bottom:4px;font-weight:700;letter-spacing:.3px;}
.calc-result .res-value{font-size:24px;font-weight:800;color:var(--accent);font-family:var(--f-mono);text-shadow:0 1px 2px rgba(0,0,0,.2);}
.calc-result .res-unit{font-size:11px;color:rgba(255,255,255,.75);font-family:var(--f-mono);font-weight:600;}
.pallet-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px;font-size:13px;font-family:var(--f-mono);font-weight:600;box-shadow:var(--shadow);}
.pallet-total{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;border-radius:var(--r-lg);padding:18px;text-align:center;margin-top:13px;cursor:pointer;box-shadow:0 12px 24px -10px rgba(215,161,60,.55);}
.pallet-total .total-val{font-size:26px;font-weight:800;font-family:var(--f-mono);color:#fff;}
.pallet-total .total-lbl{font-size:11px;opacity:.95;margin-top:6px;font-weight:600;}
.height-result{background:linear-gradient(135deg,var(--accent-soft),var(--paper-2));border:1px solid var(--accent);border-radius:var(--r-lg);padding:18px;text-align:center;margin-top:13px;cursor:pointer;box-shadow:var(--shadow);}
.height-result .h-val{font-size:29px;font-weight:800;color:var(--ink);font-family:var(--f-mono);}
.height-result .h-lbl{font-size:12px;color:var(--ink);margin-top:6px;font-weight:600;}

/* ============ CHAT: LIST ============ */
.chat-list-item{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);border-radius:var(--r);border:1px solid var(--line);margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow);position:relative;transition:background .15s;}
.chat-list-item:active{background:var(--row-hover);}
.chat-avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;}
.chat-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.chat-list-item .cli-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-list-item .cli-name{font-weight:800;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-list-item .cli-time{font-size:10px;color:var(--text3);font-family:var(--f-mono);flex-shrink:0;}
.chat-list-item .cli-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-list-item .cli-preview{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.chat-list-item .cli-preview.unread{color:var(--ink);font-weight:700;}
.cli-unread-badge{background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);flex-shrink:0;}
.presence-dot{position:absolute;bottom:-1px;left:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card);}
.presence-dot.online{background:#2ecc71;}
.presence-dot.offline{background:#9aa0a6;}
.presence-label{font-size:9.5px;font-weight:700;margin-right:4px;}
.presence-label.online{color:#27ae60;}
.presence-label.offline{color:var(--text3);}

/* ============ CHAT: WINDOW (fixed overlay, independent from page scroll) ============ */
#chat-window-view{
  position:fixed;
  top:calc(var(--header-h) + var(--safe-top));
  bottom:calc(var(--nav-h) + var(--safe-bottom));
  left:0;right:0;
  display:flex;flex-direction:column;
  background:var(--paper);
  z-index:120;
}
#chat-window-view.hidden{display:none;}
.chat-window-header{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;z-index:2;
}
.chat-window-header .chat-back-btn{
  background:var(--paper-2);color:var(--ink);width:34px;height:34px;font-size:13px;flex-shrink:0;
}
.chat-window-header .chat-back-btn:active{background:var(--line);}
.chat-window-header .chat-avatar{width:36px;height:36px;font-size:13px;}
.chat-window-header-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.chat-window-header-info #chat-window-title{font-weight:800;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-window-subtitle{font-size:10.5px;color:var(--text3);font-family:var(--f-mono);}
.chat-messages{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 12px;display:flex;flex-direction:column;gap:8px;
}
.chat-day-sep{align-self:center;background:var(--paper-2);color:var(--text2);font-size:10.5px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill);margin:6px 0;}
.msg-bubble{max-width:78%;padding:10px 14px;border-radius:var(--r);font-size:13px;line-height:1.5;box-shadow:var(--shadow);word-wrap:break-word;}
.msg-bubble.mine{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-left-radius:4px;}
.msg-bubble.theirs{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-right-radius:4px;}
.msg-time{font-size:9.5px;opacity:.65;margin-top:4px;font-family:var(--f-mono);display:flex;align-items:center;gap:4px;}
.chat-input-row{
  flex:0 0 auto;display:flex;gap:8px;align-items:center;
  padding:10px 12px calc(10px + var(--safe-bottom));
  background:var(--card);border-top:1px solid var(--line);
}
.chat-input-row input{flex:1;padding:11px 15px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--paper);outline:none;font-size:13px;}
.chat-input-row input:focus{border-color:var(--accent);background:var(--card);}

/* ============ ADMIN LIST ROWS ============ */
.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;box-shadow:var(--shadow);}
.list-row .lr-main{flex:1;min-width:0;}
.list-row .lr-title{font-weight:800;font-size:13px;color:var(--ink);}
.list-row .lr-sub{font-size:11px;color:var(--text2);margin-top:2px;}
.list-row .lr-actions{display:flex;gap:6px;flex-shrink:0;}

/* ============ سجل جلسات التصنيع (dashboard/admin) — تنظيم داخلي واضح بدل نص طويل متلاصق يمتد بعرض الحاوية ============ */
.list-row.session-log-row{flex-direction:column;align-items:stretch;gap:6px;padding:11px 12px;box-shadow:none;border-color:var(--line);}
.session-log-row .slr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.session-log-row .slr-machine{font-weight:800;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:6px;min-width:0;}
.session-log-row .slr-machine span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.session-log-row .slr-spec{
  font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--ink);
  background:var(--paper-2);border-radius:var(--r-sm);padding:6px 10px;display:inline-block;width:fit-content;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.session-log-row .slr-meta{display:flex;flex-wrap:wrap;gap:5px;}
.session-log-row .slr-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--text2);background:var(--paper-2);border-radius:var(--r-pill);padding:3px 8px;line-height:1.5;}
.session-log-row .slr-chip i{font-size:8.5px;color:var(--text3);}
.session-log-row .slr-chip.slr-duration{background:var(--accent-soft);color:var(--accent-dark);font-weight:700;}

/* ============ زر حذف صف (تسجيل الأوردر وغيره) ============ */
.del-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r-pill);
  border:1.5px solid var(--danger-soft);background:var(--danger-soft);color:var(--danger-text);
  font-size:12px;cursor:pointer;transition:background .15s,transform .1s,border-color .15s;flex-shrink:0;
}
.del-btn:hover{background:var(--danger);border-color:var(--danger);color:#fff;}
.del-btn:active{transform:scale(.92);}

/* ============ سجل الجلسات (LOG) — صفوف أرشيفية هادئة، مفصولة بوضوح عن بطاقات الجلسات النشطة الحيّة ============ */
.log-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 13px;margin-bottom:6px;
  background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--line-strong);
  border-radius:var(--r-sm);font-size:12px;
  transition:background .15s,border-color .15s;
}
.log-item:last-child{margin-bottom:0;}
.log-item:hover{background:var(--row-hover);border-inline-start-color:var(--text3);}
.log-item .lg-action{font-weight:800;color:var(--ink);}
.log-item .lg-meta{font-size:10.5px;color:var(--text3);font-family:var(--f-mono);margin-top:1px;}

/* ============ UTILS ============ */
.mt-1{margin-top:6px;}.mt-2{margin-top:10px;}.flex{display:flex;}.gap-1{gap:6px;}.w-full{width:100%;}.text-center{text-align:center;}
.tag-perm{display:inline-block;font-size:9.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--info-soft);color:var(--info);font-weight:800;margin-right:4px;}
.hidden{display:none !important;}

/* ============ استجابة لشاشات الحاسوب/التابلت ============ */
/* الأساس مبني للموبايل (mobile-first). على الشاشات الأوسع لا نكتفي بحصر التطبيق داخل "إطار هاتف"
   مُصغّر في المنتصف، بل نعيد توزيع نفس العناصر (القائمة السفلية → قائمة جانبية، الهيدر والمحتوى → عرض حقيقي)
   بحيث يبدو الموقع مصممًا فعليًا لسطح المكتب. شكل الهاتف (<661px) يبقى كما هو تمامًا. */
:root{ --app-max-w:100vw; }

/* -- تابلت: عرض مريح بلا "إطار هاتف" ضيق، بدون تحويل القائمة السفلية بعد -- */
@media (min-width:661px) and (max-width:900px){
  :root{ --app-max-w:720px; }
  html,body{background:var(--paper-2);}
  #app-header,#bottom-nav,#chat-window-view{
    left:50%; right:auto; transform:translateX(-50%);
    width:var(--app-max-w); max-width:var(--app-max-w);
  }
  #main-content{
    max-width:var(--app-max-w); margin:0 auto;
    box-shadow:0 0 0 1px var(--line), 0 30px 70px -20px rgba(0,0,0,.24);
    background:var(--paper); min-height:100vh;
  }
  .side-menu{ right:calc(50vw - var(--app-max-w)/2); }
  .dash-grid{ grid-template-columns:repeat(4,1fr); }
  .field-row{ grid-template-columns:repeat(3,1fr); }
}

/* -- حاسوب: تصميم مكتبي حقيقي. القائمة السفلية تصبح قائمة جانبية ثابتة، والهيدر والمحتوى يشغلان
   العرض الفعلي المتبقي بدل الانحصار في عمود بعرض هاتف -- */
@media (min-width:901px){
  :root{ --sidebar-w:250px; }
  html,body{background:var(--paper-2);}

  /* FIXED (كانت "كارثة بصرية وتنظيمية"): سابقًا كان هناك شريطان منفصلان جنبًا إلى جنب على الحاسوب —
     شريط تنقل (كان #bottom-nav محوّلًا لعمود جانبي) ولوحة حساب (side-menu) منفصلة كليًا بتصميم مختلف.
     الآن نُخفي الشريط السفلي بالكامل على الحاسوب، وتصبح لوحة الحساب (side-menu) هي القائمة الجانبية
     الوحيدة والثابتة التي تضم معًا: بيانات الحساب + كل أقسام التطبيق (الرئيسية/الأوردرات/...) + تسجيل
     الخروج. لوحة واحدة متّسقة الشكل بدل تصميمين متزاحمين. */
  #bottom-nav{ display:none; }
  #header-menu-btn{ display:none; } /* لا حاجة لزر فتح القائمة — أصبحت ظاهرة دائمًا */
  .side-menu-overlay{ display:none !important; } /* لا تعتيم خلفي طالما اللوحة ثابتة ظاهرة دومًا وليست نافذة منبثقة */

  .side-menu{
    top:0; bottom:0; right:0; left:auto;
    width:var(--sidebar-w); max-width:var(--sidebar-w);
    transform:none !important; pointer-events:auto !important;
    box-shadow:-10px 0 30px rgba(0,0,0,.10);
    z-index:100;
  }
  .side-menu-close{ display:none; } /* لا إغلاق — اللوحة ثابتة دائمًا على الحاسوب */
  .side-menu-header{ padding:22px 18px 18px; }
  .side-menu-body{ padding:14px; }

  .side-menu-navlist{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
  .side-menu-navlist .nav-btn{
    flex-direction:row; justify-content:flex-start; gap:12px; min-width:auto;
    padding:12px 14px; font-size:13px; font-weight:700; border-radius:var(--r);
    position:relative; transition:background .15s,color .15s; color:var(--text);
  }
  /* الأيقونات بيضاء افتراضيًا (تصميم الشريط السفلي الداكن) — هنا خلفية اللوحة فاتحة فتحتاج لونًا داكنًا */
  .side-menu-navlist .nav-btn .nav-icon{ font-size:15px; width:20px; text-align:center; flex-shrink:0; color:var(--ink); }
  .side-menu-navlist .nav-btn span:not(.nav-icon):not(.badge){ color:var(--text); }
  .side-menu-navlist .nav-btn:hover{ background:var(--paper-2); }
  .side-menu-navlist .nav-btn.active{ background:var(--accent-soft); }
  .side-menu-navlist .nav-btn.active span:not(.nav-icon):not(.badge){ color:var(--accent-dark); }
  .side-menu-navlist .nav-btn.active .nav-icon{ color:var(--accent-dark); }
  .side-menu-navlist .nav-btn.active::before{ content:''; top:50%;left:8px;right:auto;transform:translateY(-50%); width:4px; height:60%; background:var(--accent); border-radius:var(--r-pill); }
  .side-menu-navlist .nav-btn .badge{ position:static; margin-inline-start:auto; box-shadow:none; }

  #app-header{
    left:0; right:var(--sidebar-w); width:auto; max-width:none; transform:none;
    padding:14px 32px; padding-top:max(14px, env(safe-area-inset-top, 14px));
  }

  #main-content{
    margin-right:var(--sidebar-w); margin-left:0; max-width:none;
    padding-top:calc(var(--header-h) + 26px);
    box-shadow:none; background:var(--paper-2); min-height:100vh;
  }
  .screen{ max-width:1360px; margin:0 auto; padding:0 32px calc(var(--safe-bottom) + 32px); }

  #chat-window-view{ left:0; right:var(--sidebar-w); width:auto; transform:none; }

  .dash-grid{ grid-template-columns:repeat(6,1fr); gap:16px; }
  .field-row{ grid-template-columns:repeat(3,1fr); }
  .calc-result-cards{ grid-template-columns:repeat(4,1fr); }
  .card{ margin-bottom:16px; }
  /* FIXED: كانت overflow-x:visible تجعل الجداول العريضة (تسجيل الأوردر بأعمدتها العشرة، جدول أوردر
     نشط، إلخ) تفيض فعليًا خارج حدود الشاشة/الشريط الجانبي بدل أن تُمرَّر أفقيًا، فتظهر أعمدة مقطوعة أو
     مختفية تحت عناصر أخرى. نُبقي overflow-x:auto مع سكرول أفقي داخلي واضح دومًا. */
  .table-wrapper{ overflow-x:auto; }
}

@media (min-width:1280px){
  :root{ --sidebar-w:260px; }
  .nav-btn{ font-size:13.5px; padding:14px 18px; }
  .nav-btn .nav-icon{ font-size:18px; }
}