/* خطوط جوجل بقت متحمّلة بـ <link> في <head> كل صفحة (مش @import هنا) — عشان تتحمّل بالتوازي مع باقي الصفحة من الأول بدل ما المتصفح يكتشفها متأخر جوه ملف الـ CSS، ده بيقلل وقت ظهور الخط الصح بشكل كبير */

:root{
  color-scheme:light;
  --bg:#eef2f9; --surface:#ffffff; --surface-2:#f4f6fb; --border:#e6eaf1;
  --text:#1b2436; --muted:#6b7688; --accent:#1f6b47; --accent-2:#2a8560; --accent-3:#1f6b47; --accent-dim:#eaf0fe;
  --prio-high:#e0503f; --prio-med:#e0a53c; --prio-low:#2a8560;
  --status-new:#e0503f; --status-doing:#2a8560; --status-done:#22b573;
  --good:#1a9455; --warn:#b3791c; --bad:#d0402c; --teal:#0f8a7e; --on-accent:#ffffff;
  --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c1116; --surface:#212b36; --surface-2:#2a3542; --border:#313d4a;
  --text:#f0f3f7; --muted:#a7afba; --accent:#2dd9ae; --accent-2:#5babf0; --accent-3:#b98cf2; --accent-dim:rgba(45,217,174,.14);
  --prio-high:#f2726f; --prio-med:#f2a83f; --prio-low:#5babf0;
  --status-new:#f2726f; --status-doing:#5babf0; --status-done:#41cd8c;
  --good:#41cd8c; --warn:#f2a83f; --bad:#f2726f; --teal:#2dd9ae; --on-accent:#06231c;
  --font-body:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;
  display:flex;flex-direction:column;cursor:default;user-select:none;-webkit-user-select:none;}
/* نصوص/محتوى فعلي المفروض المستخدم يقدر يحدده وينسخه (رسايل، كومنتات، ملاحظات، خانات الجداول...) */
input,textarea,select,[contenteditable="true"]{cursor:auto;user-select:text;-webkit-user-select:text;}
td,.comment-body,.chat-msg,.client-notes p,.rem-card-body,.ticket-desc,.last-comment,
.mono,p,.field-hint,.field-val{cursor:auto;user-select:text;-webkit-user-select:text;}
:root[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px;}
:root[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg);}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--surface-2);border:2px solid var(--bg);border-radius:20px;}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--border);}
::selection{background:var(--accent-dim);color:var(--text);}
.app{flex:1 0 auto;}
.rwt-footer{flex-shrink:0;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
a{color:var(--accent-2);text-decoration:none;}
.app{width:100%;max-width:1600px;margin-inline:0 auto;padding:24px 28px 60px;}
.app-wide{max-width:1500px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.row-fade{animation:fadeUp .35s ease both;}
@keyframes rowFlash{0%{background:var(--accent-dim);}100%{background:transparent;}}
.row-flash{animation:rowFlash 1.8s ease;}
@media (prefers-reduced-motion:reduce){.row-flash{animation:none;}}
.stat, .form-card, .comment, .a-panel{transition:transform .15s ease, box-shadow .15s ease;}
.stat:hover{transform:translateY(-2px);}

.topbar-band{border-bottom:1px solid var(--border);}
header.top{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:12px;
  max-width:1500px;margin:0 auto;padding:18px 24px;}
.brand-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1 1 0;min-width:0;}
.client-brand-corner{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(-4px);
  animation:clientBrandIn .6s ease .15s forwards;}
.client-brand-logo{height:40px;width:auto;max-width:170px;object-fit:contain;}
@keyframes clientBrandIn{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.client-brand-corner{animation:none;opacity:1;transform:none;}}
.logo-img{height:40px;width:auto;border-radius:6px;}
.brand .name{font-size:12px;color:var(--muted);}
.brand h1{margin:0;font-size:22px;font-weight:700;color:var(--text);white-space:nowrap;}
.me-box{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 1 auto;justify-content:center;
  row-gap:8px;}
.top-spacer{flex:1 1 0;}
@media (max-width:1120px){
  header.top{flex-wrap:wrap;align-items:flex-start;}
  .brand-row{flex:0 0 auto;}
  .me-box{flex:1 1 auto;justify-content:flex-end;}
  .top-spacer{display:none;}
}
.me-pill{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  padding:5px 10px;border-radius:8px;font-size:12px;box-shadow:0 2px 8px -4px rgba(20,30,60,.15);white-space:nowrap;}
.me-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);}
.badge{font-size:11px;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-dim);
  padding:1px 7px;border-radius:4px;margin-inline-start:6px;}
.bell{position:relative;}
.bell-count{position:absolute;top:-6px;left:-6px;background:var(--prio-high);color:#fff;font-size:10px;
  border-radius:50%;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

/* ===== الشريط الجانبي (Sidebar Shell) ===== */
.app-sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--v2-sidebar-w,248px);background:var(--surface);
  border-inline-end:1px solid var(--border);display:flex;flex-direction:column;z-index:150;}
body{margin-inline-start:var(--v2-sidebar-w,248px);}
.sidebar-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 18px 14px;flex-shrink:0;min-width:0;}
.sidebar-brand-mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-brand-word{font-size:14.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-brand-word em{font-style:normal;font-weight:500;color:var(--muted);}
.sidebar-brand .client-brand-logo{height:36px;width:auto;max-width:100%;object-fit:contain;}

.sidebar-nav{flex:1 1 auto;overflow-y:auto;padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px;min-height:0;}
.sidebar-link{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;
  color:var(--muted);border-radius:9px;font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none;
  text-align:start;box-shadow:none;transition:background .12s ease,color .12s ease;}
.sidebar-link:hover{background:var(--accent-dim);color:var(--accent);transform:none;border-color:transparent;}
.sidebar-link.active{background:var(--accent);color:var(--on-accent);font-weight:600;}
.sidebar-link .nav-ic{flex-shrink:0;}
.sidebar-link span:not(.nav-count):not(.alarm-bell){flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-link .nav-caret{flex-shrink:0;opacity:.6;transition:transform .15s ease;}
.sidebar-link:has(+ .user-menu-panel.open) .nav-caret{transform:rotate(180deg);}
.sidebar-group{position:relative;}
.sidebar-link .nav-count{margin:0;}
/* قوايم الأقسام (مشتريات/تجاري/حسابات...) بقت بتتمدد جوه السايدبار نفسه بدل ما تطلع بوب أب فوق المحتوى */
.sidebar-group > .user-menu-panel{position:static;top:auto;inset-inline-end:auto;display:none;min-width:0;
  margin-block:2px 4px;padding-block:4px;padding-inline-start:10px;background:transparent;border:none;
  border-inline-start:2px solid var(--border);border-radius:0;box-shadow:none;}
.sidebar-group > .user-menu-panel.open{display:block;}

/* NOTE: a legacy `@media (max-width:980px)` block used to live here, forcing a
   76px icon rail via `.app-sidebar{width:76px}` + `body{margin-inline-start:76px}`
   + `.content-topbar{inset-inline-start:76px}`. It predated the v2 sidebar, whose
   later `.app-sidebar{width:var(--v2-sidebar-w)}` / `.content-topbar{inset-inline-start:
   var(--v2-sidebar-w)}` rules won the cascade for the sidebar and topbar but NOT for
   `body` — so between 761px and 980px the sidebar and topbar sat at 224px while the
   page body was only offset 76px, hiding ~150px of every page's leading edge under
   the sidebar. Sidebar width, body offset and topbar inset now all derive from the v2
   tokens keyed on ONE state (`.app-sidebar.collapsed` / `body.sidebar-collapsed`,
   see "Sidebar v2" below); the icon-rail default for tablet widths is applied by that
   same state via includes/header.php + assets/app.js, not by a parallel set of rules. */

/* ===== شريط علوي: هوية المستخدم + الساعات + الإشعارات + الثيم/اللغة ===== */
.content-topbar{position:fixed;top:0;inset-inline-start:var(--v2-sidebar-w,248px);inset-inline-end:0;height:58px;z-index:140;}
.content-topbar-inner{height:100%;background:var(--surface);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 18px;}
.topbar-user-menu{flex-shrink:0;min-width:0;}
.topbar-user-btn{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border:none;background:transparent;
  cursor:pointer;box-shadow:none;min-width:0;border-radius:999px;}
.topbar-user-btn:hover{transform:none;background:var(--accent-dim);}
.topbar-user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.topbar-user-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.topbar-user-role{font-size:10.5px;color:var(--muted);}
.content-topbar .me-box{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;}
.content-topbar .me-box .icon-btn{position:relative;}
.content-topbar .me-box .icon-btn .nav-count{position:absolute;top:-2px;left:-2px;margin:0;min-width:15px;height:15px;font-size:9px;}

button,.btn{font-family:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);padding:8px 14px;font-size:13px;display:inline-block;text-decoration:none;
  transition:all .15s ease;box-shadow:0 2px 6px -4px rgba(20,30,60,.15);}
button:hover,.btn:hover{border-color:var(--accent-2);transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 6px 16px -6px rgba(31,107,71,.45);}
.btn.ghost{background:transparent;box-shadow:none;}
.btn.small{padding:4px 9px;font-size:12px;}
.me-box .btn.small{padding:6px 12px;font-size:13px;color:var(--muted);border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.nav-ic{flex-shrink:0;}
.me-box .btn.small:hover{transform:none;background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);}
.me-box .btn.small.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 4px 12px -5px rgba(31,107,71,.5);}
.me-box .btn.small.active:hover{background:var(--accent);color:#fff;}
.btn.small.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px;color:var(--muted);}
.btn.small.icon-btn:hover{color:var(--accent);}
.btn.danger:hover{border-color:var(--prio-high);color:var(--prio-high);}

.stats{display:flex;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.stat{flex:1;min-width:150px;padding:18px 20px;border-radius:14px;color:#fff;
  box-shadow:0 8px 20px -10px rgba(20,30,60,.35);}
.stat:nth-child(1){background:linear-gradient(135deg,#2a8560,#1f6b47);}
.stat:nth-child(2){background:linear-gradient(135deg,#2a8560,#1f6b47);}
.stat:nth-child(3){background:linear-gradient(135deg,#2fc4b8,#12b3a8);}
.stat:nth-child(4){background:linear-gradient(135deg,#f0705f,#e0503f);}
/* ألوان دلالية للإحصائيات — بتتخطى ترتيب الـ nth-child */
.stat.s-blue{background:linear-gradient(135deg,#2a8560,#1f6b47);}
.stat.s-purple{background:linear-gradient(135deg,#2a8560,#1f6b47);}
.stat.s-teal{background:linear-gradient(135deg,#2fc4b8,#12b3a8);}
.stat.s-green{background:linear-gradient(135deg,#34c97e,#22b573);}
.stat.s-red{background:linear-gradient(135deg,#f0705f,#e0503f);}
.stat.s-amber{background:linear-gradient(135deg,#f0a83c,#e0902b);}
.stat.s-gray{background:linear-gradient(135deg,#9aa4b5,#6b7688);}
.stat .num{font-family:'JetBrains Mono';font-size:26px;font-weight:700;}
.stat .label{font-size:12px;color:rgba(255,255,255,.85);margin-top:2px;}

.toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
.toolbar-group{display:flex;gap:6px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;}
.emp-tabs{margin-bottom:16px;width:fit-content;}
.toolbar-group .btn{box-shadow:none;}
.toolbar-sep{width:1px;align-self:stretch;background:var(--border);margin:2px 0;}
.toolbar input,.toolbar select{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--text);}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--accent-2);background:var(--surface);}
.toolbar-filter-q{width:160px;}
.toolbar-filter-status{width:120px;}
.toolbar .fp-alt-input.field-like{width:118px!important;padding:8px 10px!important;font-size:12.5px!important;}
@media (max-width:900px){.toolbar-sep{display:none;}.toolbar-filter-q,.toolbar-filter-status{width:auto;flex:1 1 140px;}}

/* List view */
.list-wrap{border:1px solid var(--border);border-radius:14px;overflow-x:auto;overflow-y:hidden;background:var(--surface);
  box-shadow:0 4px 16px -10px rgba(20,30,60,.2);}
table.ticket-list{width:100%;border-collapse:collapse;font-size:13.5px;}
table.ticket-list thead th{text-align:center;padding:12px 14px;font-size:11.5px;color:var(--muted);
  border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap;}
table.ticket-list thead th.sortable{padding:0;}
table.ticket-list thead th.sortable a{display:block;padding:12px 14px;color:inherit;text-decoration:none;
  font-size:inherit;transition:background .12s ease,color .12s ease;}
table.ticket-list thead th.sortable a:hover{background:var(--accent-dim);color:var(--accent);}
table.ticket-list thead th.sortable.active a{color:var(--accent);font-weight:700;}
.sort-arrow{font-size:9px;opacity:.45;margin-inline-start:2px;vertical-align:middle;}
th.sortable.active .sort-arrow{opacity:1;}
table.ticket-list tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:center;}
table.ticket-list tbody tr:hover{background:var(--accent-dim);}
table.ticket-list tbody tr:last-child td{border-bottom:none;}
.col-id{width:70px;color:var(--muted);}
.col-title{min-width:180px;}
table.ticket-list tbody td.col-title{text-align:start;}
.col-title a{color:var(--text);font-weight:400;font-size:15px;line-height:1.5;
  font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;}
.col-title a:hover{color:var(--accent);}
.col-assignees-cell{width:150px;}

.assignee-chip{display:inline-block;background:var(--surface-2);border:1px solid var(--border);
  padding:3px 10px;border-radius:20px;font-size:11.5px;margin:2px 3px 2px 0;}
.due{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted);}
.due.overdue{color:var(--prio-high);font-weight:700;animation:overduePulse 1.25s ease-in-out infinite;}
.status-btn.is-saving{opacity:.65;font-style:italic;pointer-events:none;}

/* توست الإشعارات اللايف */
.notif-toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-140%);z-index:300;
  display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 16px;
  box-shadow:0 16px 40px -10px rgba(20,30,60,.35);text-decoration:none;color:var(--text);
  font-size:13px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2);}
.notif-toast.show{transform:translate(-50%,0);}
.notif-toast-icon{font-size:16px;flex-shrink:0;}
.notif-toast-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notif-toast:hover{border-color:var(--accent-2);}
.due.soon{color:var(--prio-med);font-weight:700;}
@keyframes overduePulse{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.due.overdue{animation:none;}}

.status-form{display:inline-block;}
.status-select{border:none;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff;
  cursor:pointer;appearance:none;-webkit-appearance:none;text-align:center;}
.status-select.status-new{background:var(--status-new);}
.status-select.status-doing{background:var(--status-doing);}
.status-select.status-done{background:var(--status-done);}

.prio-flag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;}
.prio-flag::before{content:'⚑';font-size:12px;}
.prio-flag.prio-high{color:var(--prio-high);}
.prio-flag.prio-med{color:var(--prio-med);}
.prio-flag.prio-low{color:var(--prio-low);}

.empty-col{color:var(--muted);font-size:13px;padding:30px 8px;text-align:center;}

.col-last-update{white-space:nowrap;width:128px;}
.last-update-cell{display:flex;align-items:center;gap:7px;justify-content:center;}

/* زرار "إظهار التحديثات" — نقطة حمرا بتلف حوالين الإطار */
.updates-btn{position:relative;isolation:isolate;overflow:hidden;border:none;background:transparent;color:var(--prio-high);
  font-weight:700;font-size:10.5px;font-family:inherit;border-radius:999px;padding:5px 10px;cursor:pointer;
  white-space:nowrap;box-shadow:none;line-height:1.4;}
.updates-btn::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:240px;height:240px;
  translate:-50% -50%;
  background:conic-gradient(from 0deg,
    rgba(224,80,63,.10) 0%, rgba(224,80,63,.10) 74%,
    #e0503f 84%, #ff9d90 89%, #e0503f 92%,
    rgba(224,80,63,.10) 98%, rgba(224,80,63,.10) 100%);
  animation:updSpin 2.6s linear infinite;}
.updates-btn::after{content:"";position:absolute;z-index:-1;inset:1.6px;border-radius:999px;background:var(--surface);
  transition:background .15s;}
.updates-btn:hover::after{background:#fdeeeb;}
.updates-btn:hover{transform:none;}
@keyframes updSpin{from{rotate:0deg;}to{rotate:360deg;}}
@media (prefers-reduced-motion:reduce){
  .updates-btn::before{animation:none;background:rgba(224,80,63,.35);}
}
.tv2-updates-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}

/* توقيت التحديث في البوب أب: الساعة فوق والتاريخ تحت */
.upd-stamp{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;line-height:1.3;}
.upd-clock{font-size:11px;color:var(--muted);}
.upd-day{font-size:10px;color:var(--muted);opacity:.85;}
.system-comment .upd-stamp{align-items:flex-end;}

/* Updates popup */
.updates-modal{max-width:520px;width:100%;text-align:start;}
.updates-modal h2{margin:0 0 4px;font-size:16px;}
.updates-modal .updates-sub{font-size:12px;color:var(--muted);margin-bottom:12px;}
.updates-feed{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-inline-end:4px;}
.updates-empty{color:var(--muted);font-size:13px;text-align:center;padding:20px;}

.form-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;max-width:460px;margin:0 auto;
  box-shadow:0 4px 16px -10px rgba(20,30,60,.2);}

/* صفحة تسجيل الدخول — خلفية متحركة هادئة + دخول الكارت بحركة ناعمة */
body.login-body{justify-content:center;position:relative;overflow:hidden;}
.login-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.28;}
.login-orb.o1{width:440px;height:440px;background:var(--accent-2);top:-140px;inset-inline-start:-120px;
  animation:loginDrift1 24s ease-in-out infinite alternate;}
.login-orb.o2{width:380px;height:380px;background:var(--accent-3);bottom:-150px;inset-inline-end:-110px;
  animation:loginDrift2 28s ease-in-out infinite alternate;}
.login-orb.o3{width:280px;height:280px;background:var(--accent);top:38%;inset-inline-start:42%;opacity:.18;
  animation:loginDrift3 32s ease-in-out infinite alternate;}
@keyframes loginDrift1{from{transform:translate(0,0);}to{transform:translate(70px,50px);}}
@keyframes loginDrift2{from{transform:translate(0,0);}to{transform:translate(-60px,-45px);}}
@keyframes loginDrift3{from{transform:translate(0,0) scale(1);}to{transform:translate(-45px,35px) scale(1.18);}}
.login-body .app{position:relative;z-index:1;flex:0 0 auto;width:100%;
  animation:loginCardIn .65s cubic-bezier(.22,1,.36,1) both;}
.login-brand{text-align:center;}
.login-brand h1{margin-top:4px;}
.login-toolbar{position:fixed;top:22px;left:22px;z-index:2;direction:ltr;gap:12px;}
.login-seg{display:inline-flex;padding:5px;border-radius:13px;gap:5px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(6px);box-shadow:0 8px 24px -10px rgba(20,30,60,.35);}
.login-seg .seg{padding:10px 20px;font-size:14px;border-radius:9px;gap:7px;}
.login-seg .seg{border:1.5px solid transparent;}
.login-seg .seg.on{box-shadow:0 3px 12px -4px rgba(20,30,60,.3);border-color:var(--accent-2);}
.seg-letter{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  font-size:14px;font-weight:800;line-height:1;flex-shrink:0;}
@media (max-width:560px){
  .login-toolbar{position:static;justify-content:center;margin:16px auto 0;padding:0 12px;}
  .login-seg .seg{padding:8px 14px;font-size:12.5px;}
}

/* ليستة المسميات الوظيفية جوه القسم */
.jt-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.jt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;}
.jt-row .icon-btn{color:var(--muted);}
.jt-row .icon-btn:hover{color:var(--bad);}

/* شاشة الترحيب بعد تسجيل الدخول — الأفاتار بيظهر وبعدين يصغّر ويتحرك لمكان الأفاتار في الهيدر */
.welcome-overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:color-mix(in srgb,var(--bg) 45%,transparent);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease,background .4s ease;cursor:pointer;}
.welcome-overlay.show{opacity:1;pointer-events:auto;}
.welcome-overlay.shrink{background:transparent;backdrop-filter:none;}
.welcome-avatar-ring{position:relative;display:inline-flex;}
.welcome-avatar-ring::before{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:3px solid transparent;border-top-color:var(--accent-2);border-inline-end-color:var(--accent-2);
  opacity:0;transition:opacity .3s ease;animation:welcomeRingSpin .9s linear infinite;}
.welcome-overlay.show .welcome-avatar-ring::before{opacity:1;}
.welcome-overlay.shrink .welcome-avatar-ring::before{opacity:0;}
@keyframes welcomeRingSpin{to{transform:rotate(360deg);}}
.welcome-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--accent-2),var(--accent-3));color:#fff;
  font-size:34px;font-weight:800;font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 25%,transparent),0 20px 50px -15px rgba(0,0,0,.5);
  transform:scale(.4);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .4s ease;
  flex-shrink:0;transform-origin:center center;}
.welcome-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.welcome-overlay.show .welcome-avatar{transform:scale(1);opacity:1;}
.welcome-text{color:var(--text);font-size:20px;font-weight:700;font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease .15s,transform .4s ease .15s;}
.welcome-overlay.show .welcome-text{opacity:1;transform:translateY(0);}
.welcome-overlay.shrink .welcome-text{opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;}
@media (prefers-reduced-motion:reduce){
  .welcome-overlay,.welcome-avatar,.welcome-text{transition:none!important;}
  .welcome-avatar-ring::before{animation:none!important;}
}
@keyframes loginCardIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* نجوم بتلمع في خلفية صفحة الدخول */
.login-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.login-stars .star{position:absolute;border-radius:50%;background:var(--text);animation:starTwinkle 3s ease-in-out infinite;}
@keyframes starTwinkle{0%,100%{opacity:.12;transform:scale(.8);}50%{opacity:.9;transform:scale(1.15);}}

/* شبكة مدارية خلف كارت الدخول — دوائر متقطعة بتلف ببطء */
.orbit-stage{position:absolute;top:50%;left:50%;width:0;height:0;z-index:0;}
.orbit-ring{position:absolute;top:0;left:0;width:0;height:0;border-radius:50%;}
.orbit-ring::before{content:'';position:absolute;border:1px dashed color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:50%;pointer-events:none;}
.ring-b{animation:orbitSpin 55s linear infinite reverse;}
.ring-b::before{width:640px;height:640px;top:-320px;left:-320px;}
.ring-c{animation:orbitSpin 75s linear infinite;}
.ring-c::before{width:820px;height:820px;top:-410px;left:-410px;opacity:.6;}
@keyframes orbitSpin{to{transform:rotate(360deg);}}

.orbit-node{position:absolute;top:0;left:0;transform:rotate(var(--angle)) translateX(var(--radius));}
.orbit-node-inner{position:absolute;top:0;left:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));}
.ring-b .orbit-node-inner{animation:orbitCounterRev 55s linear infinite;}
.ring-c .orbit-node-inner{animation:orbitCounter 75s linear infinite;}
@keyframes orbitCounter{
  from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle) - 360deg));}
}
@keyframes orbitCounterRev{
  from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle) + 360deg));}
}
.orbit-node-inner.icon{width:19px;height:19px;color:var(--accent-2);opacity:.55;}
.orbit-node-inner.icon svg{width:100%;height:100%;display:block;}
.orbit-node-inner.icon.small{width:14px;height:14px;opacity:.35;color:var(--accent-3);}

@media (max-width:640px){.ring-c{display:none;}}
@media (prefers-reduced-motion:reduce){
  .login-orb{animation:none;}
  .login-body .app{animation:none;}
  .orbit-ring,.orbit-node-inner,.login-stars .star{animation:none!important;}
}

/* شاشة "تحت الإنشاء" */
.soon-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:56px 32px;
  max-width:520px;margin:48px auto;text-align:center;box-shadow:0 4px 20px -12px rgba(20,30,60,.25);}
.soon-card .soon-icon{margin-bottom:14px;line-height:1;color:var(--muted);display:flex;justify-content:center;}
.soon-card h2{margin:0 0 10px;font-size:20px;}
.soon-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.9;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-2);background:var(--surface);}
.field textarea{resize:vertical;min-height:70px;}
.field input[type="file"]{cursor:pointer;color:var(--muted);border-style:dashed;transition:border-color .15s,background .15s;}
.field input[type="file"]:hover{border-color:var(--accent-2);background:var(--surface);}
.field input[type="file"]::file-selector-button{background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:6px 14px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
  margin-inline-end:10px;transition:background .15s,border-color .15s;}
.field input[type="file"]::file-selector-button:hover{background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);}

/* سهم موحّد لكل الـselect في السوفتوير (بدل سهم المتصفح الافتراضي) */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-color:var(--surface-2);background-repeat:no-repeat;background-size:12px;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-image:var(--sel-arrow);}
select::-ms-expand{display:none;}
html[dir="rtl"] select{background-position:10px center;padding-left:28px;}
html[dir="ltr"] select{background-position:right 10px center;padding-right:28px;}
:root[data-theme="dark"] select{--sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B93A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");}
select.status-select{background-image:none;padding-left:14px;padding-right:14px;}
.flatpickr-calendar select{appearance:auto;-webkit-appearance:auto;background-image:none;padding:0;}

/* سيليكت مخصّص (custom select) — بيبدّل شكل الـselect الافتراضي بديزاين وفونت هوية النظام في كل مكان */
.csel{position:relative;display:inline-block;}
.field .csel,.toolbar-filter-status.csel,.toolbar-filter-q.csel{width:100%;}
.csel-native{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%;margin:0;padding:0;border:0;}
.csel-trigger{width:100%;display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px;
  font-family:inherit;line-height:1.3;cursor:pointer;text-align:start;transition:border-color .15s,background .15s;}
.csel-trigger:hover{border-color:var(--accent-2);}
.csel-trigger:focus-visible{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-dim);}
.csel.open .csel-trigger{border-color:var(--accent-2);background:var(--surface);}
.csel-trigger:disabled{opacity:.55;cursor:not-allowed;}
.csel-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.csel-value.is-placeholder{color:var(--muted);}
.csel-chevron{flex-shrink:0;display:flex;color:var(--muted);transition:transform .15s;}
.csel.open .csel-chevron{transform:rotate(180deg);}
.toolbar .csel-trigger,.filter-bar .csel-trigger{padding:8px 10px;font-size:12.5px;}
.rep-row .csel{width:100%;}
.csel-menu{position:fixed;z-index:2000;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 14px 36px -10px rgba(15,23,42,.35);padding:5px;
  width:max-content;max-width:min(420px,calc(100vw - 16px));font-family:inherit;}
.csel-options{position:relative;max-height:280px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;outline:none;}
.csel-search{width:100%;box-sizing:border-box;margin-bottom:5px;padding:7px 10px;border:1px solid var(--border);
  border-radius:7px;background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;}
.csel-search:focus{outline:none;border-color:var(--accent-2);}
.csel-option{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;font-size:13.5px;color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;}
.csel-opt-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.csel-option:hover,.csel-option.is-active{background:var(--accent-dim);color:var(--accent);}
.csel-option.is-selected{font-weight:700;}
.csel-option.is-disabled{opacity:.4;cursor:not-allowed;}
.csel-option.is-disabled:hover{background:transparent;color:var(--text);}
.csel-option[hidden]{display:none;}
.csel-empty{padding:10px 12px;color:var(--muted);font-size:12.5px;text-align:center;}

/* ---- Albero dropdown, shared states (keyboard / ARIA / multiple / loading / error): see assets/app.js ---- */
.csel-trigger{font-family:inherit;color:var(--text);}
.csel.is-disabled .csel-trigger,.csel-trigger:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2);}
.csel.is-disabled .csel-trigger:hover{border-color:var(--border);}
.csel.is-invalid .csel-trigger{border-color:var(--bad);}
.csel.is-invalid .csel-trigger:focus-visible,.csel.is-invalid.open .csel-trigger{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);}
.csel-spin{display:none;flex-shrink:0;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:cselspin .7s linear infinite;}
.csel.is-loading .csel-spin{display:block;} .csel.is-loading .csel-chevron{display:none;}
@keyframes cselspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.csel-spin{animation-duration:2s;}.csel-chevron{transition:none;}}
.csel-check{flex-shrink:0;opacity:0;color:var(--accent);} .csel-option.is-selected .csel-check{opacity:1;}
.csel-option.is-active{background:var(--accent-dim);color:var(--accent);} .csel-option.is-selected{font-weight:700;}
.csel-menu-multi .csel-check{display:none;}
.csel-box{flex-shrink:0;width:15px;height:15px;border:1.5px solid var(--muted);border-radius:4px;background:var(--surface);position:relative;}
.csel-option.is-selected .csel-box{background:var(--accent);border-color:var(--accent);}
.csel-option.is-selected .csel-box:after{content:"";position:absolute;inset-inline-start:4px;top:1px;width:4px;height:8px;border:solid var(--on-accent,#fff);border-width:0 2px 2px 0;transform:rotate(45deg);}
.csel-group-t{padding:8px 12px 4px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;}
.csel-group + .csel-group{border-top:1px solid var(--border);margin-top:4px;}
.csel-bar{display:flex;gap:6px;margin-bottom:5px;}
.csel-barbtn{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12px;cursor:pointer;}
.csel-barbtn:hover{border-color:var(--accent-2);color:var(--accent);}
.csel-search{font-family:inherit;color:var(--text);} .csel-search::placeholder{color:var(--muted);}
.csel-search:focus{box-shadow:0 0 0 3px var(--accent-dim);}
.csel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.csel-menu[dir="rtl"] .csel-option,.csel-menu[dir="rtl"] .csel-search{text-align:right;}
@media (forced-colors:active){.csel-option.is-active{outline:2px solid Highlight;}.csel-trigger:focus-visible{outline:2px solid Highlight;}}
.checkbox-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface-2);}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;}
.error{background:color-mix(in srgb, var(--bad) 12%, var(--surface));border:1px solid var(--bad);color:var(--bad);padding:10px 12px;border-radius:8px;
  font-size:13px;margin-bottom:14px;}
.notice{background:var(--accent-dim);border:1px solid var(--accent-2);color:var(--accent);padding:10px 12px;
  border-radius:8px;font-size:13px;margin-bottom:14px;}

table.simple{width:100%;border-collapse:collapse;font-size:13.5px;font-family:inherit;}
table.simple thead th{text-align:start;padding:11px 14px;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.02em;
  text-transform:uppercase;}
table.simple tbody td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:start;vertical-align:middle;
  color:var(--text);}
table.simple tbody tr:last-child td{border-bottom:none;}
table.simple tbody tr:hover{background:var(--accent-dim);}

/* two-column admin layout: list + side form */
.admin-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;align-items:start;}
.admin-split > .form-card{width:100%;max-width:none;margin:0;}
@media (max-width:900px){.admin-split{grid-template-columns:1fr;}}

/* clean data table (users / branches / roles) */
.data-table tbody tr{transition:background .1s ease;}
.data-table tbody td{white-space:nowrap;}
.data-table td.perms-cell{white-space:normal;}
.data-table .avatar-col{width:46px;padding-inline-end:0;}
.data-table .avatar-col .avatar,.data-table .avatar-col .avatar-fallback{width:32px;height:32px;font-size:12.5px;}
.data-table .email-cell{font-size:12px;color:var(--muted);}
.data-table .row-actions{white-space:nowrap;text-align:end;}
.data-table .row-actions .btn{padding:4px 10px;}
table.simple th.num-cell,table.simple td.num-cell{text-align:center;}
.stat-mini{font-size:12.5px;color:var(--muted);}
.stat-mini strong{color:var(--text);font-weight:700;font-size:13px;}
.stat-mini .stat-mini-sep{margin:0 4px;opacity:.5;}
.stat-zero{color:var(--border);font-size:14px;}

/* pill tags */
.tag{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:11.5px;
  font-weight:600;line-height:1.7;white-space:nowrap;}
.tag-role{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);}
.tag-branch{background:color-mix(in srgb, var(--teal) 16%, transparent);color:var(--teal);}

/* request status badges */
.req-status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:11.5px;
  font-weight:700;white-space:nowrap;}
.req-pending_manager{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);}
.req-pending_admin{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);}
.req-approved{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);}
.req-rejected{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);}

.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--prio-high);color:#fff;font-size:10px;font-weight:700;margin-inline-start:4px;}

.req-decision-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:6px;}
.req-decision-box textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 10px;
  font-family:inherit;font-size:13px;min-height:56px;color:var(--text);}
.req-decision-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.hint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.7;}
.section-title{font-size:15px;font-weight:700;margin:0 0 14px;}
.settings-link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.settings-link-card .btn{flex-shrink:0;}

/* Permission toggles (custom role builder) */
.perm-list{display:flex;flex-direction:column;gap:10px;}
.perm-list .perm-toggle{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
  margin:0;padding:13px 16px;border-radius:11px;font-size:13.5px;font-weight:600;line-height:1.4;
  border:1.5px solid color-mix(in srgb, var(--bad) 35%, transparent);background:color-mix(in srgb, var(--bad) 10%, var(--surface));color:var(--bad);
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;}
.perm-list .perm-toggle input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}
.perm-list .perm-toggle .perm-text{flex:1;}
.perm-list .perm-toggle .perm-state{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:var(--bad);}
.perm-list .perm-toggle .perm-state::before{content:'\2715';}
.perm-list .perm-toggle:hover{box-shadow:0 3px 10px -4px rgba(0,0,0,.3);}
.perm-list .perm-toggle.is-on{border-color:color-mix(in srgb, var(--good) 40%, transparent);background:color-mix(in srgb, var(--good) 10%, var(--surface));color:var(--good);}
.perm-list .perm-toggle.is-on .perm-state{background:var(--good);}
.perm-list .perm-toggle.is-on .perm-state::before{content:'\2713';}
.perm-list .perm-toggle:focus-within{outline:2px solid var(--accent-2);outline-offset:2px;}

/* Ticket detail page */
.ticket-detail{max-width:760px;margin:0 auto;}
.ticket-main{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;
  box-shadow:0 4px 16px -10px rgba(20,30,60,.2);}
.ticket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.ticket-title{margin:0 0 10px;font-size:20px;}
.ticket-desc{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px;}
.ticket-meta-row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px;}
.meta-item{display:flex;flex-direction:column;gap:6px;}
.meta-label{font-size:11.5px;color:var(--muted);}
.divider{border:none;border-top:1px solid var(--border);margin:24px 0;}

.comments-feed{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.comment{border-radius:10px;padding:12px 14px;}
.comment.system-comment{background:var(--surface-2);border:1px dashed var(--border);font-size:12.5px;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;padding:8px 14px;}
.comment.user-comment{background:var(--surface-2);border:1px solid var(--border);}
.comment-top{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;}
.comment-time{color:var(--muted);font-size:11px;}
.comment-body{font-size:13.5px;line-height:1.6;margin:0;}
.attachments-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.attachment-chip{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:5px 10px;font-size:12px;}
.attachment-chip:hover{border-color:var(--accent-2);}
.comment-form-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:16px;}

.notif-list{display:flex;flex-direction:column;gap:6px;}
.notif-row{display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;color:var(--text);font-size:13px;box-shadow:0 2px 8px -6px rgba(20,30,60,.15);}
.notif-row.unread{border-inline-start:3px solid var(--accent-2);background:var(--accent-dim);}
.notif-row:hover{border-color:var(--accent-2);}

/* Icon status dropdown */
.status-widget{position:relative;display:inline-block;}
.status-btn{border:none;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.status-btn:disabled{cursor:default;opacity:.85;}
.status-btn.status-new{background:var(--status-new);}
.status-btn.status-doing{background:var(--status-doing);}
.status-btn.status-done{background:var(--status-done);}
.status-btn.status-cancelled{background:#8b95a5;}
.status-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:170px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;
  box-shadow:0 10px 28px -8px rgba(20,30,60,.28);display:none;}
.status-panel.open{display:block;}
.status-group-label{font-size:10.5px;color:var(--muted);padding:6px 8px 2px;text-transform:uppercase;letter-spacing:.03em;}
.status-option{padding:8px 10px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;}
.status-option:hover{background:var(--accent-dim);}

/* Modal (used for cancel reason etc) */
.overlay{position:fixed;inset:0;background:rgba(20,30,50,.45);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;width:100%;max-width:420px;
  box-shadow:0 20px 50px -12px rgba(20,30,60,.35);}
.modal h2{margin:0 0 14px;font-size:16px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}

/* Broadcast (push) modal */
.broadcast-overlay{z-index:120;}
.broadcast-modal{max-width:460px;text-align:center;animation:fadeUp .25s ease both;}
.broadcast-modal h2{font-size:18px;margin:0 0 12px;}
.broadcast-flag{display:inline-block;background:var(--accent-dim);color:var(--accent);font-size:11.5px;
  font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:14px;}
.broadcast-img{width:100%;max-height:320px;object-fit:contain;border-radius:10px;border:1px solid var(--border);
  margin:6px 0 12px;background:var(--surface-2);}
.broadcast-body{font-size:14px;line-height:1.7;color:var(--text);margin:0 0 4px;white-space:pre-wrap;}
.broadcast-modal .modal-actions{justify-content:center;margin-top:16px;}
.broadcast-modal .btn.primary{min-width:120px;}

/* Footer */
.rwt-footer{text-align:center;font-size:11.5px;color:var(--muted);padding:28px 10px 34px;
  display:flex;flex-direction:column;align-items:center;gap:10px;}
.albero-brand-link{display:block;line-height:0;}
.albero-brand-logo{height:54px;width:auto;display:block;}
body.login-body .rwt-footer .albero-brand-logo{height:78px;}
body.login-body .rwt-footer{padding-top:10px;}
.albero-brand-logo-light{display:block;}
.albero-brand-logo-dark{display:none;}
:root[data-theme="dark"] .albero-brand-logo-light{display:none;}
:root[data-theme="dark"] .albero-brand-logo-dark{display:block;}
.rwt-footer-line{font-size:11.5px;color:var(--muted);}

/* Dual clock */
.rwt-clocks{display:flex;gap:6px;align-items:stretch;margin-inline-end:6px;}
.rwt-clock{background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);
  border-radius:9px;padding:5px 10px;min-width:92px;font-family:'JetBrains Mono';display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;line-height:1.25;box-shadow:0 2px 8px -5px rgba(20,30,60,.2);}
.rwt-clock-dot{width:5px;height:5px;border-radius:50%;background:var(--status-done,#22b573);flex-shrink:0;
  display:inline-block;animation:rwtClockPulse 1s ease-in-out infinite;}
@keyframes rwtClockPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.25;transform:scale(.65);}}
.rwt-clock-city{font-size:8px;color:var(--muted);font-family:'IBM Plex Sans Arabic';letter-spacing:.4px;
  display:flex;align-items:center;gap:3px;}
.rwt-clock-time{font-weight:700;font-size:13.5px;color:var(--text);}
@media (prefers-reduced-motion:reduce){.rwt-clock-dot{animation:none;}}

/* Sticky notes floating widget — اتشالت من الواجهة (استغنينا عنها)، الـ CSS فاضل هنا بس لو احتجناها تاني */
.sticky-toggle{position:fixed;bottom:22px;left:22px;z-index:60;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#2a8560,#1f6b47);border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -8px rgba(106,79,224,.55);}
.sticky-panel{position:fixed;bottom:82px;left:22px;z-index:60;width:280px;max-height:400px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:none;
  box-shadow:0 16px 40px -10px rgba(20,30,60,.3);}
.sticky-panel.open{display:block;}
.sticky-note-item{background:#f4f0ff;border:1px solid #cfe6da;border-radius:8px;padding:10px;margin-bottom:8px;font-size:13px;position:relative;}
.sticky-note-item textarea{width:100%;border:none;background:transparent;resize:vertical;font-family:inherit;font-size:13px;min-height:50px;}
.sticky-note-del{position:absolute;top:4px;left:6px;background:none;border:none;color:#2a8560;cursor:pointer;font-size:12px;box-shadow:none;padding:2px;}

/* ===== الرسائل الداخلية ===== */
.chat-panel [hidden],.chat-badge[hidden]{display:none!important;}
.chat-toggle{position:fixed;bottom:22px;left:22px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:var(--teal);border:none;color:var(--on-accent);font-size:23px;cursor:pointer;
  box-shadow:0 12px 28px -8px rgba(15,138,126,.55);display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.chat-toggle:hover{transform:translateY(-2px);}
.chat-badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--prio-high);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);}
.chat-panel{position:fixed;bottom:88px;left:22px;z-index:70;width:660px;max-width:calc(100vw - 44px);
  height:min(540px,calc(100vh - 130px));background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 28px 64px -16px rgba(20,30,60,.45);display:none;overflow:hidden;}
.chat-panel.open{display:flex;}

.chat-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;
  border-inline-end:1px solid var(--border);background:var(--surface-2);}
.chat-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;font-size:15px;}
.chat-close{background:none;border:none;cursor:pointer;font-size:15px;color:var(--muted);padding:2px 6px;box-shadow:none;}
.chat-close:hover{color:var(--accent);transform:none;}
.chat-search{padding:0 12px 10px;}
.chat-search-input{width:100%;border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-family:inherit;
  font-size:12.5px;background:var(--surface);}
.chat-search-input:focus{outline:none;border-color:var(--accent-2);}
.chat-threads{flex:1;overflow-y:auto;padding:4px 6px 8px;}
.chat-threads-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 8px 4px;}
.chat-threads-empty{color:var(--muted);font-size:12px;text-align:center;padding:24px 8px;}
.chat-thread-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;position:relative;}
.chat-thread-item:hover{background:var(--accent-dim);}
.chat-thread-item.active{background:var(--accent);}
.chat-thread-item.active .chat-thread-name,.chat-thread-item.active .chat-thread-last,
.chat-thread-item.active .chat-thread-time{color:#fff;}
.chat-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.chat-avatar-fb{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;font-size:14px;font-weight:700;}
.chat-thread-meta{flex:1;min-width:0;}
.chat-thread-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
.chat-thread-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-thread-last{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.chat-thread-time{font-size:9.5px;color:var(--muted);flex-shrink:0;font-family:'JetBrains Mono';}
.chat-thread-unread{position:absolute;inset-inline-start:8px;bottom:9px;min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--prio-high);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}

.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(160deg,#f5f8f7,#eef3f1);}
.chat-placeholder{margin:auto;text-align:center;color:var(--muted);padding:20px;}
.chat-placeholder-icon{margin-bottom:8px;display:flex;justify-content:center;color:var(--muted);}
.chat-placeholder p{font-size:13px;margin:0;}
.chat-conv{flex:1;display:flex;flex-direction:column;min-height:0;}
.chat-conv-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
  background:var(--surface);}
.chat-back{background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted);padding:0 4px;box-shadow:none;display:none;}
.chat-back:hover{color:var(--accent);transform:none;}
.chat-conv-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;font-size:13px;font-weight:700;}
.chat-conv-name{font-size:14px;font-weight:700;}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;}
.chat-empty{color:var(--muted);font-size:12.5px;text-align:center;margin:auto;}
.chat-msg{max-width:72%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.55;
  box-shadow:0 2px 8px -4px rgba(20,30,60,.14);}
.chat-msg.mine{align-self:flex-end;background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;border-bottom-left-radius:5px;}
.chat-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-right-radius:5px;}
.chat-msg-time{font-size:9.5px;opacity:.7;margin-top:3px;font-family:'JetBrains Mono';text-align:end;}
.chat-msg-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.chat-att-img img{max-width:200px;max-height:180px;border-radius:10px;display:block;}
.chat-att-file{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 9px;border-radius:9px;
  background:rgba(255,255,255,.15);color:inherit;text-decoration:none;}
.chat-att-file.mine{background:rgba(255,255,255,.18);}
.chat-msg.them .chat-att-file{background:var(--surface-2);color:var(--text);}
.chat-att-kb{opacity:.7;font-family:'JetBrains Mono';font-size:10.5px;}

.chat-pending{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0;}
.chat-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:3px 6px 3px 10px;font-size:11.5px;}
.chat-chip button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:11px;box-shadow:none;padding:0 2px;}

.chat-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);align-items:flex-end;background:var(--surface);}
.chat-attach{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;background:var(--surface-2);border:1px solid var(--border);}
.chat-attach:hover{border-color:var(--accent-2);}
.chat-input{flex:1;resize:none;border:1px solid var(--border);border-radius:18px;padding:9px 14px;font-family:inherit;
  font-size:13px;background:var(--surface-2);max-height:110px;line-height:1.4;}
.chat-input:focus{outline:none;border-color:var(--accent-2);background:#fff;}
.chat-send{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#2a8560,#1f6b47);
  color:#fff;font-size:15px;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;}

.chat-dropzone{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(31,107,71,.12);border:3px dashed var(--accent-2);border-radius:12px;margin:8px;
  font-size:14px;font-weight:700;color:var(--accent);z-index:5;}
.chat-panel.dragging .chat-dropzone{display:flex;}

@media (max-width:720px){
  .chat-panel{right:10px;left:10px;width:auto;bottom:84px;height:min(560px,calc(100vh - 120px));}
  .chat-sidebar{width:100%;}
  .chat-panel.conv-open .chat-sidebar{display:none;}
  .chat-panel:not(.conv-open) .chat-main{display:none;}
  .chat-back{display:block;}
  .chat-toggle{left:14px;bottom:14px;}
}

/* مراقبة المحادثات (أدمن) — Internal Team Conversations monitor */
.msgmon{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;}
.msgmon-list-card,.msgmon-thread-card{overflow:hidden;}
.msgmon-list{max-height:600px;overflow-y:auto;padding:8px;}
.msgmon-av-pair{display:flex;flex:0 0 auto;}
.msgmon-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:800;flex:0 0 32px;border:2px solid var(--v2-panel);}
.msgmon-av-pair .msgmon-av:nth-child(2){margin-inline-start:-10px;}
.msgmon-av-sm{width:30px;height:30px;font-size:11.5px;flex:0 0 30px;border:none;}
.msgmon-pair{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--v2-text);transition:background .13s ease;}
.msgmon-pair:hover{background:var(--v2-panel-hover);}
.msgmon-pair.active{background:color-mix(in srgb, var(--m-green) 12%, var(--v2-panel));box-shadow:inset 0 0 0 1.5px var(--m-green);}
.msgmon-pair-body{min-width:0;display:flex;flex-direction:column;gap:2px;}
.msgmon-pair-names{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msgmon-pair-meta{font-size:11px;color:var(--v2-text-2);font-family:'JetBrains Mono',monospace;}
.msgmon-thread-card{max-height:640px;display:flex;flex-direction:column;}
.msgmon-thread-head{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.msgmon-thread-head .ent-card-title{font-size:14.5px;}
.msgmon-messages{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px;flex:1;}
.msgmon-msg{display:flex;gap:11px;align-items:flex-start;}
.msgmon-msg-body-wrap{flex:1;min-width:0;background:var(--v2-panel-hover);border-inline-start:3px solid var(--sender-color,var(--m-green));border-start-start-radius:4px;border-end-start-radius:4px;border-start-end-radius:12px;border-end-end-radius:12px;padding:9px 13px;}
.msgmon-msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:3px;}
.msgmon-msg-head strong{font-size:12.5px;font-weight:700;}
.msgmon-msg-time{font-size:10.5px;color:var(--v2-text-2);}
.msgmon-msg-body{font-size:13.5px;line-height:1.6;color:var(--v2-text);}
.msgmon-empty{padding:34px 20px;text-align:center;color:var(--v2-text-2);font-size:13px;}
.msgmon-empty-lg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:340px;}
.msgmon-empty-lg svg{color:var(--v2-border);}
@media (max-width:760px){.msgmon{grid-template-columns:1fr;}}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:10.5px;font-weight:700;
  color:var(--accent);text-decoration:none;flex-shrink:0;}
.lang-switch:hover{border-color:var(--accent-2);}

/* Bell: bigger + pushed to the far corner, separate from nav cluster */
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
  font-size:16px;text-decoration:none;margin-inline-start:8px;box-shadow:0 2px 8px -4px rgba(20,30,60,.2);flex-shrink:0;}
.bell-btn:hover{border-color:var(--accent-2);}
.bell-count{position:absolute;top:-4px;left:-4px;background:var(--prio-high);color:#fff;font-size:10.5px;
  border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--surface);}

/* User dropdown menu in header */
.user-menu{position:relative;flex-shrink:0;margin-inline-start:4px;}
.user-menu-btn{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);overflow:hidden;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px -4px rgba(20,30,60,.2);}
.user-menu-btn:hover{border-color:var(--accent-2);transform:none;}
.user-menu-btn img{width:100%;height:100%;object-fit:cover;display:block;}
.user-menu-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-2);color:#fff;font-size:14px;font-weight:700;}
.user-menu-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:200;min-width:180px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;
  box-shadow:0 12px 30px -8px rgba(20,30,60,.28);display:none;}
.user-menu-panel.open{display:block;}
.user-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.user-menu-name{font-size:13px;font-weight:700;color:var(--text);}
.user-menu-role{font-size:11px;color:var(--accent);margin-top:2px;}
.user-menu-panel a{display:block;padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text);
  text-decoration:none;box-shadow:none;border:none;background:transparent;}
.user-menu-panel a:hover{background:var(--accent-dim);color:var(--accent);transform:none;}

/* قوايم ماليات: تتمدد جوه القايمة نفسها بدل ما تطلع فلاي-آوت جنبها — عشان القايمة بقت جوه سايدبار بيسكرول رأسي وممكن يقص أي حاجة بتطلع أفقي */
.fin-panel{min-width:210px;overflow:visible;}
.submenu{position:relative;}
.submenu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text);background:transparent;border:none;
  cursor:pointer;box-shadow:none;font-family:inherit;text-align:start;}
.submenu-head:hover,.submenu:hover > .submenu-head,.submenu.open > .submenu-head{background:var(--accent-dim);color:var(--accent);}
.submenu-caret{font-size:13px;line-height:1;color:var(--muted);flex-shrink:0;display:inline-block;transition:transform .15s ease;}
.submenu.open > .submenu-head .submenu-caret{transform:rotate(90deg);}
.submenu-body{display:none;position:static;margin:2px 0 4px;padding-inline-start:10px;
  border-inline-start:2px solid var(--border);min-width:0;background:transparent;border-radius:0;box-shadow:none;}
.submenu.open > .submenu-body{display:block;}
.submenu-nested > .submenu-head{font-size:12.5px;}

/* جرس تذكيراتي + جرس الإشعارات: يرجّوا بس وقت الحاجة (نوبة رجّة ثم راحة) */
.alarm-bell,.bell-ic{display:inline-block;transform-origin:50% 10%;}
.alarm-bell.ring,.bell-btn.ring .bell-ic{animation:alarmRing 2s ease-in-out infinite;}
@keyframes alarmRing{
  0%,32%,100%{transform:rotate(0);}
  2%,10%,18%,26%{transform:rotate(16deg);}
  6%,14%,22%,30%{transform:rotate(-16deg);}
}
@media (prefers-reduced-motion:reduce){.alarm-bell.ring,.bell-btn.ring .bell-ic{animation:none;}}

/* Portal-based status dropdown panel (JS moves it to <body> to avoid clipping) */
.status-panel{position:fixed;z-index:200;right:auto;bottom:auto;width:max-content;min-width:150px;max-width:220px;}

.checkbox-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:7px 10px;border-radius:6px;}
.checkbox-row:hover{background:var(--accent-dim);}
.checkbox-row input{flex-shrink:0;}
.checkbox-row span.cb-name{flex:1;}

.btn-back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-weight:600;font-size:13px;
  text-decoration:none;box-shadow:0 4px 14px -6px rgba(31,107,71,.4);margin-bottom:16px;}
.btn-back:hover{filter:brightness(1.06);}

.avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;}
.avatar-fallback{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-2);color:#fff;font-size:11px;font-weight:700;vertical-align:middle;}
.assignee-chip{display:inline-flex;align-items:center;gap:6px;}

/* Assignees column: الزرار والصور صف واحد على اليمين */
.assignee-cell{display:flex;align-items:center;gap:8px;justify-content:flex-start;flex-wrap:nowrap;}
.assignee-add-btn{flex-shrink:0;border:1px dashed var(--border);background:var(--surface-2);color:var(--muted);
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;
  white-space:nowrap;box-shadow:none;transition:all .12s;}
.assignee-add-btn:hover{border-color:var(--accent-2);color:var(--accent);background:var(--accent-dim);border-style:solid;transform:none;}
.assignee-panel{position:absolute;z-index:200;width:280px;background:var(--surface);border:1px solid var(--border);
  border-radius:13px;box-shadow:0 18px 44px -12px rgba(20,30,60,.34);overflow:hidden;}
.assignee-panel-list{max-height:280px;overflow-y:auto;padding:7px;}
.asg-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;cursor:pointer;
  transition:background .12s;}
.asg-row:hover{background:var(--accent-dim);}
.asg-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.asg-av-fb{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;font-size:12px;font-weight:700;}
.asg-name{flex:1;min-width:0;font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
  font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asg-toggle{flex-shrink:0;border:none;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:700;
  padding:5px 13px;border-radius:999px;color:#fff;background:#e0503f;box-shadow:none;
  transition:background .15s,transform .1s;min-width:58px;text-align:center;}
.asg-toggle[aria-pressed="true"]{background:#22b573;}
.asg-toggle:hover{filter:brightness(1.06);transform:none;}
.assignee-panel-foot{display:flex;gap:7px;padding:9px;border-top:1px solid var(--border);background:var(--surface-2);}
.assignee-panel-foot .btn{flex:1;text-align:center;}
.assignee-avatars{display:flex;align-items:center;}
.assignee-avatars .avatar,.assignee-avatars .avatar-fallback{width:30px;height:30px;font-size:12px;
  border:2px solid var(--surface);box-shadow:0 1px 4px -1px rgba(20,30,60,.25);margin-inline-start:-8px;
  transition:transform .12s ease;}
.assignee-avatars .avatar:first-child,.assignee-avatars .avatar-fallback:first-child{margin-inline-start:0;}
.assignee-avatars .avatar:hover,.assignee-avatars .avatar-fallback:hover{transform:translateY(-2px);z-index:2;}
/* صاحب التاسك (لو هو نفسه من المسؤولين) بيتفصل عن باقي المسؤولين بمسافة واضحة بدل ما يتراكب معاهم */
.assignee-avatars .assignee-owner{position:relative;z-index:3;}
.assignee-avatars .assignee-owner + .avatar,.assignee-avatars .assignee-owner + .avatar-fallback{margin-inline-start:10px;}

/* اختيار مستلمين للبث (شبكة صور — زي اختيار جهات الاتصال) */
.bcast-picker{max-height:270px;overflow-y:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface-2);}
.bcast-picker .bcast-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:74px;padding:9px 4px;
  border-radius:10px;cursor:pointer;transition:background .12s;text-align:center;margin-bottom:0;}
.bcast-chip:hover{background:var(--surface);}
.bcast-chip-av-wrap{position:relative;width:50px;height:50px;}
.bcast-chip-av{width:50px;height:50px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid transparent;opacity:.6;transition:border-color .15s,opacity .15s;}
.bcast-chip-av-fb{display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#2a8560,#1f6b47);}
.bcast-chip-check{position:absolute;bottom:-2px;left:-2px;width:19px;height:19px;border-radius:50%;
  background:var(--good);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface-2);opacity:0;transform:scale(.4);transition:all .15s;}
.bcast-chip-status{position:absolute;bottom:0;right:0;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--surface-2);background:var(--muted);}
.bcast-chip-status.is-online{background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.35),0 0 6px 0 rgba(34,197,94,.65);}
.bcast-chip.is-checked .bcast-chip-av{border-color:var(--accent);opacity:1;}
.bcast-chip.is-checked .bcast-chip-check{opacity:1;transform:scale(1);}
.bcast-chip-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:72px;text-align:center;}
.bcast-chip.is-checked .bcast-chip-name{color:var(--accent);font-weight:600;}
.bcast-chip.is-hidden{display:none;}

/* سجل الإشعارات المبعوتة */
.bcast-log{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-inline-end:2px;}
.bcast-log-item{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:9px 11px;transition:border-color .15s,transform .15s;}
.bcast-log-item:hover{border-color:var(--accent-2);transform:translateY(-1px);}
.bcast-log-icon{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:var(--accent-dim);
  color:var(--accent);display:flex;align-items:center;justify-content:center;}
.bcast-log-body{flex:1;min-width:0;}
.bcast-log-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.bcast-log-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11px;color:var(--muted);}
.bcast-log-target{display:inline-flex;align-items:center;gap:3px;}
.bcast-log-seen{flex-shrink:0;font-size:11.5px;color:var(--muted);background:var(--surface-2);
  border-radius:999px;padding:4px 10px;}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.filter-bar input,.filter-bar select{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--text);}
.view-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);text-decoration:none;font-size:14px;}
.view-btn:hover{border-color:var(--accent-2);}

/* ================= العملاء ================= */
.clients-table tbody td{font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;}
.client-name-cell{display:flex;align-items:center;gap:10px;}
.client-name-cell a{font-family:'Cairo',sans-serif;font-weight:600;font-size:14.5px;color:var(--text);}
.client-name-cell a:hover{color:var(--accent);}
.client-name-cell .cn-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.client-name-cell .cn-contact{font-size:11.5px;color:var(--muted);font-family:'Cairo',sans-serif;}
.client-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;}
.client-avatar.company{background:linear-gradient(135deg,#e6f1ea,#d3e6db);}
.client-avatar.individual{background:linear-gradient(135deg,#e5f5f1,#d3efe6);}
.country-cell{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.3;font-size:12.5px;}
.country-cell .city-sub{font-size:10.5px;color:var(--muted);}
.contact-cell{white-space:nowrap;}
.contact-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);text-decoration:none;font-size:13px;margin:0 2px;}
.contact-ic:hover{border-color:var(--accent-2);}

/* نجوم التقييم (عرض) */
.stars{display:inline-flex;gap:1px;font-size:14px;letter-spacing:1px;}
.stars .star{color:#dbe3df;}
.stars .star.on{color:#f2b01e;}
.star-cell{position:relative;display:inline-block;line-height:1;}
.star-bg{color:#dbe3df;}
.star-fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f2b01e;}
:root[data-theme="dark"] .star-bg{color:var(--border);}
:root[data-theme="dark"] .star-fg{color:var(--accent);}

/* منتقي النجوم (إدخال) — ترتيب معكوس عشان الـ hover يشتغل صح */
.star-input{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:2px;}
.star-input input{position:absolute;opacity:0;width:0;height:0;}
.star-input label{font-size:26px;color:#dbe3df;cursor:pointer;transition:color .12s,transform .12s;line-height:1;}
.star-input label:hover,.star-input label:hover ~ label,
.star-input input:checked ~ label{color:#f2b01e;}
.star-input label:hover{transform:scale(1.12);}
.star-input .star-clear{margin-inline-start:14px;font-size:12px;padding:5px 12px;color:var(--muted);
  transform:none;line-height:1;}
.star-input .star-clear:hover{color:var(--prio-high);transform:none;}

/* سويتش نوع العميل */
.seg-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px;}
.seg{padding:7px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);
  transition:all .15s;display:flex;align-items:center;gap:6px;}
.seg input{position:absolute;opacity:0;width:0;height:0;}
.seg.on{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px -3px rgba(20,30,60,.2);}

/* نسخة اختيار متعدد (checkbox) من نفس شكل الأزرار المجزّأة */
.seg-toggle.seg-check{flex-wrap:wrap;background:none;border:none;padding:0;gap:8px;}
.seg-toggle.seg-check .seg{background:var(--surface-2);border:1px solid var(--border);}
.seg-toggle.seg-check .seg.on{background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);box-shadow:none;}
.seg-toggle.seg-check .seg:hover{border-color:var(--accent-2);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-row[hidden]{display:none!important;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.branch-form.break-free .break-fixed-only{display:none;}
.branch-form.break-fixed .break-free-only{display:none;}
.client-form .field{margin-bottom:16px;}
.client-form .field label .hint{margin:0;}
.client-form.type-individual .company-only{display:none;}
.client-form.type-company .individual-only{display:none;}
.client-form.type-individual #webEmailRow{grid-template-columns:1fr;}

/* أشخاص التواصل */
.contacts-box{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.contact-row{display:grid;grid-template-columns:1.3fr 1.1fr 1fr 1.1fr auto;gap:8px;align-items:center;}
.contact-row input{margin:0;}
.contact-del{flex-shrink:0;width:30px;height:30px;font-size:12px;}
@media (max-width:640px){
  .contact-row{grid-template-columns:1fr 1fr;position:relative;padding:12px;padding-top:32px;
    background:var(--surface-2);border:1px solid var(--border);border-radius:10px;}
  .contact-del{position:absolute;top:6px;left:6px;}
}

/* أشخاص التواصل — صفحة العرض */
.client-contacts{padding:18px 22px;border-top:1px solid var(--border);}
.client-contacts .ci-label{margin-bottom:12px;}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.contact-card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.contact-card .cc-name{font-weight:700;font-size:13.5px;color:var(--text);}
.contact-card .cc-job{font-size:12px;color:var(--muted);margin-top:2px;}
.contact-card .cc-links{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.contact-card .cc-links a{font-size:12.5px;color:var(--accent);text-decoration:none;direction:ltr;text-align:start;}
.contact-card .cc-links a:hover{text-decoration:underline;}

/* كارت العميل (صفحة العرض) */
.client-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 28px -14px rgba(20,30,60,.22);}
.client-card-head{display:flex;align-items:center;gap:16px;padding:22px 24px;position:relative;}
.client-card-head.company{background:linear-gradient(120deg,#edf5f0,#e0efe6);}
.client-card-head.individual{background:linear-gradient(120deg,#e9f6f2,#dcf0e9);}
.client-card-avatar{width:56px;height:56px;border-radius:15px;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 4px 14px -6px rgba(20,30,60,.25);}
.client-card-title{flex:1;min-width:0;}
.client-card-title h1{margin:0 0 6px;font-size:20px;font-family:'Cairo',sans-serif;font-weight:700;color:var(--text);}
.client-card-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.client-loc{font-weight:600;}
.client-card-rating{display:flex;align-items:center;gap:3px;font-size:17px;flex-shrink:0;}
.client-card-rating .star{color:#d9e1dd;}
.client-card-rating .star.on{color:#f2b01e;}
.client-card-rating .rating-num{font-size:12px;color:var(--muted);font-weight:700;margin-inline-start:4px;font-family:'JetBrains Mono';}
.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
@media (max-width:560px){.client-grid{grid-template-columns:1fr;}}
.client-item{background:var(--surface);padding:16px 24px;display:flex;flex-direction:column;gap:5px;}
.ci-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.ci-val{font-size:13.5px;color:var(--text);font-family:'Cairo',sans-serif;}
.ci-val a{color:var(--accent-2);}
.client-notes{padding:18px 24px;border-top:1px solid var(--border);}
.client-notes p{margin:6px 0 0;font-size:13.5px;line-height:1.7;color:var(--text);font-family:'Cairo',sans-serif;}
.client-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 24px;border-top:1px solid var(--border);background:var(--surface-2);}
.client-card-actions{display:flex;gap:8px;}
.flag-img{border-radius:3px;vertical-align:middle;box-shadow:0 0 0 1px rgba(20,30,60,.08);}
.country-line{display:inline-flex;align-items:center;gap:6px;}
.client-loc .flag-img{margin-inline-end:2px;}

/* ================= سجل الموظفين (HR) ================= */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px;}
.emp-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;}
.emp-card:hover{border-color:var(--accent-2);box-shadow:0 10px 26px -14px rgba(20,30,60,.3);transform:translateY(-2px);}
.emp-card-top{display:flex;align-items:center;gap:10px;}
.emp-av{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0;}
.emp-av-fb{display:flex;align-items:center;justify-content:center;background:var(--accent-2);color:#fff;font-weight:700;font-size:18px;}
.emp-id{min-width:0;flex:1;}
.emp-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emp-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.emp-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:11.5px;color:var(--muted);}
.emp-card-meta span{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 7px;}
.emp-status{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.emp-status.st-active{background:#e6f7ee;color:#1a9455;}
.emp-status.st-probation{background:#fff4e0;color:#c47d10;}
.emp-status.st-on_leave{background:#e4f1ea;color:#1f6b47;}
.emp-status.st-terminated{background:#fdecea;color:#d0402c;}

/* فورم الموظف */
.emp-sec{font-size:13.5px;font-weight:700;margin:0 0 12px;color:var(--accent);}
.quals-box{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
.qual-item{position:relative;border:1px solid var(--border);border-radius:12px;padding:14px 14px 2px;background:var(--surface-2);}
.qual-item .field-row{margin-bottom:0;}
.qual-item .field{margin-bottom:12px;}
.qual-del{position:absolute;top:8px;inset-inline-end:8px;width:26px;height:26px;font-size:11px;z-index:1;}
.doc-del{flex-shrink:0;width:24px;height:24px;font-size:10px;}

/* ملف الموظف */
.emp-header{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:18px 20px;margin-bottom:16px;box-shadow:0 4px 18px -12px rgba(20,30,60,.25);}
.emp-header-av{width:72px;height:72px;border-radius:18px;object-fit:cover;flex-shrink:0;font-size:28px;}
.emp-header-main{min-width:0;}
.emp-header-main h1{margin:0;font-size:20px;font-family:'Cairo',sans-serif;}
.emp-header-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;align-items:center;}
.emp-header-sub{font-size:12.5px;color:var(--muted);line-height:1.8;}
.emp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:760px){.emp-cols{grid-template-columns:1fr;}}
.emp-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:16px;}
.emp-block h3{margin:0 0 12px;font-size:14px;font-weight:700;}
.emp-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;}
.emp-dl > div{min-width:0;}
.emp-dl > div.wide{grid-column:1 / -1;}
.emp-dl dt{font-size:11px;color:var(--muted);margin-bottom:2px;}
.emp-dl dd{margin:0;font-size:13px;color:var(--text);word-break:break-word;}
.emp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.emp-list li{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;}
.emp-list-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;}

.doc-group{margin-bottom:12px;}
.doc-group-h{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.doc-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;margin-bottom:5px;}
.doc-item a{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;}
.doc-item a:hover{text-decoration:underline;}
.doc-upload,.ledger-add,.report-add{display:block;margin-top:10px;padding-top:14px;border-top:1px dashed var(--border);}
.doc-upload .field-row,.ledger-add .field-row,.report-add .field-row{margin-bottom:12px;}
.doc-upload .field:last-of-type,.ledger-add .field:last-of-type{margin-bottom:12px;}
.report-add .field-row{margin-bottom:12px;}

.ledger-totals{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.lt{font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;font-family:'JetBrains Mono';}
.lt-in{background:#e6f7ee;color:#1a9455;}
.lt-out{background:#fdecea;color:#d0402c;}
.lt-net{background:var(--surface-2);border:1px solid var(--border);color:var(--text);}
.tag-in{background:#e6f7ee;color:#1a9455;}
.tag-out{background:#fdecea;color:#d0402c;}
.tag-warn{background:#fdf3e2;color:#b3791c;}

.emp-report{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.emp-report-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;}
.emp-report p{margin:6px 0;font-size:13px;line-height:1.8;color:var(--text);}

/* الراتب — مكوّنات وإجمالي */
.salary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:8px;}
@media (max-width:560px){.salary-grid{grid-template-columns:1fr;}}
.salary-total{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;
  font-size:13px;display:flex;justify-content:space-between;margin-bottom:6px;}
.salary-total strong{font-family:'JetBrains Mono';color:var(--accent);}
.salary-table{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.salary-row{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--surface);font-size:13px;}
.salary-row span:first-child{color:var(--muted);}
.salary-row-total{background:var(--surface-2);font-weight:700;}
.salary-row-total span:first-child{color:var(--text);}
.salary-row-total .mono{color:var(--accent);}

/* إدارة الفريق — لوحة أقسام */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px;}
.hub-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;}
.hub-card:hover{border-color:var(--accent-2);box-shadow:0 12px 28px -16px rgba(20,30,60,.32);transform:translateY(-2px);}
.hub-card-top{display:flex;align-items:center;justify-content:space-between;}
.hub-icon{font-size:26px;line-height:1;}
.hub-count{font-family:'JetBrains Mono';font-weight:700;font-size:15px;color:var(--accent);
  background:var(--accent-dim);border-radius:8px;padding:2px 10px;}
.hub-title{font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;margin-top:6px;}
.hub-desc{font-size:12px;color:var(--muted);line-height:1.7;flex:1;}
.hub-go{font-size:12px;font-weight:700;color:var(--accent);margin-top:4px;}

/* أيام الدوام + قواعد الحضور */
.day-pick{display:flex;flex-wrap:wrap;gap:6px;}
.day-chip{position:relative;cursor:pointer;}
.day-chip input{position:absolute;opacity:0;}
.day-chip span{display:block;padding:6px 12px;border:1px solid var(--border);border-radius:20px;font-size:12.5px;
  background:var(--surface-2);color:var(--muted);transition:all .13s;}
.day-chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.rule-box{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--surface-2);}
.rule-head{display:flex;align-items:flex-start;gap:8px;cursor:pointer;margin-bottom:10px;font-size:13.5px;}
.rule-head input{margin-top:2px;flex-shrink:0;}

.rep-list{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;}
.rep-row.tier-row,.rep-row.pen-row{position:relative;border:1px solid var(--border);border-radius:12px;
  padding:14px 34px 2px 14px;background:var(--surface);}
.rep-row.tier-row .field-row,.rep-row.pen-row .field-row{margin-bottom:12px;}
.rep-row input,.rep-row select{margin:0;}
.pen-lbl{font-size:11px;color:var(--muted);display:block;margin-bottom:6px;}
.rep-del{position:absolute;top:8px;inset-inline-end:8px;flex-shrink:0;width:26px;height:26px;font-size:10px;z-index:1;}

/* زرار حذف صغير موحّد — دائرة حمراء فاتحة تتغمّق عند التحويم (كل الـ ✕ الصغيرة في التطبيق) */
.contact-del,.qual-del,.doc-del,.rep-del{border-radius:50%;border:1px solid #f4cdc6;background:#fdecea;
  color:var(--prio-high);cursor:pointer;font-weight:700;line-height:1;box-shadow:0 2px 6px -3px rgba(224,80,63,.4);
  display:flex;align-items:center;justify-content:center;transition:all .15s;}
.contact-del:hover,.qual-del:hover,.doc-del:hover,.rep-del:hover{background:var(--prio-high);color:#fff;
  border-color:var(--prio-high);transform:scale(1.08);}

/* ================= تذكيراتي — كارت التذكير ================= */
.repeat-panel[hidden]{display:none !important;}
.rem-list{display:flex;flex-direction:column;gap:10px;}
.rem-card{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 3px 14px -10px rgba(20,30,60,.25);transition:box-shadow .15s;}
.rem-card:hover{box-shadow:0 8px 22px -12px rgba(20,30,60,.32);}
.rem-card-bar{width:5px;flex-shrink:0;background:var(--accent-2);}
.rem-card.st-overdue .rem-card-bar{background:var(--prio-high);}
.rem-card.st-upcoming .rem-card-bar{background:#22b573;}
.rem-card.st-done{opacity:.55;}
.rem-card.st-done .rem-card-bar{background:var(--border);}
.rem-card-body{flex:1;min-width:0;padding:13px 14px;}
.rem-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.rem-title{font-family:'Cairo',sans-serif;font-size:14.5px;color:var(--text);}
.rem-badge{font-size:10.5px;font-weight:700;color:#1f6b47;background:#e9f3ee;border-radius:20px;padding:3px 10px;white-space:nowrap;}
.rem-when{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rem-card.st-overdue .rem-when{color:var(--prio-high);font-weight:700;}
.rem-tz{font-family:'IBM Plex Sans Arabic';font-size:10.5px;opacity:.75;font-weight:400;}
.rem-note{margin:6px 0 0;font-size:12.5px;color:var(--text);line-height:1.7;}
.rem-actions{display:flex;flex-direction:row;gap:6px;padding:10px;border-inline-start:1px solid var(--border);
  background:var(--surface-2);align-items:center;}
.rem-act{width:30px;height:30px;border-radius:9px;border:none;cursor:pointer;font-size:13px;line-height:1;
  box-shadow:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:filter .12s;flex-shrink:0;}
.rem-act:hover{filter:brightness(1.08);transform:none;}
.rem-act-done{background:#22b573;}
.rem-act-stop{background:#e0a53f;}
.rem-act-del{background:#e0503f;}
@media (max-width:480px){.rem-card{flex-direction:column;}.rem-card-bar{width:100%;height:4px;}
  .rem-actions{flex-direction:row;border-inline-start:none;border-top:1px solid var(--border);}}

/* شبكة أيام «مخصّص» — أحمر افتراضي، أخضر لما يتحدد */
.date-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.date-chip{min-width:34px;height:30px;padding:0 6px;border:none;border-radius:8px;background:#e0503f;color:#fff;
  font-weight:700;font-size:12px;font-family:'JetBrains Mono';cursor:pointer;box-shadow:none;transition:background .13s;}
.date-chip[aria-pressed="true"]{background:#22b573;}
.date-chip:hover{filter:brightness(1.06);transform:none;}

/* صورة الموظف في الفورم */
.emp-avatar-field{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px dashed var(--border);}
.emp-avatar-preview{width:64px;height:64px;border-radius:16px;object-fit:cover;flex-shrink:0;}
.emp-avatar-field .emp-av-fb{display:flex;align-items:center;justify-content:center;background:var(--accent-2);color:#fff;font-weight:700;font-size:24px;}
.emp-avatar-field .field{flex:1;margin-bottom:0;}

/* قايمة «حضوري»: أزرار تغيير حالة + ملاحظة معطّلة */
.user-menu-panel button.menu-item-btn{display:block;width:100%;text-align:start;padding:9px 10px;border-radius:6px;
  font-size:13px;color:var(--text);background:transparent;border:none;cursor:pointer;font-family:inherit;box-shadow:none;}
.user-menu-panel button.menu-item-btn:hover{background:var(--accent-dim);color:var(--accent);transform:none;}
.menu-note{padding:9px 10px;font-size:12px;color:var(--muted);line-height:1.5;max-width:190px;}

/* بوب أبات حضوري (حضور/بريك/انصراف) */
.att-modal{max-width:420px;text-align:center;animation:fadeUp .25s ease both;}
.att-modal-icon{line-height:1;margin-bottom:10px;display:flex;justify-content:center;color:var(--accent);}
.att-modal-text{font-size:15px;line-height:1.8;color:var(--text);margin:0;}
.att-modal .modal-actions{justify-content:center;margin-top:16px;}
.att-modal.att-checkin .att-modal-icon{color:var(--warn, #e0a53c);}
.att-modal.att-break_out .att-modal-icon,.att-modal.att-break_return .att-modal-icon{color:var(--good, #22b573);}
.att-modal.att-end .att-modal-icon{color:var(--accent-2, #2a8560);}

/* تقارير الحضور */
.month-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 18px;}
.month-nav-label{font-size:14px;font-weight:700;color:var(--text);min-width:130px;text-align:center;}
.att-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.att-sum-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 22px;text-align:center;min-width:140px;}
.att-sum-num{font-family:'JetBrains Mono';font-size:22px;font-weight:700;color:var(--accent);}
.att-sum-lbl{font-size:12px;color:var(--muted);margin-top:4px;}

/* بوب أب إثبات الحضور للعمل عن بعد */
.presence-modal{max-width:380px;text-align:center;animation:fadeUp .25s ease both;}
.presence-shield{line-height:1;margin-bottom:6px;display:flex;justify-content:center;color:var(--accent);}
.presence-modal h2{font-size:16px;margin:0 0 10px;}
.presence-hint{font-size:13px;color:var(--muted);margin:0 0 10px;}
.presence-capture-hint{font-size:11.5px;color:var(--muted);margin:-4px 0 10px;display:flex;align-items:center;justify-content:center;gap:6px;}
.presence-capture-dot{width:7px;height:7px;border-radius:50%;background:var(--prio-high);flex-shrink:0;animation:presenceDotPulse 1.4s ease-in-out infinite;}
@keyframes presenceDotPulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.presence-video-wrap{position:relative;width:120px;height:120px;margin:0 auto 12px;border-radius:50%;overflow:hidden;
  border:3px solid var(--accent);box-shadow:0 0 0 4px var(--accent-dim);}
.presence-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--surface-2);display:block;}
.presence-video-off{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted);font-size:11px;padding:8px;text-align:center;}
@media (prefers-reduced-motion:reduce){.presence-capture-dot{animation:none;}}
.checkbox-inline{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer;}
.checkbox-inline input{margin:0;}
.presence-log-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;border:1px solid var(--border);display:block;}
.presence-code{font-family:'JetBrains Mono';font-size:32px;font-weight:700;letter-spacing:6px;color:var(--accent);
  background:var(--accent-dim);border-radius:10px;padding:10px 0;margin-bottom:12px;}
.presence-modal .field{margin-bottom:4px;}
.presence-modal .field input{text-align:center;font-size:16px;letter-spacing:3px;}
.presence-timer{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:16px;}
.presence-timer-bar{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:100%;transition:width 1s linear;}
.presence-error{color:var(--prio-high);font-size:12.5px;font-weight:600;margin-top:10px;}
.presence-slider{position:relative;height:46px;border-radius:23px;background:var(--surface-2);border:1px solid var(--border);
  margin-bottom:4px;overflow:hidden;display:flex;align-items:center;}
.presence-slider-label{position:absolute;inset-inline:0;text-align:center;font-size:13px;color:var(--muted);pointer-events:none;}
.presence-slider-knob{position:absolute;inset-inline-start:2px;top:2px;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:grab;touch-action:none;box-shadow:0 4px 10px -4px rgba(31,107,71,.5);}
.presence-slider.done .presence-slider-knob{background:#22b573;}
.presence-slider.done .presence-slider-label{opacity:0;}

/* ===== منتقي التاريخ/الوقت (Flatpickr) — بألوان النظام =====
   ملاحظة: !important هنا مقصودة — الـCSS بتاع المكتبة نفسها بيتحمّل من CDN
   جوه body بعد style.css، فبياخد أولوية بسبب ترتيب التحميل مش التخصيص. */
.fp-alt-input.field-like{width:100%;background:var(--surface-2)!important;border:1px solid var(--border)!important;
  color:var(--text)!important;border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit;
  text-align:start;cursor:pointer;}
.fp-alt-input.field-like:focus{outline:none;border-color:var(--accent-2)!important;background:var(--surface)!important;}
/* أيقونة التقويم لحقول اختيار التاريخ/الوقت فقط — مش لحقول البحث اللي بتشارك نفس الكلاس (data-no-fp) */
.fp-alt-input.field-like:not([data-no-fp]){
  background-repeat:no-repeat!important;background-size:15px!important;
  --fp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-image:var(--fp-icon)!important;}
html[dir="rtl"] .fp-alt-input.field-like:not([data-no-fp]){background-position:10px center!important;padding-left:30px!important;}
html[dir="ltr"] .fp-alt-input.field-like:not([data-no-fp]){background-position:right 10px center!important;padding-right:30px!important;}
:root[data-theme="dark"] .fp-alt-input.field-like:not([data-no-fp]){--fp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");}
.flatpickr-calendar{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:14px!important;
  box-shadow:0 16px 40px -12px rgba(20,30,60,.28)!important;font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif!important;
  direction:rtl;}
.flatpickr-calendar.arrowTop:before{border-bottom-color:var(--border)!important;}
.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--surface)!important;}
.flatpickr-months{padding:10px 10px 4px;}
.flatpickr-current-month{font-size:14px;color:var(--text)!important;}
.flatpickr-current-month input.cur-year{color:var(--text)!important;font-family:'JetBrains Mono';background:transparent!important;}
.flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--text)!important;background:transparent!important;}
.flatpickr-monthDropdown-months option{background:var(--surface)!important;color:var(--text)!important;}
.flatpickr-prev-month,.flatpickr-next-month{color:var(--muted)!important;fill:var(--muted)!important;}
.flatpickr-prev-month:hover,.flatpickr-next-month:hover{color:var(--accent)!important;fill:var(--accent)!important;}
.flatpickr-prev-month svg,.flatpickr-next-month svg{fill:currentColor!important;}
.flatpickr-weekdays{background:transparent!important;}
.flatpickr-weekdaycontainer{background:transparent!important;}
span.flatpickr-weekday{background:transparent!important;color:var(--muted)!important;font-size:11px;font-weight:600;}
.flatpickr-day{color:var(--text)!important;border-radius:8px;}
.flatpickr-day.today{border-color:var(--accent-2)!important;}
.flatpickr-day:hover{background:var(--accent-dim)!important;border-color:var(--accent-dim)!important;color:var(--accent)!important;}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;font-weight:700;}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--border)!important;}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--muted)!important;opacity:.5;}
.flatpickr-day.week.selected{box-shadow:none;}
.flatpickr-time{border-top:1px solid var(--border)!important;}
.flatpickr-time input,.flatpickr-time .flatpickr-am-pm{color:var(--text)!important;background:transparent!important;}
.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:var(--accent-dim)!important;}
.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--muted)!important;}
.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--muted)!important;}
.flatpickr-time .numInputWrapper:hover{background:var(--accent-dim)!important;}
.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{color:var(--muted)!important;}
.numInputWrapper span{border-color:var(--border)!important;}

/* شريط فلاتر التقارير */
.report-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:14px 0 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.report-filters .field{margin-bottom:0;min-width:150px;}
.report-filters .btn{white-space:nowrap;}
.period-panel[hidden]{display:none!important;}

/* ================================================================
   وضع "نبض" الداكن — كل حاجة هنا بتتفعّل بس لما data-theme="dark"
   (التصميم الأصلي فوق ده متغيّرش، فاضل هو نفسه لمّا المستخدم يختاره)
   ================================================================ */
:root[data-theme="dark"] .stat{background:var(--surface);border:1px solid var(--border);color:var(--text);
  box-shadow:none;position:relative;overflow:hidden;}
:root[data-theme="dark"] .stat::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;}
:root[data-theme="dark"] .stat:nth-child(1){background:var(--surface);}
:root[data-theme="dark"] .stat:nth-child(1)::before{background:var(--accent-2);}
:root[data-theme="dark"] .stat:nth-child(2){background:var(--surface);}
:root[data-theme="dark"] .stat:nth-child(2)::before{background:var(--accent-3);}
:root[data-theme="dark"] .stat:nth-child(3){background:var(--surface);}
:root[data-theme="dark"] .stat:nth-child(3)::before{background:var(--teal);}
:root[data-theme="dark"] .stat:nth-child(4){background:var(--surface);}
:root[data-theme="dark"] .stat:nth-child(4)::before{background:var(--bad);}
:root[data-theme="dark"] .stat.s-blue{background:var(--surface);} :root[data-theme="dark"] .stat.s-blue::before{background:var(--accent-2);}
:root[data-theme="dark"] .stat.s-purple{background:var(--surface);} :root[data-theme="dark"] .stat.s-purple::before{background:var(--accent-3);}
:root[data-theme="dark"] .stat.s-teal{background:var(--surface);} :root[data-theme="dark"] .stat.s-teal::before{background:var(--teal);}
:root[data-theme="dark"] .stat.s-green{background:var(--surface);} :root[data-theme="dark"] .stat.s-green::before{background:var(--good);}
:root[data-theme="dark"] .stat.s-red{background:var(--surface);} :root[data-theme="dark"] .stat.s-red::before{background:var(--bad);}
:root[data-theme="dark"] .stat.s-amber{background:var(--surface);} :root[data-theme="dark"] .stat.s-amber::before{background:var(--accent);}
:root[data-theme="dark"] .stat.s-gray{background:var(--surface);} :root[data-theme="dark"] .stat.s-gray::before{background:var(--muted);}
:root[data-theme="dark"] .stat .num{color:var(--text);}
:root[data-theme="dark"] .stat .label{color:var(--muted);}

:root[data-theme="dark"] .btn.primary{background:var(--accent);}
:root[data-theme="dark"] .btn.primary:hover{box-shadow:0 8px 20px -8px rgba(240,166,58,.4);}
:root[data-theme="dark"] .me-box .btn.small.active{background:var(--accent);box-shadow:0 4px 12px -5px rgba(45,217,174,.4);}
:root[data-theme="dark"] .btn-back{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 14px -6px rgba(240,166,58,.35);}

:root[data-theme="dark"] .updates-btn::before{background:conic-gradient(from 0deg,
    rgba(240,85,63,.14) 0%, rgba(240,85,63,.14) 74%,
    var(--bad) 84%, #FF9B85 89%, var(--bad) 92%,
    rgba(240,85,63,.14) 98%, rgba(240,85,63,.14) 100%);}
:root[data-theme="dark"] .updates-btn:hover::after{background:color-mix(in srgb, var(--bad) 18%, var(--surface));}

:root[data-theme="dark"] .status-btn.status-cancelled{background:#5A6270;}
:root[data-theme="dark"] .rwt-clock-dot{background:var(--status-done);}

:root[data-theme="dark"] .sticky-toggle{background:var(--accent-3);box-shadow:0 8px 20px -8px rgba(185,140,242,.45);}
:root[data-theme="dark"] .sticky-note-item{background:color-mix(in srgb, var(--accent-3) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent-3) 30%, transparent);color:var(--text);}
:root[data-theme="dark"] .sticky-note-del{color:var(--accent-3);}

:root[data-theme="dark"] .chat-badge{border-color:var(--bg);}
:root[data-theme="dark"] .chat-avatar-fb{background:var(--accent-3);}
:root[data-theme="dark"] .chat-main{background:var(--bg);}
:root[data-theme="dark"] .chat-msg.mine{background:var(--accent-2);color:#08202A;}
:root[data-theme="dark"] .chat-msg.mine .chat-att-file{background:rgba(0,0,0,.18);}
:root[data-theme="dark"] .chat-input:focus{background:var(--surface-2);}
:root[data-theme="dark"] .chat-send{background:var(--accent-2);color:#08202A;}
:root[data-theme="dark"] .chat-dropzone{background:color-mix(in srgb, var(--accent-2) 14%, transparent);border-color:var(--accent-2);color:var(--accent-2);}

:root[data-theme="dark"] .asg-av-fb{background:var(--accent-3);}
:root[data-theme="dark"] .bcast-chip-av-fb{background:var(--accent-3);}
:root[data-theme="dark"] .asg-toggle{background:var(--bad);}
:root[data-theme="dark"] .asg-toggle[aria-pressed="true"]{background:var(--good);}

:root[data-theme="dark"] .client-avatar.company{background:color-mix(in srgb, var(--accent-2) 16%, var(--surface));}
:root[data-theme="dark"] .client-avatar.individual{background:color-mix(in srgb, var(--good) 16%, var(--surface));}
:root[data-theme="dark"] .client-card-head.company{background:color-mix(in srgb, var(--accent-2) 12%, var(--surface));}
:root[data-theme="dark"] .client-card-head.individual{background:color-mix(in srgb, var(--good) 12%, var(--surface));}
:root[data-theme="dark"] .client-card-avatar{background:var(--surface-2);}

:root[data-theme="dark"] .stars .star,
:root[data-theme="dark"] .star-input label,
:root[data-theme="dark"] .client-card-rating .star{color:var(--border);}
:root[data-theme="dark"] .stars .star.on,
:root[data-theme="dark"] .star-input input:checked ~ label,
:root[data-theme="dark"] .client-card-rating .star.on{color:var(--accent);}

:root[data-theme="dark"] .emp-status.st-active{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);}
:root[data-theme="dark"] .emp-status.st-probation{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);}
:root[data-theme="dark"] .emp-status.st-on_leave{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);}
:root[data-theme="dark"] .emp-status.st-terminated{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);}

:root[data-theme="dark"] .lt-in,:root[data-theme="dark"] .tag-in{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);}
:root[data-theme="dark"] .lt-out,:root[data-theme="dark"] .tag-out{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);}
:root[data-theme="dark"] .tag-warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);}

:root[data-theme="dark"] .contact-del,:root[data-theme="dark"] .qual-del,
:root[data-theme="dark"] .doc-del,:root[data-theme="dark"] .rep-del{
  border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);background:color-mix(in srgb, var(--bad) 14%, transparent);}
:root[data-theme="dark"] .contact-del:hover,:root[data-theme="dark"] .qual-del:hover,
:root[data-theme="dark"] .doc-del:hover,:root[data-theme="dark"] .rep-del:hover{background:var(--bad);color:#fff;border-color:var(--bad);}

:root[data-theme="dark"] .rem-card.st-upcoming .rem-card-bar{background:var(--good);}
:root[data-theme="dark"] .rem-badge{color:var(--accent-3);background:color-mix(in srgb, var(--accent-3) 16%, transparent);}
:root[data-theme="dark"] .rem-act-done{background:var(--good);}
:root[data-theme="dark"] .rem-act-stop{background:var(--warn);}
:root[data-theme="dark"] .rem-act-del{background:var(--bad);}

:root[data-theme="dark"] .date-chip{background:var(--bad);}
:root[data-theme="dark"] .date-chip[aria-pressed="true"]{background:var(--good);}

:root[data-theme="dark"] .presence-slider-knob{background:var(--accent-2);color:#08202A;}
:root[data-theme="dark"] .presence-slider.done .presence-slider-knob{background:var(--good);}

/* دروب داون "ألوان النظام" في الهيدر */
.theme-menu-panel{min-width:190px;}
.theme-option{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 10px;
  border-radius:6px;font-size:13px;color:var(--text);background:transparent;border:none;cursor:pointer;
  font-family:inherit;box-shadow:none;}
.theme-option:hover{background:var(--accent-dim);color:var(--accent);transform:none;}
.theme-option.active{font-weight:700;color:var(--accent);}
.theme-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid var(--border);}
.theme-swatch.sw-light{background:linear-gradient(135deg,#eef2f9,#1f6b47);}
.theme-swatch.sw-dark{background:linear-gradient(135deg,#15181D,#F0A63A);}

/* ===== الهيكل التنظيمي (team_org.php) ===== */
.empty-hint{color:var(--muted);font-size:13.5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;}
.field-like-label{font-size:13px;color:var(--muted);}
.org-wrap{max-width:900px;margin:0 auto;}
.org-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 20px;
  display:flex;flex-direction:column;align-items:center;min-height:220px;justify-content:center;gap:36px;}
.org-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}

/* كارت الشخص — دايرة بحلقة ملوّنة + اسم في بوكس + مسمى وظيفي في بوكس رمادي (زي كروت الهيكل التنظيمي الكلاسيكية) */
.org-node{display:flex;flex-direction:column;align-items:center;width:118px;flex-shrink:0;}
.org-avatar-ring{position:relative;width:66px;height:66px;border-radius:50%;padding:3px;border:2.5px solid var(--org-ring,var(--accent));
  margin-bottom:9px;background:var(--surface);box-shadow:0 3px 10px -4px rgba(20,30,60,.25);}
.org-node-root .org-avatar-ring{width:76px;height:76px;}
/* حلقة بتلف حوالين أي حد بيدير فريق (ليه ناس تابعاله) — إشارة بصرية سريعة إنه مدير */
.org-node-has-team .org-avatar-ring::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2.5px solid transparent;border-top-color:var(--org-ring,var(--accent));border-inline-end-color:var(--org-ring,var(--accent));
  animation:orgTeamSpin 2.1s linear infinite;
}
@keyframes orgTeamSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.org-node-has-team .org-avatar-ring::before{animation:none;}}
/* بادچ عدد التاسكات المفتوحة على صورة الموظف */
.org-task-badge{position:absolute;bottom:-2px;left:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:20px;
  background:var(--accent-2);color:#fff;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);z-index:2;}
.org-standalone .org-task-badge{width:16px;height:16px;min-width:16px;font-size:9px;bottom:-1px;left:-1px;}

.org-stats{max-width:900px;margin:0 auto 18px;}
.org-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.org-avatar-fb{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;background:var(--accent-dim);color:var(--accent);}
.org-node-name{font-size:12.5px;font-weight:700;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;background:var(--surface);border:1.5px solid var(--org-ring,var(--accent));border-radius:8px;padding:4px 10px;}
.org-node-root .org-node-name{font-size:13.5px;font-weight:800;padding:5px 12px;}
.org-node-sub{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;background:var(--surface-2);border-radius:6px;padding:2px 10px;margin-top:5px;}
.org-node-self .org-avatar-ring{box-shadow:0 0 0 3px var(--accent-dim),0 3px 10px -4px rgba(20,30,60,.25);}

/* الشجرة الكاملة (الأدمن) — نمط CSS كلاسيكي لخريطة هيكلية بخطوط واصلة */
.org-tree-wrap{overflow-x:auto;width:100%;}
.org-tree,.org-tree ul{list-style:none;margin:0;padding-top:24px;position:relative;display:flex;justify-content:center;gap:8px;}
.org-tree{padding-top:0;}
.org-tree li{position:relative;padding:24px 12px 0;display:flex;flex-direction:column;align-items:center;}
.org-tree li::before,.org-tree li::after{content:'';position:absolute;top:0;width:50%;height:24px;border-top:2px solid var(--border);}
.org-tree li::before{right:50%;border-right:2px solid var(--border);border-radius:0 0 0 6px;}
.org-tree li::after{left:50%;border-left:2px solid var(--border);border-radius:0 0 6px 0;}
.org-tree li:only-child{padding-top:0;}
.org-tree li:only-child::before,.org-tree li:only-child::after{display:none;}
.org-tree > li{padding-top:0;}
.org-tree > li::before,.org-tree > li::after{display:none;}
.org-tree li:first-child::before,.org-tree li:last-child::after{border:0 none;}
.org-tree li:last-child::before{border-right:2px solid var(--border);}
.org-tree li:first-child:after{border-left:0 none;}
.org-tree ul::before{content:'';position:absolute;top:0;left:50%;margin-left:-1px;border-left:2px solid var(--border);width:0;height:24px;}

/* الموظفين اللي مش تابعين لحد ومفيش حد تابعلهم — شبكة بسيطة منفصلة عن الهيكل */
.org-standalone{width:100%;padding-top:8px;border-top:1px dashed var(--border);}
.org-standalone-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px;}
.org-standalone .org-node{width:82px;}
.org-standalone .org-avatar-ring{width:46px;height:46px;border:2px solid var(--border);margin-bottom:6px;}
.org-standalone .org-node-name{font-size:11px;font-weight:600;border-color:var(--border);padding:2px 6px;}
.org-standalone .org-node-sub{display:none;}

/* الشجرة الشخصية (غير الأدمن) */
.org-personal{display:flex;flex-direction:column;align-items:center;}
.org-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.org-connector{width:2px;height:26px;background:var(--border);}
.org-row-hint{color:var(--muted);font-size:13px;text-align:center;}

/* ===== نظرة عامة وانطباع عام عن الموظف (employee_view.php) ===== */
.impr-card{background:linear-gradient(160deg,var(--surface),var(--surface-2));}
.impr-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.impr-head h3{margin:0;}
.impr-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.impr-period{font-size:11px;font-weight:400;color:var(--muted);margin-inline-start:6px;}
.impr-badge{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;}
.impr-badge.impr-good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);}
.impr-badge.impr-warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);}
.impr-badge.impr-bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);}
.impr-badge.impr-gray{background:var(--surface-2);color:var(--muted);}
.impr-badge.impr-link{background:var(--surface-2);color:var(--accent);border:1px solid var(--border);text-decoration:none;cursor:pointer;transition:.15s;}
.impr-badge.impr-link:hover{background:var(--accent-dim);border-color:var(--accent-2);transform:translateY(-1px);}
.impr-note{font-size:13.5px;color:var(--text);line-height:1.7;margin:0 0 16px;}
.impr-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media (max-width:900px){.impr-stats{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.impr-stats{grid-template-columns:repeat(2,1fr);}}
.impr-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 10px;text-align:center;}
.impr-stat-val{font-size:21px;font-weight:700;font-family:'JetBrains Mono';margin-bottom:5px;color:var(--text);}
.impr-stat-val.impr-good{color:var(--good);}
.impr-stat-val.impr-warn{color:var(--warn);}
.impr-stat-val.impr-bad{color:var(--bad);}
.impr-stat-val.impr-gray{color:var(--muted);font-size:17px;}
.impr-stat-lbl{font-size:11.5px;color:var(--muted);line-height:1.5;}
.impr-stat-hint{font-size:10px;opacity:.8;}

/* ======================================================================
   Albero Modern Workspace — Status Groups (Phase 1: shell + sidebar +
   topbar + tasks list). Scoped to new v2-* tokens/classes so existing
   pages/components are completely unaffected.
   ====================================================================== */
:root{
  --v2-bg:#eef1f5; --v2-sidebar-bg:#ffffff; --v2-panel:#ffffff; --v2-panel-hover:#f4f6f9;
  --v2-border:#e2e7ee; --v2-text:#151b23; --v2-text-2:#66707c;
  --v2-accent:#0f9c82; --v2-accent-hover:#0c8570; --v2-on-accent:#ffffff;
  --v2-blue:#2f7fd0; --v2-amber:#b06e12; --v2-red:#d3363f; --v2-green:#0f9c82;
  --v2-radius-sm:6px; --v2-radius-md:10px; --v2-radius-lg:14px;
  --v2-shadow-sm:0 1px 2px rgba(20,30,45,.06); --v2-shadow-md:0 10px 26px -16px rgba(20,30,45,.25);
  --v2-row-h:38px; --v2-header-h:46px; --v2-sidebar-w:224px; --v2-sidebar-w-collapsed:64px;
  --v2-ease:cubic-bezier(.2,.8,.2,1);
  --v2-z-sidebar:150; --v2-z-topbar:140; --v2-z-tooltip:400; --v2-z-toast:500;
  /* IBM Plex Sans + IBM Plex Sans Arabic: a matched pair (same x-height/weights by design), so a
     single stack lets the browser pick the right one per glyph — Latin text renders in the Latin-only
     IBM Plex Sans, Arabic text falls back to IBM Plex Sans Arabic — no dir-based branching needed.
     Not yet applied anywhere by default; a page opts in with font-family:var(--v2-font-sans). */
  --v2-font-sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --v2-bg:#0B1118; --v2-sidebar-bg:#17222F; --v2-panel:#15202C; --v2-panel-hover:#1B2936;
  --v2-border:#293848; --v2-text:#F2F7FB; --v2-text-2:#8FA0B2;
  --v2-accent:#31D2B0; --v2-accent-hover:#53DFC2; --v2-on-accent:#062621;
  --v2-blue:#55AAF4; --v2-amber:#F5AD42; --v2-red:#FF6974; --v2-green:#31D2B0;
  --v2-shadow-sm:0 1px 0 rgba(255,255,255,.03) inset; --v2-shadow-md:0 14px 32px -18px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:reduce){
  .app-sidebar,.content-topbar,.tg-body,.tg-chevron,.v2-drawer,.v2-tooltip,.sidebar-link .nav-caret{transition:none!important;animation:none!important;}
}

/* ---------- Sidebar v2 (collapsible) ---------- */
.app-sidebar{background:var(--v2-sidebar-bg);border-inline-start-color:var(--v2-border);
  width:var(--v2-sidebar-w);transition:width .24s var(--v2-ease);}
body{transition:margin-inline-end .24s var(--v2-ease);}
.sidebar-brand{border-bottom:1px solid var(--v2-border);}
.sidebar-brand-mark{background:var(--v2-accent);}
.sidebar-brand-word{color:var(--v2-text);}
.sidebar-brand-word em{color:var(--v2-text-2);}
.sidebar-nav{gap:1px;}
.sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--v2-text-2);
  text-transform:uppercase;padding:14px 10px 5px;}
.sidebar-link{color:var(--v2-text-2);border-radius:var(--v2-radius-sm);transition:background .14s var(--v2-ease),color .14s var(--v2-ease);}
.sidebar-link:hover{background:var(--v2-panel-hover);color:var(--v2-text);}
.sidebar-link.active{background:color-mix(in srgb, var(--v2-accent) 16%, transparent);color:var(--v2-accent);font-weight:600;}
.sidebar-group > .user-menu-panel{border-inline-start-color:var(--v2-border);}
.sidebar-group > .user-menu-panel a:hover,.sidebar-group > .user-menu-panel .submenu-head:hover{color:var(--v2-accent);background:color-mix(in srgb, var(--v2-accent) 12%, transparent);}

.sidebar-collapse-btn{position:absolute;top:22px;inset-inline-end:-13px;z-index:160;
  flex-shrink:0;width:26px;height:26px;border:1px solid var(--v2-border);background:var(--v2-panel);
  border-radius:50%;color:var(--v2-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--v2-shadow-sm);transition:transform .16s var(--v2-ease),color .14s ease,border-color .14s ease,background .14s ease;}
.sidebar-collapse-btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .22s var(--v2-ease);}
.sidebar-collapse-btn:hover{color:var(--v2-accent);border-color:var(--v2-accent);background:var(--v2-panel-hover);transform:scale(1.08);}
.sidebar-collapse-btn:active{transform:scale(.94);}
.app-sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}

/* حالة السايدبار المطوي: أيقونات بس + تولتيب عند الهوفر/الفوكس */
.app-sidebar.collapsed{width:var(--v2-sidebar-w-collapsed);}
body.sidebar-collapsed{margin-inline-start:var(--v2-sidebar-w-collapsed)!important;}
body.sidebar-collapsed .content-topbar{inset-inline-start:var(--v2-sidebar-w-collapsed)!important;}
.app-sidebar.collapsed .sidebar-brand-word,
.app-sidebar.collapsed .client-brand-logo,
.app-sidebar.collapsed .sidebar-link span:not(.nav-count):not(.alarm-bell),
.app-sidebar.collapsed .sidebar-link .nav-caret,
.app-sidebar.collapsed .sidebar-section-label{display:none;}
.app-sidebar.collapsed .sidebar-brand{justify-content:center;padding:16px 8px;}
.app-sidebar.collapsed .sidebar-link{justify-content:center;padding:9px;position:relative;}
.app-sidebar.collapsed .sidebar-group > .user-menu-panel{position:absolute!important;top:0!important;
  inset-inline-start:calc(100% + 8px)!important;inset-inline-end:auto!important;margin:0;border:1px solid var(--v2-border);
  background:var(--v2-panel);border-radius:var(--v2-radius-md);box-shadow:var(--v2-shadow-md);padding:6px;min-width:200px;}
.app-sidebar.collapsed .sidebar-link[data-tip]:hover::after,
.app-sidebar.collapsed .sidebar-link[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;top:50%;inset-inline-start:calc(100% + 8px);transform:translateY(-50%);
  background:var(--v2-text);color:var(--v2-bg);
  font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:6px;white-space:nowrap;z-index:var(--v2-z-tooltip);
  box-shadow:var(--v2-shadow-md);pointer-events:none;}

/* ---------- Topbar v2 + global search ---------- */
.content-topbar{height:var(--v2-header-h);top:12px;
  inset-inline-start:var(--v2-sidebar-w);inset-inline-end:0;
  transition:inset-inline-start .24s var(--v2-ease);}
.content-topbar-inner{background:var(--v2-panel);height:100%;max-width:1680px;margin-inline:auto;
  border:1px solid var(--v2-border);border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-sm);min-width:0;}
body{padding-top:calc(var(--v2-header-h) + 24px);}
.content-topbar .topbar-user-menu{flex-shrink:0;}
.content-topbar .me-box{flex-shrink:0;}
.topbar-user-name{color:var(--v2-text);}
.topbar-user-role{color:var(--v2-text-2);}
.v2-search{position:relative;display:flex;align-items:center;flex:1 1 auto;max-width:420px;min-width:0;}
.v2-search form{min-width:0;}
.v2-search-ic{position:absolute;inset-inline-start:12px;color:var(--v2-text-2);pointer-events:none;display:flex;}
.v2-search-input{width:100%;background:var(--v2-panel-hover);border:1px solid var(--v2-border);border-radius:999px;
  padding:8px 14px 8px 40px;font-size:13px;color:var(--v2-text);font-family:inherit;
  transition:border-color .16s var(--v2-ease),box-shadow .16s var(--v2-ease),background .16s var(--v2-ease);}
:root[dir="rtl"] .v2-search-input{padding:8px 40px 8px 14px;}
.v2-search-input:hover{border-color:color-mix(in srgb, var(--v2-accent) 30%, var(--v2-border));}
.v2-search-input::placeholder{color:var(--v2-text-2);}
.v2-search-input:focus{outline:none;border-color:var(--v2-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-accent) 18%, transparent);background:var(--v2-panel);}
.v2-search-kbd{position:absolute;inset-inline-end:8px;font-size:10.5px;font-weight:600;color:var(--v2-text-2);
  border:1px solid var(--v2-border);border-radius:5px;padding:1px 6px;pointer-events:none;background:var(--v2-panel);}
@media (max-width:900px){ .v2-search{max-width:220px;} }
@media (max-width:760px){ .v2-search{max-width:none;flex:1 1 auto;} .v2-search-kbd{display:none;} }

/* ---------- Topbar action icons + theme/lang segmented switches (small, consistent) ---------- */
.content-topbar .me-box{gap:6px;}
.content-topbar .me-box .bell-btn{width:30px;height:30px;margin-inline-start:0;box-shadow:none;}
.content-topbar .me-box .bell-btn svg{width:14px;height:14px;}
.content-topbar .me-box .bell-btn.active{border-color:var(--v2-accent);color:var(--v2-accent);
  background:color-mix(in srgb, var(--v2-accent) 12%, var(--v2-panel));}
.content-topbar .me-box .bell-count{min-width:16px;height:16px;font-size:9.5px;border-width:1.5px;}
.v2-topbar-seg{display:inline-flex;align-items:center;padding:3px;gap:2px;border-radius:999px;
  border:1px solid var(--v2-border);background:var(--v2-panel-hover);flex-shrink:0;}
.v2-seg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;
  padding:0 8px;border-radius:999px;border:none;background:transparent;color:var(--v2-text-2);
  font-size:10.5px;font-weight:700;font-family:inherit;text-decoration:none;cursor:pointer;line-height:1;
  transition:background .14s var(--v2-ease),color .14s var(--v2-ease);}
.v2-seg-btn:hover{color:var(--v2-text);}
.v2-seg-btn.on{background:var(--v2-panel);color:var(--v2-accent);box-shadow:var(--v2-shadow-sm);}
.v2-seg-btn-icon{width:24px;min-width:24px;padding:0;}

/* ---------- Tasks page v2 (Status Groups) ---------- */
body.tasks-v2{background:var(--v2-bg);}
.tv2-wrap{flex:1 0 auto;width:100%;max-width:1680px;margin-inline:auto;padding:20px 26px 60px;color:var(--v2-text);overflow-x:hidden;box-sizing:border-box;}
.tv2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.tv2-title{font-size:19px;font-weight:700;margin:0;color:var(--v2-text);}
.tv2-sub{font-size:12.5px;color:var(--v2-text-2);margin-top:3px;}
.tv2-primary-btn{background:var(--v2-accent);color:var(--v2-on-accent);border:none;border-radius:var(--v2-radius-sm);
  padding:9px 16px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  text-decoration:none;transition:background .14s var(--v2-ease),transform .1s ease;box-shadow:none;}
.tv2-primary-btn:hover{background:var(--v2-accent-hover);transform:translateY(-1px);}
.tv2-primary-btn:active{transform:translateY(0);}

.tv2-tabs{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--v2-border);margin-bottom:14px;}
.tv2-tab{position:relative;padding:9px 2px;font-size:13px;font-weight:600;color:var(--v2-text-2);
  background:none;border:none;cursor:pointer;box-shadow:none;}
.tv2-tab.active{color:var(--v2-accent);}
.tv2-tab.active::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--v2-accent);border-radius:2px 2px 0 0;}
.tv2-tab:disabled{opacity:.4;cursor:default;}

.tv2-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--v2-panel);
  border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:8px 10px;margin-bottom:14px;box-shadow:var(--v2-shadow-sm);}
.tv2-toolbar-group{display:flex;gap:4px;background:var(--v2-bg);border:1px solid var(--v2-border);border-radius:8px;padding:3px;}
.tv2-chip{padding:5px 11px;font-size:12px;font-weight:600;color:var(--v2-text-2);border-radius:6px;text-decoration:none;
  border:none;background:none;cursor:pointer;box-shadow:none;white-space:nowrap;transition:background .12s ease,color .12s ease;}
.tv2-chip:hover{color:var(--v2-text);}
.tv2-chip.active{background:var(--v2-panel);color:var(--v2-accent);box-shadow:var(--v2-shadow-sm);}
.tv2-toolbar input[type="text"],.tv2-toolbar input[type="date"],.tv2-toolbar select{
  background:var(--v2-bg);border:1px solid var(--v2-border);border-radius:7px;padding:6px 10px;font-size:12px;
  color:var(--v2-text);font-family:inherit;height:32px;}
.tv2-toolbar input:focus,.tv2-toolbar select:focus{outline:none;border-color:var(--v2-accent);}
.tv2-toolbar .tv2-q{width:150px;}
.tv2-toolbar .fp-alt-input.field-like{width:118px!important;padding:6px 10px!important;font-size:12px!important;height:32px!important;box-sizing:border-box;}
.tv2-toolbar .tv2-apply{background:var(--v2-accent);color:var(--v2-on-accent);border:none;border-radius:7px;
  height:32px;padding:0 14px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:none;}
.tv2-toolbar .tv2-apply:hover{background:var(--v2-accent-hover);}
.tv2-spacer{flex:1 1 auto;}
.tv2-toolbar-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.tv2-table-wrap{border:1px solid var(--v2-border);border-radius:var(--v2-radius-lg);overflow-x:auto;overflow-y:hidden;background:var(--v2-panel);box-shadow:var(--v2-shadow-sm);max-width:100%;}
table.tv2-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.tv2-col-id{width:60px;}
.tv2-col-title-c{width:230px;}
.tv2-col-creator{width:130px;}
.tv2-col-assignees-c{width:140px;}
.tv2-col-status-c{width:140px;}
.tv2-col-due-c{width:150px;}
.tv2-col-created-c{width:95px;}
.tv2-col-lastupd-c{width:95px;}
.tv2-col-updbtn-c{width:46px;}
.tv2-col-priority-c{width:100px;}
.tv2-col-actions-c{width:50px;}
.tv2-center{text-align:center!important;}
table.tv2-table thead th.tv2-center a{text-align:center;}
table.tv2-table thead th{text-align:start;padding:8px 12px;font-size:10.5px;font-weight:700;color:var(--v2-text-2);
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--v2-border);background:var(--v2-panel);white-space:nowrap;}
table.tv2-table thead th.sortable{padding:0;}
table.tv2-table thead th.sortable a{display:block;padding:8px 12px;color:inherit;text-decoration:none;font-size:inherit;
  font-weight:inherit;text-transform:inherit;letter-spacing:inherit;transition:background .12s ease,color .12s ease;}
table.tv2-table thead th.sortable a:hover{background:var(--v2-panel-hover);color:var(--v2-text);}
table.tv2-table thead th.sortable.active a{color:var(--v2-accent);}
table.tv2-table thead th .sort-arrow{font-size:8px;opacity:.5;margin-inline-start:3px;}
table.tv2-table thead th.sortable.active .sort-arrow{opacity:1;}

tr.tg-head{background:var(--v2-panel-hover);}
tr.tg-head td{padding:0;border-bottom:1px solid var(--v2-border);}
.tg-head-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;
  cursor:pointer;box-shadow:none;text-align:start;font-family:inherit;}
.tg-chevron{flex-shrink:0;color:var(--v2-text-2);transition:transform .2s var(--v2-ease);}
tr.tg-head.collapsed .tg-chevron{transform:rotate(-90deg);}
:root[dir="rtl"] tr.tg-head .tg-chevron{transform:rotate(90deg);}
:root[dir="rtl"] tr.tg-head.collapsed .tg-chevron{transform:rotate(0deg);}
.tg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tg-dot-new{background:var(--v2-text-2);}
.tg-dot-doing{background:var(--v2-blue);}
.tg-dot-done{background:var(--v2-green);}
.tg-dot-cancelled{background:var(--v2-red);}
.tg-name{font-size:12.5px;font-weight:700;color:var(--v2-text);}
.tg-count{font-size:11px;font-weight:600;color:var(--v2-text-2);background:var(--v2-bg);border-radius:999px;
  padding:1px 8px;}

tr.tv2-row{transition:background .12s ease;}
tr.tv2-row td{padding:0 12px;height:var(--v2-row-h);border-bottom:1px solid var(--v2-border);vertical-align:middle;text-align:start;}
tr.tv2-row:last-child td{border-bottom:none;}
tr.tv2-row:hover{background:var(--v2-panel-hover);}
tr.tv2-row:hover .tv2-row-accent{opacity:1;}
tr.tv2-row.hidden-by-group{display:none;}
.tv2-row-accent{position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--v2-accent);opacity:0;transition:opacity .12s ease;}
td.tv2-title-cell{position:relative;}
.tv2-task-link{color:var(--v2-text);text-decoration:none;font-size:13px;font-weight:500;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.tv2-task-link:hover{color:var(--v2-accent);}
.tv2-creator-cell{overflow:hidden;}
.tv2-creator{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;}
.tv2-creator .avatar,.tv2-creator .avatar-fallback{width:22px;height:22px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.tv2-creator .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--v2-accent-hover);
  color:var(--v2-on-accent);font-size:10px;font-weight:700;}
.tv2-creator-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--v2-text-2);font-size:12px;max-width:85px;}
.tv2-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--v2-text-2);font-size:11.5px;}
.tv2-due{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--v2-text-2);white-space:nowrap;}
.tv2-due.tv2-overdue{color:var(--v2-red);font-weight:700;}
.tv2-due.tv2-soon{color:var(--v2-amber);font-weight:700;}
.tv2-col-actions{width:1%;white-space:nowrap;}
.tv2-row-actions{display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .12s ease;}
tr.tv2-row:hover .tv2-row-actions,tr.tv2-row:focus-within .tv2-row-actions{opacity:1;}
.tv2-icon-btn{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:none;color:var(--v2-text-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;text-decoration:none;}
.tv2-icon-btn:hover{background:var(--v2-panel);border-color:var(--v2-border);color:var(--v2-accent);}
@media (max-width:1150px){ .tv2-hide-lg{display:none;} }
@media (max-width:820px){ .tv2-hide-md{display:none;} }

/* ---------- سايدبار الموبايل: دِرج منزلق بدل الشريط الثابت ---------- */
.mobile-sidebar-toggle{display:none;width:34px;height:34px;border:1px solid var(--v2-border);background:var(--v2-panel);
  border-radius:8px;color:var(--v2-text);align-items:center;justify-content:center;cursor:pointer;box-shadow:none;flex-shrink:0;}
.mobile-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,14,20,.5);z-index:290;opacity:0;transition:opacity .22s var(--v2-ease);}
.mobile-sidebar-backdrop.show{display:block;opacity:1;}
@media (max-width:760px){
  .app-sidebar{transform:translateX(100%);transition:transform .26s var(--v2-ease);width:264px!important;z-index:300;box-shadow:var(--v2-shadow-md);}
  :root[dir="ltr"] .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.mobile-open{transform:translateX(0);}
  :root[dir="ltr"] .app-sidebar.mobile-open{transform:translateX(0);}
  /* الدرج على الموبايل دايمًا بيبيّن الأيقونة + الاسم الكامل، بغض النظر عن تفضيل الطي بتاع الديسكتوب */
  .app-sidebar .sidebar-brand-word,
  .app-sidebar .sidebar-link span:not(.nav-count):not(.alarm-bell),
  .app-sidebar .sidebar-link .nav-caret,
  .app-sidebar .sidebar-section-label{display:revert!important;}
  .app-sidebar .sidebar-link{justify-content:flex-start!important;padding:8px 10px!important;}
  .app-sidebar .sidebar-brand{justify-content:flex-start!important;padding:18px 18px 14px!important;}
  .app-sidebar .sidebar-group > .user-menu-panel{position:static!important;transform:none!important;
    box-shadow:none!important;border:none!important;border-inline-start:2px solid var(--v2-border)!important;
    border-radius:0!important;margin-block:2px 4px!important;padding-block:4px!important;padding-inline-start:10px!important;background:transparent!important;}
  body,body.sidebar-collapsed{margin-inline-start:0!important;}
  .content-topbar,body.sidebar-collapsed .content-topbar{inset-inline-start:0!important;inset-inline-end:0!important;}
  .content-topbar-inner{padding-inline:10px;gap:6px;border-radius:0;}
  .sidebar-collapse-btn{display:none;}
  .mobile-sidebar-toggle{display:flex;}
  .topbar-user-info{display:none;}
  .v2-search{max-width:none;}
  .content-topbar .rwt-clocks{display:none;}
  .content-topbar .me-box{gap:4px;}
}

.tv2-status-pill{border:none;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;box-shadow:none;font-family:inherit;transition:filter .12s ease;}
.tv2-status-pill:hover{filter:brightness(1.06);}
.tv2-status-pill:disabled{cursor:default;opacity:.9;}
.tv2-status-pill.status-new{background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);color:var(--v2-text);}
.tv2-status-pill.status-doing{background:color-mix(in srgb, var(--v2-blue) 20%, transparent);color:var(--v2-blue);}
.tv2-status-pill.status-done{background:color-mix(in srgb, var(--v2-green) 20%, transparent);color:var(--v2-green);}
.tv2-status-pill.status-cancelled{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);}
.tv2-status-pill.is-saving{opacity:.6;pointer-events:none;}
.tv2-prio.prio-flag::before{content:none;}
.tv2-prio{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;}
.tv2-prio-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.tv2-prio.prio-high .tv2-prio-dot{background:var(--v2-red);} .tv2-prio.prio-high{color:var(--v2-red);}
.tv2-prio.prio-med .tv2-prio-dot{background:var(--v2-amber);} .tv2-prio.prio-med{color:var(--v2-amber);}
.tv2-prio.prio-low .tv2-prio-dot{background:var(--v2-blue);} .tv2-prio.prio-low{color:var(--v2-blue);}

.tv2-avatars{display:flex;align-items:center;}
.tv2-avatars .avatar,.tv2-avatars .avatar-fallback{width:24px;height:24px;border-radius:50%;font-size:10.5px;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--v2-panel);margin-inline-start:-7px;
  background:var(--v2-panel-hover);color:var(--v2-text-2);font-weight:700;flex-shrink:0;object-fit:cover;}
.tv2-avatars .avatar:first-child,.tv2-avatars .avatar-fallback:first-child{margin-inline-start:0;}
.tv2-add-assignee{width:24px;height:24px;border-radius:50%;border:1px dashed var(--v2-border);background:none;
  color:var(--v2-text-2);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;flex-shrink:0;}
.tv2-add-assignee:hover{border-color:var(--v2-accent);color:var(--v2-accent);}
.tv2-empty{padding:34px 12px;text-align:center;color:var(--v2-text-2);font-size:13px;}

/* إعادة تلبيس ويدجت الحالة المشترك (status_widget.php، مستخدم برضه في ticket_view.php) —
   من غير ما نلمس ملفه أو كلاسه الأصلي، بس هنا جوه جدول التاسكات الجديد بالشكل المضغوط */
.tv2-status-cell .status-widget{display:inline-block;}
.tv2-status-cell .status-btn{border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;box-shadow:none;}
.tv2-status-cell .status-btn.status-new{background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);color:var(--v2-text);}
.tv2-status-cell .status-btn.status-doing{background:color-mix(in srgb, var(--v2-blue) 20%, transparent);color:var(--v2-blue);}
.tv2-status-cell .status-btn.status-done{background:color-mix(in srgb, var(--v2-green) 20%, transparent);color:var(--v2-green);}
.tv2-status-cell .status-btn.status-cancelled{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);}
.tv2-status-cell .status-panel{background:var(--v2-panel);border-color:var(--v2-border);box-shadow:var(--v2-shadow-md);}
.tv2-status-cell .status-option:hover{background:color-mix(in srgb, var(--v2-accent) 14%, transparent);}

/* Package 01 — environment model: staging banner (dormant unless APP_ENV=staging) */
.app-env-banner{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:500;
  background:#b8860b;color:#fff;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;}

/* =====================================================================
   Enterprise Reference UI ("ent-*") — GitHub Issue #3, polished per
   Issue #5 (density, hierarchy, integration — no structural rework).
   Reusable design-system layer for Finance/ERP document screens, built
   ON TOP of the existing --v2-* tokens (same shell already used by the
   sidebar/topbar/tasks-v2) rather than inventing a third token system.
   First consumer: journal_voucher_view.php / journal_voucher_form.php.
   Every rule here is additive — nothing in this block redefines an
   existing class, so it cannot regress any other page.
   ===================================================================== */

/* ---- Finance context bar (optional 2nd topbar row) ----
   Opt-in only: includes/header.php renders this ONLY when a page sets
   $showFinanceContext = true before requiring it, so every other page's
   topbar/body offset is completely unaffected (see body.has-context-bar
   below, which only applies when that extra row actually exists).
   Issue #5: the row is now a deliberate strip of chip-style controls
   (icon + label: value, each its own bordered pill) instead of plain
   text separated by hairline dividers, and its content shares the same
   max-width/centering as .content-topbar-inner directly above it so the
   two topbar rows — and the page content below — line up on one edge. */
body.has-context-bar{padding-top:calc(var(--v2-header-h) + 24px + 40px);}
.content-topbar.has-context-row{height:calc(58px + 40px);}
.ent-context-bar{height:40px;display:flex;align-items:center;padding:0 18px;
  background:var(--v2-panel-hover);border-bottom:1px solid var(--v2-border);overflow-x:auto;}
.ent-context-bar-inner{display:flex;align-items:center;gap:8px;width:100%;max-width:1680px;margin-inline:auto;}
.ent-context-item{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11.5px;color:var(--v2-text-2);
  white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--v2-panel);border:1px solid var(--v2-border);}
.ent-context-item strong{color:var(--v2-text);font-weight:600;}
.ent-context-icon{display:flex;flex-shrink:0;color:var(--v2-text-2);}
.ent-context-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;margin-inline-start:2px;border-radius:999px;
  background:color-mix(in srgb, var(--v2-accent) 10%, transparent);color:var(--v2-accent);font-size:10.5px;font-weight:600;}

/* ---- Breadcrumb ---- */
.ent-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--v2-text-2);margin-bottom:10px;}
.ent-breadcrumb a{color:var(--v2-text-2);text-decoration:none;}
.ent-breadcrumb a:hover{color:var(--v2-accent);}
.ent-breadcrumb .ent-crumb-current{color:var(--v2-text);font-weight:600;}
.ent-breadcrumb .ent-crumb-sep{color:var(--v2-border);}

/* ---- Page header: title + status badge + action buttons ----
   Issue #5: stronger hierarchy — the voucher number leads at a larger
   size, the status badge is bolder/higher-contrast, the version drops
   to a quiet pill of its own (not bare text next to a badge), and the
   description reads as a real subtitle (higher contrast, larger) rather
   than sharing the breadcrumb's muted caption size. */
.ent-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.ent-page-title-block{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ent-page-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ent-page-title-row h1{margin:0;font-size:23px;line-height:1.2;font-weight:800;font-family:'Cairo',sans-serif;color:var(--v2-text);}
.ent-page-sub{font-size:13px;color:var(--v2-text);opacity:.75;}
.ent-version-tag{font-size:11px;color:var(--v2-text-2);font-weight:600;background:var(--v2-panel-hover);
  border:1px solid var(--v2-border);border-radius:999px;padding:2px 9px;}
.ent-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;max-width:100%;}
/* Secondary (ghost) actions read as quiet/outlined; the primary action
   keeps the full accent treatment so it stays the obvious next step. */
.ent-actions .btn{padding:7px 15px;font-size:12.5px;font-weight:600;border-radius:var(--v2-radius-sm);}
.ent-actions .btn.primary{box-shadow:var(--v2-shadow-sm);}
.ent-actions .btn.ghost{border-color:var(--v2-border);background:var(--v2-panel);color:var(--v2-text-2);}
.ent-actions .btn.ghost:hover{background:var(--v2-panel-hover);color:var(--v2-text);border-color:var(--v2-border);transform:none;}

/* ---- Status badges (richer than the plain .tag, includes a dot) ---- */
.ent-status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap;}
.ent-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.ent-status.st-neutral{background:color-mix(in srgb, var(--v2-text-2) 16%, transparent);color:var(--v2-text-2);}
.ent-status.st-info{background:color-mix(in srgb, var(--v2-blue) 18%, transparent);color:var(--v2-blue);}
.ent-status.st-warn{background:color-mix(in srgb, var(--v2-amber) 20%, transparent);color:var(--v2-amber);}
.ent-status.st-bad{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);}
.ent-status.st-good{background:color-mix(in srgb, var(--v2-green) 18%, transparent);color:var(--v2-green);}

/* ---- Two-column document layout: main content + right-hand rail ----
   Issue #5: the rail gives back some width to the accounting content
   (300px -> 264px) and every gap in the layout tightens a notch. */
.ent-layout{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:14px;align-items:start;}
@media (max-width:1080px){.ent-layout{grid-template-columns:1fr;}}
.ent-main-col{min-width:0;display:flex;flex-direction:column;gap:14px;}
.ent-side-col{min-width:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--v2-header-h) + 24px + 10px);}
@media (max-width:1080px){.ent-side-col{position:static;}}

/* ---- Card ---- */
.ent-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);
  box-shadow:var(--v2-shadow-sm);overflow:hidden;}
.ent-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-bottom:1px solid var(--v2-border);}
.ent-card-title{font-size:13px;font-weight:700;color:var(--v2-text);display:flex;align-items:center;gap:8px;}
.ent-card-body{padding:14px 16px;}
.ent-card-foot{padding:9px 16px;border-top:1px solid var(--v2-border);background:var(--v2-panel-hover);}

/* ---- Enterprise field grid (denser than the legacy .field-row's fixed 2-col) ---- */
.ent-field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.ent-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ent-field label{font-size:11px;color:var(--v2-text-2);font-weight:600;}
.ent-field .ent-field-val{font-size:12.5px;color:var(--v2-text);}
.ent-field input,.ent-field select,.ent-field textarea{width:100%;background:var(--v2-bg);
  border:1px solid var(--v2-border);color:var(--v2-text);border-radius:var(--v2-radius-sm);
  padding:6px 10px;font-size:12.5px;font-family:inherit;height:32px;}
.ent-field textarea{height:auto;min-height:64px;resize:vertical;}
.ent-field input:focus,.ent-field select:focus,.ent-field textarea:focus{outline:none;border-color:var(--v2-accent);}
.ent-field input:disabled,.ent-field select:disabled,.ent-field textarea:disabled{opacity:.6;cursor:not-allowed;}

/* ---- Tabs ----
   Issue #5: the active tab now carries a soft background tint behind
   the underline (not just a 2px line) so it reads unmistakably active
   at a glance, not only on close inspection. */
.ent-tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--v2-border);
  padding:0 10px;overflow-x:auto;background:var(--v2-panel);}
.ent-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;margin-block:4px;
  font-size:12.5px;color:var(--v2-text-2);text-decoration:none;border-bottom:2px solid transparent;
  border-radius:var(--v2-radius-sm) var(--v2-radius-sm) 0 0;white-space:nowrap;cursor:pointer;
  background:none;border-top:none;border-inline:none;font-family:inherit;box-shadow:none;}
.ent-tab:hover{color:var(--v2-text);background:var(--v2-panel-hover);transform:none;}
.ent-tab.active{color:var(--v2-accent);border-bottom-color:var(--v2-accent);font-weight:700;
  background:color-mix(in srgb, var(--v2-accent) 9%, transparent);}
.ent-tab.active:hover{background:color-mix(in srgb, var(--v2-accent) 9%, transparent);}
.ent-tab.disabled{color:var(--v2-text-2);opacity:.5;cursor:not-allowed;pointer-events:none;}
.ent-tab .ent-tab-note{font-size:9.5px;background:var(--v2-panel-hover);border:1px solid var(--v2-border);
  border-radius:999px;padding:1px 6px;color:var(--v2-text-2);font-weight:600;}
.ent-tab-panel[hidden]{display:none;}

/* ---- Dense enterprise line table (Journal Lines, editable in the form) ---- */
.ent-line-table-wrap{overflow-x:auto;}
table.ent-line-table{width:100%;border-collapse:collapse;font-size:12px;min-width:920px;}
table.ent-line-table thead th{text-align:start;padding:6px 8px;font-size:10px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--v2-text-2);border-bottom:1px solid var(--v2-border);white-space:nowrap;}
table.ent-line-table thead th.ent-num-col{text-align:end;}
table.ent-line-table tbody td{padding:3px 8px;border-bottom:1px solid var(--v2-border);vertical-align:middle;}
table.ent-line-table tbody tr:last-child td{border-bottom:none;}
table.ent-line-table tbody tr:hover{background:var(--v2-panel-hover);}
table.ent-line-table input,table.ent-line-table select{width:100%;background:var(--v2-bg);
  border:1px solid transparent;color:var(--v2-text);border-radius:6px;padding:5px 7px;font-size:12px;
  font-family:inherit;height:29px;min-width:90px;}
table.ent-line-table input:focus,table.ent-line-table select:focus{outline:none;border-color:var(--v2-accent);background:var(--v2-panel);}
table.ent-line-table input.ent-num{text-align:end;font-family:'JetBrains Mono',monospace;min-width:100px;}
table.ent-line-table .ent-line-account-col{min-width:210px;}
table.ent-line-table .ent-line-del{width:27px;height:27px;border-radius:7px;border:1px solid var(--v2-border);
  background:none;color:var(--v2-text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;}
table.ent-line-table .ent-line-del:hover{border-color:var(--v2-red);color:var(--v2-red);transform:none;}

/* Read-only variant, for the view/preview pages (no inputs, plain text cells) */
table.ent-line-table.ent-readonly tbody td{padding:7px 8px;}
table.ent-line-table.ent-readonly td.ent-num{text-align:end;font-family:'JetBrains Mono',monospace;}

/* ---- Line-table footer: balance badge + line count + totals, all in
   one compact strip — Issue #5 folds the debit/credit/difference
   summary directly into this footer instead of a separate card below,
   so the numbers read as part of the same table, not a detached block. */
.ent-line-table-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--v2-border);background:var(--v2-panel-hover);}
.ent-line-table-foot .ent-line-table-foot-start{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ent-line-totals{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ent-line-totals .ent-total-item{display:flex;align-items:baseline;gap:6px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--v2-text-2);}
.ent-line-totals .ent-total-item strong{font-size:13.5px;text-transform:none;letter-spacing:0;
  font-family:'JetBrains Mono',monospace;color:var(--v2-text);}

/* ---- Balance summary strip (kept for any page that still wants a
   standalone totals block outside a table footer) ---- */
.ent-summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--v2-border);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);overflow:hidden;}
.ent-summary-cell{background:var(--v2-panel);padding:10px 14px;display:flex;flex-direction:column;gap:3px;}
.ent-summary-cell .ent-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--v2-text-2);}
.ent-summary-cell .ent-summary-val{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--v2-text);}

.ent-balance-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;}
.ent-balance-badge.balanced{background:color-mix(in srgb, var(--v2-green) 16%, transparent);color:var(--v2-green);}
.ent-balance-badge.unbalanced{background:color-mix(in srgb, var(--v2-red) 16%, transparent);color:var(--v2-red);}
.ent-balance-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}

/* ---- Workflow & Status timeline (right rail) ----
   Issue #5 explicitly asks to keep this visually strong — only the
   card padding around it tightens, the timeline's own rhythm doesn't. */
.ent-timeline{display:flex;flex-direction:column;}
.ent-timeline-step{position:relative;padding:0 0 20px 26px;}
html[dir="rtl"] .ent-timeline-step{padding:0 26px 20px 0;}
.ent-timeline-step:last-child{padding-bottom:0;}
.ent-timeline-step::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:12px;height:12px;
  border-radius:50%;background:var(--v2-panel);border:2px solid var(--v2-border);}
.ent-timeline-step::after{content:"";position:absolute;inset-inline-start:5px;top:14px;bottom:0;width:2px;background:var(--v2-border);}
.ent-timeline-step:last-child::after{display:none;}
.ent-timeline-step.done::before{background:var(--v2-green);border-color:var(--v2-green);}
.ent-timeline-step.done::after{background:var(--v2-green);}
.ent-timeline-step.current::before{background:var(--v2-panel);border-color:var(--v2-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-accent) 22%, transparent);}
.ent-timeline-step.rejected::before{background:var(--v2-red);border-color:var(--v2-red);}
.ent-timeline-title{font-size:12.5px;font-weight:700;color:var(--v2-text);}
.ent-timeline-meta{font-size:11px;color:var(--v2-text-2);margin-top:2px;}
.ent-timeline-step.current .ent-timeline-title{color:var(--v2-accent);}

/* ---- Empty/placeholder state for a not-yet-available tab (Attachments/Notes) ---- */
.ent-placeholder{padding:32px 20px;text-align:center;color:var(--v2-text-2);}
.ent-placeholder svg{margin-bottom:10px;opacity:.5;}
.ent-placeholder p{font-size:13px;margin:0;}
.ent-placeholder .ent-placeholder-sub{font-size:11.5px;margin-top:4px;opacity:.8;}

/* ---- Responsive: tighten the layout on tablet/small screens ---- */
@media (max-width:760px){
  .ent-page-head{flex-direction:column;align-items:stretch;}
  .ent-actions{width:100%;}
  .ent-actions .btn{flex:1;}
  .ent-context-bar{padding:0 12px;}
  .ent-context-bar-inner{gap:6px;}
  .ent-card-body{padding:12px;}
  .ent-field-grid{grid-template-columns:1fr 1fr;}
  .ent-line-table-foot{flex-direction:column;align-items:stretch;}
}
@media (max-width:480px){
  .ent-field-grid{grid-template-columns:1fr;}
}

:root[data-theme="dark"] .ent-status.st-neutral,:root[data-theme="dark"] .ent-status.st-info,
:root[data-theme="dark"] .ent-status.st-warn,:root[data-theme="dark"] .ent-status.st-bad,
:root[data-theme="dark"] .ent-status.st-good{filter:none;}

/* ===== Package 03 — AP screens (pagination, allocation rows). Uses the same v2 tokens as the .ent-* system. ===== */
.ap-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 4px;}
.ap-pager-nav{display:inline-flex;align-items:center;gap:8px;}
.ap-pager-size{display:inline-flex;align-items:center;gap:4px;}
.ap-pp{padding:3px 9px;border:1px solid var(--v2-border);border-radius:6px;font-size:12px;color:var(--v2-text-2);text-decoration:none;font-family:'JetBrains Mono',monospace;}
.ap-pp.on{background:var(--v2-accent);border-color:var(--v2-accent);color:#fff;}
.ap-pp:hover:not(.on){border-color:var(--v2-accent);color:var(--v2-text);}
.ap-alloc-row td{padding-top:0;padding-bottom:6px;border-top:0;font-size:12px;}
.ent-summary-strip{overflow-x:auto;}


/* ==========================================================================
   Issue #14 — Enterprise Overview master layout (client demo)
   Dark forest-green sidebar on a light enterprise workspace, in BOTH themes.
   Additive: only re-tints the sidebar and adds the Overview / Preview screens.
   ========================================================================== */
:root{
  --ent-forest:#0c3a2d; --ent-forest-2:#11493a; --ent-forest-line:rgba(255,255,255,.09);
  --ent-side-text:#d6e9df; --ent-side-muted:#8db8a7; --ent-side-active:#4fe0b0;
  --ov-up:#0f9c82; --ov-down:#d3363f; --ov-warn:#b06e12; --ov-blue:#2f7fd0;
}
:root[data-theme="dark"]{ --ent-forest:#082a21; --ent-forest-2:#0d3a2e; }
.app-sidebar{background:var(--ent-forest)!important;border-color:var(--ent-forest-line)!important;color:var(--ent-side-text);}
.app-sidebar .sidebar-brand{border-bottom-color:var(--ent-forest-line)!important;}
.app-sidebar .sidebar-brand-word{color:#fff!important;}
.app-sidebar .sidebar-brand-word em{color:var(--ent-side-muted)!important;}
.app-sidebar .sidebar-brand-mark{background:var(--ent-side-active)!important;color:#06261d!important;}
.app-sidebar .sidebar-section-label{color:var(--ent-side-muted)!important;letter-spacing:.09em;}
.app-sidebar .sidebar-link{color:var(--ent-side-text)!important;}
.app-sidebar .sidebar-link .nav-ic{opacity:.85;}
.app-sidebar .sidebar-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
.app-sidebar .sidebar-link.active{background:rgba(79,224,176,.16)!important;color:var(--ent-side-active)!important;font-weight:600;
  box-shadow:inset 3px 0 0 var(--ent-side-active);}
:root[dir="rtl"] .app-sidebar .sidebar-link.active{box-shadow:inset -3px 0 0 var(--ent-side-active);}
.app-sidebar .sidebar-group > .user-menu-panel{background:rgba(0,0,0,.16)!important;border-inline-start-color:var(--ent-forest-line)!important;}
.app-sidebar .user-menu-panel a,.app-sidebar .submenu-head{color:var(--ent-side-text)!important;}
.app-sidebar .user-menu-panel a:hover,.app-sidebar .submenu-head:hover,.app-sidebar .submenu.open > .submenu-head{background:rgba(79,224,176,.12)!important;color:var(--ent-side-active)!important;}
.app-sidebar .menu-note{color:var(--ent-side-muted)!important;}
.app-sidebar .sidebar-collapse-btn{background:var(--ent-forest-2);border-color:var(--ent-forest-line);color:var(--ent-side-text);}
.app-sidebar .nav-count{background:var(--ent-side-active);color:#06261d;}
.app-sidebar.collapsed .sidebar-group > .user-menu-panel{background:var(--ent-forest-2)!important;border-color:var(--ent-forest-line)!important;}
:root:not([data-theme="dark"]){ --v2-bg:#f1f5f3; }
.demo-ribbon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ov-warn);background:color-mix(in srgb, var(--v2-amber) 16%, transparent);border:1px solid color-mix(in srgb, var(--v2-amber) 40%, transparent);
  padding:3px 10px;border-radius:999px;}

/* ---- Enterprise Overview ---- */
.ov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.ov-head h1{font-size:22px;margin:0 0 2px;letter-spacing:-.01em;}
.ov-sub{font-size:12.5px;color:var(--v2-text-2);}
.ov-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ov-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.ov-kpi{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:14px 16px;min-width:0;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;box-shadow:var(--v2-shadow-sm);transition:border-color .15s,transform .15s;}
a.ov-kpi:hover{border-color:var(--v2-accent);transform:translateY(-1px);}
.ov-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ov-kpi-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-text-2);}
.ov-kpi-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--v2-accent) 14%, transparent);color:var(--v2-accent);}
.ov-kpi-ic svg{width:15px;height:15px;}
.ov-kpi-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.ov-kpi-val small{font-size:12px;font-weight:500;color:var(--v2-text-2);margin-inline-start:4px;}
.ov-kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--v2-text-2);}
.ov-trend{font-weight:700;font-family:'JetBrains Mono',monospace;}
.ov-trend.up{color:var(--ov-up);} .ov-trend.down{color:var(--ov-down);} .ov-trend.flat{color:var(--v2-text-2);}
.ov-spark{height:26px;width:88px;flex-shrink:0;}
.ov-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.ov-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);box-shadow:var(--v2-shadow-sm);min-width:0;display:flex;flex-direction:column;}
.ov-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--v2-border);}
.ov-card-title{font-size:13.5px;font-weight:700;margin:0;}
.ov-card-link{font-size:12px;color:var(--v2-accent);text-decoration:none;font-weight:600;white-space:nowrap;}
.ov-card-link:hover{text-decoration:underline;}
.ov-card-body{padding:14px 16px;min-width:0;flex:1;}
.ov-span-4{grid-column:span 4;} .ov-span-5{grid-column:span 5;} .ov-span-6{grid-column:span 6;} .ov-span-7{grid-column:span 7;} .ov-span-8{grid-column:span 8;} .ov-span-12{grid-column:span 12;}
.ov-chart{width:100%;height:190px;display:block;}
.ov-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--v2-text-2);margin-top:8px;}
.ov-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px;}
.ov-table-wrap{overflow-x:auto;}
table.ov-table{width:100%;border-collapse:collapse;font-size:12.5px;}
table.ov-table th{text-align:start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-text-2);padding:8px 12px;border-bottom:1px solid var(--v2-border);white-space:nowrap;}
table.ov-table td{padding:9px 12px;border-bottom:1px solid color-mix(in srgb, var(--v2-border) 60%, transparent);vertical-align:middle;}
table.ov-table tr:last-child td{border-bottom:0;}
table.ov-table td.num,table.ov-table th.num{text-align:end;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
table.ov-table a{color:var(--v2-text);text-decoration:none;font-weight:600;}
table.ov-table a:hover{color:var(--v2-accent);}
.ov-bar{height:7px;border-radius:99px;background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);overflow:hidden;min-width:70px;}
.ov-bar > span{display:block;height:100%;border-radius:99px;background:var(--v2-accent);}
.ov-bar.warn > span{background:var(--v2-amber);} .ov-bar.bad > span{background:var(--v2-red);}
.ov-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ov-quick a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--v2-border);border-radius:10px;text-decoration:none;color:var(--v2-text);font-size:12.5px;font-weight:600;background:var(--v2-panel-hover);transition:border-color .15s,background .15s;}
.ov-quick a:hover{border-color:var(--v2-accent);background:color-mix(in srgb, var(--v2-accent) 8%, var(--v2-panel));}
.ov-quick a svg{width:16px;height:16px;color:var(--v2-accent);flex-shrink:0;}
.ov-alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ov-alerts li{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;background:var(--v2-panel-hover);border:1px solid var(--v2-border);font-size:12.5px;line-height:1.45;}
.ov-alerts li b{display:block;font-weight:700;}
.ov-alerts a{color:inherit;text-decoration:none;display:flex;gap:10px;align-items:flex-start;width:100%;}
.ov-alerts a:hover b{color:var(--v2-accent);}
.ov-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--v2-blue);}
.ov-dot.warn{background:var(--v2-amber);} .ov-dot.bad{background:var(--v2-red);} .ov-dot.good{background:var(--v2-green);}
.ov-muted{color:var(--v2-text-2);font-size:11.5px;}
.ov-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ov-mini-stat{display:flex;flex-direction:column;gap:2px;}
.ov-mini-stat b{font-family:'JetBrains Mono',monospace;font-size:17px;}
@media (max-width:1180px){.ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.ov-span-4,.ov-span-5,.ov-span-6,.ov-span-7,.ov-span-8{grid-column:span 12;}}
@media (max-width:560px){.ov-kpis{grid-template-columns:1fr;}.ov-two{grid-template-columns:1fr;}.ov-kpi-val{font-size:22px;}.ov-quick{grid-template-columns:1fr;}}

/* ---- Preview / Demo screens ---- */
.pv-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--v2-radius-md);margin-bottom:14px;
  background:color-mix(in srgb, var(--v2-amber) 12%, var(--v2-panel));border:1px solid color-mix(in srgb, var(--v2-amber) 38%, var(--v2-border));}
.pv-banner svg{width:18px;height:18px;color:var(--ov-warn);flex-shrink:0;margin-top:1px;}
.pv-banner b{display:block;font-size:13px;}
.pv-banner span{font-size:12.5px;color:var(--v2-text-2);line-height:1.5;}
.pv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.pv-tab{padding:6px 12px;border:1px solid var(--v2-border);border-radius:999px;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--v2-text-2);background:var(--v2-panel);}
.pv-tab.on,.pv-tab:hover{color:var(--v2-accent);border-color:var(--v2-accent);}
.pv-status{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb, var(--v2-text-2) 15%, transparent);color:var(--v2-text-2);}
.pv-status.good{background:color-mix(in srgb, var(--v2-green) 17%, transparent);color:var(--v2-green);}
.pv-status.warn{background:color-mix(in srgb, var(--v2-amber) 19%, transparent);color:var(--ov-warn);}
.pv-status.bad{background:color-mix(in srgb, var(--v2-red) 16%, transparent);color:var(--v2-red);}
.pv-status.info{background:color-mix(in srgb, var(--v2-blue) 16%, transparent);color:var(--v2-blue);}
.pv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px;}
.pv-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:14px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;box-shadow:var(--v2-shadow-sm);}
a.pv-card:hover{border-color:var(--v2-accent);}
.pv-card h3{margin:0;font-size:14px;} .pv-card p{margin:0;font-size:12.5px;color:var(--v2-text-2);line-height:1.5;}
.pv-foot{margin-top:14px;font-size:12px;color:var(--v2-text-2);}

.nav-preview{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(245,173,66,.2);color:#f5c265;vertical-align:1px;}
.app-env-demo{background:#0f6b53!important;color:#eafff6!important;}

/* governance pages use st-ok for "good"; alias it so the status pills are coloured */
.ent-status.st-ok{background:color-mix(in srgb, var(--v2-green) 18%, transparent);color:var(--v2-green);}


/* ==========================================================================
   APPROVED MASTER LAYOUT — Albero ERP Enterprise Overview (Issue #14 rebuild)
   Implements the approved reference: 238px forest sidebar with brand, large icons, flat menu and mountain scene;
   ONE-row topbar (Company / Branch / Fiscal Period pills · search · notifications · help · profile); light workspace.
   This block intentionally comes last so it wins over the earlier shell rules; every other page inherits the same shell.
   ========================================================================== */
:root{
  --v2-sidebar-w:238px; --v2-sidebar-w-collapsed:76px; --v2-header-h:62px; --envbar:0px;
  --m-side-a:#0c2a22; --m-side-b:#0e2f26; --m-side-c:#123a2d; --m-side-text:#d6e5de; --m-side-muted:#8fb3a3; --m-active:#2b5c45;
  --m-line:#e5ebe9; --m-green:#1f6b47; --m-blue:#1e4fa0;
}
:root:not([data-theme="dark"]){ --v2-bg:#f5f8f7; }
:root[data-theme="dark"]{ --m-side-a:#08201a; --m-side-b:#0a251e; --m-side-c:#0d2e24; --m-line:#26343e; --m-active:#23503c; }
body,body.has-context-bar{padding-top:calc(var(--v2-header-h) + var(--envbar));}
.app{padding:22px 24px 48px;}
.app-wide{max-width:none;}

/* ---------- Sidebar ---------- */
.app-sidebar{top:var(--envbar)!important;width:var(--v2-sidebar-w);background:linear-gradient(180deg,var(--m-side-a) 0%,var(--m-side-b) 55%,var(--m-side-c) 100%)!important;border:0!important;}
.app-sidebar .sidebar-brand{justify-content:flex-start;gap:11px;padding-block:15px 14px;padding-inline:18px 52px;height:72px;border-bottom:0!important;position:relative;}
.app-sidebar .sb-mark{flex:0 0 auto;width:40px;height:40px;display:block;}
.app-sidebar .sb-brandtext{display:flex;flex-direction:column;gap:3px;min-width:0;}
.app-sidebar .sidebar-brand-word{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff!important;line-height:1;}
.app-sidebar .sb-tag{font-size:7.4px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--m-side-muted);white-space:nowrap;line-height:1.25;}
.app-sidebar .sidebar-brand .client-brand-logo{height:40px;max-width:150px;}
.app-sidebar .sidebar-collapse-btn{top:24px;inset-inline-end:14px;inset-inline-start:auto;width:26px;height:26px;background:transparent!important;border:0!important;box-shadow:none!important;color:#b9cfc5!important;border-radius:6px;}
.app-sidebar .sidebar-collapse-btn:hover{background:rgba(255,255,255,.08)!important;transform:none;color:#fff!important;}
.app-sidebar .sidebar-collapse-btn svg{width:17px;height:17px;}
:root[dir="rtl"] .app-sidebar .sidebar-collapse-btn svg{transform:scaleX(-1);}
:root[dir="rtl"] .app-sidebar.collapsed .sidebar-collapse-btn svg{transform:none;}
.app-sidebar .sidebar-brand{padding-inline-end:48px;}

.app-sidebar .sidebar-nav{display:flex;flex-direction:column;gap:5px;padding:6px 12px 10px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;}
.app-sidebar .sidebar-nav::-webkit-scrollbar{display:none;}
.app-sidebar .sidebar-section-label{display:none!important;}
.app-sidebar .sidebar-link{height:44px;padding:0 14px!important;gap:14px;font-size:15px;font-weight:500;border-radius:9px;color:var(--m-side-text)!important;background:transparent;}
.app-sidebar .sidebar-link:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;}
.app-sidebar .sidebar-link.active{background:var(--m-active)!important;color:#fff!important;font-weight:600;box-shadow:none;}
:root[dir="rtl"] .app-sidebar .sidebar-link.active{box-shadow:none;}
.app-sidebar .sidebar-link .nav-ic{display:none;}
.app-sidebar .sidebar-link::before{content:"";flex:0 0 24px;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;opacity:.92;}
.app-sidebar .sidebar-link .nav-caret{width:14px;height:14px;opacity:.75;transform:rotate(-90deg);margin-inline-start:auto;flex:0 0 14px;}
:root[dir="rtl"] .app-sidebar .sidebar-link .nav-caret{transform:rotate(90deg);}
.app-sidebar .sidebar-link:has(+ .user-menu-panel.open) .nav-caret{transform:rotate(0deg);}
.app-sidebar .sidebar-group{position:relative;display:block;}
.app-sidebar .sidebar-group > .user-menu-panel{margin:3px 0 4px 20px!important;padding:2px 0 2px 10px!important;border-inline-start:1px solid rgba(255,255,255,.14)!important;background:transparent!important;}
:root[dir="rtl"] .app-sidebar .sidebar-group > .user-menu-panel{margin:3px 20px 4px 0!important;padding:2px 10px 2px 0!important;}
.app-sidebar .user-menu-panel a,.app-sidebar .submenu-head{font-size:13.5px;padding:8px 10px;border-radius:7px;}

/* menu order of the approved design; Tasks / Requests / My Team stay reachable in a quiet secondary cluster */
.app-sidebar .sidebar-nav > a[href="overview.php"]{order:1;}
.app-sidebar #procurementMenu{order:3;} .app-sidebar #projectsMenu{order:4;} .app-sidebar #commercialMenu{order:5;}
.app-sidebar #inventoryMenu{order:6;} .app-sidebar #assetsMenu{order:7;} .app-sidebar #accountingMenu{order:8;} .app-sidebar #treasuryMenu{order:9;} .app-sidebar #hrMenu{order:10;} .app-sidebar #attendanceMenu{order:11;} .app-sidebar #reportsMenu{order:12;} .app-sidebar #adminMenu{order:13;}
.app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{order:20;height:36px;font-size:13.5px;opacity:.9;}
.app-sidebar .sidebar-nav > a[href="dashboard.php"]{margin-top:10px;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 9px 9px;padding-top:6px!important;height:42px;}
.app-sidebar .sidebar-nav > a[href="dashboard.php"]::before,.app-sidebar .sidebar-nav > a[href="requests.php"]::before,.app-sidebar .sidebar-nav > a[href="team_org.php"]::before{width:18px;height:18px;flex-basis:18px;}
.app-sidebar .sidebar-nav > .sidebar-link:not(.active) .nav-count{display:none;}

/* icons: solid glyphs like the approved design */
.app-sidebar .sidebar-nav > a[href="overview.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8 2.5 10.6V21h7v-6h5v6h7V10.6z'/%3E%3C/svg%3E");}
.app-sidebar #accountingMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V11h4.5v10zm6.75 0V3h4.5v18zM16.5 21v-7H21v7z'/%3E%3C/svg%3E");}
.app-sidebar #treasuryMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18v3H3z'/%3E%3Cpath d='M3 10.5h5v6.5H3z'/%3E%3Cpath d='M11 10.5h10v6.5H11z'/%3E%3Cpath d='M8.4 12.5h2.2v2.4H8.4z'/%3E%3C/svg%3E");}
.app-sidebar #procurementMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3.2l.7 3H22l-2.2 9.2H8.1L5.2 5H2zM8.5 17.6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");}
.app-sidebar #projectsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3.5h6A1.5 1.5 0 0 1 16.5 5v2H20a1.5 1.5 0 0 1 1.5 1.5V19A1.5 1.5 0 0 1 20 20.5H4A1.5 1.5 0 0 1 2.5 19V8.5A1.5 1.5 0 0 1 4 7h3.5V5A1.5 1.5 0 0 1 9 3.5zM10 5.5V7h4V5.5zM2.5 12.5h19v1.6h-19z'/%3E%3C/svg%3E");}
.app-sidebar #commercialMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9.5h4.5V21zm6.75 0V3.5h4.5V21zM16.5 21v-8.5H21V21z'/%3E%3Cpath d='M2 21.2h20v1.3H2z'/%3E%3C/svg%3E");}
.app-sidebar #inventoryMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6.4v11.2L12 22l9-4.4V6.4zm0 2.3 5.9 2.9L12 10 6.1 7.2zM5 8.8l6 3v7.5l-6-3zm14 0v7.5l-6 3v-7.5z'/%3E%3C/svg%3E");}
.app-sidebar #assetsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3h5v15H4V6h5zm2 2v1h2V5zM7 9v2h2V9zm4 0v2h2V9zm4 0v2h2V9zm-8 4v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm-8 4v3h2v-3zm8 0v3h2v-3z'/%3E%3C/svg%3E");}
.app-sidebar #hrMenu > .sidebar-link,.app-sidebar #attendanceMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 11.2a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2zm7.3-.7a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8.5 12.9C5 12.9 2 14.7 2 17.2V20h13v-2.8c0-2.5-3-4.3-6.5-4.3zm7.3.4c-.7 0-1.4.1-2 .3 1.5 1 2.4 2.4 2.4 4V20H22v-2.4c0-2.3-2.7-4.3-6.2-4.3z'/%3E%3C/svg%3E");}
.app-sidebar #reportsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8.2L20 7.8V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7.2 1.6V8.8h5.2zM8 12.2h8v1.7H8zm0 3.6h8v1.7H8z'/%3E%3C/svg%3E");}
.app-sidebar #adminMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.4 2h3.2l.5 2.7c.6.2 1.2.5 1.7.9l2.6-.9 1.6 2.8-2.1 1.8c.1.6.1 1.2 0 1.8l2.1 1.8-1.6 2.8-2.6-.9c-.5.4-1.1.7-1.7.9l-.5 2.7h-3.2l-.5-2.7c-.6-.2-1.2-.5-1.7-.9l-2.6.9-1.6-2.8 2.1-1.8a5.6 5.6 0 0 1 0-1.8L4.4 7.5 6 4.7l2.6.9c.5-.4 1.1-.7 1.7-.9zM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E");}
.app-sidebar .sidebar-nav > a[href="dashboard.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6l1 2h3A1.5 1.5 0 0 1 20.5 6v15a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 21V6A1.5 1.5 0 0 1 5 4.5h3zM7.5 10v1.6h9V10zm0 3.8v1.6h9v-1.6z'/%3E%3C/svg%3E");}
.app-sidebar .sidebar-nav > a[href="requests.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5V13h-5l-1.5 2.5h-5L8 13H3zM3 14.6h4.1l1.5 2.5h6.8l1.5-2.5H21v3.9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E");}
.app-sidebar .sidebar-nav > a[href="team_org.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.9 0-8 2-8 4.5V21h16v-2.5c0-2.5-4.1-4.5-8-4.5z'/%3E%3C/svg%3E");}

/* mountain scene */
.app-sidebar .sidebar-scene{flex:0 0 auto;position:relative;height:clamp(150px,27vh,300px);overflow:hidden;pointer-events:none;}
.app-sidebar .sidebar-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.app-sidebar .sidebar-scene .sc-text{position:absolute;inset-inline-start:22px;bottom:18px;display:flex;flex-direction:column;gap:9px;color:#dbe9e2;font-size:11.5px;font-weight:600;letter-spacing:.2em;line-height:1.35;text-transform:uppercase;}
.app-sidebar .sidebar-scene .sc-text svg{position:static;width:24px;height:24px;color:#4fbf87;}

/* collapsed rail */
.app-sidebar.collapsed{width:var(--v2-sidebar-w-collapsed);}
.app-sidebar.collapsed .sb-brandtext,.app-sidebar.collapsed .sidebar-scene,.app-sidebar.collapsed .sidebar-link .nav-caret{display:none!important;}
.app-sidebar.collapsed .sidebar-brand{padding:15px 0 8px;justify-content:center;height:auto;flex-direction:column;gap:10px;}
.app-sidebar.collapsed .sidebar-collapse-btn{position:static;margin:0 auto;}
.app-sidebar.collapsed .sidebar-link{padding:0!important;justify-content:center;}
.app-sidebar.collapsed .sidebar-link::before{margin:0;}

/* ---------- Topbar: ONE row ---------- */
.content-topbar,.content-topbar.has-context-row{top:var(--envbar)!important;height:var(--v2-header-h)!important;inset-inline-start:var(--v2-sidebar-w);inset-inline-end:0;}
body.sidebar-collapsed .content-topbar{inset-inline-start:var(--v2-sidebar-w-collapsed)!important;}
.content-topbar-inner{height:100%!important;max-width:none!important;margin:0!important;border:0!important;border-bottom:1px solid var(--m-line)!important;border-radius:0!important;box-shadow:none!important;
  background:var(--v2-panel);padding:0 22px 0 24px!important;gap:12px!important;justify-content:flex-start!important;display:flex;align-items:center;}
.tb-ctx{display:flex;align-items:center;gap:10px;min-width:0;}
.tb-pillwrap{position:relative;flex:0 0 auto;}
.tb-pill{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 13px;border:1px solid #dde5e1;border-radius:9px;background:var(--v2-panel);color:var(--v2-text);font-size:14.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;box-shadow:none;}
:root[data-theme="dark"] .tb-pill{border-color:var(--v2-border);}
.tb-pill:hover{background:var(--v2-panel-hover);transform:none;border-color:#cbd8d2;}
.tb-pill .ic{width:20px;height:20px;color:#5d6d66;flex:0 0 20px;} .tb-pill .chev{width:12px;height:12px;color:#66766f;flex:0 0 12px;}
.tb-pill strong{font-weight:500;color:inherit;} .tb-pill .ent-context-chip{margin-inline-start:6px;}
.tb-pop{display:none;position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:260px;background:var(--v2-panel);border:1px solid var(--m-line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(12,42,34,.35);padding:8px;z-index:420;}
.tb-pillwrap.open .tb-pop{display:block;}
.tb-pop h4{margin:4px 8px 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-text-2);font-weight:700;}
.tb-pop .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--v2-text);}
.tb-pop .opt.cur{background:color-mix(in srgb, var(--m-green) 10%, transparent);font-weight:600;}
.tb-pop .opt.dim{color:var(--v2-text-2);}
.tb-pop .note{margin:6px 8px 4px;font-size:11.5px;color:var(--v2-text-2);line-height:1.45;}
.v2-search{flex:0 1 423px!important;max-width:423px!important;margin-inline-start:auto;min-width:120px;position:relative;}
.v2-search-input{height:38px;width:100%;border-radius:9px!important;background:var(--v2-panel)!important;border:1px solid #dde5e1!important;padding:0 84px 0 42px!important;font-size:13.5px!important;}
:root[dir="rtl"] .v2-search-input{padding:0 42px 0 84px!important;}
:root[data-theme="dark"] .v2-search-input{border-color:var(--v2-border)!important;}
.v2-search-ic{inset-inline-start:14px!important;color:#5d6d66;}
.v2-search-kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);display:flex;gap:4px;background:none!important;border:0!important;padding:0!important;}
.v2-search-kbd kbd{min-width:21px;height:21px;padding:0 5px;border:1px solid #d5ded9;border-radius:5px;background:var(--v2-panel-hover);color:#66766f;font:600 11px/19px inherit;font-family:inherit;text-align:center;}
.me-box{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-inline-start:14px;}
.tb-icon{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#2f3d37;background:transparent;border:0;cursor:pointer;text-decoration:none;box-shadow:none;}
.tb-icon:hover{background:var(--v2-panel-hover);transform:none;}
.tb-icon svg{width:23px;height:23px;}
.tb-icon .bell-count{position:absolute;top:0;inset-inline-end:-1px;left:auto;min-width:17px;height:17px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:0;}
.tb-icon.ring .bell-ic{animation:none;}
.tb-demo{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(224,157,52,.16);color:#a5670f;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-inline-end:4px;white-space:nowrap;}
.topbar-user-menu{margin-inline-start:6px;}
.topbar-user-btn{gap:10px!important;padding:3px 4px 3px 4px!important;border-radius:10px!important;}
.topbar-user-btn .user-menu-btn{width:38px;height:38px;border-radius:50%;background:#2d6a4f;color:#fff;display:grid;place-items:center;overflow:hidden;}
.topbar-user-btn .user-menu-initial{font-size:14px;font-weight:700;color:#fff;letter-spacing:.02em;}
.topbar-user-btn img{width:100%;height:100%;object-fit:cover;}
.topbar-user-name{font-size:14px!important;font-weight:700!important;max-width:170px!important;}
.topbar-user-role{font-size:12px!important;color:var(--v2-text-2)!important;}
.topbar-user-btn .u-chev{width:12px;height:12px;color:#66766f;margin-inline-start:2px;}
#userMenuPanel{min-width:260px;padding:6px;}
#userMenuPanel .tb-menu-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;font-size:12.5px;color:var(--v2-text-2);border-top:1px solid var(--m-line);}
#userMenuPanel .tb-menu-info{padding:8px 10px;font-size:12.5px;color:var(--v2-text-2);border-top:1px solid var(--m-line);display:none;line-height:1.7;}
#userMenuPanel .tb-menu-info b{color:var(--v2-text);font-weight:600;}
.rwt-clocks,#rwtClocks{display:none!important;}
.app-env-banner{position:fixed;top:0;inset-inline:0;height:26px;line-height:26px;font-size:11.5px;font-weight:700;text-align:center;z-index:600;}

@media (max-width:1320px){ .tb-pill .txt-role{display:none;} .tb-pill{padding:0 11px;font-size:14px;gap:8px;} .v2-search{flex-basis:300px!important;} }
@media (max-width:1180px){ .tb-ctx{display:none;} #userMenuPanel .tb-menu-info{display:block;} .v2-search{flex-basis:360px!important;} }
@media (max-width:760px){
  .content-topbar-inner{padding:0 10px!important;gap:6px!important;}
  .app-sidebar .sidebar-brand{padding-inline-end:18px!important;}
  .app-sidebar .sidebar-link{padding:0 14px!important;justify-content:flex-start!important;}
  .app-sidebar .sidebar-link::before{margin:0;}
  .app-sidebar .sidebar-link .nav-caret{display:block!important;}
  .app-sidebar .sb-brandtext{display:flex!important;}
  .app-sidebar .sidebar-scene{display:block;}
  .tb-icon.help{display:none;} .topbar-user-info,.topbar-user-btn .u-chev{display:none!important;} .v2-search{flex:1 1 auto!important;max-width:none!important;margin-inline-start:0;} .v2-search-kbd{display:none;} .v2-search-input{padding-inline-end:12px!important;}
  .app{padding:16px 14px 40px;} .tb-demo{display:none;}
}

/* ---------- Enterprise Overview page ---------- */
.ovx{display:block;}
.ovx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 16px;}
.ovx-welcome{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#7a8983;font-weight:600;margin-bottom:6px;}
.ovx-head h1{margin:0;font-size:31px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--v2-text);font-family:inherit;}
.ovx-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:15.5px;color:#5b6b64;}
.ovx-sub i{width:1px;height:16px;background:#cdd8d3;display:inline-block;}
.ovx-head-r{display:flex;align-items:center;gap:20px;padding-bottom:4px;font-size:15.5px;}
.ovx-date{color:#5b6b64;} .ovx-vr{width:1px;height:26px;background:#cdd8d3;} .ovx-motto{font-weight:700;color:var(--m-green);}
:root[data-theme="dark"] .ovx-motto{color:#4fd0a0;}
:root[data-theme="dark"] .ovx-welcome,:root[data-theme="dark"] .ovx-sub,:root[data-theme="dark"] .ovx-date{color:var(--v2-text-2);}
.ovx-card{background:var(--v2-panel);border:1px solid var(--m-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);min-width:0;}
.ovx-kpis{display:grid;grid-template-columns:repeat(var(--kc,6),minmax(0,1fr));gap:14px;margin-bottom:18px;}
.ovx-kpi{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:13px;row-gap:12px;padding:16px 16px 14px;min-height:130px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
a.ovx-kpi:hover{border-color:#b9cdc3;box-shadow:0 6px 18px -10px rgba(16,60,44,.3);}
.ovx-kic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;}
.ovx-kic svg{width:24px;height:24px;}
.ovx-klabel{font-size:14px;color:#66766f;line-height:1.2;} .ovx-klabel em{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:#93a19b;margin-inline-start:4px;}
.ovx-kval{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--v2-text);}
.ovx-kfoot{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:42px;}
.ovx-kd{display:flex;flex-direction:column;gap:1px;font-size:12px;color:#7a8983;line-height:1.25;}
.ovx-kd b{font-size:13px;font-weight:700;display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;} .ovx-kd b svg{width:12px;height:12px;}
.ovx-kd.good b{color:#1c9a5a;} .ovx-kd.bad b{color:#d9363e;} .ovx-kd.flat b{color:#7a8983;}
.ovx-spark{width:112px;height:42px;flex:0 0 auto;display:block;}
.ovx-main{display:grid;grid-template-columns:minmax(0,994fr) minmax(0,382fr);gap:14px;align-items:start;}
.ovx-left,.ovx-right{display:flex;flex-direction:column;gap:14px;min-width:0;}
.ovx-row-a{display:grid;grid-template-columns:minmax(0,610fr) minmax(0,370fr);gap:14px;}
.ovx-row-b{display:grid;grid-template-columns:minmax(0,692fr) minmax(0,293fr);gap:14px;}
.ovx-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px;}
.ovx-ch h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--v2-text);}
.ovx-link{font-size:13px;font-weight:600;color:var(--m-blue);text-decoration:none;white-space:nowrap;} .ovx-link:hover{text-decoration:underline;}
:root[data-theme="dark"] .ovx-link{color:#7fb0ff;}
.ovx-sel{height:32px;border:1px solid #dde5e1;border-radius:8px;background:var(--v2-panel);color:var(--v2-text);font:500 13px inherit;font-family:inherit;padding:0 26px 0 10px;cursor:pointer;}
:root[data-theme="dark"] .ovx-sel{border-color:var(--v2-border);}
.ovx-body{padding:4px 16px 14px;}
.ovx-tabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--m-line);margin-top:6px;overflow-x:auto;}
.ovx-tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 0 10px;font-size:13px;color:#66766f;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:none;border-radius:0;}
.ovx-tab:hover{transform:none;color:var(--v2-text);background:none;}
.ovx-tab.on{color:var(--m-green);font-weight:700;border-bottom-color:var(--m-green);}
:root[data-theme="dark"] .ovx-tab.on{color:#4fd0a0;border-bottom-color:#4fd0a0;}
table.ovx-t{width:100%;border-collapse:collapse;font-size:12px;}
table.ovx-t th{text-align:start;font-weight:600;font-size:11.5px;color:#7a8983;background:color-mix(in srgb, var(--v2-panel-hover) 70%, transparent);padding:8px 10px;white-space:nowrap;border-bottom:1px solid var(--m-line);}
table.ovx-t td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb, var(--m-line) 70%, transparent);vertical-align:middle;color:var(--v2-text);white-space:nowrap;}
table.ovx-t tr:last-child td{border-bottom:0;}
table.ovx-t td.r,table.ovx-t th.r{text-align:end;font-variant-numeric:tabular-nums;}
table.ovx-t a{color:inherit;text-decoration:none;font-weight:500;} table.ovx-t a:hover{color:var(--m-green);}
.ovx-tw{overflow-x:auto;padding:10px 16px 4px;}
.ovx-ty{display:inline-flex;align-items:center;gap:8px;} .ovx-tyi{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:0 0 22px;} .ovx-tyi svg{width:14px;height:14px;}
.ovx-st{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;}
.ovx-st.pending{background:#fdebd0;color:#a0621a;} .ovx-st.review{background:#e1ecfb;color:#265aa8;} .ovx-st.posted{background:#dcefe3;color:#1f6b47;} .ovx-st.approved{background:#d6ecdc;color:#1b6a41;}
:root[data-theme="dark"] .ovx-st.pending{background:rgba(245,173,66,.18);color:#f5c265;} :root[data-theme="dark"] .ovx-st.review{background:rgba(85,170,244,.18);color:#8fc4ff;} :root[data-theme="dark"] .ovx-st.posted,:root[data-theme="dark"] .ovx-st.approved{background:rgba(49,210,176,.16);color:#4fd0a0;}
.ovx-act{display:inline-flex;align-items:center;gap:8px;} .ovx-btn{display:inline-block;padding:4px 11px;border-radius:6px;background:#e2eee7;color:#1f6b47;font-size:11.5px;font-weight:700;text-decoration:none;} .ovx-btn:hover{background:#d3e6da;}
:root[data-theme="dark"] .ovx-btn{background:rgba(49,210,176,.16);color:#4fd0a0;}
.ovx-dots{color:#8b9a94;font-weight:700;letter-spacing:.06em;text-decoration:none;}
.ovx-empty{padding:26px 16px;text-align:center;color:#7a8983;font-size:13px;}
.ovx-donutw{display:flex;align-items:center;gap:22px;padding:8px 18px 18px;flex-wrap:wrap;justify-content:center;}
.ovx-donut{width:160px;height:160px;flex:0 0 auto;position:relative;} .ovx-donut svg{width:100%;height:100%;transform:rotate(-90deg);}
.ovx-dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;} .ovx-dc b{font-size:30px;font-weight:800;line-height:1;} .ovx-dc span{font-size:13px;color:#66766f;margin-top:4px;}
.ovx-leg{display:flex;flex-direction:column;gap:11px;min-width:150px;flex:1 1 150px;}
.ovx-li{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:9px;font-size:13px;color:var(--v2-text);} .ovx-li i{width:11px;height:11px;border-radius:50%;} .ovx-li em{font-style:normal;color:#7a8983;min-width:34px;text-align:end;}
.ovx-chart{width:100%;height:auto;display:block;}
.ovx-cleg{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px;color:#5b6b64;margin-top:6px;} .ovx-cleg span{display:inline-flex;align-items:center;gap:6px;} .ovx-cleg i{width:11px;height:11px;border-radius:3px;display:inline-block;} .ovx-cleg i.ln{height:2px;width:16px;border-radius:2px;position:relative;}
.ovx-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 16px 4px;}
.ovx-search{display:flex;align-items:center;gap:6px;height:32px;border:1px solid #dde5e1;border-radius:8px;padding:0 10px;background:var(--v2-panel);min-width:150px;flex:1 1 150px;max-width:230px;} .ovx-search input{border:0;outline:0;background:transparent;font:500 12.5px inherit;font-family:inherit;color:var(--v2-text);width:100%;} .ovx-search svg{width:15px;height:15px;color:#7a8983;flex:0 0 15px;}
.ovx-q{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 16px 16px;}
.ovx-q a{display:flex;align-items:center;gap:10px;height:37px;padding:0 12px;border:1px solid var(--m-line);border-radius:8px;background:color-mix(in srgb, var(--v2-panel-hover) 65%, var(--v2-panel));color:var(--v2-text);text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;transition:border-color .15s,background .15s;}
.ovx-q a:hover{border-color:#a9c4b7;background:color-mix(in srgb, var(--m-green) 7%, var(--v2-panel));} .ovx-q a svg{width:18px;height:18px;flex:0 0 18px;color:#33423c;} .ovx-q a span{overflow:hidden;text-overflow:ellipsis;}
:root[data-theme="dark"] .ovx-q a svg{color:#b9cdc5;}
.ovx-al{list-style:none;margin:0;padding:2px 16px 12px;display:flex;flex-direction:column;gap:2px;}
.ovx-al a{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:inherit;border-radius:8px;} .ovx-al a:hover b{color:var(--m-green);}
.ovx-ai{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;color:#fff;font-size:13px;font-weight:800;} .ovx-ai svg{width:15px;height:15px;}
.ovx-at{flex:1;min-width:0;display:flex;flex-direction:column;} .ovx-at b{font-size:12.5px;font-weight:600;line-height:1.25;} .ovx-at span{font-size:11.5px;color:#7a8983;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ovx-ac{width:14px;height:14px;color:#8b9a94;flex:0 0 14px;} :root[dir="rtl"] .ovx-ac{transform:scaleX(-1);}
.ovx-banner{position:relative;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--m-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#eef3f1;}
.ovx-banner svg.bg{position:absolute;inset:0;width:100%;height:100%;} .ovx-banner .tx{position:relative;font-size:17px;font-weight:800;line-height:1.3;color:#14241e;} .ovx-banner .rt{position:relative;display:flex;align-items:center;gap:10px;font-size:13px;color:#22332c;background:rgba(255,255,255,.72);padding:8px 14px;border-radius:9px;backdrop-filter:blur(2px);} .ovx-banner .rt svg{width:22px;height:22px;color:#2e9d62;}
:root[data-theme="dark"] .ovx-banner .tx{color:#e9f4ee;} :root[data-theme="dark"] .ovx-banner .rt{background:rgba(9,32,26,.7);color:#d6e5de;}
.ovx-note{font-size:11.5px;color:#7a8983;padding:0 16px 12px;}
@media (max-width:1240px){ .ovx-main{grid-template-columns:minmax(0,1fr);} .ovx-row-a,.ovx-row-b{grid-template-columns:minmax(0,1fr);} }
@media (max-width:760px){ .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .ovx-kpi{padding:12px;min-height:116px;grid-template-columns:38px minmax(0,1fr);column-gap:9px;} .ovx-kic{width:38px;height:38px;} .ovx-kic svg{width:20px;height:20px;} .ovx-kval{font-size:19px;} .ovx-spark{width:70px;height:32px;} .ovx-head h1{font-size:25px;} .ovx-head-r{display:none;} .ovx-q{grid-template-columns:1fr;} .ovx-banner{padding:0 16px;height:auto;min-height:74px;flex-wrap:wrap;gap:8px;padding-block:10px;} .ovx-banner .tx{font-size:15px;} }
@media (max-width:420px){ .ovx-kpis{grid-template-columns:1fr;} }

/* KPI value: full figure on wide screens, compact figure when cards get narrow */
.ovx-kval .cmp{display:none;}
@media (max-width:1559px) and (min-width:1241px){ .ovx-kval .full{display:none;} .ovx-kval .cmp{display:inline;} .ovx-kpi{grid-template-columns:38px minmax(0,1fr);column-gap:10px;padding:14px 12px 12px;} .ovx-kic{width:38px;height:38px;} .ovx-kic svg{width:20px;height:20px;} .ovx-kval{font-size:22px;} .ovx-spark{width:84px;} .ovx-klabel{font-size:13px;} }
@media (max-width:1240px){ .ovx-kpis{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .ovx-kval .full{display:none;} .ovx-kval .cmp{display:inline;} }
.ovx-row-a.ovx-solo{grid-template-columns:minmax(0,1fr);}
.ovx-row-b.ovx-solo{grid-template-columns:minmax(0,1fr);}

/* ---------- Master layout: pixel tuning against the approved reference (1672 x 941 / 1920 x 1080) ---------- */
.app-sidebar .sidebar-brand{height:68px;padding-block:14px 12px;padding-inline:16px 52px;gap:10px;}
.app-sidebar .sidebar-collapse-btn::before{content:"";position:absolute;inset:-6px;}          /* a 38 x 38 px hit area without moving or shrinking anything visible (the logo keeps its full width) */
.app-sidebar .sb-mark{width:38px;height:38px;}
.app-sidebar .sidebar-brand-word{font-size:20px;}
.app-sidebar .sb-tag{white-space:normal;font-size:6.6px;letter-spacing:.12em;max-width:104px;line-height:1.35;}
.app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{display:none;}
.app{padding:16px 24px 40px;}
.tb-pill{max-width:230px;}
.topbar-user-btn .user-menu-initial,.topbar-user-btn .user-menu-btn{background:#1f6b47!important;color:#fff!important;}

/* header */
.ovx-head{margin:0 0 14px;align-items:flex-end;}
.ovx-welcome{font-size:11px;margin-bottom:5px;letter-spacing:.06em;font-weight:500;}
.ovx-head h1{font-size:30px;font-weight:700;letter-spacing:-.015em;}
.ovx-sub{font-size:15px;margin-top:6px;gap:12px;} .ovx-sub i{height:15px;}
.ovx-head-r{font-size:15px;padding-bottom:6px;gap:18px;} .ovx-motto{font-weight:700;}

/* KPI cards */
.ovx-kpis{gap:14px;margin-bottom:20px;}
.ovx-kpi{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:7px;padding:14px 14px 12px;min-height:0;height:128px;}
.ovx-kic{width:44px;height:44px;} .ovx-kic svg{width:22px;height:22px;}
.ovx-klabel{font-size:13px;color:#4f5f58;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px;}
.ovx-kval{font-size:clamp(19px,1.2vw,24px);font-weight:700;letter-spacing:-.015em;margin-top:3px;line-height:1.1;}
.ovx-kval small{font-size:11px;font-weight:600;color:#93a19b;letter-spacing:.04em;margin-inline-end:4px;}
.ovx-kfoot{min-height:0;align-items:flex-end;}
.ovx-kd{font-size:11.5px;gap:0;} .ovx-kd b{font-size:13px;gap:4px;} .ovx-kd b svg{width:13px;height:13px;}
.ovx-spark{width:90px;height:40px;}
.ovx-kpi.tint-bad .ovx-kd b{color:#d9363e;}

/* generic card chrome */
.ovx-main{gap:14px;} .ovx-left,.ovx-right{gap:13px;}
.ovx-ch{padding:12px 14px 4px;} .ovx-ch h2{font-size:17px;font-weight:700;} .ovx-link{font-size:12.5px;font-weight:600;}
.ovx-sel{height:28px;font-size:12px;border-radius:6px;padding:0 24px 0 9px;}
.ovx-body{padding:2px 12px 10px;}

/* approvals + transactions tables */
.ovx-tabs{gap:22px;padding:0 14px;margin-top:2px;} .ovx-tab{font-size:12.5px;padding:7px 0 9px;}
.ovx-tw{padding:8px 12px 6px;overflow-x:hidden;}
table.ovx-t{table-layout:fixed;font-size:11px;}
table.ovx-t th{font-size:10.5px;padding:7px 5px;background:#f4f7f6;font-weight:600;color:#5f6f68;}
table.ovx-t td{padding:5px 5px;height:35px;overflow:hidden;text-overflow:ellipsis;}
table.ovx-t th:first-child,table.ovx-t td:first-child{padding-inline-start:9px;}
#ovxApprT th:nth-child(1){width:21%;} #ovxApprT th:nth-child(2){width:17%;} #ovxApprT th:nth-child(3){width:15%;} #ovxApprT th:nth-child(4){width:10%;} #ovxApprT th:nth-child(5){width:14%;} #ovxApprT th:nth-child(6){width:10.5%;} #ovxApprT th:nth-child(7){width:12.5%;}
#ovxTxT th:nth-child(1){width:11.5%;} #ovxTxT th:nth-child(2){width:13%;} #ovxTxT th:nth-child(3){width:14.5%;} #ovxTxT th:nth-child(4){width:16%;} #ovxTxT th:nth-child(5){width:15%;} #ovxTxT th:nth-child(6){width:8%;} #ovxTxT th:nth-child(7){width:11%;} #ovxTxT th:nth-child(8){width:11%;}
#ovxTxT td{height:29px;padding:4px 5px;}
.ovx-ty{gap:6px;} .ovx-tyi{width:20px;height:20px;flex-basis:20px;border-radius:5px;} .ovx-tyi svg{width:12px;height:12px;}
.ovx-st{font-size:10px;padding:2px 7px;border-radius:4px;}
.ovx-btn{font-size:10.5px;padding:3px 8px;border-radius:5px;} .ovx-act{gap:6px;}
.ovx-filters{gap:8px;padding:2px 14px 6px;flex-wrap:nowrap;}
.ovx-filters .ovx-sel{height:28px;flex:0 0 auto;max-width:170px;}
.ovx-search{height:28px;min-width:0;flex:1 1 120px;max-width:190px;border-radius:6px;padding:0 8px;} .ovx-search input{font-size:11.5px;} .ovx-search svg{width:13px;height:13px;flex-basis:13px;}

/* project performance */
.ovx-donutw{flex-wrap:nowrap;justify-content:flex-start;gap:14px;padding:18px 14px 14px;align-items:center;}
.ovx-donut{width:152px;height:152px;} .ovx-dc b{font-size:28px;font-weight:700;} .ovx-dc span{font-size:12.5px;}
.ovx-leg{gap:9px;min-width:0;flex:1 1 auto;} .ovx-li{font-size:12.5px;gap:7px;grid-template-columns:10px minmax(0,1fr) auto auto;} .ovx-li i{width:10px;height:10px;} .ovx-li em{min-width:30px;}

/* quick actions + alerts */
.ovx-q{gap:7px;padding:4px 14px 14px;} .ovx-q a{height:33px;padding:0 10px;font-size:12px;border-radius:6px;gap:9px;background:#fff;border-color:#e6ecea;}
:root[data-theme="dark"] .ovx-q a{background:var(--v2-panel-hover);}
.ovx-q a svg{width:16px;height:16px;flex-basis:16px;}
.ovx-al{padding:0 14px 10px;gap:0;} .ovx-al a{padding:6px 0;gap:10px;} .ovx-ai{width:24px;height:24px;flex-basis:24px;} .ovx-at b{font-size:12px;} .ovx-at span{font-size:10.5px;}
.ovx-ac{width:14px;height:14px;color:#8b9a94;flex:0 0 14px;}
:root[dir="rtl"] .ovx-ac{transform:scaleX(-1);}

/* banner */
.ovx-banner{height:72px;padding:0 24px;border-radius:10px;}
.ovx-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f5f8f7 0%,#f5f8f7 26%,rgba(245,248,247,0) 62%);pointer-events:none;}
:root[dir="rtl"] .ovx-banner::before{background:linear-gradient(270deg,#f5f8f7 0%,#f5f8f7 26%,rgba(245,248,247,0) 62%);}
:root[data-theme="dark"] .ovx-banner::before{background:linear-gradient(90deg,#10261f 0%,#10261f 26%,rgba(16,38,31,0) 62%);}
.ovx-banner .tx,.ovx-banner .rt{z-index:2;} .ovx-banner .tx{font-size:16px;font-weight:700;} .ovx-banner .rt{font-size:12px;background:rgba(255,255,255,.55);padding:6px 12px;}

/* ---------- Master layout: pass 2 ---------- */
.csel.ovx-sel{height:auto;border:0;padding:0;background:transparent;box-shadow:none;display:inline-block;min-width:0;}
.ovx-sel .csel-trigger{height:28px;padding:0 9px;font-size:12px;font-weight:500;border-radius:6px;border-color:#dde5e1;background:var(--v2-panel);gap:6px;}
:root[data-theme="dark"] .ovx-sel .csel-trigger{border-color:var(--v2-border);}
.ovx-filters .csel.ovx-sel{flex:0 1 auto;min-width:0;max-width:175px;} .ovx-filters .csel.ovx-sel .csel-trigger{width:auto;max-width:100%;}
.ovx-filters .csel.ovx-sel .csel-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app-sidebar .sidebar-brand{height:73px;}
.ovx-head{margin-bottom:11px;} .ovx-sub{margin-top:4px;}
.ovx-ch{padding:10px 14px 2px;} .ovx-tab{padding:6px 0 8px;} .ovx-klabel{font-size:12.5px;letter-spacing:-.005em;}
.ovx-q a{font-size:11.5px;gap:8px;padding:0 9px;}
.ovx-al a{padding:4px 0;}
#ovxTxT th:nth-child(1){width:13%;} #ovxTxT th:nth-child(2){width:12.5%;} #ovxTxT th:nth-child(3){width:14%;} #ovxTxT th:nth-child(4){width:15%;} #ovxTxT th:nth-child(5){width:15%;} #ovxTxT th:nth-child(6){width:9%;} #ovxTxT th:nth-child(7){width:10.5%;} #ovxTxT th:nth-child(8){width:11%;}
.v2-search{flex:0 1 423px!important;max-width:423px!important;margin-inline-start:auto!important;}
.me-box{margin-inline-start:6px;}

/* ---------- Master layout: pass 3 ---------- */
html[dir="ltr"] .app-sidebar,html[dir="ltr"] .content-topbar,html[dir="ltr"] .ovx,html[dir="ltr"] .ovx button,html[dir="ltr"] .ovx select,html[dir="ltr"] .ovx input,html[dir="ltr"] .ovx .csel-trigger{font-family:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;}
body.ovx-page .rwt-footer{display:none;}
body.ovx-page .app{padding-bottom:14px;}
.ovx-left,.ovx-right{gap:12px;}
#ovxTxT td{height:27px;padding:3px 5px;} #ovxTxT th{padding:5px;}
.ovx-row-b .ovx-ch{padding-top:8px;} .ovx-filters{padding:0 14px 6px;}
.ovx-q{gap:6px;padding:2px 14px 12px;} .ovx-q a{height:30px;}
.ovx-al{padding:0 14px 8px;} .ovx-at b,.ovx-at span{line-height:1.2;} .ovx-al a{padding:3px 0;}
.ovx-banner{margin-top:-3px;}
.tb-icon{width:40px;height:40px;} .content-topbar .me-box{gap:12px;}
.tb-pill{padding-inline:12px;gap:8px;}

/* ---------- Master layout: pass 4 — wide screens use the extra height, tight screens stay compact ---------- */
.ovx-kpis{margin-bottom:18px;}
@media (min-width:1800px){
  .app{padding-top:22px;}
  .ovx-head{margin-bottom:16px;} .ovx-head h1{font-size:32px;} .ovx-sub,.ovx-head-r{font-size:16px;}
  .ovx-kpis{margin-bottom:22px;gap:16px;} .ovx-kpi{height:138px;padding:15px 16px 13px;} .ovx-kval{font-size:25px;} .ovx-spark{width:100px;height:46px;} .ovx-klabel{font-size:13.5px;}
  .ovx-main{gap:16px;} .ovx-left,.ovx-right{gap:16px;} .ovx-row-a,.ovx-row-b{gap:16px;}
  table.ovx-t{font-size:12px;} table.ovx-t th{font-size:11px;padding:9px 6px;} #ovxApprT td{height:40px;} #ovxTxT td{height:33px;}
  .ovx-ch{padding:14px 16px 4px;} .ovx-ch h2{font-size:18px;} .ovx-tab{font-size:13px;padding:8px 0 10px;}
  .ovx-donut{width:172px;height:172px;} .ovx-li{font-size:13.5px;} .ovx-leg{gap:12px;}
  .ovx-q a{height:36px;font-size:12.5px;} .ovx-q{gap:8px;padding:4px 16px 16px;}
  .ovx-al a{padding:6px 0;} .ovx-at b{font-size:12.5px;} .ovx-at span{font-size:11px;}
  .ovx-banner{height:78px;margin-top:0;} .ovx-banner .tx{font-size:18px;}
  .ovx-filters .ovx-sel .csel-trigger,.ovx-search{height:30px;}
}

/* ---------- Master layout: pass 5 — dark theme + small screens ---------- */
:root[data-theme="dark"] table.ovx-t th{background:rgba(255,255,255,.05);color:var(--v2-text-2);}
:root[data-theme="dark"] .ovx-q a{border-color:var(--v2-border);color:var(--v2-text);}
:root[data-theme="dark"] .ovx-q a:hover{border-color:#3d7a63;}
:root[data-theme="dark"] .ovx-klabel{color:var(--v2-text-2);}
:root[data-theme="dark"] .ovx-sel .csel-trigger{background:var(--v2-panel);color:var(--v2-text);}
:root[data-theme="dark"] .ovx-search{border-color:var(--v2-border);}
:root[data-theme="dark"] .ovx-cleg,:root[data-theme="dark"] .ovx-dc span{color:var(--v2-text-2);}
:root[data-theme="dark"] .ovx-chart text{fill:#8fa39b;}
@media (max-width:1240px){ .ovx-tw{overflow-x:auto;} table.ovx-t{table-layout:auto;min-width:640px;} #ovxTxT{min-width:720px;} table.ovx-t th,table.ovx-t td{white-space:nowrap;} .ovx-filters{flex-wrap:wrap;} }
@media (max-width:760px){
  .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .ovx-kpi{height:auto;min-height:118px;}
  .ovx-kfoot{flex-wrap:wrap;} .ovx-spark{width:100%;height:30px;} .ovx-kd span{display:none;}
  .ovx-klabel{white-space:normal;font-size:12px;}
  .ovx-sub{gap:8px;font-size:13.5px;} .ovx-sub i{display:none;} .ovx-sub span+span::before{content:"· ";}
  .ovx-donutw{flex-wrap:wrap;justify-content:center;}
  .ovx-filters .csel.ovx-sel{max-width:100%;}
}
@media (max-width:420px){ .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
.ovx-chart{direction:ltr;unicode-bidi:isolate;}

/* ---------- Master system: sidebar hierarchy incl. "My Work" ---------- */
.app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{display:flex;order:0;height:44px;font-size:15px;opacity:1;margin-top:0;border-top:0;border-radius:9px;padding-top:0!important;}
.app-sidebar .sidebar-nav > a[href="overview.php"]{order:1;}
.app-sidebar #workMenu{order:2;}
.app-sidebar #procurementMenu{order:3;} .app-sidebar #projectsMenu{order:4;} .app-sidebar #commercialMenu{order:5;}
.app-sidebar #inventoryMenu{order:6;} .app-sidebar #assetsMenu{order:7;} .app-sidebar #accountingMenu{order:8;} .app-sidebar #treasuryMenu{order:9;} .app-sidebar #hrMenu{order:10;} .app-sidebar #attendanceMenu{order:11;} .app-sidebar #reportsMenu{order:12;} .app-sidebar #adminMenu{order:13;}
.app-sidebar #workMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6l.6 1.8H19a1.5 1.5 0 0 1 1.5 1.5v14.7A1.5 1.5 0 0 1 19 22H5a1.5 1.5 0 0 1-1.5-1.5V5.800A1.500 1.500 0 0 1 5 4.300h3.400zm-2.500 8.300 3.600 3.600 5.600-5.600-1.400-1.400-4.200 4.200-2.200-2.200zM7 17h10v-1.800H7z'/%3E%3C/svg%3E");}
.app-sidebar #attendanceMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.500a9.500 9.500 0 1 0 0 19 9.500 9.500 0 0 0 0-19zm1 5v4.600l3.400 2-.9 1.500L11 12.800V7.500z'/%3E%3C/svg%3E");}
.app-sidebar .sidebar-nav{padding-bottom:16px;}
.app-sidebar .user-menu-panel a .nav-count{margin-inline-start:auto;}

/* ==========================================================================
   MASTER DESIGN SYSTEM — applies the approved Albero look to every page
   (tokens, page frame, page header + breadcrumb, cards, stat tiles, tables,
   forms, buttons, pills). Pure presentation: no markup or behaviour changes.
   ========================================================================== */
:root{
  --bg:#f5f8f7; --surface:#ffffff; --surface-2:#f4f7f6; --border:#e3eae7;
  --text:#14241e; --muted:#5f6f68;
  --accent:#1f6b47; --accent-2:#2a8560; --accent-3:#3a8f68; --accent-dim:#e4f1ea; --teal:#1f6b47;
  --status-doing:#2f6fd0;
  --v2-border:#e3eae7; --v2-text:#14241e; --v2-text-2:#5f6f68; --v2-accent:#1f6b47; --v2-accent-hover:#185a3b; --v2-green:#1f6b47; --v2-panel-hover:#f4f7f6;
  --m-focus:0 0 0 3px rgba(31,107,71,.16);
}
:root[data-theme="dark"]{
  --accent:#4fd0a0; --accent-2:#5fd8ae; --accent-3:#4fd0a0; --accent-dim:rgba(79,208,160,.14); --teal:#4fd0a0; --on-accent:#06231c;
  --m-focus:0 0 0 3px rgba(79,208,160,.22);
}

/* ---- page frame: every page uses the full content width, same gutters ---- */
.app{max-width:none!important;margin:0!important;padding:22px 24px 40px;width:100%;}
.app[style*="max-width"]{max-width:none!important;}
.app.app-wide{max-width:none!important;}
.rwt-footer{display:none!important;}
body{background:var(--bg);}
@media (max-width:760px){ .app{padding:16px 14px 32px;} }

/* ---- page header + breadcrumb ---- */
.ent-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;font-size:12.5px;color:var(--muted);}
.ent-breadcrumb a{color:var(--muted);text-decoration:none;} .ent-breadcrumb a:hover{color:var(--accent);text-decoration:underline;}
.ent-crumb-sep{color:#a9b7b0;font-size:12px;} .ent-crumb-current{color:var(--text);font-weight:600;}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;}
.pg-title,.app > h1,.app > h2.section-title.pg-title{margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--text);}
.pg-sub{margin:0;font-size:14px;color:var(--muted);line-height:1.5;max-width:820px;}
.app > p.hint.pg-sub{margin:0 0 18px!important;font-size:14px;}
.pg-form .form-card{max-width:880px;}
.pg-form .form-card > form > .btn.primary,.form-card form > .btn.primary[style*="width:100%"]{width:auto!important;min-width:180px;}
.pg-form .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}

/* ---- cards ---- */
.form-card,.soon-card,.contact-card,.rem-card,.emp-card,.att-sum-card,.hub-card,.client-card,.org-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);}
.app .form-card{max-width:880px;margin-inline:0;padding:22px 24px;}
.settings-link-card{max-width:880px!important;}
.hub-card:hover{border-color:#b9cdc3;box-shadow:0 8px 22px -14px rgba(16,60,44,.32);transform:none;}
.soon-card{max-width:720px;margin:24px 0;}

/* ---- stat tiles: neutral surface, semantic number colour only ---- */
.stats{gap:14px;margin-bottom:20px;}
.stats .stat,.stat{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);padding:16px 18px;min-width:170px;}
.stat .num{color:var(--text);font-family:inherit;font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.stat .label{color:var(--muted)!important;font-size:12.5px;margin-top:4px;}
.stat.s-red .num{color:var(--bad);} .stat.s-green .num{color:var(--good);} .stat.s-amber .num{color:var(--warn);} .stat.s-blue .num,.stat.s-teal .num,.stat.s-purple .num,.stat.s-gray .num{color:var(--accent);}
:root[data-theme="dark"] .stats .stat,:root[data-theme="dark"] .stat{box-shadow:none;}

/* ---- tables ---- */
table.simple,table.ticket-list,table.ov-table,.ov-table table{font-size:13px;}
table.simple thead th,table.ticket-list thead th,table.ov-table th{background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 14px;border-bottom:1px solid var(--border);}
table.simple tbody td,table.ticket-list tbody td{padding:11px 14px;border-bottom:1px solid var(--border);}
table.simple tbody tr:hover,table.ticket-list tbody tr:hover{background:var(--accent-dim);}
.table-wrap,.ticket-table-wrap,.table-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow-x:auto;box-shadow:0 1px 2px rgba(16,40,30,.04);}

/* ---- buttons ---- */
.btn{border-radius:8px;font-weight:600;font-size:13px;box-shadow:none;background-image:none;}
.btn:not(.primary):not(.danger){background:var(--surface);color:var(--text);border-color:var(--border);}
.btn:not(.primary):hover{border-color:#b9cdc3;background:var(--accent-dim);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);background-image:none;}
.btn.primary:hover{background:#185a3b;border-color:#185a3b;color:#fff;filter:none;box-shadow:0 6px 14px -8px rgba(31,107,71,.55);}
:root[data-theme="dark"] .btn.primary:hover{background:#6ee0b6;border-color:#6ee0b6;color:#06231c;}
.btn.ghost{background:transparent!important;}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- forms ---- */
.field label{font-size:12.5px;font-weight:600;color:var(--muted);}
.field input,.field select,.field textarea,.csel-trigger,.toolbar input,.toolbar select,.filter-bar input,.filter-bar select{background:var(--surface);border:1px solid #d5dfda;border-radius:8px;color:var(--text);}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .csel-trigger{background:var(--surface-2);border-color:var(--border);}
.field input:focus,.field select:focus,.field textarea:focus,.csel.open .csel-trigger,.csel-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--m-focus);background:var(--surface);}

/* ---- status pills: one shape, semantic colours ---- */
.tag,.badge,.status-pill,.pill{border-radius:999px;font-weight:600;}
.tag-in{background:#e4f3ea;color:#1b7a4b;} .tag-out{background:#fdeaea;color:#c53a3a;} .tag-warn{background:#fdf1dc;color:#a8690e;}
a{color:var(--accent-2);}
.notice{background:var(--accent-dim);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);color:var(--accent);border-radius:10px;}

/* ---- topbar: never let the pills, search and icons collide ---- */
.tb-ctx{min-width:0;flex:0 1 auto;}
.tb-pillwrap{min-width:0;flex:0 1 auto;}
.tb-pill{min-width:0;max-width:100%;} .tb-pill > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-pill strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom;}
.v2-search{flex:0 1 423px!important;min-width:190px!important;}
.content-topbar-inner{min-width:0;}
@media (max-width:1560px){ .tb-pill{padding-inline:10px;gap:6px;} .tb-icon.help{display:none;} }
@media (max-width:1380px){ .tb-pill > span{max-width:120px;} .tb-demo{display:none;} }
@media (max-width:1180px){ .tb-ctx{display:none;} }
.app-sidebar .sidebar-nav > *{flex-shrink:0;}
.app > .pg-title,.app > h1.pg-title{margin-bottom:16px;}
.app > .pg-title:has(+ .pg-sub){margin-bottom:4px;}
@media (max-width:1560px){ .v2-search{flex:0 1 280px!important;min-width:170px!important;} }
.app-sidebar .user-menu-panel a.cur{background:rgba(255,255,255,.1)!important;color:#fff!important;font-weight:600;}
.filter-bar .fp-alt-input.field-like,.report-filters .fp-alt-input.field-like{width:150px!important;}
.fp-alt-input.field-like{background:var(--surface)!important;border-color:#d5dfda!important;border-radius:8px!important;}
:root[data-theme="dark"] .fp-alt-input.field-like{background:var(--surface-2)!important;border-color:var(--border)!important;}
/* sidebar: the menu may use the whole height; the mountain scene sits behind it */
.app-sidebar .sidebar-scene{position:absolute;inset-inline:0;bottom:0;height:clamp(150px,27vh,300px);z-index:0;}
.app-sidebar .sidebar-nav{position:relative;z-index:1;padding-bottom:64px;}
.app-sidebar .sidebar-scene .sc-text{z-index:2;}
.app-sidebar:has(.user-menu-panel.open) .sidebar-scene .sc-text{display:none;}
/* ---------- Sidebar footer slogan: the approved three-line wording per language. Arabic: أعمالك / بنظام / واحد; English: YOUR BUSINESS / ONE / SYSTEM. Each language in its own brand face (Arabic IBM Plex Sans Arabic 700, English Inter 800); the block sits on the sidebar's inline-start edge (right in Arabic, left in English) and is never letter-spaced in Arabic or stretched. ---------- */
.app-sidebar .sidebar-scene .sc-text{gap:8px;align-items:flex-start;letter-spacing:0;text-transform:none;font-size:inherit;font-weight:inherit;line-height:1;}
.app-sidebar .sidebar-scene .sc-slogan{display:flex;flex-direction:column;align-items:flex-start;text-align:start;color:#eaf5ef;}
.app-sidebar .sidebar-scene .sc-slogan>span{display:block;white-space:nowrap;}
:root[dir="ltr"] .app-sidebar .sidebar-scene .sc-slogan{font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:.12em;line-height:1.4;}
:root[dir="rtl"] .app-sidebar .sidebar-scene .sc-slogan{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:0;word-spacing:normal;line-height:1.5;}
/* The slogan block overlays the bottom of the menu: keep the menu scrollable far enough that its last entries can always be brought clear of it (the old slogan could cover Settings on short screens). Block height = leaf 24 + gap 8 + three lines + 18 bottom + 10 air. */
.app-sidebar:not(.collapsed) .sidebar-nav{padding-bottom:116px;}
:root[dir="rtl"] .app-sidebar:not(.collapsed) .sidebar-nav{padding-bottom:138px;}
:root[data-theme="dark"] .tb-icon,:root[data-theme="dark"] .bell-btn{color:#c9d6d0;}
.v2-search #v2SearchForm{flex:1 1 auto;min-width:0;display:flex;margin:0;} .v2-search #v2SearchForm .v2-search-input{width:100%;}

/* Login welcome: profile image + message appear instantly and stay put (no scaling, morphing or repositioning) */
.welcome-overlay,.welcome-overlay *,.welcome-overlay *::before{transition:none!important;animation:none!important;}
.welcome-overlay.show .welcome-avatar,.welcome-overlay .welcome-avatar{transform:none!important;opacity:1!important;}
.welcome-overlay.show .welcome-text,.welcome-overlay .welcome-text{opacity:1!important;transform:none!important;}
.welcome-avatar-ring::before{display:none!important;}

/* ---------- Approved Albero brand: green mark, Albero (green) + ERP (silver) + POWERED BY RWT SYSTEMS ---------- */
.app-sidebar .sb-mark{width:41px;height:auto;flex:0 0 41px;object-fit:contain;}
.app-sidebar .sidebar-brand-word{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1;color:#c9d2cd!important;}
.app-sidebar .sidebar-brand-word b{font-weight:800;color:#5fd69c;} .app-sidebar .sidebar-brand-word i{font-style:normal;font-weight:600;color:#c9d2cd;}
.app-sidebar .sb-tag{font-size:6.6px;letter-spacing:.2em;white-space:nowrap;max-width:none;color:#8fb3a3;font-weight:600;margin-top:1px;}
.albero-brand-logo{height:auto;width:150px;}
.login-v2-card-logo{min-height:112px!important;} .login-v2-card-logo img{height:112px!important;width:auto!important;max-width:100%;} @media (max-width:640px){ .login-v2-card-logo{min-height:88px!important;} .login-v2-card-logo img{height:88px!important;} }

/* ---------- My Team — organisation chart (approved Design 1) ---------- */
.ot-summary{display:flex;gap:18px;font-size:13px;color:var(--muted);} .ot-summary b{color:var(--text);font-size:18px;font-weight:700;margin-inline-end:3px;}
.ot-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 20px;}
.ot-tabs{display:flex;gap:26px;overflow-x:auto;}
.ot-tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;padding:10px 0 12px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;font-family:inherit;}
.ot-tab:hover{color:var(--text);transform:none;background:none;} .ot-tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.ot-tools{display:flex;align-items:center;gap:8px;padding-bottom:8px;flex-wrap:wrap;}
.ot-search{display:flex;align-items:center;gap:7px;height:34px;border:1px solid #d5dfda;border-radius:8px;padding:0 10px;background:var(--surface);color:var(--muted);min-width:190px;} .ot-search input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text);width:100%;}
.ot-branch-form{margin:0;}
.ot-panel{display:none;} .ot-panel.on{display:block;}
.ot-dim{opacity:.28;}
/* cards */
.ot-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,40,30,.05);min-width:0;}
.ot-card.ot-me{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,107,71,.12);} .ot-me .ot-name em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-dim);border-radius:999px;padding:1px 7px;margin-inline-start:4px;}
.ot-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--accent-dim);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);}
.ot-av-fb{display:grid;place-items:center;font-weight:700;color:var(--accent);font-size:16px;}
.ot-av-root{width:64px;height:64px;} .ot-av-manager{width:52px;height:52px;} .ot-av-report{width:38px;height:38px;} .ot-av-sm{width:34px;height:34px;} .ot-av-md{width:44px;height:44px;} .ot-av-xs{width:28px;height:28px;margin-inline-end:-8px;}
.ot-meta{min-width:0;flex:1;} .ot-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ot-title{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ot-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.ot-pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap;}
.ot-pill-team{background:var(--accent-dim);color:var(--accent);border-color:transparent;} .ot-pill-task{background:#fdf1dc;color:#a8690e;border-color:transparent;}
.ot-caret{flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .15s;} .ot-caret:hover{color:var(--accent);border-color:var(--accent);transform:none;}
.collapsed > .ot-card .ot-caret{transform:rotate(-90deg);} :root[dir="rtl"] .collapsed > .ot-card .ot-caret{transform:rotate(90deg);}
/* the tree */
.ot-tree{margin:0 0 34px;}
.ot-top{display:flex;justify-content:center;} .ot-card.ot-root{padding:16px 22px;min-width:320px;max-width:420px;border-color:#cfe0d6;background:linear-gradient(180deg,#fff,#f4faf6);} :root[data-theme="dark"] .ot-card.ot-root{background:var(--surface);}
.ot-card.ot-root .ot-name{font-size:16px;}
.ot-vline{width:2px;height:24px;background:#c5d5cc;margin:0 auto;}
.ot-managers{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
.ot-branch{position:relative;flex:1 1 230px;max-width:300px;min-width:230px;padding:20px 8px 0;}
.ot-branch::before{content:"";position:absolute;top:0;inset-inline-start:50%;width:2px;height:20px;background:#c5d5cc;margin-inline-start:-1px;}
.ot-branch::after{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:#c5d5cc;}
.ot-branch:first-child::after{inset-inline-start:50%;} .ot-branch:last-child::after{inset-inline-end:50%;} .ot-branch:only-child::after{display:none;}
.ot-reports{list-style:none;margin:12px 0 0;padding:0 0 0 22px;position:relative;display:flex;flex-direction:column;gap:9px;}
:root[dir="rtl"] .ot-reports{padding:0 22px 0 0;}
.ot-reports::before{content:"";position:absolute;inset-inline-start:8px;top:-12px;bottom:22px;width:2px;background:#d3e0d8;}
.ot-li{position:relative;} .ot-li::before{content:"";position:absolute;inset-inline-start:-14px;top:24px;width:14px;height:2px;background:#d3e0d8;}
.ot-li .ot-reports{margin-top:9px;}
.collapsed > .ot-reports{display:none;}
.ot-card.ot-report{padding:9px 12px;border-radius:10px;} .ot-report .ot-pills{margin-top:5px;}
.ot-loose{border:1px dashed #c5d5cc;border-radius:12px;padding:16px;margin-top:10px;} .ot-loose-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.ot-loose-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
/* departments / teams / reports */
.ot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start;}
.ot-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px 16px 12px;box-shadow:0 1px 2px rgba(16,40,30,.05);} .ot-box.ot-wide{grid-column:1/-1;}
.ot-box-h{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:6px;} .ot-box-h h3{margin:0;font-size:15px;font-weight:700;flex:1;}
.ot-box-h form{margin:0;} .ot-box-h select{max-width:340px;}
.ot-count{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-dim);border-radius:999px;min-width:26px;text-align:center;padding:2px 9px;}
.ot-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--border);} .ot-row:last-child{border-bottom:0;}
.ot-stack{display:flex;padding:10px 8px 8px;} .ot-more{margin-inline-start:14px;font-size:11.5px;font-weight:700;color:var(--muted);align-self:center;}
.ot-table-wrap{overflow-x:auto;} .ot-cell{display:inline-flex;align-items:center;gap:10px;}
@media (max-width:900px){
  .ot-managers{display:block;} .ot-branch{max-width:none;min-width:0;padding:14px 0 0;} .ot-branch::before,.ot-branch::after,.ot-vline{display:none;}
  .ot-top{justify-content:stretch;} .ot-card.ot-root{min-width:0;max-width:none;width:100%;} .ot-tree{margin-bottom:22px;} .ot-tools{width:100%;} .ot-search{flex:1;}
}

/* ---------- Top bar: Chat + My Reminders dropdowns ---------- */
.tb-drop{position:relative;display:inline-flex;}
.tb-drop .tb-icon{position:relative;}
.tb-badge{position:absolute;top:1px;inset-inline-end:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;color:#fff;border:2px solid var(--surface);box-sizing:content-box;}
.tb-badge[hidden]{display:none;}
.tb-badge-remind{background:#e9962b;} .tb-badge-chat{background:var(--accent);} .tb-badge-notif{background:#e5484d;}
.tb-remind.ring svg{animation:none;} .tb-remind{color:#a8690e;} .tb-chat{color:var(--accent);}
:root[data-theme="dark"] .tb-remind{color:#f5c265;} :root[data-theme="dark"] .tb-chat{color:var(--accent);}
.tb-panel{display:none;position:absolute;top:calc(100% + 12px);inset-inline-end:-10px;width:392px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 50px -18px rgba(16,40,30,.38);z-index:300;overflow:hidden;color:var(--text);}
.tb-drop.open .tb-panel{display:block;}
.tb-panel-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px;} .tb-panel-h h4{margin:0;font-size:16px;font-weight:700;}
.tb-panel-link{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;} .tb-panel-link:hover{text-decoration:underline;}
.tb-tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--border);}
.tb-tabs button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;padding:7px 8px 9px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;} .tb-tabs button:hover{transform:none;background:none;color:var(--text);} .tb-tabs button.on{color:var(--accent);border-bottom-color:var(--accent);}
.tb-psearch{display:flex;align-items:center;gap:7px;margin:10px 14px 4px;height:34px;padding:0 10px;border:1px solid #d5dfda;border-radius:8px;color:var(--muted);} .tb-psearch input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text);width:100%;}
.tb-panel-body{max-height:min(420px,52vh);overflow-y:auto;padding:6px 8px;}
.tb-panel-f{padding:10px 14px 14px;border-top:1px solid var(--border);} .tb-panel-f .btn{width:100%;justify-content:center;text-align:center;display:block;}
.tb-loading,.tb-none{padding:26px 12px;text-align:center;color:var(--muted);font-size:13px;}
.tb-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px;} .tb-sec em{font-style:normal;background:var(--surface-2);border-radius:999px;padding:0 6px;margin-inline-start:4px;} .tb-sec.bad{color:#c53a3a;}
.tb-rem{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;text-decoration:none;color:inherit;} .tb-rem:hover,.tb-conv:hover{background:var(--surface-2);}
.tb-rem-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 32px;}
.tb-rem.manual .tb-rem-ic{background:var(--accent-dim);color:var(--accent);} .tb-rem.system .tb-rem-ic{background:#e1ecfb;color:#2f6fd0;}
:root[data-theme="dark"] .tb-rem.system .tb-rem-ic{background:rgba(85,170,244,.18);color:#8fc4ff;}
.tb-rem-b{flex:1;min-width:0;display:flex;flex-direction:column;} .tb-rem-t{font-size:13px;font-weight:600;line-height:1.3;} .tb-rem-m{font-size:11.5px;color:var(--muted);margin-top:2px;}
.tb-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;flex:0 0 auto;} .tb-tag.manual{background:var(--accent-dim);color:var(--accent);} .tb-tag.system{background:#e1ecfb;color:#2452a8;}
:root[data-theme="dark"] .tb-tag.system{background:rgba(85,170,244,.18);color:#8fc4ff;}
.tb-conv{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;text-decoration:none;color:inherit;}
.tb-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;background:var(--accent-dim);} .tb-av-fb,.tb-av-room{display:grid;place-items:center;font-weight:700;color:var(--accent);font-size:14px;} .tb-av-room{border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.tb-conv-b{flex:1;min-width:0;display:flex;flex-direction:column;} .tb-conv-t{display:flex;justify-content:space-between;gap:8px;} .tb-conv-t b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tb-conv-t em{font-style:normal;font-size:11px;color:var(--muted);flex:0 0 auto;}
.tb-conv-l{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;} .tb-conv.unread .tb-conv-l{color:var(--text);font-weight:600;} .tb-conv.unread .tb-conv-t b{font-weight:700;}
.tb-conv-n{background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px;flex:0 0 auto;}
.tb-notif-row{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:10px;text-decoration:none;color:inherit;}
.tb-notif-row:hover{background:var(--surface-2);}
.tb-notif-row.unread{background:var(--accent-dim);}
.tb-notif-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 32px;margin-top:1px;background:var(--surface-2);color:var(--muted);}
.tb-notif-row.approval .tb-notif-ic{background:var(--accent-dim);color:var(--accent);} .tb-notif-row.system .tb-notif-ic{background:#e1ecfb;color:#2f6fd0;}
:root[data-theme="dark"] .tb-notif-row.system .tb-notif-ic{background:rgba(85,170,244,.18);color:#8fc4ff;}
.tb-notif-b{flex:1;min-width:0;display:flex;flex-direction:column;}
.tb-notif-t{font-size:13px;font-weight:600;line-height:1.35;} .tb-notif-row.unread .tb-notif-t{font-weight:700;}
.tb-notif-m{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;}
.tb-notif-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.tb-tag.approval{background:#fdecea;color:#c0392b;} :root[data-theme="dark"] .tb-tag.approval{background:rgba(229,72,77,.18);color:#f5908f;}
@media (max-width:760px){ .tb-panel{position:fixed;top:64px;inset-inline:10px;width:auto;} .tb-drop{position:static;} }

/* ---------- Chat — full view ---------- */
.chat-app{padding-bottom:18px;} .cf{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;height:calc(100vh - var(--v2-header-h,62px) - 56px);min-height:520px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,40,30,.05);}
.cf-side{display:flex;flex-direction:column;border-inline-end:1px solid var(--border);min-height:0;} .cf-side-h{padding:16px 16px 4px;} .cf-side-h h1{margin:0;font-size:20px;font-weight:700;}
.cf-tabs{display:flex;gap:2px;padding:6px 12px 0;border-bottom:1px solid var(--border);} .cf-tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;padding:8px 8px 10px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;} .cf-tab:hover{transform:none;background:none;} .cf-tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.cf-search{display:flex;align-items:center;gap:7px;margin:10px 14px;height:34px;padding:0 10px;border:1px solid #d5dfda;border-radius:8px;color:var(--muted);} .cf-search input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text);width:100%;}
.cf-list{flex:1;overflow-y:auto;padding:0 8px;min-height:0;} .cf-none{padding:24px 12px;text-align:center;color:var(--muted);font-size:13px;}
.cf-item{display:flex;align-items:center;gap:11px;width:100%;text-align:start;background:none;border:0;border-radius:10px;padding:9px 8px;cursor:pointer;font-family:inherit;color:var(--text);box-shadow:none;} .cf-item:hover{background:var(--surface-2);transform:none;} .cf-item.on{background:var(--accent-dim);}
.cf-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;background:var(--accent-dim);} .cf-av-lg{width:44px;height:44px;} .cf-av-sm{width:30px;height:30px;flex-basis:30px;} .cf-av-fb,.cf-av-room{display:grid;place-items:center;font-weight:700;color:var(--accent);} .cf-av-room{border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.cf-item-b{flex:1;min-width:0;display:flex;flex-direction:column;} .cf-item-t{display:flex;justify-content:space-between;gap:8px;} .cf-item-t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cf-item-t em{font-style:normal;font-size:11px;color:var(--muted);} .cf-item-l{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-badge{background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px;}
.cf-new{padding:12px 14px;border-top:1px solid var(--border);} .cf-new label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px;} .cf-new select{width:100%;}
.cf-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);} .cf-empty{margin:auto;text-align:center;color:var(--muted);} .cf-empty svg{opacity:.5;} .cf-conv{display:flex;flex-direction:column;flex:1;min-height:0;} .cf-conv[hidden]{display:none;}
.cf-conv-h{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--border);} .cf-conv-name{font-size:15px;font-weight:700;} .cf-conv-sub{font-size:12px;color:var(--muted);}
.cf-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:0;}
.cf-m{display:flex;gap:8px;align-items:flex-end;max-width:78%;} .cf-m.mine{align-self:flex-end;flex-direction:row-reverse;}
.cf-bub{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;min-width:80px;} .cf-m.mine .cf-bub{background:var(--accent);border-color:var(--accent);color:#fff;}
.cf-bub b{display:block;font-size:11.5px;color:var(--accent);margin-bottom:2px;} .cf-bub p{margin:0;font-size:13.5px;line-height:1.5;} .cf-bub time{display:block;font-size:10.5px;opacity:.65;margin-top:4px;text-align:end;}
.cf-att{display:block;margin-top:6px;font-size:12px;color:inherit;text-decoration:underline;} .cf-att img{max-width:220px;border-radius:8px;display:block;margin-bottom:4px;}
.cf-form{display:flex;align-items:flex-end;gap:10px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--border);} .cf-form textarea{flex:1;resize:none;border:1px solid #d5dfda;border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;max-height:120px;background:var(--surface);color:var(--text);}
.cf-attach{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);cursor:pointer;color:var(--muted);} .cf-files{padding:0 18px 10px;font-size:12px;color:var(--muted);background:var(--surface);}
@media (max-width:860px){ .cf{grid-template-columns:1fr;height:auto;} .cf-side{max-height:46vh;} .cf-main{min-height:60vh;} }

/* ---------- Placeholder / Preview modules (intentional "Preview · Coming soon" screens) ---------- */
.pvw{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;max-width:1100px;}
.pvw-main{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 30px;box-shadow:0 1px 2px rgba(16,40,30,.05);}
.pvw-pill{display:inline-flex;align-items:center;gap:7px;background:#fdf1dc;color:#a8690e;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;}
.pvw-main h2{margin:16px 0 8px;font-size:22px;font-weight:700;letter-spacing:-.01em;} .pvw-main > p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.6;max-width:640px;}
.pvw-list-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.pvw-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;} .pvw-list li{display:flex;align-items:center;gap:10px;font-size:14px;} .pvw-list svg{color:var(--accent);flex:0 0 16px;}
.pvw-actions{display:flex;gap:10px;flex-wrap:wrap;}
.pvw-note{background:var(--surface-2);border:1px dashed #c5d5cc;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);line-height:1.55;} .pvw-note b{color:var(--text);font-size:13.5px;}
@media (max-width:900px){ .pvw{grid-template-columns:1fr;} .pvw-main{padding:22px 20px;} }

/* ---------- Top bar icons: one clean style for Chat, My Reminders, Notifications and Help ---------- */
.content-topbar .me-box .tb-icon,.content-topbar .me-box .bell-btn.tb-icon{width:40px;height:40px;min-width:40px;margin:0;padding:0;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:none;display:inline-grid;place-items:center;position:relative;transition:background .15s,border-color .15s;}
.content-topbar .me-box .tb-icon:hover{background:var(--accent-dim);border-color:#b9cdc3;transform:none;}
.content-topbar .me-box .tb-icon svg{width:20px;height:20px;stroke-width:1.8;fill:none;} .content-topbar .me-box .bell-ic{display:grid;place-items:center;line-height:0;}
.content-topbar .me-box .tb-chat{color:var(--accent);} .content-topbar .me-box .tb-remind{color:#b87418;} .content-topbar .me-box .bell-btn.tb-icon{color:#43524b;} .content-topbar .me-box .tb-icon.help{color:#2f6fd0;}
:root[data-theme="dark"] .content-topbar .me-box .tb-icon{background:var(--surface-2);} :root[data-theme="dark"] .content-topbar .me-box .bell-btn.tb-icon{color:#c9d6d0;} :root[data-theme="dark"] .content-topbar .me-box .tb-icon.help{color:#8fc4ff;} :root[data-theme="dark"] .content-topbar .me-box .tb-remind{color:#f5c265;}
.content-topbar .me-box .tb-icon .tb-badge,.content-topbar .me-box .bell-btn .bell-count{top:-5px;inset-inline-end:-5px;left:auto;right:auto;min-width:16px;height:16px;padding:0 4px;border-radius:999px;font-size:9.5px;font-weight:700;line-height:16px;border:2px solid var(--surface);box-sizing:content-box;display:block;text-align:center;color:#fff;position:absolute;}
.content-topbar .me-box .bell-btn .bell-count{background:#dc3f45;}

/* ==========================================================================
   FINAL GLOBAL UI CONSISTENCY PASS — the two approved Albero patterns.
   (A) Create/Edit transactional forms: reuses the existing .ent-* system
       (.ent-page-head/.ent-card/.ent-field-grid/.ent-line-table, already
       proven on journal_voucher_form.php / ap_bill_form.php / ap_entry_form.php)
       — this block only adds the pieces those pages didn't need yet: a
       required-field marker, a totals summary card for documents with an
       item table, and a wide-form width variant for pages still capped at
       880px by the .form-card rule above.
   (B) Master Data / Utility pages: a NEW slide-over panel for Add/Edit,
       replacing a permanently-reserved on-page form area. Toggled by
       openSlideover(id)/closeSlideover(id) in assets/app.js.
   ========================================================================== */

/* ---- (A) required marker + totals card (item-table documents) ---- */
.ent-req{color:#c53a3a;margin-inline-start:2px;font-weight:700;}
.ent-totals-card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:16px 20px;margin-top:14px;max-width:380px;margin-inline-start:auto;}
.ent-totals-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;color:var(--muted);}
.ent-totals-row .v{font-family:'JetBrains Mono',monospace;color:var(--text);}
.ent-totals-row.grand{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-size:16px;font-weight:800;color:var(--text);}
.ent-totals-row.grand .v{color:var(--accent);}
@media (max-width:760px){ .ent-totals-card{max-width:none;margin-inline-start:0;} }

/* ---- (A) wide-form variant: a transactional document (item table, totals) needs
   more room than the 880px cap that suits a short settings-style form ---- */
.app .form-card.ent-wide-form{max-width:1180px;}

/* ---- (B) slide-over panel: Add/Edit for master-data / configuration lists,
   instead of a form permanently reserving a slice of the page ---- */
.ent-slideover-backdrop{position:fixed;inset:0;background:rgba(10,22,17,.4);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .2s ease;}
.ent-slideover-backdrop.open{opacity:1;pointer-events:auto;}
.ent-slideover{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,100vw);
  background:var(--surface);z-index:401;box-shadow:-18px 0 44px -20px rgba(16,40,30,.4);
  transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
:root[dir="rtl"] .ent-slideover{transform:translateX(-100%);}
.ent-slideover.open{transform:translateX(0);}
.ent-slideover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--border);flex:0 0 auto;}
.ent-slideover-head h3{margin:0;font-size:16px;font-weight:700;color:var(--text);}
.ent-slideover-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted);box-shadow:none;flex:0 0 auto;}
.ent-slideover-close:hover{border-color:#b9cdc3;color:var(--text);background:var(--accent-dim);transform:none;}
.ent-slideover-body{flex:1;overflow-y:auto;padding:20px;}
.ent-slideover-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex:0 0 auto;}
.ent-slideover-body .ent-field{margin-bottom:14px;}
.ent-slideover-body .ent-field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.ent-slideover-body .ent-field input,.ent-slideover-body .ent-field select,.ent-slideover-body .ent-field textarea{
  width:100%;box-sizing:border-box;background:var(--surface);border:1px solid #d5dfda;border-radius:8px;
  padding:8px 11px;font:inherit;font-size:13px;color:var(--text);height:36px;}
.ent-slideover-body .ent-field textarea{height:auto;min-height:70px;resize:vertical;}
.ent-slideover-body .ent-field input:focus,.ent-slideover-body .ent-field select:focus,.ent-slideover-body .ent-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--m-focus);}
@media (max-width:520px){ .ent-slideover{width:100vw;} }
body.ent-slideover-lock{overflow:hidden;}
.content-topbar .me-box{gap:10px;}

/* ======================================================================
   Settings / Administration — premium visual redesign.
   Scoped to body.admin-shell only (every page reachable from the
   Administration sidebar group) so the rest of the app is untouched.
   The visual DNA — eyebrow label + big bold heading, icon-badge stat
   cards, roomier card/table rhythm, soft pastel status pills — is
   lifted directly from overview.php's .ovx-* Enterprise Overview
   design, the approved master reference, not invented from scratch.
   ====================================================================== */
body.admin-shell .ent-page-head{align-items:flex-end;margin-bottom:22px;gap:20px;}
body.admin-shell .ent-page-eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-text-2);font-weight:700;margin-bottom:6px;display:block;}
body.admin-shell .ent-page-title-row h1{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
body.admin-shell .ent-page-sub{font-size:14.5px;color:var(--v2-text-2);margin-top:5px;line-height:1.4;}
body.admin-shell .ent-breadcrumb{font-size:12.5px;margin-bottom:12px;}

body.admin-shell .ent-card{border-radius:var(--v2-radius-lg);box-shadow:0 1px 2px rgba(16,40,30,.05),0 10px 26px -20px rgba(16,40,30,.22);transition:box-shadow .16s ease,border-color .16s ease;}
body.admin-shell a.hub-card:hover,body.admin-shell .ent-card.is-interactive:hover{box-shadow:0 2px 4px rgba(16,40,30,.06),0 16px 32px -18px rgba(16,40,30,.28);}
body.admin-shell .ent-card-head{padding:15px 18px;}
body.admin-shell .ent-card-title{font-size:15px;font-weight:800;letter-spacing:-.01em;}
body.admin-shell .ent-card-body{padding:17px 18px;}
body.admin-shell .ent-card-foot{padding:11px 18px;}

body.admin-shell .table-wrap{border-radius:var(--v2-radius-lg);box-shadow:0 1px 2px rgba(16,40,30,.05);overflow:hidden;}
body.admin-shell table.simple thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:13px 18px;}
body.admin-shell table.simple tbody td{padding:14px 18px;font-size:13.5px;}
body.admin-shell table.simple tbody tr{transition:background .12s ease;}

/* Hub landing pages (Company Management, Clients admin): icon-badge tiles instead of plain text cards */
body.admin-shell .hub-grid{gap:16px;margin-top:16px;}
body.admin-shell .hub-card{border-radius:var(--v2-radius-lg);padding:20px;gap:0;box-shadow:0 1px 2px rgba(16,40,30,.05);}
body.admin-shell .hub-card-top{margin-bottom:12px;}
body.admin-shell .hub-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb, var(--m-green) 12%, var(--v2-panel));color:var(--m-green);flex:0 0 44px;font-size:22px;line-height:1;}
body.admin-shell .hub-icon svg{width:22px;height:22px;}
body.admin-shell .hub-title{font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin-top:12px;font-family:inherit;}
body.admin-shell .hub-desc{font-size:12.5px;color:var(--v2-text-2);line-height:1.45;}
body.admin-shell .hub-go{font-size:12.5px;font-weight:700;color:var(--m-green);}
body.admin-shell .hub-count{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb, var(--m-green) 10%, var(--v2-panel));color:var(--m-green);}

/* Icon-badge summary/KPI cards (replaces the flat .ent-summary-strip on hub pages like gov_overview.php) */
body.admin-shell .adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:18px;}
body.admin-shell .adm-kpi{display:flex;align-items:flex-start;gap:13px;background:var(--v2-panel);border:1px solid var(--v2-border);
  border-radius:var(--v2-radius-lg);padding:16px;box-shadow:0 1px 2px rgba(16,40,30,.05);text-decoration:none;color:inherit;transition:box-shadow .16s ease;}
body.admin-shell a.adm-kpi:hover{box-shadow:0 2px 4px rgba(16,40,30,.06),0 14px 28px -18px rgba(16,40,30,.26);}
body.admin-shell .adm-kic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 42px;}
body.admin-shell .adm-kic svg{width:21px;height:21px;}
body.admin-shell .adm-kbody{min-width:0;}
body.admin-shell .adm-klabel{font-size:12px;color:var(--v2-text-2);line-height:1.25;margin-bottom:3px;}
body.admin-shell .adm-kval{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--v2-text);}
body.admin-shell .adm-khint{font-size:11.5px;color:var(--v2-text-2);margin-top:4px;line-height:1.35;}

/* soft pastel status pills, matching the Enterprise Overview .ovx-st treatment */
body.admin-shell .adm-pill{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;}
body.admin-shell .adm-pill.green{background:#dcefe3;color:#1f6b47;}
body.admin-shell .adm-pill.amber{background:#fdebd0;color:#a0621a;}
body.admin-shell .adm-pill.blue{background:#e1ecfb;color:#265aa8;}
body.admin-shell .adm-pill.red{background:#fde4e4;color:#c9383e;}
body.admin-shell .adm-pill.gray{background:var(--v2-panel-hover);color:var(--v2-text-2);}
:root[data-theme="dark"] body.admin-shell .adm-pill.green{background:color-mix(in srgb, #2e9d62 22%, transparent);color:#7fe0ae;}
:root[data-theme="dark"] body.admin-shell .adm-pill.amber{background:color-mix(in srgb, #e9962b 22%, transparent);color:#f5c265;}
:root[data-theme="dark"] body.admin-shell .adm-pill.blue{background:color-mix(in srgb, #2f6fd0 22%, transparent);color:#8fb4f0;}
:root[data-theme="dark"] body.admin-shell .adm-pill.red{background:color-mix(in srgb, #dc3f45 22%, transparent);color:#f2949a;}
:root[data-theme="dark"] body.admin-shell .adm-pill.gray{background:var(--v2-panel-hover);color:var(--v2-text-2);}

@media (max-width:640px){
  body.admin-shell .ent-page-title-row h1{font-size:23px;}
  body.admin-shell .adm-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ---- Settings/Administration: real form controls, not just the surrounding card ----
   Ahmed's rejection was specifically about .ent-field inputs/selects/textareas and
   .seg-toggle looking like a generic default admin form. Elevate the controls themselves. */
body.admin-shell .ent-field-grid{gap:16px 18px;}
body.admin-shell .ent-field label{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--v2-text-2);margin-bottom:1px;}
body.admin-shell .ent-field input,
body.admin-shell .ent-field select,
body.admin-shell .ent-field textarea{
  height:42px;border-radius:10px;padding:9px 13px;font-size:13.5px;
  border:1.5px solid var(--v2-border);background:var(--v2-bg);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
body.admin-shell .ent-field textarea{height:auto;min-height:84px;padding-top:10px;line-height:1.5;}
body.admin-shell .ent-field input:hover,
body.admin-shell .ent-field select:hover,
body.admin-shell .ent-field textarea:hover{border-color:color-mix(in srgb, var(--m-green) 40%, var(--v2-border));}
body.admin-shell .ent-field input:focus,
body.admin-shell .ent-field select:focus,
body.admin-shell .ent-field textarea:focus{
  border-color:var(--m-green);background:var(--v2-panel);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--m-green) 16%, transparent);
}
body.admin-shell .ent-field input[type="file"]{height:auto;padding:8px 10px;border-style:dashed;cursor:pointer;}
body.admin-shell .ent-field input[type="file"]:hover{border-color:var(--m-green);background:color-mix(in srgb, var(--m-green) 4%, var(--v2-bg));}

/* segmented toggle: bigger, bolder active state with a real brand-green fill (not just a pale highlight) */
body.admin-shell .seg-toggle{border-radius:11px;padding:4px;background:var(--v2-panel-hover);border-color:var(--v2-border);}
body.admin-shell .seg{padding:8px 20px;font-size:12.5px;border-radius:8px;font-weight:700;transition:background .15s ease,color .15s ease,box-shadow .15s ease;}
body.admin-shell .seg.on{background:var(--m-green);color:#fff;box-shadow:0 3px 10px -3px color-mix(in srgb, var(--m-green) 60%, transparent);}
:root[data-theme="dark"] body.admin-shell .seg.on{color:#06231c;}
body.admin-shell .seg-toggle.seg-check .seg.on{background:color-mix(in srgb, var(--m-green) 14%, var(--v2-panel));border-color:var(--m-green);color:var(--m-green);box-shadow:none;}

/* section layout / save-action structure: each settings section reads as a clearly separated, generously spaced block */
body.admin-shell #settingsMainForm .ent-card{margin-bottom:20px;}
body.admin-shell .ent-card-foot{display:flex;justify-content:flex-end;background:var(--v2-panel-hover);}
body.admin-shell .ent-card-foot .btn.primary{padding:9px 22px;border-radius:9px;font-weight:700;box-shadow:0 4px 12px -4px color-mix(in srgb, var(--m-green) 45%, transparent);}
body.admin-shell .hint{font-size:12.5px;line-height:1.55;}

/* ---- Governance: role library / assignments dense table — not just the surrounding card ---- */
body.admin-shell .ent-line-table-wrap{overflow-x:visible;}
body.admin-shell table.ent-line-table.ent-readonly{min-width:0;font-size:13px;}
body.admin-shell table.ent-line-table.ent-readonly thead th{
  background:var(--v2-panel-hover);padding:11px 14px;font-size:10.5px;letter-spacing:.05em;font-weight:700;
  border-bottom:1.5px solid var(--v2-border);white-space:normal;}
body.admin-shell table.ent-line-table.ent-readonly tbody td{padding:13px 14px;vertical-align:top;}
body.admin-shell table.ent-line-table.ent-readonly tbody tr:hover{background:var(--v2-panel-hover);}

body.admin-shell .gov-role-name{display:flex;flex-direction:column;gap:3px;}
body.admin-shell .gov-role-name strong{font-size:13.5px;font-weight:700;}
body.admin-shell .gov-role-key{font-size:10.5px;color:var(--v2-text-2);background:var(--v2-panel-hover);
  border-radius:5px;padding:1px 6px;width:fit-content;}
body.admin-shell .gov-role-desc{margin:0 0 6px;font-size:12.5px;line-height:1.55;color:var(--v2-text-2);}
body.admin-shell .gov-caps-disclosure summary{cursor:pointer;font-size:11.5px;font-weight:700;color:var(--m-green);
  list-style:none;width:fit-content;}
body.admin-shell .gov-caps-disclosure summary::-webkit-details-marker{display:none;}
body.admin-shell .gov-caps-disclosure summary::before{content:'▸ ';font-size:10px;}
body.admin-shell .gov-caps-disclosure[open] summary::before{content:'▾ ';}
body.admin-shell .gov-caps-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
body.admin-shell .gov-cap-chip{font-size:10.5px;font-family:'JetBrains Mono',monospace;background:var(--v2-panel-hover);
  border:1px solid var(--v2-border);border-radius:6px;padding:2px 7px;color:var(--v2-text-2);}
body.admin-shell table.ent-line-table.ent-readonly td.ent-num{vertical-align:middle;}

body.admin-shell .gov-assign-user{font-weight:600;}
body.admin-shell table.ent-line-table.ent-readonly.gov-assign-table td.mono{font-size:11.5px;color:var(--v2-text-2);}

@media (max-width:760px){
  body.admin-shell .ent-line-table-wrap{overflow-x:auto;}
  body.admin-shell table.ent-line-table.ent-readonly{min-width:640px;}
}

/* ---- Reusable capability/permission chip row (custom roles, role library) ---- */
body.admin-shell .cap-chip-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;max-width:340px;}
body.admin-shell .cap-chip{font-size:11px;background:var(--v2-panel-hover);border:1px solid var(--v2-border);
  border-radius:6px;padding:2px 8px;color:var(--v2-text-2);white-space:nowrap;}
body.admin-shell .cap-chip-more summary{cursor:pointer;font-size:11px;font-weight:700;color:var(--m-green);
  list-style:none;padding:2px 8px;border:1px dashed var(--v2-border);border-radius:6px;}
body.admin-shell .cap-chip-more summary::-webkit-details-marker{display:none;}
body.admin-shell .cap-chip-row-extra{margin-top:6px;width:100%;}
body.admin-shell td.perms-cell{max-width:360px;}

/* ---------- Albero Assistant — floating launcher + panel (Demo environment only; kept apart from Chat / Reminders / Notifications in the top bar) ----------
   POSITION comes from the DOCUMENT direction only (logical insets, inherited from <html dir>): the launcher sits in the bottom corner OPPOSITE the sidebar - LTR: sidebar on the left, launcher + panel at the bottom-right;
   RTL: sidebar on the right, launcher + panel at the bottom-left. No physical left/right is used for placement; assets/assistant.js never sets a direction on .as-root (the assistant's own AR/EN choice only sets the
   text direction of the content INSIDE the panel and of the launcher label). */
.as-root{position:fixed;inset-inline-end:24px;bottom:22px;z-index:250;font-family:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;}
.as-launcher{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent,#fff);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 12px 28px -10px rgba(31,107,71,.6);font-family:inherit;}
.as-launcher:hover{background:#185a3b;transform:translateY(-1px);} .as-launcher.on{background:#185a3b;}
:root[data-theme="dark"] .as-launcher:hover,:root[data-theme="dark"] .as-launcher.on{background:#6ee0b6;}
/* Attention pulse: a slow, richer halo — pulses whenever the panel is closed, pauses while it's open, and resumes a moment after closing (assets/assistant.js toggles .pulse; never persisted, so it's normal again on every page load). */
.as-launcher.pulse{animation:askAlberoPulse 3.2s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes askAlberoPulse{
  0%,100%{box-shadow:0 12px 28px -10px rgba(31,107,71,.6), 0 0 0 0 rgba(20,110,70,.6);}
  50%{box-shadow:0 12px 28px -10px rgba(31,107,71,.6), 0 0 0 16px rgba(20,110,70,0);}
}
:root[data-theme="dark"] .as-launcher.pulse{animation-name:askAlberoPulseDark;}
@keyframes askAlberoPulseDark{
  0%,100%{box-shadow:0 12px 28px -10px rgba(0,0,0,.5), 0 0 0 0 rgba(94,214,158,.55);}
  50%{box-shadow:0 12px 28px -10px rgba(0,0,0,.5), 0 0 0 16px rgba(94,214,158,0);}
}
@media (prefers-reduced-motion:reduce){ .as-launcher.pulse{animation:none;} }
.as-panel{position:absolute;inset-inline-end:0;bottom:60px;width:392px;max-width:calc(100vw - 32px);height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 26px 60px -20px rgba(16,40,30,.45);overflow:hidden;color:var(--text);}
.as-panel[hidden]{display:none;}
.as-h{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border);}
.as-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;flex:0 0 34px;}
.as-ht{flex:1;min-width:0;} .as-ht b{display:block;font-size:14.5px;} .as-ht small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);} .as-ht small i{width:7px;height:7px;border-radius:50%;background:#2e9d62;display:inline-block;}
.as-lang{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;} .as-lang button{border:0;background:none;padding:4px 8px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:0;box-shadow:none;font-family:inherit;} .as-lang button:hover{transform:none;background:var(--surface-2);} .as-lang button.on{background:var(--accent-dim);color:var(--accent);}
.as-ib{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;padding:0;box-shadow:none;} .as-ib:hover{background:var(--surface-2);transform:none;color:var(--text);}
.as-body{flex:1;overflow-y:auto;padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.as-hi h3{margin:6px 0 4px;font-size:19px;font-weight:700;} .as-hi p{margin:0;font-size:13px;color:var(--muted);}
.as-chips{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .as-chip{text-align:start;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;box-shadow:none;font-family:inherit;} .as-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:none;}
.as-msg{max-width:92%;font-size:13px;line-height:1.55;border-radius:14px;padding:10px 12px;} .as-msg.me{align-self:flex-end;background:var(--accent);color:#fff;} .as-msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);}
.as-msg.bot b{display:block;margin-bottom:4px;} .as-msg ol{margin:6px 0 8px;padding-inline-start:18px;} .as-msg li{margin-bottom:4px;} .as-msg p{margin:0;}
.as-go{display:inline-block;margin-top:2px;font-weight:700;font-size:12.5px;color:var(--accent);text-decoration:none;background:var(--accent-dim);border-radius:8px;padding:6px 10px;} .as-go:hover{text-decoration:underline;}
.as-warn{color:#a8690e!important;font-size:12.5px;}
.as-ctx{font-size:11.5px;color:var(--muted);padding:7px 16px;background:var(--bg);} .as-ctx span{background:var(--accent-dim);color:var(--accent);border-radius:999px;padding:1px 8px;font-weight:700;margin-inline-end:4px;}
.as-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);} .as-form input{flex:1;border:1px solid #d5dfda;border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;background:var(--surface);color:var(--text);} .as-form input:focus{outline:none;border-color:var(--accent);box-shadow:var(--m-focus);}
.as-form button{border:0;border-radius:10px;background:var(--accent);color:var(--on-accent,#fff);font-weight:700;font-size:13px;padding:0 14px;cursor:pointer;font-family:inherit;}
.as-demo{margin:0;padding:0 14px 10px;font-size:10.5px;color:var(--muted);background:var(--surface);}
@media (max-width:640px){ .as-root{inset-inline-end:14px;bottom:14px;} .as-panel{position:fixed;inset-inline:0;bottom:0;width:auto;max-width:none;height:78vh;border-radius:18px 18px 0 0;} .as-launcher span{display:none;} .as-launcher{padding:0 14px;} }
body.has-ask-albero .app{padding-bottom:80px;} @media (max-width:760px){body.has-ask-albero .app{padding-bottom:84px;}}
body.has-ask-albero.chat-page-body .as-root{bottom:92px;}
/* ---------- Responsive ERP access (queue item 9): the top bar must FIT a phone viewport ----------
   Measured at a true 360px viewport (an iframe, not a headless window): the search kept `min-width:170px` and the icon cluster was 252px wide, so the row was ~480px - the user menu / notifications
   fell off the viewport edge (the left edge in RTL) and could not be reached. Below 560px the search may shrink, the cluster uses 34px icons and the secondary Help icon is dropped (the sidebar keeps Help). */
@media (max-width:560px){
  .content-topbar .v2-search{min-width:0!important;flex:1 1 0!important;}
  .content-topbar .v2-search-input{padding-inline-end:8px!important;}
  .content-topbar .me-box{gap:3px!important;}
  .content-topbar .me-box .tb-icon,.content-topbar .me-box .bell-btn.tb-icon{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important;}
  .content-topbar .me-box .tb-icon.help{display:none!important;}
  .content-topbar .topbar-user-btn{padding:2px!important;}
  .content-topbar .mobile-sidebar-toggle svg{width:18px!important;height:18px!important;flex:none!important;}
}

/* Responsive ERP access: the hidden radio / checkbox inside a segmented toggle (.seg) was sized 100% by the generic form-field rule and positioned against the PAGE (the toggle was not a positioning context),
   so each form with a toggle (cost entry, change order, employee ...) got an invisible full-width input far to the right: the document became horizontally scrollable (scrollWidth 535 at 360px, 2758 at 1440px).
   Keep the input out of the layout (zero box, inside its own toggle) - it stays focusable and clickable through its label. */
.seg{position:relative;}
.seg input{position:absolute!important;opacity:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:0!important;pointer-events:none;}

/* Responsive ERP access: a two-column admin layout collapses to ONE column below 900px, but that column was `1fr` (= minmax(auto,1fr)), so a table inside it forced the whole column (and the page) to the table's own width (payroll journal: scrollWidth 686 at 360px). A shrinkable column lets the table scroll inside its own .list-wrap container instead. */
@media (max-width:900px){.admin-split{grid-template-columns:minmax(0,1fr);} .admin-split > *{min-width:0;}}

/* E01 / OQ-R7: .ent-field sets display:flex, which beat the native [hidden] attribute - an inactive field (the gross / net amount of the credit-kind switch) kept 51-65px of height. Respect hidden for the named form fields. */
.ent-field[hidden],.ent-card[hidden]{display:none!important;}

/* E12: on a phone the selected run (ledger journal, reconciliation, retry) comes BEFORE the long list of runs instead of far below it */
@media (max-width:900px){.admin-split.has-selection > :last-child{order:-1;}}
/* Queue Management (DEC-056): its own sidebar group */
.app-sidebar #queueMenu{order:11;}
.app-sidebar #queueMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.700 0 3-1.300 3-3s-1.300-3-3-3-3 1.300-3 3 1.300 3 3 3zm-8 0c1.700 0 3-1.300 3-3S9.700 5 8 5 5 6.300 5 8s1.300 3 3 3zm0 2c-2.300 0-7 1.200-7 3.500V19h14v-2.500C15 14.200 10.300 13 8 13zm8 0c-.3 0-.6 0-1 .1 1.200.8 2 1.900 2 3.400V19h6v-2.500c0-2.300-4.700-3.500-7-3.500z'/%3E%3C/svg%3E");}