/* نظام رفع التقارير — الأنماط المشتركة
   المصدر: المعاينة المعتمدة v20. بلا مكتبات CSS، والخطوط محلية. */

/* ========== الخطوط ========== */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ========== الرموز ========== */
:root{
  --bg:#F3F5F7; --surface:#fff; --text:#1B2A4D; --muted:#5F6B80;
  --border:#D9DEE4; --line:#E6EAEE; --input:#C9D0D8; --placeholder:#8A94A0; --field-ro:#F7F8FA;
  --navy:#1B2A4D; --teal:#31858E; --teal-soft:#D1ECE9;
  --ok:#2E8B57; --ok-strong:#1B5E36; --warn:#D9A21B; --warn-soft:#FBF0D2; --warn-text:#6B4A00; --bad:#C9463D; --bad-text:#8C1D18; --bad-soft:#FBE3E1; --neutral:#9AA3AE;
}

/* ========== الأساس ========== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:15px;line-height:1.5}
input,select,textarea,button{font-family:inherit;font-size:inherit}
a{color:var(--teal)}
h1{margin:0;font-size:22px;font-weight:600}
h2{margin:0;font-size:16px;font-weight:600}
h3{margin:0;font-size:15px;font-weight:600}
p{margin:0}
.sub{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:12px}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ========== الشعار والاسم ========== */
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;color:inherit;text-decoration:none}
.logo{width:36px;height:36px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* الشعار الذي رفعه المسؤول (2.17): على مربع أبيض حتى يظهر على الخلفية الداكنة، وبعرضه إن كان عريضًا */
.logo.custom{width:auto;min-width:36px;max-width:120px;padding:3px;background:#fff;border:1px solid var(--border)}
.logo.custom img{display:block;height:28px;width:auto;max-width:112px;object-fit:contain}

.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ========== الهيكل بقائمة جانبية (للجميع، 14.8) ========== */
.shell{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:20px 14px;gap:6px}
.sidebar .brand{color:#fff;padding:4px 10px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px;font-size:16px}
.sidebar .brand .logo{background:rgba(255,255,255,.14)}
.sidebar .brand .logo.custom{background:#fff;border-color:transparent}
/* الشعار المرفوع جنب الاسم وبحجمه، كشريط الجوال (2.25، بدل الكبير فوق الاسم في 2.19) */
.sidebar .brand.has-logo .logo.custom{height:44px;max-width:120px;padding:4px;border-radius:11px}
.sidebar .brand.has-logo .logo.custom img{height:36px;max-width:112px}
.sidebar nav{display:flex;flex-direction:column;gap:6px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.08)}
.sidebar nav a[aria-current="page"]{background:rgba(49,133,142,.45);color:#fff;font-weight:600}
.sidebar nav a svg{flex-shrink:0;opacity:.9}
.sidebar .count{margin-inline-start:auto;background:#5FC3BC;color:var(--navy);font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.sidebar .me{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.content{flex:1;min-width:0;padding:28px 32px 48px}
.content > .in{max-width:1000px;display:flex;flex-direction:column;gap:22px}
@media (max-width:860px){
  /* القائمة الجانبية شريط علوي فيه الاسم والجرس فقط؛ التنقل و«حسابي» في شريط الجوال أسفل الملف */
  .shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:10px 12px;gap:10px}
  .sidebar .brand{border:none;padding:4px 6px;margin:0;font-size:15px}
  .sidebar .brand.has-logo .logo.custom{height:36px;max-width:120px;padding:3px;border-radius:10px}
  .sidebar .brand.has-logo .logo.custom img{height:28px;max-width:112px}
  .sidebar .me{display:none}
  .content{padding:20px 16px 40px}
}

/* ========== قائمة الحساب على الكمبيوتر (2.25) ==========
   الاسم وتحته مسمّاه أو وحدته، والضغط عليه يفتح القائمة (details بلا JavaScript)، أسفل القائمة الجانبية وتفتح للأعلى.
   والضغط خارجها يغلقها: خلفية شفافة تغطي الصفحة جزء من summary. على الجوال مخفية («حسابي» في الشريط السفلي). */
.acc-menu{position:relative}
.acc-menu > summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer}
.acc-menu > summary::-webkit-details-marker{display:none}
.acc-menu[open] > summary::before{content:"";position:fixed;inset:0;z-index:29;cursor:default}
.acc-menu .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-menu .who{display:flex;flex-direction:column;line-height:1.4;min-width:0;flex:1;text-align:start}
.acc-menu .who b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-menu .who small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-menu .chev{display:flex;opacity:.7;transition:transform .15s}
.acc-menu[open] .chev{transform:rotate(180deg)}
.acc-pop{position:absolute;z-index:30;inset-inline:0;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.22);padding:6px;display:flex;flex-direction:column}
.acc-pop form{margin:0;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.acc-row,.acc-pop .push-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:500;text-align:start;text-decoration:none;cursor:pointer;white-space:nowrap}
.acc-row:hover,.acc-pop .push-toggle:hover{background:#F2F4F7;text-decoration:none}
.acc-row svg{color:var(--muted);flex-shrink:0}
.acc-pop .push-toggle::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");content:"";width:18px;height:18px;flex-shrink:0;background:var(--muted);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.acc-out,.acc-out svg{color:#B42318}
/* أسفل القائمة الجانبية: على الكحلي، وتفتح للأعلى بعرض القائمة */
.sidebar .acc-menu > summary{color:#fff}
.sidebar .acc-menu > summary:hover,.sidebar .acc-menu[open] > summary{background:rgba(255,255,255,.08)}
.sidebar .acc-menu .av{background:rgba(255,255,255,.14)}
.sidebar .acc-menu .who small{color:rgba(255,255,255,.62)}
.sidebar .acc-pop{bottom:calc(100% + 8px)}

/* ========== رأس الصفحة ومبدّل الفترة ========== */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pagehead.center{align-items:center}
.weeknav{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px}
.weeknav .btn{height:34px;padding:0 10px;border:none;font-size:13px;color:var(--muted)}
.weeknav .wk{padding:0 10px;font-weight:600;font-size:14px;white-space:nowrap}

/* ========== الأزرار ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:8px;border:1px solid var(--input);background:#fff;color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.btn-green{background:var(--ok-strong);border-color:var(--ok-strong);color:#fff;font-weight:600}
.btn-danger{color:var(--bad-text);font-weight:600}
.btn-link{border:none;background:none;color:var(--muted);height:auto;padding:0}
.btn-sm{height:36px;padding:0 12px;font-size:13px}
.btn-lg{height:46px}
.btn-wide{padding:0 22px}
.lnk{color:var(--teal);text-decoration:none;font-weight:600;font-size:13.5px;padding:6px 4px;background:none;border:none;cursor:pointer}
.lnk:hover{text-decoration:underline}

/* ========== النماذج ========== */
.form{padding:28px;display:flex;flex-direction:column;gap:26px}
.form > .field,.group > .field,.stack > .field{flex:none} /* داخل عمود: الحقل بطوله الطبيعي */
.group{display:flex;flex-direction:column;gap:14px}
.group > h3{padding-bottom:8px;border-bottom:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:16px}
.field{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px}
label,.label-like{font-size:14px;font-weight:500}
input,select,textarea{width:100%;border:1px solid var(--input);border-radius:8px;padding:10px 12px;background:#fff;color:var(--text)}
input,select{height:44px;padding-block:0} /* بلا حشو عمودي: كان يقصّ ذيول الحروف العربية في القوائم المنسدلة */
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;margin:0;padding:0;flex-shrink:0}
input[readonly]{background:var(--field-ro);color:var(--muted)}
textarea{resize:vertical}
::placeholder{color:var(--placeholder)}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:13px}
.field.f-type{flex:0 1 200px}
.field.f-period{flex:1 1 380px}
.row.end{justify-content:flex-end}
.actions .push{margin-inline-start:auto;font-size:14px}
.hint.bad{color:var(--bad-text)}
.actions{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
input[type="file"]{height:auto;padding:8px}
.logo-now{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* رسائل التحقق (ASP.NET) */
.input-validation-error{border-color:var(--bad)}
.field-validation-error{color:var(--bad-text);font-size:12.5px}
.validation-summary-errors{background:var(--bad-soft);color:var(--bad-text);border-radius:10px;padding:10px 14px;font-size:13.5px}
.validation-summary-errors ul{margin:0;padding-inline-start:18px}
.validation-summary-valid,.field-validation-valid{display:none}

/* حالة فارغة */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px}
.empty-state .s-icon{width:48px;height:48px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:4px}

/* عمود صفحة بلا تخطيط جانبي (الإشعارات) */
.page-stack{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ========== جرس الإشعارات ========== */
.bell{position:relative;flex-shrink:0}
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--text);text-decoration:none}
.bell-btn:hover{background:rgba(127,127,127,.14)}
.bell-label{display:none}
.bell-count{position:absolute;top:1px;inset-inline-end:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bell-panel{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:30;width:340px;max-height:70vh;overflow:auto;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(27,42,77,.18);padding:10px;text-align:start}
/* في القائمة الجانبية: بند مثل بقية البنود، والقائمة تنفتح بجانبها */
.sidebar .bell{margin-top:6px}
.sidebar .bell-btn{width:100%;height:auto;justify-content:flex-start;gap:10px;padding:11px 12px;border-radius:8px;color:rgba(255,255,255,.82);font-size:14px;font-weight:500}
.sidebar .bell-btn:hover{background:rgba(255,255,255,.08)}
.sidebar .bell-btn[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.sidebar .bell-label{display:inline}
.sidebar .bell-count{position:static;margin-inline-start:auto;font-size:11px;padding:2px 7px;height:auto;line-height:1.4}
.sidebar .bell-panel{top:0;inset-inline-end:auto;inset-inline-start:calc(100% + 10px)}
@media (max-width:860px){
  /* القائمة الجانبية صارت شريطًا علويًا: الجرس أيقونة بجانب الشعار، وقائمته بعرض الشاشة */
  .sidebar .bell{margin:0}
  .sidebar .bell-btn{width:40px;height:40px;padding:0;justify-content:center;color:#fff}
  .sidebar .bell-label{display:none}
  .sidebar .bell-count{position:absolute;top:1px;inset-inline-end:-2px;padding:0 5px;height:18px;line-height:18px}
  .sidebar .bell-panel{position:fixed;top:64px;inset-inline-start:12px;inset-inline-end:auto;width:min(420px, calc(100vw - 24px));max-height:calc(100vh - 160px)} /* فوق شريط الجوال */
}
.bell-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.bell-head form{margin:0}
.bell-head .lnk{font-size:12.5px}
.bell-all{display:block;text-align:center;margin-top:6px}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.notes li + li{border-top:1px solid var(--line)}
.notes a{display:flex;flex-direction:column;gap:2px;padding:10px 8px;color:var(--text);text-decoration:none;border-inline-start:3px solid transparent}
.notes a:hover{background:#FAFBFC}
.notes .note-text{font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.notes li.unread a{border-inline-start-color:var(--teal);background:#F4FAF9}
.notes li.unread .note-text{font-weight:600}
.notes-empty{padding:16px 8px;text-align:center}
.notes-card{padding:6px 12px}

/* ========== لوحة المتابعة ========== */
.head-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.head-tools .seg{height:42px;min-width:170px}
.seg-links a{flex:1;display:flex;align-items:center;justify-content:center;padding:0 12px;background:#fff;color:var(--text);font-weight:500;text-decoration:none}
.seg-links a[aria-current="true"]{background:var(--teal);color:#fff;font-weight:600}
.weeknav .btn[aria-disabled="true"],.rnav .btn[aria-disabled="true"]{opacity:.45;cursor:default}
.head-line{font-size:12.5px;font-weight:400}
.board-empty{padding:16px 20px;text-align:center}
td .acts form{margin:0;display:inline-flex}
td.meta .dots{margin-inline-start:6px}
.m-sent{margin-inline-end:8px}
.filters .filter{display:inline-flex;align-items:center;gap:8px;min-width:0}
.filters input[type="date"]{height:38px;width:auto;font-size:14px}

/* ========== «وحداتي» (المرحلة 5، 14.8) ==========
   الوحدات بترتيب الشجرة (الإزاحة بالعمق --depth)، كل وحدة details مطويّة إلا وحدته: سطرها اسمها وشاراتها ورؤساؤها،
   وتحتها من تحته منها بأعمدة «حالة الحساب» و«آخر دخول» والتجميد. على الجوال كل شخص سطور تحت بعضها. */
.chip{display:inline-flex;align-items:center;padding:1px 10px;border-radius:999px;background:#EEF0F3;color:var(--muted);font-size:12px;font-weight:600;line-height:1.7;white-space:nowrap}
.chip.rep{background:var(--teal-soft);color:#1D5C63}
.chip.off{background:#EEF0F3;color:var(--muted);font-weight:500}
.myunits{padding:0;overflow:hidden}
.units-search{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.units-search input{flex:0 1 460px}
.units-cols,.people li{display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px;column-gap:16px;align-items:center}
.units-cols{padding:9px 20px;background:var(--field-ro);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}
.myunits .board-empty{border-bottom:1px solid var(--line)}
/* «وحداتي» مفتوحة كلها وبمستوى واحد (3.5): الوحدة عنوان لا يُضغط وتحته من فيها مباشرة؛ وحدته بلا إزاحة، والباقي بإزاحة واحدة */
section.unit{--depth:1}
section.unit.mine{--depth:0}
section.unit + section.unit{border-top:1px solid var(--line)}
.unit > .u-name{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0;padding:11px 20px;padding-inline-start:calc(20px + var(--depth) * 22px);background:#F7F9FA;font-size:15px}
.u-name b{font-size:15px;font-weight:600}
.u-mark{display:inline-flex;color:#AEB7C2;flex-shrink:0}
.u-name .u-mark{margin-inline-start:-20px;margin-inline-end:2px;align-self:flex-start;margin-top:3px}
.people{list-style:none;margin:0;padding:0}
.people li{padding:11px 20px;padding-inline-start:calc(20px + var(--depth) * 22px);border-top:1px solid var(--line);scroll-margin-top:16px}
.people li:target{background:#F4FAF9}
.people .who{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.people .who b{font-weight:600;overflow-wrap:anywhere}
.people .who small{color:var(--muted);font-size:12.5px}
.people .info{display:contents} /* على الكمبيوتر الحالة وآخر دخول عمودان؛ وعلى الجوال سطر واحد تحت الاسم */
.people .acc{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;white-space:nowrap}
.people .acc::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.people .acc.off::before{background:var(--bad)}
.people .last{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.people form{margin:0;justify-self:end}

/* «الوحدات» عند المسؤول (14.8): الاسم بإزاحة عمقه وعلامة الفرع، والتزاماتها شارات (الموقوف رمادي) */
.tree-name{display:inline-flex;align-items:center;gap:4px;padding-inline-start:calc(max(0, var(--depth) - 1) * 22px)}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}

/* العضويات في صفحة الحساب (14.8): الوحدة ومسارها يمينًا، و«يُكلَّف من فوق» والموضع (قائمة بشكل شارة) و«إزالة» يسارًا */
.memberships{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.memberships li{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 16px}
.memberships li + li{border-top:1px solid var(--line)}
.m-unit{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.m-unit a{color:var(--text);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.m-unit a:hover{color:var(--teal);text-decoration:underline}
.m-unit small{color:var(--muted);font-size:12.5px}
.m-change{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0}
.m-remove{margin:0}
select.chip-select{width:auto;height:32px;padding:0 12px;border:1px solid transparent;border-radius:999px;background-color:#EEF0F3;color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
select.chip-select.head{background-color:var(--teal-soft);color:#1D5C63}
.lnk.bad{color:var(--bad-text)}
.add-membership{display:flex;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin:0}
.add-membership .f-unit{flex:2 1 240px}
.add-membership .f-pos{flex:1 1 140px}
.add-membership .check{height:44px}
.add-membership .m-error{flex-basis:100%}

/* ========== اختيار المكلَّف في «تكليف جديد» (14.8) ==========
   من تحته مجمّعون بالوحدات في صندوق يُمرَّر، والبحث في أعلاه ثابت (يظهر مع JavaScript فقط) */
fieldset.picker{border:none;margin:0;padding:0;min-width:0}
fieldset.picker > legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:500}
.picker-box{position:relative;border:1px solid var(--input);border-radius:10px;max-height:min(440px, 62vh);overflow:auto;background:#fff;overscroll-behavior:contain}
.picker-box:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.picker-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);color:var(--muted)}
.picker-search input{flex:1;min-width:0;height:46px;border:none;border-radius:0;padding:0;background:transparent}
.picker-search input:focus-visible{outline:none}
.picker-unit{padding:7px 16px;background:#F3F6F7;border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600}
.picker-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer;font-weight:400}
.picker-row:hover{background:#FAFBFC}
.picker-row:has(input:checked){background:#EAF5F4}
.picker-row input[type="radio"]{width:18px;height:18px;accent-color:var(--teal)}
.picker-row .who{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.picker-row .who b{font-weight:600;overflow-wrap:anywhere}
.picker-row .who small{color:var(--muted);font-size:12.5px}
.picker-box > .picker-group:last-of-type > .picker-row:last-child{border-bottom:none}
.picker-empty{padding:18px 16px;text-align:center}
fieldset.picker > .hint{display:block;margin-top:6px}

/* نماذج التقارير (المسؤول): صفوف الأقسام، وقائمة الأقسام في الجدول */
.tsections{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.tsections legend{padding:0;margin-bottom:2px}
.tsec{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.tsec .n{width:22px;text-align:center;color:var(--muted);font-size:13px;line-height:44px;flex-shrink:0}
.tsec-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tsec-opts{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:44px}
.tsec-opts .check,.tsec-foot .check{white-space:nowrap}
.tsec-acts{display:inline-flex;gap:4px;align-items:center}
.tsec-acts .btn{width:36px;padding:0;justify-content:center}
.tsec-acts .rm{width:36px;height:36px;border:none;background:transparent;color:var(--placeholder);border-radius:8px;cursor:pointer;font-size:20px;line-height:1}
.tsec-acts .rm:hover{background:var(--bad-soft);color:var(--bad-text)}
.tsec-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.tsec-foot .add{margin-inline-start:0}
.tsec-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:2px}
.tag{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:6px;background:var(--teal-soft);color:var(--navy);font-size:11.5px;font-weight:600}
.tbadge{margin-inline-start:8px;vertical-align:middle}
.m-label{display:none}

/* إشعارات الجوال: الزر في قائمة الحساب، والرسالة القصيرة أسفل الشاشة */
.push-toggle{background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;white-space:nowrap}
.push-toggle:disabled{opacity:.6;cursor:default}
.push-msg{position:fixed;bottom:16px;inset-inline:16px;margin:0 auto;max-width:520px;background:var(--navy);color:#fff;border-radius:10px;padding:12px 16px;font-size:13.5px;line-height:1.7;box-shadow:0 6px 24px rgba(16,24,40,.25);z-index:60}

/* رسالة الحساب الجاهزة للنسخ، وسجل حالة الفرع */
.copybox{min-height:150px;line-height:1.75;background:var(--field-ro);resize:none}
.history{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--muted)}

/* تنبيهات */
.notice{background:var(--teal-soft);color:var(--navy);border-radius:10px;padding:10px 16px;font-size:13.5px}
.notice.bad{background:var(--bad-soft);color:var(--bad-text)}
/* (3.7) ما على الجهاز ولم يُحفظ: لون تنبيه لا لون النجاح */
.notice.warn{background:var(--warn-soft);color:var(--warn-text)}
.notice.warn .lnk{color:var(--warn-text)}
.notice .when{white-space:nowrap}
.statusbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:13px}
.statusbar .push{margin-inline-start:auto}

/* ========== محرر البنود ========== */
.req{color:var(--bad-text);font-weight:600;margin-inline-start:4px}
.items{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:flex-start;gap:8px}
.item .n{width:26px;text-align:center;color:var(--muted);font-size:13px;flex-shrink:0;line-height:44px}
.item textarea{flex:1;min-height:44px;height:44px;resize:none;overflow:hidden;line-height:1.5;padding:10px 12px}
.item .rm{width:36px;height:44px;border:none;background:transparent;color:var(--placeholder);border-radius:8px;cursor:pointer;font-size:20px;line-height:1;flex-shrink:0}
.item .rm:hover{background:var(--bad-soft);color:var(--bad-text)}
.item .rm:disabled{cursor:default;opacity:.5}
.item .ibody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.item .ibody textarea{flex:none;width:100%}
.item textarea:disabled{background:var(--field-ro);color:var(--muted)}
.item .cnt{align-self:flex-end;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.item .cnt.over{color:var(--bad-text);font-weight:600}
.add:disabled{opacity:.55;cursor:default}
.notice .reason{margin-top:4px;white-space:pre-line;overflow-wrap:anywhere}
.notice .lnk{padding:0 4px;font-size:13.5px}
#save-status.bad{color:var(--bad-text);font-weight:500}
#notices:empty{display:none}
.seg button:disabled{cursor:default}
.seg button:disabled:not([aria-pressed="true"]){background:var(--field-ro);color:var(--placeholder)}
.reason-line{margin-top:3px;font-size:12.5px;font-weight:400;white-space:pre-line;overflow-wrap:anywhere}
.add{align-self:flex-start;height:38px;padding:0 14px;border:1px dashed var(--input);border-radius:8px;background:#fff;color:var(--teal);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-inline-start:34px}
.add:hover{background:var(--teal-soft)}

/* ========== مفتاح الاختيار واختيار الفترة ========== */
.seg{display:flex;border:1px solid var(--input);border-radius:8px;overflow:hidden;height:44px}
.seg button{flex:1;border:none;background:#fff;color:var(--text);font-weight:500;cursor:pointer;padding:0 12px}
.seg button[aria-pressed="true"]{background:var(--teal);color:#fff;font-weight:600}
.period{display:flex;align-items:stretch;border:1px solid var(--input);border-radius:8px;min-height:44px;background:#fff;overflow:hidden}
.period .pbtn{width:44px;border:none;background:var(--field-ro);color:var(--teal);font-size:20px;cursor:pointer;flex-shrink:0}
.period .pbtn:disabled{color:#B5BEC8;cursor:default}
.period .ptext{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3;min-width:0;padding:5px 8px}
.period .ptext b{font-size:14px;font-weight:600}
.period .ptext span{font-size:13px;color:var(--muted);text-align:center}

/* ========== الحالات (نقطة ملوّنة + نص) ========== */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neutral);flex-shrink:0}
.badge.s-pending::before{background:var(--warn)}
.badge.s-approved::before{background:var(--ok)}
.badge.s-returned::before,.badge.s-late::before{background:var(--bad)}
.badge.s-draft::before,.badge.s-notyet::before{background:var(--neutral)}

/* ========== الجداول (بطاقات على الجوال) ========== */
.table-wrap{overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.table-wrap th,.table-wrap td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table-wrap th{background:var(--field-ro);font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 14px;white-space:nowrap}
.table-wrap tbody tr:hover{background:#FAFBFC}
td.m{color:var(--muted)}
td.b{font-weight:500}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
td.m-only{display:none} /* سطر ملخّص يظهر على الجوال فقط */
.filters{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filters select{height:38px;width:auto;min-width:140px;font-size:14px}
.filters label{color:var(--muted);font-weight:400;font-size:14px}
.pager{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pager .btns{display:flex;gap:6px}
.archive-filters .filters{border-bottom:none} /* أرشيف التكليفات: التصفية وحدها في بطاقتها، والبطاقات تحتها */
.archive-filters .filter.wide input{width:280px;max-width:100%;height:38px;font-size:14px}
@media (max-width:760px){.card.tbl.archive-filters .filters{margin-bottom:0}.archive-filters .filter.wide input{flex:1;width:auto;min-width:0}}
tr.is-draft{background:#FAFBFC}
.legend{display:flex;align-items:center;gap:4px}

/* ========== التبويبات وشريط الملخص ========== */
.tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tab-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.tab{height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.tab span{font-size:12px;font-weight:700;background:#EEF0F3;color:#3F4752;padding:1px 7px;border-radius:999px}
.tab[aria-current="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.tab[aria-current="true"] span{background:rgba(255,255,255,.22);color:#fff}
.tabs-end{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs-end input{height:38px;width:240px}
.summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 18px}
.summary .s-icon{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.summary .s-text{display:flex;flex-direction:column;gap:2px;flex:1 1 260px;min-width:0}
.summary .s-text b{font-size:16px}
.summary .s-bar{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;min-width:160px}
.summary .s-track{height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.summary .s-fill{height:100%;background:var(--teal);border-radius:999px}
.summary .s-bar .sub{font-size:12.5px}

/* آخر 4 فترات */
.dots{display:inline-flex;gap:8px;vertical-align:middle}
.dots i{width:14px;text-align:center;color:var(--teal);font-style:normal;font-size:13px;font-weight:700;cursor:default;display:block}
.dots i.x{color:var(--bad);font-weight:400}
.dots i.n{color:#B5BEC8}

/* ========== النافذة المنبثقة ========== */
.modal{position:fixed;inset:0;background:rgba(27,42,77,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal[hidden]{display:none}
.mbox{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:calc(100vh - 32px);overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mclose{border:none;background:none;font-size:24px;color:var(--muted);cursor:pointer;width:36px;height:36px}
.mlist{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.mrow .mtxt{flex:1 1 220px;font-size:14.5px}
.mseg{height:36px;flex:0 0 auto}
.mseg button{padding:0 12px;font-size:13px}
.mseg button[aria-pressed="true"][data-v="done"]{background:var(--ok-strong)}
.mseg button[aria-pressed="true"][data-v="carry"]{background:var(--teal)}
.mseg button[aria-pressed="true"][data-v="skip"]{background:var(--muted)}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}

/* ========== صفحة التدقيق ========== */
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rnav{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 8px}
.rview{display:flex;flex-direction:column;gap:14px}
.rsec{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.rsec h2{background:var(--teal-soft);color:var(--text);padding:12px 18px;font-size:15px;border-inline-start:4px solid var(--teal)}
.rsec ol{margin:0;padding:8px 36px 12px 18px}
.rsec li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
.rsec li:last-child{border-bottom:none}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.tl li::before{content:"•";color:var(--teal);margin-inline-end:8px}
.tl-note{color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.rsec-none{margin:0;padding:12px 18px;color:var(--muted)}
.card-title{font-size:14px;color:var(--muted);margin-bottom:8px}
.back-link{text-decoration:none;font-size:13px}
.decide-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.decide-acts .push{margin-inline-start:auto}
.decide-acts form{margin:0}

/* ========== التكليفات (المرحلة 3ج) ========== */
.sidebar .count.late{background:#F08A80;color:#fff}
.asg-filter select{width:auto;min-width:150px;height:38px;font-size:14px}
.asg-list{display:flex;flex-direction:column;gap:12px}
/* بطاقة التكليف (2.25): على الكمبيوتر المحتوى يمينًا ومربع الموعد يسارًا، و«من …» والسجل والأزرار في سطر واحد */
.asg{display:grid;grid-template-columns:minmax(0,1fr) auto 168px;grid-template-areas:"top top due" "body body due" "meta acts due";column-gap:20px;row-gap:8px;align-items:start;scroll-margin-top:16px}
.asg:target{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.asg-top{grid-area:top;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.asg-branch{font-size:15px}
.asg-body{grid-area:body;display:flex;flex-direction:column;gap:8px;min-width:0}
.asg-text{font-size:15.5px;font-weight:500;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}
.asg-meta{grid-area:meta;align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:13px;color:var(--muted);min-width:0}
.asg-meta .asg-log[open]{flex-basis:100%}
/* مربع الموعد: التاريخ وتحته الحالة بلونها */
.asg-due{grid-area:due;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;border-radius:12px;text-align:center;background:#F4F7F9;border:1px solid var(--line)}
.asg-due small{font-size:12px;color:var(--muted)}
.asg-due b{font-size:17px;font-weight:700;color:var(--text)}
.asg-due span{font-size:12.5px;font-weight:700;color:var(--teal)}
.asg-due.soon{background:#FFF7E6;border-color:#F0CF8A}
.asg-due.soon span{color:#93600A}
.asg-due.late{background:#FDF0F0;border-color:#EDB4B4}
.asg-due.late span{color:var(--bad-text)}
.asg-due.done{background:#EEF8F3;border-color:#B5DFC9}
.asg-due.done span{color:#1F7A4D}
.asg-due.cancelled span{color:var(--muted)}
.asg-meta a{text-decoration:none}
.asg-meta a:hover{text-decoration:underline}
.asg .late{color:var(--bad-text);font-weight:600}
.asg-reply{background:var(--field-ro);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}
.asg-reply .reason{white-space:pre-line;overflow-wrap:anywhere;margin-top:2px}
.asg-log summary{cursor:pointer;color:var(--teal);font-size:13px;font-weight:600;width:max-content}
.asg-log .tl{margin-top:8px}
.asg-acts{grid-area:acts;align-self:center;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;justify-content:flex-end}
/* نموذج مفتوح (تغيير الموعد، الإلغاء، تم التنفيذ…): الأزرار ونموذجها في سطر بعرض البطاقة */
.asg:has(.asg-do[open]){grid-template-areas:"top top due" "body body due" "meta meta due" "acts acts acts"}
.asg:has(.asg-do[open]) .asg-acts{justify-content:flex-start;border-top:1px solid var(--line);padding-top:12px}
.asg-acts form{margin:0}
.asg-do{min-width:0}
/* النموذج المفتوح وزره سطر بعرض البطاقة تحت الأزرار الأخرى، وهي باقية في سطر واحد (2.25) */
.asg-do[open]{flex-basis:100%;order:1}
.asg-do > summary{list-style:none}
.asg-do > summary::-webkit-details-marker{display:none}
.asg-do[open] > summary{background:var(--teal-soft);border-color:var(--teal)}
.asg-do[open] > summary.btn-primary{color:var(--navy)} /* «تم التنفيذ» مفتوحًا: نص داكن على الخلفية الفاتحة */
.asg-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#FAFBFC}
.asg-form .field{flex:1 1 200px}
.asg-form .field.wide{flex-basis:100%}
.asg-form input[type="date"]{max-width:240px}
.field .cnt{align-self:flex-end;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.field .cnt.over{color:var(--bad-text);font-weight:600}
.field.f-due{max-width:320px}

/* ========== صفحة الدخول ========== */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login .box{width:100%;max-width:440px;display:flex;flex-direction:column;gap:24px}
.login .hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.login .hero h1{font-size:24px}
.login .logo{width:56px;height:56px;border-radius:14px}
.login .logo.custom{width:auto;height:72px;min-width:72px;max-width:220px;padding:6px}
.login .logo.custom img{height:58px;max-width:206px}
.login .foot{text-align:center;font-size:12.5px}
form.foot{display:flex;justify-content:center;margin:0}

/* صفحات الدخول (2.18، بطلب أحمد): تدرّج ونقش هندسي خفيف كنظام المواعيد الذي بناه، والاسم أبيض فوق البطاقة.
   (2.19) بألوان شعار الإدارة: كحلي إلى تركوازي، بدل الأخضر */
.login{position:relative;background:#152A51 linear-gradient(150deg,#0C1A36 0%,#152A51 48%,#1D6F74 100%)}
.login::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20L10 0h20l10 20-10 20H10z' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3Cpath d='M20 0l20 10v20L20 40 0 30V10z' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3C/svg%3E")}
.login .box{position:relative}
.login .hero h1{color:#fff}
.login .hero .sub{color:rgba(255,255,255,.85)}
.login .logo{background:rgba(255,255,255,.16);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.login .logo.custom{background:#fff;border-color:transparent}
.login .card{border:none;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08)}
.login .box > .btn-primary{background:#fff;border-color:#fff;color:var(--navy)} /* زر صفحة الخطأ: على الخلفية الداكنة مباشرة */
.login .foot,.login .foot .lnk,.login .foot a{color:rgba(255,255,255,.9)}

/* «إظهار كلمة المرور» (2.18): زر عين داخل الخانة، يظهر مع JavaScript فقط */
.pw{position:relative}
.pw input{padding-left:46px}
.pw-toggle{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:40px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:var(--text);background:rgba(127,127,127,.1)}
.pw-toggle .pw-show,.pw-toggle .pw-hide{display:inline-flex}
.pw-toggle .pw-hide,.pw-toggle[aria-pressed="true"] .pw-show{display:none}
.pw-toggle[aria-pressed="true"] .pw-hide{display:inline-flex}

/* ========== الجوال ========== */
@media (max-width:760px){
  .content{padding:16px 16px 40px}
  h1{font-size:20px}
  .pagehead{align-items:stretch;flex-direction:column}
  .weeknav{justify-content:space-between;width:100%;min-width:0}
  .weeknav .wk{font-size:13px;flex:1;text-align:center;white-space:normal}
  .weeknav .btn{padding:0 6px;font-size:12px;white-space:nowrap}
  .tab{height:36px;padding:0 10px;font-size:13px}
  /* تبويبات الصفحة سطر واحد يُسحب أفقيًا حتى حافتي الشاشة (2.17)، والحالي يظهر دائمًا (site.js) */
  .tab-row{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .tab-row::-webkit-scrollbar{display:none}
  .tab-row .tab{flex-shrink:0}
  .tabs-end{margin:0;width:100%}
  .tabs-end input{flex:1;width:auto;min-width:0}
  .summary .btn{width:100%}
  .filters{gap:8px}
  .filters select{flex:1;min-width:0}
  .period .ptext span{font-size:12px}

  /* الجدول يصبح بطاقات */
  .card.tbl{background:transparent;border:none;border-radius:0;padding:0}
  .card.tbl .filters{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px}
  .table-wrap{overflow:visible}
  .table-wrap table.cards{min-width:0;display:block}
  table.cards thead{display:none}
  table.cards tbody{display:flex;flex-direction:column;gap:10px}
  table.cards tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
  table.cards tbody tr:hover{background:#fff}
  table.cards td{display:block;padding:0;border:none}
  table.cards td.idx,table.cards td.d{display:none}
  table.cards td.name{flex:1 1 auto;font-weight:600;font-size:15px;order:1;min-width:0}
  table.cards td.state{order:2;margin-inline-start:auto}
  table.cards td.meta{display:block;order:3;flex-basis:100%;color:var(--muted);font-size:13px}
  table.cards td.meta:empty{display:none}
  table.cards td.act{order:4;flex-basis:100%;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
  table.cards td.act:empty{display:none}
  table.cards td .acts{width:100%;justify-content:stretch}
  table.cards td .acts > *{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--input);border-radius:8px;color:var(--text);font-weight:500;text-decoration:none}
  table.cards td .acts > .btn-primary{color:#fff}
  .legend{display:none}
  .pager{padding:12px 4px}
  table.cards td .acts > form{border:none;padding:0;height:auto}
  table.cards td .acts > form > button{flex:1;width:100%;height:40px;border:1px solid var(--input);border-radius:8px;background:#fff;color:var(--text);font-weight:500;font-size:14px}
  table.cards td .acts > form > .btn-green{background:var(--ok-strong);border-color:var(--ok-strong);color:#fff}
  table.cards td .acts > form > .btn-danger{color:var(--bad-text)}
  table.cards .m-label{display:inline}
  table.cards.templates td.meta{color:var(--text)}
  table.cards .last-report{display:none}
  .tsec{flex-wrap:wrap}
  .tsec-opts{flex-basis:100%;padding-inline-start:32px;min-height:0}
  .tsec-acts{margin-inline-start:auto}
  .board-empty{background:#fff;border:1px solid var(--border);border-radius:12px}
  .filters .filter{flex:1 1 140px}
  .filters .filter.wide{flex-basis:100%}
  .filters .filter select,.filters .filter input[type="date"]{flex:1;min-width:0}
  .head-tools{width:100%}
  .head-tools .seg{flex:1 1 100%}
  .decide-acts .btn{flex:1 1 45%}
  .decide-acts .push{margin:0}

  .review-head{flex-direction:column;align-items:stretch}
  .form{padding:18px}
  .actions .btn{flex:1 1 45%}
  .actions .btn-link{flex-basis:100%;text-align:center;margin:4px 0 0}
  .item .n{display:none}
  .add{margin-inline-start:0}

  /* التكليفات: «تكليف جديد» والأزرار بعرض البطاقة، والفورم المفتوح بعرضها كله */
  .head-tools > .btn{flex:1 1 100%}
  .asg-filter input,.asg-filter select{flex:1 1 100%}
  /* البطاقة (2.25): عمود واحد، والموعد شريط ملوّن تحت الرأس، والأزرار في سطر واحد بعرضها */
  .asg,.asg:has(.asg-do[open]){grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "due" "body" "meta" "acts"}
  .asg-due{justify-self:start;align-self:start;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 6px;padding:4px 12px;border-radius:999px;text-align:start}
  .asg-due small{font-size:12.5px}
  .asg-due b{font-size:13.5px}
  .asg-due span{font-size:13px}
  .asg-due span::before{content:"· ";color:var(--muted);font-weight:400}
  .asg-acts,.asg:has(.asg-do[open]) .asg-acts{justify-content:stretch;border-top:1px solid var(--line);padding-top:12px}
  .asg-acts > form,.asg-acts > details{flex:1 1 0;min-width:0}
  .asg-acts .btn{width:100%;padding-inline:6px;white-space:nowrap}
  .asg-form input[type="date"]{max-width:none}
  .field.f-due{max-width:none}

  /* «وحداتي»: سطر الوحدة يلتف (رؤساؤها تحت اسمها)، وكل شخص سطور تحت بعضها والتجميد يسارها */
  .units-search{flex-direction:column;align-items:stretch;padding:14px 16px}
  .units-search input{flex:none}
  .units-cols{display:none}
  .unit > .u-name{padding:12px 16px;padding-inline-start:calc(16px + var(--depth) * 14px)}
  .u-name .u-mark{margin-inline-start:-16px}
  /* الاسم والزر، وتحتهما الحالة وآخر دخول في سطر واحد بعرض المربع */
  .people li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who act" "info info";row-gap:4px;padding:12px 16px;padding-inline-start:calc(16px + var(--depth) * 14px)}
  .people .who{grid-area:who}
  .people .info{grid-area:info;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-width:0}
  .people .last{font-size:13px}
  .people .m-label{display:inline}
  .people form{grid-area:act;align-self:center}

  /* العضويات: «إضافة عضوية» بعرض البطاقة */
  .memberships li{padding:12px 14px}
  .add-membership .add-m{flex:1 1 100%}
}

/* ========== شريط الجوال و«حسابي» (المرحلة 3د، المواصفة 8، 2.17) ==========
   تحت 860px للجميع: الشريط العلوي فيه الاسم والشعار والجرس فقط، والتنقل نفسه (nav.tabbar) شريط تبويبات ثابت
   في أسفل الشاشة بأيقونات وأسماء قصيرة، وآخره «حسابي» (أو «المزيد»، 14.8). على الكمبيوتر كما كان. */
.short,.account{display:none}
@media (max-width:860px){
  html{scroll-padding-top:76px} /* الشريط العلوي ثابت: رابط لبطاقة (#…) لا يخفيها تحته */
  .sidebar{position:sticky;top:0;z-index:20}
  .brand{min-width:0}
  .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  nav.tabbar{position:fixed;bottom:0;inset-inline:0;z-index:40;display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;width:auto;margin:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(27,42,77,.06);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  nav.tabbar > a,nav.tabbar .account > summary{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px;border-radius:10px;background:none;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:500;line-height:1.3;white-space:nowrap}
  nav.tabbar > a:hover{background:none}
  nav.tabbar > a > svg,nav.tabbar .account > summary > svg{display:block;width:22px;height:22px;padding:3px 14px;box-sizing:content-box;border-radius:999px;opacity:1}
  nav.tabbar > a[aria-current="page"],nav.tabbar .account[open] > summary{background:none;color:var(--teal);font-weight:700}
  nav.tabbar > a[aria-current="page"] > svg,nav.tabbar .account[open] > summary > svg{background:var(--teal-soft)}
  nav.tabbar .t{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  nav.tabbar .long{display:none}
  nav.tabbar .short{display:inline}
  nav.tabbar .count{position:absolute;top:1px;inset-inline-start:calc(50% + 8px);margin:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  nav.tabbar .count.late{background:var(--bad);color:#fff}
  /* أكثر من 4 أقسام (14.8): الباقي في «المزيد»، و«المزيد» كالقسم الحالي إن كانت الصفحة منها */
  nav.tabbar > a.more{display:none}
  nav.tabbar .account.here > summary{color:var(--teal);font-weight:700}
  nav.tabbar .account.here > summary > svg{background:var(--teal-soft)}
  .shell .content{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .push-msg{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* أثناء الكتابة يُخفى الشريط، فلا يغطي الحقل فوق لوحة المفاتيح؛ والصنف typing يضعه site.js ويرفعه بعد ترك الحقل بلحظة،
     فلا يعود الشريط تحت إصبع ضغط زرًا أسفل الشاشة (كان يعود فورًا مع ترك الحقل، فيذهب الضغط إليه بدل الزر) */
  html.typing nav.tabbar{display:none}

  /* «حسابي»: لوحة من الأسفل. الخلفية المعتمة جزء من summary، فالضغط عليها يغلق اللوحة (بلا JavaScript) */
  nav.tabbar .account{display:flex;flex:1 1 0;min-width:0}
  .account > summary{list-style:none;cursor:pointer}
  .account > summary::-webkit-details-marker{display:none}
  .account[open] > summary::before{content:"";position:fixed;inset:0;z-index:1;background:rgba(16,24,40,.38);cursor:default}
  .sheet{position:fixed;inset-inline:0;bottom:0;z-index:2;display:flex;flex-direction:column;max-height:85vh;overflow:auto;background:#fff;color:var(--text);border-radius:18px 18px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(16,24,40,.2);text-align:start;font-size:15px}
  .sheet::before{content:"";flex-shrink:0;width:42px;height:4px;border-radius:999px;background:#D0D5DD;margin:2px auto 12px}
  .sheet .who{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--line)}
  .sheet .av{width:44px;height:44px;flex-shrink:0;border-radius:999px;background:var(--teal-soft);color:var(--navy);display:flex;align-items:center;justify-content:center}
  .sheet .who b{display:block;font-size:15px;font-weight:600}
  .sheet .who small{display:block;color:var(--muted);font-size:13px}
  nav.tabbar .sheet-row,nav.tabbar .sheet .push-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px;border:none;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--text);font-size:15px;font-weight:500;text-align:start;text-decoration:none;cursor:pointer}
  nav.tabbar .sheet-row svg{opacity:1;color:var(--muted)}
  nav.tabbar .sheet-row[aria-current="page"]{color:var(--teal);font-weight:700}
  nav.tabbar .sheet-row[aria-current="page"] svg{color:var(--teal)}
  .sheet .sheet-row + .who{padding-top:14px}
  /* زر الإشعارات يغيّر push.js نصه، فأيقونته من CSS */
  nav.tabbar .sheet .push-toggle::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");content:"";width:20px;height:20px;flex-shrink:0;background:var(--muted);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  .sheet form{margin:0}
  nav.tabbar .sheet-out{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;margin-top:16px;border:1px solid #F4C7C3;border-radius:10px;background:#FEF3F2;color:#B42318;font-size:15px;font-weight:700;cursor:pointer}
}