/* ================================================================
   نظام شؤون الموظفين — «دفتر تنفيذي»
   فاتح كامل — أبيض وعاجي #EFEDE6 · نحاس #A8863B · حبر #22252B (خيار ٦)
   Amiri (عناوين/شعار) + IBM Plex Sans Arabic (واجهة)
   ================================================================ */

:root {
  --qar: #22252B;
  --qar-2: #2C2F36;
  --qar-3: #383C44;
  --ivory: #EFEDE6;
  --paper: #FFFFFF;
  --brass: #A8863B;
  --brass-deep: #8F7132;
  --brass-soft: #F3EBD7;
  --ink: #23262C;
  --muted: #70747C;
  --line: #E5E1D8;
  --line-strong: #D4CFC2;
  --ok: #2F6B45;      --ok-soft: #E9F1EB;
  --warn: #9A5B17;    --warn-soft: #F7EEDC;
  --stop: #8E2431;    --stop-soft: #F8E9EA;
  --shadow-1: 0 1px 2px rgba(23, 26, 33, .05), 0 6px 18px rgba(23, 26, 33, .05);
  --shadow-2: 0 2px 6px rgba(23, 26, 33, .08), 0 14px 34px rgba(23, 26, 33, .10);
  --r: 10px;
  --side-w: 250px;
  --display: "Amiri", "Noto Naskh Arabic", serif;
  --ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.9;
}
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- الصدفة: شريط جانبي + محتوى ---------------- */

body.app { display: flex; min-height: 100vh; }

.side {
  width: var(--side-w);
  flex: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F5EE 100%);
  border-inline-start: 1px solid var(--line);
  color: #5A5E66;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.4rem 1.3rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.mark {
  width: 30px; height: 30px; flex: none;
  border: 1.6px solid var(--brass);
  transform: rotate(45deg);
  position: relative;
  background: linear-gradient(135deg, rgba(168, 134, 59, .28), transparent 65%);
}
.mark::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(168, 134, 59, .55);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-text strong {
  font-family: var(--display);
  font-size: 1.18rem;
  color: #1C1F26;
  letter-spacing: .01em;
}
.brand-text small { color: #8F9299; font-size: .68rem; letter-spacing: .06em; }

.nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .52rem .75rem;
  color: #5A5E66;
  text-decoration: none;
  border-radius: 7px;
  font-size: .92rem;
  border-inline-start: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(34, 37, 43, .045); color: #22252B; }
.nav-link.is-active {
  background: rgba(168, 134, 59, .12);
  color: var(--brass-deep);
  border-inline-start-color: var(--brass);
  font-weight: 500;
}
.nav-link .ic { width: 18px; height: 18px; flex: none; display: inline-flex; opacity: .85; }
.nav-link .ic svg { width: 100%; height: 100%; }

.side-foot {
  padding: 1rem 1.3rem 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.who-name { color: #22252B; font-weight: 500; font-size: .92rem; }
.who-role { color: var(--brass-deep); font-size: .72rem; letter-spacing: .08em; }
.side-foot form { margin-top: .6rem; }
.logout {
  width: 100%;
  padding: .42rem;
  background: transparent;
  color: #70747C;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.logout:hover { color: var(--brass-deep); border-color: var(--brass); }

.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 2.2rem .95rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ivory) 60%, #FFFFFF);
}
.page-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--qar);
}
.page-title::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border: 1.4px solid var(--brass);
  transform: rotate(45deg) translateY(-1px);
  margin-inline-end: .65rem;
}
.top-date { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.content { padding: 1.8rem 2.2rem 4rem; max-width: 1120px; width: 100%; }
.content > h1:first-child,
.content > .page-head > h1 { display: none; } /* الشريط العلوي يحمل العنوان — عنوان واحد لا عنوانان */

/* ---------------- شاشة الدخول ---------------- */

body.auth {
  background: radial-gradient(1100px 700px at 78% -10%, #FFFFFF 0%, var(--ivory) 60%);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.auth-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.lz {
  position: absolute;
  border: 1px solid rgba(168, 134, 59, .30);
  transform: rotate(45deg);
}
.lz-a { width: 340px; height: 340px; top: -120px; inset-inline-start: -100px; }
.lz-b { width: 520px; height: 520px; bottom: -220px; inset-inline-end: -180px; border-color: rgba(168, 134, 59, .20); }
.lz-c { width: 180px; height: 180px; bottom: 18%; inset-inline-start: 12%; border-color: rgba(168, 134, 59, .16); }

.auth-main { width: 100%; max-width: 25rem; position: relative; }
.auth-card {
  background: var(--paper);
  border-radius: 14px;
  padding: 2.4rem 2.2rem 2.1rem;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(34, 37, 43, .14);
}
.auth-brand { text-align: center; margin-bottom: 1.6rem; }
.auth-brand .mark { display: block; margin: 0 auto .95rem; width: 40px; height: 40px; border-color: var(--brass-deep); }
.auth-brand h1 {
  font-family: var(--display);
  font-size: 1.7rem;
  margin: 0 0 .15rem;
  color: var(--qar);
}
.auth-brand p { margin: 0; color: var(--muted); font-size: .8rem; letter-spacing: .05em; }
.auth-rule {
  width: 46px; height: 2px;
  background: var(--brass);
  margin: 1.05rem auto 0;
  border: 0;
}

/* ---------------- عناصر عامة ---------------- */

h1 { font-family: var(--display); font-size: 1.55rem; margin: .4rem 0 1rem; color: var(--qar); }
h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .7rem; color: var(--qar); }
h2:not(:first-child) { margin-top: 1.4rem; }
a { color: var(--brass-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.35rem 1.5rem;
  margin: 0 0 1.1rem;
  box-shadow: var(--shadow-1);
}
.card.narrow { max-width: 24rem; margin: 3rem auto; }

.stop-box { border-color: color-mix(in srgb, var(--stop) 45%, var(--line)); }
.stop-box > h2:first-child { color: var(--stop); }
.ack-box { border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); background: linear-gradient(180deg, #FDFBF5, var(--paper) 45%); }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

label { display: block; margin: .85rem 0 .3rem; font-weight: 500; font-size: .88rem; color: var(--qar); }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: .92rem;
  background: #FBFAF7;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--brass); background: var(--paper); outline: none; }
textarea { resize: vertical; }

button, .button-link {
  display: inline-block;
  padding: .5rem 1.35rem;
  background: var(--brass-deep);
  color: #FCF9F1;
  border: 1px solid var(--brass-deep);
  border-radius: 7px;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover, .button-link:hover { background: #7A672B; border-color: #7A672B; color: #FFFDF6; text-decoration: none; }
button.ghost, .button-link.ghost-link {
  background: transparent;
  color: var(--qar);
  border-color: var(--line-strong);
}
button.ghost:hover, .button-link.ghost-link:hover { border-color: var(--brass); color: var(--brass-deep); background: transparent; }

.error { color: var(--stop); font-weight: 500; background: var(--stop-soft); border-radius: 7px; padding: .55rem .9rem; }
.hint { color: var(--muted); font-size: .84rem; }
.meta-line { color: var(--muted); font-size: .9rem; }

/* ---------------- جداول ---------------- */

.tw {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.card .tw { border: 0; border-radius: 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: right; padding: .55rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th {
  background: #FAF8F3;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #FBFAF6; }
td.num { color: var(--muted); font-size: .82rem; width: 2.6rem; text-align: center; font-variant-numeric: tabular-nums; }
td.c { text-align: center; }
td, th { font-variant-numeric: tabular-nums; }

/* ---------------- شارات ---------------- */

.ok-badge, .warn-badge {
  display: inline-block;
  padding: .12em .7em;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.ok-badge { background: var(--ok-soft); color: var(--ok); }
.warn-badge { background: var(--warn-soft); color: var(--warn); }
.ok-badge.big { font-size: .95rem; padding: .45em 1.1em; box-shadow: var(--shadow-1); }

/* ---------------- بطاقات الإحصاء (الرئيسية) ---------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem 1rem;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent 70%);
}
.stat-card .co { font-weight: 700; color: var(--qar); font-size: .98rem; }
.stat-card .act { color: var(--muted); font-size: .78rem; margin-top: .05rem; }
.stat-card .n {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--qar);
  line-height: 1.2;
  margin-top: .45rem;
  font-variant-numeric: tabular-nums;
}
.stat-card .n small { font-family: var(--ui); font-size: .74rem; color: var(--muted); font-weight: 400; margin-inline-start: .35rem; }
.stat-card .foot { margin-top: .5rem; }

/* ---------------- تفاصيل الصفحات القائمة ---------------- */

.pending-row { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .9rem; }
.pending-row:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.decide-forms { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; min-width: 8.5rem; }
.inline-check { display: inline-flex; gap: .45rem; align-items: center; font-weight: 400; font-size: .85rem; color: var(--muted); }
.ack-form details { margin-top: .55rem; }
.ack-form summary { cursor: pointer; color: var(--brass-deep); font-size: .85rem; }
.regulation-box { max-height: 60vh; overflow-y: auto; }
.offences td { font-size: .89rem; }
.quick-nav { display: none; } /* الشريط الجانبي حلّ محلها */

/* ---------------- الجوال ---------------- */

@media (max-width: 920px) {
  body.app { flex-direction: column; }
  .side {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: column;
  }
  .brand { padding: 1rem 1.1rem .8rem; }
  .nav {
    flex-direction: row;
    overflow-x: auto;
    padding: .45rem .6rem;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-link { flex: none; border-inline-start: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; padding: .4rem .65rem; }
  .nav-link.is-active { border-inline-start-color: transparent; border-bottom-color: var(--brass); }
  .side-foot { flex-direction: row; align-items: center; gap: .7rem; padding: .55rem 1.1rem; }
  .side-foot form { margin: 0 0 0 auto; }
  .logout { width: auto; padding: .3rem .8rem; }
  .top { padding: .9rem 1.1rem .75rem; }
  .content { padding: 1.1rem 1.1rem 3rem; }
  .page-title { font-size: 1.35rem; }
}

/* ---------------- طباعة ---------------- */


/* ---- batch 4: the articles of the regulation, the ladders, the fines register ---- */
.article { border-bottom: 1px solid var(--line); padding: .55rem 0; }
.article:last-of-type { border-bottom: 0; }
.article > summary { cursor: pointer; list-style: none; padding: .2rem 0;
                     display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.article > summary::-webkit-details-marker { display: none; }
.article > summary::before { content: '◆'; color: var(--brass-deep); font-size: .5rem;
                             vertical-align: .25rem; margin-inline-end: .2rem; }
.article[open] > summary { color: var(--brass-deep); }
.article > summary .hint { margin-inline-start: auto; font-size: .76rem; }
.article-text { margin: .5rem 0 .3rem; padding-inline-start: 1.1rem; line-height: 1.95;
                color: var(--ink, inherit); white-space: normal; }

.ladder { display: flex; flex-direction: column; gap: .15rem; }
.rung { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.rung-end { color: var(--stop); font-weight: 600; }

.voided-row td { opacity: .55; text-decoration: line-through; }
.voided-row td:first-child, .voided-row td:nth-child(2) { text-decoration: none; }
tfoot th { background: color-mix(in srgb, var(--brass) 7%, transparent);
           border-top: 2px solid var(--line); font-weight: 700; }

@media print {
  .side, .top-date, .logout { display: none !important; }
  body.app { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; }
}


/* ---------------- اللغة ---------------- */

.foot-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.foot-actions form { margin: 0; }
.foot-actions .logout-form { flex: 1; }
.lang-toggle {
  padding: .42rem .8rem;
  background: transparent;
  color: var(--brass-deep);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.lang-toggle:hover { border-color: var(--brass); background: var(--brass-soft); }
.auth-lang { position: fixed; top: 1.2rem; inset-inline-end: 1.4rem; }

/* ---------------- LTR (English) ---------------- */

[dir="ltr"] body, [dir="ltr"] { }
[dir="ltr"] th, [dir="ltr"] td { text-align: left; }
[dir="ltr"] td.num, [dir="ltr"] td.c { text-align: center; }
[dir="ltr"] .page-title { letter-spacing: 0; }


.account-link { font-size: .76rem; color: var(--muted); }
.account-link:hover { color: var(--brass-deep); text-decoration: none; }
.dismiss-zone { border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1rem; }
.paper-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.print-link { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem;
              border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; }
.print-link:hover { border-color: var(--brass-deep); text-decoration: none; }


.top-side { display: flex; align-items: center; gap: 1rem; }
.bell { position: relative; display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center;
        justify-content: center; border-radius: 9px; color: var(--muted); border: 1px solid transparent; }
.bell svg { width: 1.25rem; height: 1.25rem; }
.bell:hover { color: var(--brass-deep); border-color: var(--line); text-decoration: none; }
.bell.has-unread { color: var(--brass-deep); }
.bell-count { position: absolute; top: -0.35rem; inset-inline-end: -0.35rem; min-width: 1.15rem; height: 1.15rem;
              padding: 0 .25rem; border-radius: 999px; background: var(--stop); color: #fff;
              font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.notif-list { display: flex; flex-direction: column; gap: .5rem; }
.notif { display: block; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 10px;
         background: var(--card, #fff); color: inherit; }
.notif:hover { border-color: var(--brass-deep); text-decoration: none; }
.notif.unread { border-color: color-mix(in srgb, var(--brass-deep) 40%, var(--line));
                background: color-mix(in srgb, var(--brass) 6%, #fff); font-weight: 600; }
.notif.unread::before { content: '◆'; color: var(--brass-deep); font-size: .5rem;
                        margin-inline-end: .5rem; vertical-align: .2rem; }
.notif .notif-time { display: block; font-size: .76rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }


.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 920px) { .two-col { grid-template-columns: 1fr; } }
.field-row > span { display: flex; flex-direction: column; flex: 1; min-width: 8rem; }


.month-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.month-form label { margin: 0; }
.month-form input[type=month] { width: auto; }
h2 .print-link { margin-inline-start: .8rem; font-weight: 400; }

@media print {
  .side, .top, .no-print, .paper-links, .month-form { display: none !important; }
  body.app { display: block; background: #fff; }
  .shell, .content { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .content > h1:first-child, .content > .page-head > h1 { display: block; }
  /* Paper has no horizontal scroll: a scroll container clips silently at the
     page edge, and the fines register lost its amount columns that way. */
  .tw { overflow: visible !important; border: 0; }
  .regulation-box { max-height: none !important; overflow: visible !important; }
  /* Natural column widths, smaller type, tighter cells — a fixed layout split
     dates and serials across lines. Numbers, dates and serials never wrap. */
  table { font-size: .76rem; width: 100%; }
  td, th { padding: .3rem .4rem; }
  thead th { white-space: normal !important; }
  td.num, th.num, td[dir="ltr"], .serial { white-space: nowrap; }
  .card { padding: .6rem .8rem; }
}
@page { size: A4; margin: 12mm; }

/* A file whose fifteen days have run — never an amber «-3 days left». */
.stop-badge { display: inline-block; padding: .1rem .5rem; border-radius: 3px; font-size: .85em;
  background: color-mix(in srgb, var(--stop) 14%, #fff); color: var(--stop);
  border: 1px solid color-mix(in srgb, var(--stop) 45%, var(--line)); }

/* A table that stacks into cards on a phone: each cell names its column. */
@media (max-width: 920px) {
  table.stack thead { display: none; }
  table.stack tr { display: block; border: 1px solid var(--line); border-radius: 4px;
    padding: .5rem .75rem; margin-bottom: .75rem; background: #fff; }
  table.stack td { display: flex; gap: .75rem; justify-content: space-between; align-items: baseline;
    border: 0; padding: .3rem 0; text-align: start; }
  table.stack td::before { content: attr(data-label); font-weight: 600; opacity: .75; flex: 0 0 8rem; }
  /* The column classes were sized for a row of cells, not a card row. */
  table.stack td.num { width: auto; font-size: inherit; color: inherit; }
  table.stack td.ack-cell { display: block; }
  table.stack td.ack-cell::before { display: block; margin-bottom: .4rem; }
}

/* ---------------- الدوام — الختم بالموقع (/punch) ---------------- */

.punch-btn { width: 100%; min-height: 72px; font-size: 1.25rem; }
.punch-list { list-style: none; margin: 0; padding: 0; }
.punch-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
}
.punch-list li:last-child { border-bottom: 0; }
.warn-badge.big, .stop-badge.big { font-size: .95rem; padding: .45em 1.1em; box-shadow: var(--shadow-1); }

/* ---------------- الرئيسية للموظف (/home) ---------------- */

/* ---------------- ١) الصفحة: عمود على الجوال، عمودان على الشاشة العريضة ---------------- */

.home { max-width: 34rem; }
.home-sec { margin: 0 0 1.1rem; }
.home-sec > h2 { margin: .3rem 0 .6rem; }
.home .ic, .home .chev { display: inline-flex; flex: none; }
.home .ic svg, .home .chev svg { width: 100%; height: 100%; }
.home .chev { width: 1rem; height: 1rem; color: var(--muted); }
[dir="rtl"] .home .chev { transform: scaleX(-1); } /* السهم يتبع اتجاه القراءة */

/* حلقة التركيز: النحاس الغامق يُرى على العاجي وعلى الأبيض معاً (3.9:1 و4.6:1) */
.home a:focus-visible, .home button:focus-visible { outline-color: var(--brass-deep); }

@media (min-width: 1100px) {
  .home {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0 1.4rem;
    align-items: start;
  }
}

/* ---------------- ٢) بطاقة الترحيب والصورة ---------------- */

.hello { display: flex; align-items: center; gap: 1rem; }
.avatar {
  width: 4.5rem; height: 4.5rem; flex: none;
  border-radius: 50%;
  border: 1.6px solid var(--brass);
  background: var(--brass-soft);
  color: var(--brass-deep);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1;
  overflow: hidden;
}
img.avatar { object-fit: cover; }            /* صورة الموظف حين تُرفع */
/* مكان الصورة في النموذج: رسم محايد (رأس وكتفان بلا ملامح) يقوم مقام صورة الموظف.
   من لا صورة له يبقى على أول حرف من اسمه (القاعدة أعلاه). */
.avatar.is-photo { background: var(--line); color: var(--muted); }
.avatar svg { display: block; width: 100%; height: 100%; }
.hello-text { min-width: 0; }
.hello-name {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.35;
  margin: 0; color: var(--qar);
}
.hello-job { margin: .1rem 0 0; font-size: .95rem; line-height: 1.6; }
.hello-meta {
  margin: .25rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0 .9rem;
  color: var(--muted); font-size: .84rem; line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* ---------------- ٣) دوام اليوم — الحال وسطر الختم ---------------- */

.today-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .1rem 1rem;
  margin-bottom: .7rem;
}
.today-head h2 { margin: 0; }
.today-head .hint { font-variant-numeric: tabular-nums; }
.today-state { margin: 0 0 .9rem; }
/* يوم الراحة الأسبوعية أو العطلة: سطر هادئ يسمّي اليوم، والحال تحته بلا لون التنبيه */
.today-day { margin: 0 0 .1rem; }
.today .hint.big { font-size: .95rem; font-weight: 500; }
/* البطاقة بلا زر كبير (v2.17.1): الختم من الزر العائم في أسفل كل صفحة، وكان الرابط الكبير هنا طريقاً ثانياً
   أبطأ إلى المكان نفسه. مكانه سطر هادئ واحد يدلّ على الزر العائم، معلّق بالحال فوقه مجموعةً واحدة:
   نصف بُعد الحال عمّا تحتها (.9rem − .45rem)، في الشارة وفي سطر يوم الراحة سواء. */
.today-note { margin: -.45rem 0 0; }
.today-more { display: inline-flex; align-items: center; min-height: 2.75rem; }
.today-done { margin: 0; }                   /* بعد الانصراف: ختمات اليوم في سطر هادئ */

/* ---------------- ٤) رصيد الإجازات — بلاطتان ---------------- */

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pair .stat-card { display: block; color: inherit; padding: .95rem .9rem .8rem; }
.pair a.stat-card:hover { text-decoration: none; border-color: var(--brass); }
.pair .stat-card .n { margin-top: 0; font-size: 2.3rem; }
.pair .stat-card .co { margin-top: .15rem; line-height: 1.5; }
.pair .stat-card .act { margin-top: .1rem; line-height: 1.6; }
/* ما استحقّه وما أخذه: أسطر هادئة تحت المتبقي — لكل رقم كلمته، ولا رقمان تحت كلمة واحدة */
.bal { margin: .6rem 0 0; padding: .45rem 0 0; border-top: 1px solid var(--line); }
.bal > div { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; }
.bal dt {
  min-width: 0; color: var(--muted); font-size: .78rem; line-height: 1.85;
  text-wrap: balance;                        /* «المعتمد والمخصوم هذه السنة» سطران في نصف العرض: لا كلمة وحدها في السطر الثاني */
}
.bal dd {
  margin: 0; flex: none;
  color: var(--ink); font-size: .84rem; font-weight: 500; line-height: 1.85;
  font-variant-numeric: tabular-nums;
}

/* ---------------- ٥) الطلبات — ست بلاطات في ثلاثة صفوف متساوية ---------------- */

.req-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .7rem;
  list-style: none; margin: 0; padding: 0;
}
.req {
  display: flex; align-items: center; gap: .6rem;
  min-height: 4rem; height: 100%;
  padding: .7rem .75rem;                     /* «طلب عمل إضافي» في سطر واحد على عرض 390 */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: .95rem; font-weight: 500; line-height: 1.45;
  transition: border-color .15s ease, color .15s ease;
}
.req:hover { text-decoration: none; border-color: var(--brass); color: var(--qar); }
.req .ic {
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--brass-soft);
  color: var(--brass-deep);
}
.req .ic svg { width: 1.3rem; height: 1.3rem; }
.req-text { flex: 1; min-width: 0; }
.req small {
  display: block; margin-top: .1rem;
  color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.5;
  text-wrap: balance;                        /* «اقتراح · اعتراض · شكوى» سطران في نصف العرض؛ النقطة تبقى مع ما قبلها */
}
.req-wide { grid-column: 1 / -1; }

/* ---------------- ٦) مطلوب منك — سطر لكل ما ينتظر ---------------- */

.need-list, .circ-list { list-style: none; margin: 0; padding: 0; }
.need-list li + li, .circ-list li + li { border-top: 1px solid var(--line); }
.need {
  display: flex; align-items: center; gap: .7rem;
  min-height: 3.25rem; padding: .45rem 0;
  color: var(--ink); line-height: 1.5;
}
.need:hover { text-decoration: none; color: var(--brass-deep); }
.need .ic { width: 1.25rem; height: 1.25rem; color: var(--brass-deep); }
.need-text { flex: 1; min-width: 0; font-weight: 500; }

/* ---------------- ٧) التعاميم ---------------- */

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
.sec-head h2 { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.sec-head h2 .ic { width: 1.2rem; height: 1.2rem; color: var(--brass-deep); }
.sec-head a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; }
.circ { display: block; padding: .6rem 0 .5rem; color: var(--ink); line-height: 1.6; }
.circ:hover { text-decoration: none; }
.circ:hover .circ-title { color: var(--brass-deep); }
.circ-title { display: block; font-weight: 500; }
.circ-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem;
  margin-top: .2rem;
  color: var(--muted); font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* ---------------- ما زاد على النموذج (/home) ---------------- */

/* الإطار الصغير لصورة الموظف أو حرف اسمه — قائمة الموظفين وبطاقة الموظف وملفه عند المالك (40px). */
.avatar.sm { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; border-width: 1px; }

/* حال اليوم في بطاقة «دوام اليوم»: الشارة في app.css لا تنكسر، وجملة «رفضت الإدارة ختمك — لا ختم محتسباً لك اليوم»
   أعرض من البطاقة على جوال عرضه 360 فتخرج منها. هنا تنكسر داخل البطاقة متوازنةً، بزوايا تصلح لسطر واحد ولسطرين. */
.today .today-state { white-space: normal; text-wrap: balance; border-radius: 1.15rem; }

/* الاسم في الترحيب قطعة واحدة: الاسم المركّب («عبد الرحمن») لا ينكسر بين سطرين ما دام يسعه سطر واحد —
   ينزل كله إلى السطر التالي (يُرى في الصفحة الإنجليزية على عرض 360). */
.hello-name bdi { display: inline-block; max-width: 100%; }

/* التاريخ يُكتب في الرئيسية مرة واحدة، بالكلمات، في بطاقة الترحيب: شريط العنوان في هذه الصفحة بلا تاريخ.
   متصفح لا يعرف المحدِّد has يتجاهل القاعدة كلها فيبقى التاريخ في الشريط — لا شيء ينكسر. */
.app:has(.home) .top-date { display: none; }

/* ---------------- إنجازي هذا الشهر — البطاقة والمقياس (/home وصفحتا التسجيل) ---------------- */

/* مقياس التارجت: مسار رفيع وامتلاؤه؛ النسبة تُكتب دائماً بجانبه نصاً */
.meter { height: .55rem; border-radius: 999px; background: var(--line); overflow: hidden; margin: .35rem 0 .2rem; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brass-deep); }
.meter.is-met > span { background: var(--ok); }
/* بطاقة «إنجازي هذا الشهر»: أقسامها وأسطرها */
.work h2 { margin: 0 0 .6rem; }
.work-block + .work-block { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.work-line { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-weight: 500; }
.work-counts { margin: .35rem 0 0; font-variant-numeric: tabular-nums; }
.work-note { margin: .5rem 0 0; }
.work-acts { display: grid; gap: .25rem; justify-items: start; margin: .8rem 0 0; }
.work-acts .button-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
/* ما زاد على الصورة: شارة «حققت التارجت ✓» في سطر لها وحدها وما فوق التارجت في سطر تحتها — بينهما بُعد سطر العدّادات */
.work-line + .work-line { margin-top: .35rem; }
/* سطر الرفض جملة فيها سبب كتبه صاحبه: ينكسر داخل البطاقة على كل عرض (الشارة في app.css لا تنكسر إلا على الجوال) */
.work .work-note { white-space: normal; border-radius: 1.15rem; }

/* ---------------- رأس الصفحة على الجوال ---------------- */

/* ---------------- ٨) رأس الصفحة على الجوال (≤920px) ----------------
   الرأس اليوم على الجوال: شريط التبويبات يتمرّر جانبياً، و«حسابي — كلمة السر»
   و«تسجيل الخروج» ينكسران على سطرين، والجرس وزر اللغة دون 44px.
   هذه القواعد ترتّب العناصر نفسها (بلا تغيير في layout.php سوى صنف nav-even
   لمن تبويباته أربعة أو أقل) في ثلاثة صفوف مستقيمة:
   الشعار + اللغة · التبويبات · الاسم والصفة وحسابي والخروج. */

@media (max-width: 920px) {
  .side {
    display: grid;
    grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto auto;
    align-items: center;
  }
  .side-foot, .foot-actions { display: contents; }
  .side-foot form { margin: 0; }

  .brand { grid-area: 1 / 1 / 2 / 5; min-width: 0; border-bottom: 0; padding: .75rem 1.1rem .65rem; }
  .lang-form { grid-area: 1 / 5; justify-self: end; padding-inline-end: 1.1rem; }

  .nav { grid-area: 2 / 1 / 3 / -1; border-top: 1px solid var(--line); }
  /* تبويبات الموظف الأربعة بعرض متساوٍ: لا تمرير جانبي في الشريط */
  .nav.nav-even { overflow-x: visible; padding: .35rem .5rem 0; gap: .2rem; }
  .nav.nav-even .nav-link {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; gap: .15rem;
    min-height: 3.4rem; padding: .4rem .2rem;
    font-size: .8rem; line-height: 1.4; text-align: center;
  }
  /* التبويب الفعّال: الاسم بالحبر (النحاسي على الخلفية المظلَّلة 3.9:1 فقط)، والنحاس للرمز والخط السفلي */
  .nav.nav-even .nav-link.is-active { color: var(--qar); }
  .nav.nav-even .nav-link.is-active .ic { color: var(--brass-deep); opacity: 1; }

  .who-name {
    grid-area: 3 / 1; min-width: 0;
    padding-inline-start: 1.1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .who-role { grid-area: 3 / 2; padding-inline: .6rem; white-space: nowrap; }
  .account-link {
    grid-area: 3 / 4;
    display: inline-flex; align-items: center;
    min-height: 2.75rem; padding-inline: .6rem;
    line-height: 1.35;
  }
  .logout-form { grid-area: 3 / 5; justify-self: end; padding: .3rem 0; padding-inline-end: 1.1rem; }

  /* لمسٌ لا يقلّ عن 44px */
  .lang-toggle, .logout { width: auto; min-height: 2.75rem; padding: .3rem .75rem; white-space: nowrap; }
  .bell { width: 2.75rem; height: 2.75rem; }
  .top { align-items: center; padding: .55rem 1.1rem .5rem; }
}

/* ---------------- ٩) تباين النصوص الصغيرة في الرأس (كل المقاسات) ----------------
   أربعة نصوص صغيرة في الرأس دون 4.5:1 اليوم؛ تُغمَّق درجة واحدة من ألوان النظام نفسها. */

.brand-text small { color: var(--muted); }        /* كان 3.1:1 */
.who-role { color: #7A672B; }                      /* لون تحويم الزر في app.css — كان 4.4:1 */
.account-link, .top-date { color: #5A5E66; }       /* لون روابط التنقل في app.css — كان 4.3:1 */

/* ---------------- ما زاد على النموذج (الجوال) ---------------- */

/* شارة هي فقرة كاملة (p.ok-badge و p.warn-badge: حال اليوم في صفحة الدوام، وإشعارات الحفظ، وتعليمات تصحيح الختم):
   الشارة في app.css لا تنكسر، وهذا يصلح لكلمة أو كلمتين داخل سطر. الفقرة جملة: على الجوال كانت تخرج من بطاقتها
   (فقرتا «رفضت الإدارة ختم…» في صفحة الدوام سطر واحد عرضه 1134px على جوال عرضه 360). هنا تنكسر داخل حاويتها،
   بزوايا تصلح لسطر واحد ولعدة أسطر — زوايا حال اليوم في الرئيسية نفسها. الشارات الصغيرة داخل السطور (span) كما هي. */
@media (max-width: 920px) {
  p.ok-badge, p.warn-badge { white-space: normal; border-radius: 1.15rem; }
}

/* زر اللغة في صفحة الدخول يبقى في مكانه: القسم ٨ يضع نموذج اللغة في شبكة الرأس وله حشوة 1.1rem من جهة الحافة،
   وصفحة الدخول تطبع النموذج نفسه وحده في auth-lang حيث لا شبكة — فلم يصلها من القاعدة إلا الحشوة، فأزاحت الزر
   17.6px عن حافة الشاشة (قيس على عرض 360 و390: صار على 40px من الحافة وكان على 22.4px بمحاذاة البطاقة).
   الزر نفسه يبقى بارتفاع 44px كما في القسم ٨. */
@media (max-width: 920px) {
  .auth-lang .lang-form { padding-inline-end: 0; }
}

/* الجرس لا ينكمش بجانب عنوان طويل: هو عنصر في صف العنوان المرن، وعنوان صفحة «النظام الداخلي» يحمل اسم الشركة
   كاملاً فكان يضغطه (قيس عرضه 30.5px على عرض 360 و390 مع عرض القسم ٨ البالغ 2.75rem، و22.4px قبله).
   العنوان ينكسر على أسطره كما كان، وارتفاع الشريط لا يتغيّر. */
@media (max-width: 920px) {
  .bell { flex: none; }
}

/* ---------------- الختم — الزر العائم وشاشة «نوع الختم» ---------------- */

/* شاشة «نوع الختم» (/punch/type): أزرار .punch-btn نفسها (عرض كامل، 72px، 1.25rem) واحداً تحت الآخر بوزن 700.
   الفعل الذي في محلّه زر ممتلئ، وغيره الزر المحدَّد (.ghost) بالمقاس نفسه. تحت «دخول» في الاستراحة سطر أصغر. */
.type-page { max-width: 34rem; }                /* مقاس .home نفسه */
.type-acts form { display: grid; gap: .75rem; margin: 0 0 .9rem; }
.type-acts .punch-btn { display: block; padding: .65rem .9rem; font-weight: 700; line-height: 1.4; text-align: center; border-radius: var(--r); }
.type-acts .punch-btn .punch-main { display: block; }
.type-acts .punch-btn .punch-next { display: block; margin-top: .1rem; font-size: .85rem; font-weight: 500; opacity: .9; }
.type-acts .punch-btn:disabled { opacity: .6; cursor: progress; }
/* فعلٌ مغلق — «خروج» و«خروج استراحة» ما دام لا حضور قائماً اليوم: محدَّد وباهت كزرٍّ ينتظر، لكنه لا ينتظر شيئاً ولا يتلوّن عند المرور */
.type-acts .punch-btn[data-shut] { cursor: not-allowed; }
.type-acts .punch-btn.ghost:disabled:hover { border-color: var(--line-strong); color: var(--qar); }
/* جملتا الختم المرفوض فوق الأفعال (فقرتا صفحة الدوام نفسيهما، في قسم لهذه الشاشة): تنكسران داخل البطاقة على كل عرض —
   الشاشة محصورة بمقاس الرئيسية، والشارة لا تنكسر إلا على الجوال. القاعدة على قسم الشاشة لا على الشارة، كما تفعل
   الرئيسية بجملة حال اليوم (.today .today-state): قاعدتان فقط تتكلمان عن انكسار الشارة نفسها */
.type-thrown p { white-space: normal; border-radius: 1.15rem; margin: 0 0 .9rem; }
.type-acts .hint { margin: 0 0 .45rem; }
/* السطر الحيّ (#type-live) يبقى في الصفحة وهو فارغ: قارئ الشاشة يُعلن ما يُكتب في منطقة يعرفها، لا منطقةً تظهر مع أول
   كلماتها — فلا يُخفى كسائر التلميحات الفارغة، ولا يأخذ مكاناً ما دام فارغاً */
.type-acts .hint:empty:not(#type-live) { display: none; }
#type-live:empty { margin: 0; }
/* روابط الشاشة: الممتلئ («العودة إلى الرئيسية»، «صفحة الدوام») بارتفاع إصبع، والهادئ (.today-more) تحته */
.type-links { display: grid; gap: .35rem; justify-items: start; margin: .9rem 0 0; }
.type-links .button-link { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* الزر العائم: يفتح «نوع الختم» من كل صفحة لمن له ملف موظف. right الفيزيائية في اللغتين عن قصد — كلمة المالك:
   «الزاوية اليمين تحت» — لا الطرف المنطقي الذي ينقلب مع اللغة. فوق الصفحة (z-index: 20؛ لا شيء في هذا الملف يرفع شيئاً قبله)،
   وداخل المنطقة الآمنة للهاتف. الألوان ألوان الأزرار نفسها، والظل --shadow-2. */
.fab-punch {
  position: fixed; z-index: 20;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--brass-deep); color: #FCF9F1;
  box-shadow: var(--shadow-2);
  transition: background .15s ease, transform .1s ease;
}
.fab-punch svg { width: 1.6rem; height: 1.6rem; }
.fab-punch:hover { background: #7A672B; color: #FFFDF6; text-decoration: none; }
.fab-punch:active { transform: scale(.96); }
/* حلقة التركيز تبقى دائرة (القاعدة العامة تربّعها بـ3px) وتُرى على العاجي: النحاس الغامق، بعيدة 3px عن الزر */
.fab-punch:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .fab-punch:active { transform: none; }
}
/* على الشاشة العريضة بالعربية الشريط الجانبي على اليمين: يُزاح الزر عنه فلا يغطي «تسجيل الخروج» */
@media (min-width: 921px) {
  html[dir="rtl"] .fab-punch { right: calc(var(--side-w) + 1.5rem); }
}
/* آخر عنصر في أي صفحة يُمرَّر فوق الزر: ارتفاع الزر + بعده عن الحافة + هامش إصبع */
body.has-fab .content { padding-bottom: calc(3.5rem + 1rem + 1.5rem + env(safe-area-inset-bottom, 0px)); }
@media print {
  .fab-punch { display: none !important; }
  body.has-fab .content { padding-bottom: 0; }
}
/* ---------------- نهاية: الختم — الزر العائم وشاشة «نوع الختم» ---------------- */
/* (ما يُضاف بعد هذا السطر ليس من هذا القسم: اختبار الزر العائم يقرأ ما بين العنوانين فقط) */
/* ---------------- طلب عمل إضافي (v2.19) — صفحة الموظف /overtime/new ---------------- */
/* وقتٌ واحد في قائمتين متجاورتين (الساعة ثم ربع الساعة)، تُقرآن من اليسار إلى اليمين كما يُقرأ الوقت — لا type="time" */
.time-pair { display: flex; gap: .4rem; align-items: center; direction: ltr; justify-content: flex-end; margin-bottom: .2rem; }
.time-pair select { width: 5.2rem; min-width: 0; flex: 0 0 auto; }
.time-pair span { font-weight: 700; }
.time-row { display: grid; grid-template-columns: 1fr; gap: .1rem; }
/* ---------------- مدخلات الكشف — ساعات العمل الإضافي المؤكدة (v2.19 V4، النموذج 5) ---------------- */
/* علامة «تُضاف ساعات الطلبات إلى ما كُتب يدوياً» وجملتها على سطر واحد */
.check-line { display: flex; gap: .5rem; align-items: center; width: 100%; margin: .2rem 0 .5rem; }
.check-line input { width: auto; margin: 0; }
/* الطلبات تحت سطر الأرقام: الرقم المتسلسل · اليوم · الساعات · نوع اليوم */
.offer-list { margin: .3rem 0 .5rem; padding-inline-start: 1.2rem; }
/* ما أُخذ إلى صف الموظف، تحت نموذجه */
.taken-overtime { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }

/* ---------------- العمل الإضافي — صفحة المالك (v2.19 V3) ---------------- */
/* بيّنة اليوم من سجل الدوام بجانب حقل «الساعات المؤكدة» (الصورة 3): أول حضور وآخر انصراف، الدوام المعلن، المقترح والحد */
.evidence { margin: .4rem 0 .6rem; padding: .55rem .7rem; border-inline-start: 3px solid var(--brass); background: var(--paper, #fbf8f1); border-radius: .4rem; }
.evidence p { margin: .15rem 0; }
.evidence strong, .evidence bdi { font-variant-numeric: tabular-nums; }
.evidence bdi { font-weight: 700; }

/* ---------------- إصلاحات مراجعة v2.19 (V10) ---------------- */
/* ما يحمل hidden لا يُرسم أبداً: قاعدة الأزرار أعلاه (display: inline-block) كانت تغلب قاعدة المتصفح، فظهر زر «Enter» المعطّل في نموذج القرار زراً نحاسياً فارغاً قبل كل ملاحظة */
[hidden] { display: none !important; }
/* الصفحة الإنجليزية (dir="ltr"): قائمتا الوقت على اليسار تحت عنوانهما «From» / «To»، كما تقعان على اليمين تحت عنوانهما في العربية */
[dir="ltr"] .time-pair { justify-content: flex-start; }

/* ---------------- طلبات السلف — بطاقة المالك في رأس «السلف» (v2.19 ADV، الصورة 3) ---------------- */
/* صندوق الوقائع تحت سبب الطلب: الأجر الساري وحد القسط، السلف المفتوحة وأقساطها، الأشهر المقترحة، والتنبيه */
.facts { margin: .3rem 0 .6rem; padding: .5rem .7rem; border-inline-start: 3px solid var(--brass); background: #fbf8f1; border-radius: .4rem; }
.facts p { margin: .15rem 0; }
.facts strong, .facts bdi { font-variant-numeric: tabular-nums; }

/* ---------------- المقترحات دفعة واحدة، الختمات التي تمنع الإغلاق، تنبيهات التقويم (v2.19 G2) ---------------- */
/* (ب) ختم أقدم من مدة صندوقه: شارة «يمنع إغلاق شهر …» تحت تاريخه، في عنصر واحد معه */
.when-blocks .stop-badge { margin-top: .25rem; }
/* خانة «إجراء» في بطاقتي الختمات: القبول والرفض جنباً إلى جنب يحتاجان نحو 508px في صف عرضه نحو 281px على الجوال —
   فتُرصّ تحت عنوانها كما تُرصّ خانة الإقرار (td.ack-cell)، وحقل الملاحظة يأخذ ما بقي من السطر */
@media (max-width: 920px) {
  table.stack td.review-acts { display: block; }
  table.stack td.review-acts::before { display: block; margin-bottom: .3rem; }
  table.stack td.review-acts .inline-form { margin-bottom: .45rem; flex-wrap: nowrap; }
  table.stack td.review-acts .inline-form input { flex: 1 1 0; width: 0; min-width: 6rem; }
}
/* (أ) «استبعاد المحدَّد» — مجموعة كل موظف في بطاقة المقترحات (على نموذج .article > summary) */
.man-group { border-top: 1px solid var(--line); padding: .35rem 0; }
.man-group > summary { cursor: pointer; list-style: none; padding: .45rem 0; line-height: 1.7; }
.man-group > summary::-webkit-details-marker { display: none; }
.man-group > summary::before { content: '◆'; color: var(--brass-deep); font-size: .5rem; vertical-align: .25rem; margin-inline-end: .45rem; }
.man-group > summary .who { font-weight: 700; }
.man-group[open] > summary .who { color: var(--brass-deep); }
.man-group > summary .counts { color: var(--muted); font-size: .86rem; }
.man-group > summary .nw { white-space: nowrap; }
/* «تحديد الكل» والعدّاد عنصرٌ واحد مخفيّ حتى يُظهره السكربت، و« · » بينهما معه؛ و[hidden] يغلب display:flex */
.pick-bar { margin: .2rem 0 .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pick-bar[hidden] { display: none; }
.pick-all { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin: 0; font-weight: 500; }
.pick-all input { width: 1.3rem; height: 1.3rem; margin: 0; }
.picked { color: var(--muted); font-size: .88rem; }
/* مربع التحديد في أول الصف: هدف لمس 44px */
td.pick label { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; margin: 0; }
td.pick input { width: 1.3rem; height: 1.3rem; margin: 0; }
details.one-day > summary { cursor: pointer; color: var(--brass-deep); font-size: .86rem; padding: .55rem 0; }
/* النموذج تحت مجموعة الموظف — والمعاملة الأجرية بلا إطار (عنوانها سطران على الجوال) */
.bulk-form { display: grid; gap: .45rem; margin: .4rem 0 .9rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); }
.bulk-form h3 { margin: 0; font-size: 1rem; }
.bulk-form label { margin: .2rem 0 0; }
.bulk-form .hint { margin: 0; }
.bulk-form button { justify-self: start; }
.bulk-form fieldset { margin: .3rem 0 0; padding: 0; border: 0; min-width: 0; }
.bulk-form legend { padding: 0; font-weight: 500; font-size: .88rem; color: var(--qar); line-height: 1.7; }
/* الأيام التي لم يُنفَّذ عليها القرار: الكتلة الحمراء وسطرها الأول وقائمتها */
.error ul { margin: .3rem 0 0; padding-inline-start: 1.1rem; }
.error > p { margin: 0; }
div.error { margin: 0 0 1.1rem; }
/* (ج) أسطر التقويم (settings/calendar-lines.php) ورابط «الإعدادات» تحت كل سطر في البطاقة الرئيسية — كل سطر فقرة
   (p.warn-badge / p.stop-badge) فتنكسر على الجوال بقاعدة الشارة-الفقرة نفسها؛ ولا قاعدة التفاف هنا (PhoneHeaderTest::04) */
.cal-lines p.warn-badge, .cal-lines p.stop-badge { margin: .2rem 0 0; }
.cal-go { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; }

/* ---------------- الحماية — صحة النظام والملخّص والنسخة المشفّرة (v2.19 G3) ---------------- */
/* رقم أو تاريخ أو وقت لا ينكسر على سطرين؛ النص الحرّ (عنوان بريد، رسالة Microsoft، جملة) ينكسر حيث يلزم على هاتف 390 */
bdi.nw { white-space: nowrap; }

/* الرئيسية: سطر أحمر واحد للمالك حين يكون في «صحة النظام» ما يحتاج انتباهه — هدف لمس 44px */
.health-alert { margin: 0 0 1.1rem; padding: 0; }
.health-alert a { display: block; min-height: 2.75rem; padding: .55rem .9rem; color: inherit; font-weight: 500; line-height: 1.6; text-decoration: none; }

/* «صحة النظام» أعلى الإعدادات: رأس البطاقة وشارتها، ثم الأسطر العشرة */
.health-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.health-head h2 { margin: 0; }
.stop-box .health-head h2 { color: var(--stop); }
.health-head .stop-badge, .hl .stop-badge { border-radius: 999px; padding: .12em .7em; font-size: .78rem; font-weight: 700; }
.off-badge { display: inline-block; padding: .12em .7em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #EEEDE9; color: var(--muted); }
.hl-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.hl { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.hl-list > .hl:first-child { border-top: 0; }
.hl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; line-height: 1.65; }
.hl-label { font-weight: 700; font-size: .9rem; color: var(--qar); }
.hl-text, .hl-note { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hl.is-bad .hl-text, .hl.is-warn .hl-text, .hl.is-bad .hl-note, .hl.is-warn .hl-note { color: var(--ink); }
.hl > [class$="-badge"] { flex: none; margin-top: .2rem; }
.health-more { margin-top: .35rem; border-top: 1px solid var(--line); }
.health-more > summary { cursor: pointer; padding: .7rem 0 .2rem; color: var(--brass-deep); font-weight: 500; font-size: .9rem; }
.health-more[open] > summary { padding-bottom: .1rem; }

/* بطاقتا «الملخّص اليومي بالبريد» و«نسخة احتياطية مشفّرة» أسفل الإعدادات */
.mail-status { margin: .2rem 0 .5rem; }
.mail-status span[dir="ltr"] { overflow-wrap: anywhere; }
.card-split { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .2rem; }
.form-acts { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 0; }
.backup-last { margin: .6rem 0 .2rem; font-variant-numeric: tabular-nums; }
input.pw-visible { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }

/* ---------------- الأمان والخصوصية (v2.19 G4) ---------------- */
/* تنبيه كلمة السر الضعيفة بعد الدخول (الصورتان 1 و6): جملة وزر داخل بطاقة موجودة — stop-box للمالك والإدارة، ack-box للموظف */
[data-weak-password] p { margin: 0 0 .75rem; line-height: 1.75; }
[data-weak-password] p:last-child { margin-bottom: 0; }
[data-weak-password] .button-link { display: inline-flex; }
/* «أحمر لحسابك» (القرار 2؛ ملاحظة راسم الصور 4): stop-box وحده يلوّن الحافة وعنوان h2، ولا h2 هنا — فبطاقة المالك تأخذ أرضية سطر الخطأ وكلماته الحمراء؛ بطاقة الموظف تبقى هادئة */
.stop-box[data-weak-password] { background: var(--stop-soft); border-color: var(--stop); }
.stop-box[data-weak-password] p { color: var(--stop); font-weight: 500; }
/* صفحة «تأكيد كلمة السر» (الصورة 3): البطاقة بعرض نموذج «حسابي»، وسطر ما تخصّه الخطوة، والزر بعرض البطاقة، و«رجوع» تحته */
.reauth-card { max-width: 26rem; }
.reauth-card h2 { margin-bottom: .3rem; }
.reauth-ctx { margin: 0 0 .6rem; font-weight: 500; }
.reauth-go { margin-top: 1.1rem; }
.reauth-go button { width: 100%; }
.reauth-card .back-link { display: block; margin-top: .9rem; text-align: center; }
/* بطاقة «إشعار الخصوصية» في بطاقة الموظف (الصورة 4) */
.privacy-card .print-link { margin: .2rem 0 .4rem; }

/* ---------------- v2.19 G1 — هاتف الموظف والختم المرفوض ---------------- */
/* «هذا الهاتف»: سطر الدخول المحفوظ (الصورة 3) — أخضر هادئ بحدّ من جهة البداية، وتاريخه لا ينكسر داخل الجملة */
.stay-line { margin: .2rem 0 .6rem; padding: .45rem .7rem; border-inline-start: 3px solid var(--ok); background: var(--ok-soft);
  border-radius: .4rem; font-size: .9rem; line-height: 1.8; }
.stay-line span[dir="ltr"] { white-space: nowrap; }
/* الضغطة القديمة التي لم تُرسَل (M6): فقرة كاملة تنكسر داخل حاويتها على كل عرض، لا شارة سطر */
.stale-line p { white-space: normal; border-radius: 1.15rem; margin: .4rem 0 .6rem; line-height: 1.7; }
/* «محاولتك محفوظة» (الصورتان 1 و2): تحت أزرار الختم لا فوقها؛ زرّها محدَّد بعرض البطاقة، وجملته تنكسر داخله */
.claim-card h2 { margin: 0 0 .35rem; }
.claim-card p { margin: 0 0 .5rem; }
.claim-form { margin: 0; }
.claim-btn { display: block; width: 100%; min-height: 3.25rem; margin: .4rem 0 .5rem; padding: .55rem .9rem;
  font-size: 1rem; font-weight: 700; line-height: 1.5; white-space: normal; text-align: center; border-width: 1.5px; }
.claim-card .claim-btn.ghost { border-color: var(--brass); color: var(--brass-deep); }
/* «محاولات لم تُسجَّل اليوم» (الصورة 3): السطر ثم حاله أو زرّه، والتلميح على سطر وحده */
.attempt-list li { flex-wrap: wrap; align-items: baseline; }
.attempt-list li > .hint, .attempt-list li > form { flex-basis: 100%; line-height: 1.6; }
/* «دوامي» (M5): سطر المحاولة فوق زرّها */
.attempt-line { margin: 0 0 .25rem; line-height: 1.6; }
/* وقت أو تاريخ داخل جملة عربية لا ينكسر */
.claim-card span[dir="ltr"], .attempt-list span[dir="ltr"], .attempt-line span[dir="ltr"] { white-space: nowrap; }
/* المالك: «محاولات ختم رفضها النظام — اليوم وأمس» (الصورة 4): اليوم، ثم الرجل، ثم محاولاته سطراً تحت سطر */
.att-day { margin: 1rem 0 .35rem; padding-bottom: .2rem; font-size: .95rem; border-bottom: 1px solid var(--line-strong); }
.att-man { margin: 0 0 .7rem; }
.att-who { margin: .35rem 0 .15rem; line-height: 1.6; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { padding: .45rem .7rem; margin: 0 0 .4rem; border: 1px solid var(--line); border-radius: 7px; background: #FBFAF6; line-height: 1.7; }
.att-list li > span { display: block; }
.att-main { font-weight: 700; }
.att-list span[dir="ltr"] { white-space: nowrap; }
/* المالك: الدليل تحت طلب تصحيح قام على محاولة (الصورة 5) */
.attempt-evidence { display: inline-block; padding: .3rem .6rem; border-inline-start: 3px solid var(--brass); background: var(--paper, #fbf8f1); border-radius: .35rem; line-height: 1.7; }
.attempt-evidence span[dir="ltr"] { white-space: nowrap; }
/* «هواتف الموظفين»: سطر الدخول المحفوظ تحت الهاتف (الصورة 6) */
.stay-owner { display: inline-block; margin-top: .15rem; }
/* على الهاتف: جدولا «طلبات تصحيح ختم» و«هواتف الموظفين» يُقرآن سطراً تحت سطر. table.stack td صفّ مرن، فكانت أسطر
   الخلية (المفصولة بـ<br>) تتجاور، ونماذج «القرار» و«إجراء» أعرض من الشاشة فيقصّها .tw — الأسماء والدليل خارج الشاشة.
   هنا الخلية كتلة وعنوانها فوقها، والنموذجان واحد تحت الآخر، والحقل بعرض البطاقة، والسطر الكهرماني داخل الخلية ينكسر. */
@media (max-width: 920px) {
  table.stack.lines td { display: block; }
  table.stack.lines td::before { display: block; margin-bottom: .1rem; }
  table.stack.lines td > span { white-space: normal; }
  table.stack.lines .decide-forms { display: grid; gap: .6rem; }
  table.stack.lines .inline-form input { flex: 1 1 100%; min-width: 0; }
  table.stack.lines .inline-form + .inline-form { margin-top: .45rem; }
}

/* ---------------- الشهادات والعقود والوثائق (v2.19 G5) ---------------- */
/* «طلب شهادة» و«الشهادات» و«العقود والوثائق» وصفحة الموظف «العقد والوثائق والشهادات» وبطاقة الملف و«وثائقي».
   ما رسمته الصور 1–5 ولم يكن في app.css (ملاحظات باني الصور): مجموعة الأزرار الدائرية بلا إطار المتصفح، والإطار البرتقالي
   لقرار مطلوب، والصفوف المكدّسة، والسطور القانونية، وما ستشهد به الشهادة، والمشطوب. لا شيء هنا أعرض من هاتف 390 px:
   الكلمة الطويلة التي يكتبها شخص (اسم بنك، مرجع ورقة، رقم وثيقة، سبب) تنكسر حيث يلزم. */
/* التاريخ داخل جملة عربية: سطر واحد من اليسار إلى اليمين (عشرة أحرف) — في هذه الشاشات وحدها */
.prow-body bdi[dir="ltr"], .facts bdi[dir="ltr"], .legal bdi[dir="ltr"], .meta-line bdi[dir="ltr"], #contract bdi[dir="ltr"],
[data-card="papers"] bdi[dir="ltr"], [data-card="my-documents"] bdi[dir="ltr"] { white-space: nowrap; }
/* قرار التجديد مطلوب: إطار برتقالي (والأحمر stop-box للمتأخر) */
.warn-box { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.warn-box > h2:first-child { color: var(--warn); }
.is-late { color: var(--stop); font-weight: 500; }
/* اختيار من اثنين: fieldset بلا إطار المتصفح، والأزرار تلتف على الهاتف */
.pick { border: 0; margin: .85rem 0 0; padding: 0; min-width: 0; }
.pick legend { padding: 0; margin: 0 0 .3rem; font-weight: 500; font-size: .88rem; color: var(--qar); }
.pick label { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; margin-inline-end: 1.4rem; font-weight: 400; font-size: .92rem; color: var(--ink); }
.pick input { accent-color: var(--brass-deep); width: 1.05rem; height: 1.05rem; margin: 0; }
/* صف مكدّس: النص يأخذ ما بقي، والسهم أو 🖨 لا يتقلّص */
.prow { display: flex; align-items: center; gap: .75rem; }
.prow-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.prow-body p { margin: 0; line-height: 1.75; }
.prow .act { flex: none; padding: .3rem .85rem; font-size: .84rem; }
.prow .print-link { flex: none; padding: .25rem .6rem; font-size: 1.15rem; }
[data-card="requests"] .pending-row > p, [data-card="my-documents"] .pending-row > p { margin: 0; line-height: 1.75; }
[data-card="my-documents"] .pending-row { overflow-wrap: anywhere; }
p.sub, .prow-body .sub { color: var(--muted); font-size: .86rem; }
.sub-h { font-size: .92rem; margin: 1.1rem 0 .1rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); color: var(--qar); }
/* السطران القانونيان الدائمان (م.15/ج، م.6/ت) وم.26 في بطاقة إنهاء الخدمة */
.legal { margin: .8rem 0 0; padding: .55rem .8rem; border-inline-start: 3px solid var(--warn); background: var(--warn-soft); border-radius: 6px; font-size: .84rem; line-height: 1.8; color: var(--ink); overflow-wrap: anywhere; }
.legal.stop { border-color: var(--stop); background: var(--stop-soft); }
/* ما ستشهد به الشهادة، في صفحة المالك */
.facts { margin: .5rem 0 .2rem; padding: .45rem .75rem; border-inline-start: 3px solid var(--brass); background: var(--paper, #fbf8f1); border-radius: 6px; overflow-wrap: anywhere; }
.facts p { margin: .1rem 0; line-height: 1.75; }
/* المُلغى والمُبطَل مشطوبان، وسبب الإلغاء مقروء */
.voided .prow-body p:not(.is-late) { text-decoration: line-through; color: var(--muted); }
.voided-line { text-decoration: line-through; }
/* الأحكام القانونية في آخر «العقود والوثائق» */
.card.notes p { margin: 0 0 .45rem; color: var(--muted); font-size: .84rem; line-height: 1.8; }
/* اسم الموظف على سطر وحده تحت عنوان الشريط (العنوان مع الاسم لا يتسع على الهاتف) */
.man-line { margin: 0; overflow-wrap: anywhere; }
.c-head, .decide-by, .starts { margin: .6rem 0 0; }
.c-head { margin-top: 0; }
.contract-tools { margin-top: .7rem; }
.history p { margin: .3rem 0 0; }
.void-details summary { cursor: pointer; color: var(--muted); font-size: .84rem; }
.void-details form { margin-top: .4rem; }
.search-form { margin-bottom: .4rem; }
.search-form input { flex: 1; min-width: 0; }
.requests-link { margin: 0 0 1.1rem; }

/* ---------------- بانتظارك اليوم والقائمة المجمّعة (v2.19) ---------------- */
/* بطاقة «بانتظارك اليوم» في رئيسية المالك (الصورتان 1 و3): إطار نحاسي، وسطر لكل ما ينتظر قراره بعدده في حبّة؛
   الأحمر لا يُقال باللون وحده — سطره يقول «بعد يومين» أو «فات منذ…»، والعنوان يحمل «عاجل: N» */
.wait-card { border: 1.5px solid var(--brass); }
.wait-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.wait-head h2 { margin: 0; }
.wait-sec { margin: .9rem 0 .15rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.wait-list { list-style: none; margin: 0; padding: 0; }
.wait-list li + li { border-top: 1px solid var(--line); }
.wait { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .45rem 0; color: var(--ink); line-height: 1.5; text-decoration: none; }
.wait:hover { text-decoration: none; color: var(--brass-deep); }
.wait:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; border-radius: 6px; }
.wait-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wait-label { font-weight: 500; }
.wait-when { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.is-due .wait-when { color: var(--stop); font-weight: 500; }
/* التاريخ داخل الجملة العربية قطعة واحدة باتجاهه (<bdi dir="ltr">): لا ينكسر في وسطه ولا تنقلب أجزاؤه */
.wait-when bdi { white-space: nowrap; }
.wait-n { flex: none; min-width: 1.9rem; padding: .1em .55em; border-radius: 999px; text-align: center; font-size: .82rem; font-weight: 700; background: var(--warn-soft); color: var(--warn); font-variant-numeric: tabular-nums; }
.is-due .wait-n, .wait-head .wait-n { background: var(--stop-soft); color: var(--stop); }
.wait .chev { flex: none; display: inline-flex; width: 1rem; height: 1rem; color: var(--muted); }
.wait .chev svg { width: 100%; height: 100%; }
[dir="rtl"] .wait .chev { transform: scaleX(-1); }
.wait-none { margin: .3rem 0 0; font-weight: 500; }
/* القائمة المجمّعة (الصورتان 1 و2): أقسام <details> داخل <nav> نفسها، بلا سكربت. على الشاشة العريضة يبقى الشريط
   الجانبي مسطّحاً — عنوان صغير لكل قسم وروابطه تحته ولو كان القسم مغلقاً (::details-content)؛ والمتصفح الذي لا يعرفها
   يُظهر العناوين وتُفتح بالنقر، ولذلك يبقى المؤشر يداً. على الجوال صفٌّ من خمسة أزرار (الرمز فوق الاسم)، والقسم المفتوح
   يظهر تحت الصف في عمودين ويدفع الصفحة إلى أسفل — لا شيء يطفو فوقها ولا ترتيب طبقات. */
.nav-panel { display: flex; flex-direction: column; gap: 2px; }
.nav-sum { list-style: none; cursor: pointer; }
.nav-sum::-webkit-details-marker { display: none; }
.nav-sum:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: -2px; border-radius: 6px; }
@media (min-width: 921px) {
  .nav-group::details-content { content-visibility: visible; }
  .nav-sum { display: block; padding: .8rem .75rem .2rem; font-size: .72rem; color: var(--muted); }
  .nav-sum .ic { display: none; }
  .nav-sum.is-current { color: var(--qar); }
}
@media (max-width: 920px) {
  /* the strip's own top and bottom padding (.45rem) is taken back: the row of buttons stands where picture 1 has it */
  .nav-groups { position: relative; flex: 1 1 100%; min-width: 0; padding-top: 3.75rem; margin-block: -.45rem; }
  .nav-sum {
    position: absolute; top: .35rem; width: calc(100% / var(--n)); inset-inline-start: calc(100% * var(--i) / var(--n));
    min-height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    font-size: .78rem; line-height: 1.35; text-align: center; color: #5A5E66; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  }
  .nav-sum .ic { width: 18px; height: 18px; display: inline-flex; }
  .nav-sum .ic svg { width: 100%; height: 100%; }
  .nav-sum.is-current { color: var(--qar); border-bottom-color: var(--brass); }
  .nav-sum.is-current .ic { color: var(--brass-deep); }
  .nav-group[open] > .nav-sum { background: rgba(168, 134, 59, .12); color: var(--brass-deep); }
  .nav-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; padding: .5rem 0 .6rem; border-top: 1px solid var(--line); }
  .nav-panel .nav-link { min-height: 2.75rem; border-bottom: 0; border-inline-start: 2px solid transparent; border-radius: 7px; padding: .4rem .6rem; }
  .nav-panel .nav-link.is-active { border-inline-start-color: var(--brass); border-bottom-color: transparent; }
}

/* ---- v2.19.1 F (ربط أسانا) ---- */
/* A long «الاسم — البريد (مربوط ب…)» option would push a 390-px row wide: the select may shrink to its cell. */
#asana .inline-form select { min-width: 0; max-width: 100%; }
/* On a phone the cell «حساب أسانا» puts its label above (as td.ack-cell), and the select takes what the button leaves:
   a select is as wide as its longest option, so without a basis of its own it would widen the whole stacked table
   (measured at 390 px: 1130 px before this rule). */
@media (max-width: 920px) {
  #asana table.stack td:nth-child(4) { display: block; }
  #asana table.stack td:nth-child(4)::before { display: block; margin-bottom: .3rem; }
  #asana table.stack td .inline-form { flex-wrap: nowrap; min-width: 0; }
  #asana table.stack td .inline-form select { flex: 1 1 0; width: 0; min-width: 0; }
}
/* On a wide screen the select stops at 22rem, so a long «الاسم — البريد (مربوط ب…)» does not stretch the table beyond its card. */
@media (min-width: 921px) {
  #asana .inline-form select { max-width: 22rem; }
}

/* ---- v2.20 A5 ---- */
/* «فحص قبل الاعتماد» على شاشة الكشف (الصورة 1): أقسام البطاقة الأربعة يفصلها خط، ورأس القسم عنوانه وشارته في سطر يلتفّ على الجوال؛
   التحذيرات في .legal الأصفر المعتاد، والسطر الأخضر .stay-line المعتاد — لا نمط جديد بحدّ جانبي. */
[data-card="checks"] section + section { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .8rem; }
[data-card="checks"] .check-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .4rem; }
[data-card="checks"] .check-head h3 { margin: 0; font-size: .98rem; color: var(--qar); }
[data-card="checks"] .legal { margin: .45rem 0 0; }

/* ---- v2.20 B3 ---- */
.why-list { list-style: none; padding: 0; margin: .2rem 0 .4rem; }
.why-list > li { padding: .5rem 0 .2rem; border-bottom: 1px solid var(--line); }
.why-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-weight: 500; }
.why-row strong { white-space: nowrap; }
.why-reason { margin: .2rem 0 0; line-height: 1.8; }
.why-reason bdi, .why-go bdi { white-space: nowrap; }   /* a date, a serial or a rate never breaks inside the sentence */
.why-reason bdi.wrap { white-space: normal; }            /* …but a person's written reason (the damage's) wraps like any sentence */
.why-go { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; }
.why-all { margin: .35rem 0 0; }

/* ---- v2.20 E3 ---- */
/* The employee's month statement (/my-file/statement).
   On a phone a long cell (the outcome, the penalty, the slip, the month an advance comes off) reads under its label,
   the way td.ack-cell already does; the short cells keep the stacked row's label | value. */
@media (max-width: 920px) {
  table.stack td.st-wide { display: block; }
  table.stack td.st-wide::before { display: block; margin-bottom: .15rem; }
  /* a two-line value beside its label (a day over its kind, an amount over its days) keeps both lines on the value's edge */
  .st-card table.stack td:not(.st-wide) > div { text-align: end; }
}
.st-card bdi[dir="ltr"] { white-space: nowrap; }   /* a date, a serial, an amount or a rate printed by filled() never breaks inside its sentence (the drawing's bdi.nw) */
/* ---- v2.20 L D1 (زر المساعدة) ---- */
.help-q { display: inline-flex; flex: none; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center;
          border-radius: 999px; border: 1px solid var(--line-strong); color: #7A672B;
          font-weight: 700; font-size: 1.05rem; line-height: 1; text-decoration: none; }
.help-q:hover { border-color: var(--brass); background: var(--brass-soft); text-decoration: none; }
@media (max-width: 920px) { .help-q { width: 2.75rem; height: 2.75rem; } }
/* ---- v2.20 L F2 (كيف انحسب رصيدي) ---- */
details.lv-how { margin: .7rem 0 .3rem; border-top: 1px solid var(--line); }
details.lv-how > summary { cursor: pointer; display: flex; align-items: center; min-height: 2.75rem; list-style: none;
                           color: var(--brass-deep); font-weight: 500; font-size: .92rem; }
/* display:flex drops the native triangle, so the house marker of .article / .man-group stands in for it */
details.lv-how > summary::-webkit-details-marker { display: none; }
details.lv-how > summary::before { content: '◆'; color: var(--brass-deep); font-size: .5rem; margin-inline-end: .45rem; }
/* the anchor #leave-how is on the list inside the <details> (so a link opens it); the margin keeps the summary in view */
.lv-sum { list-style: none; margin: 0 0 .4rem; padding: 0; font-variant-numeric: tabular-nums; scroll-margin-top: 3.5rem; }
.lv-sum > li { display: flex; align-items: baseline; gap: .45rem; padding: .45rem 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.lv-sum .op { flex: none; width: .9rem; text-align: center; font-weight: 700; color: var(--brass-deep); }
.lv-sum .what { flex: 1; min-width: 0; font-size: .9rem; color: var(--qar); }
.lv-sum .what small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.75; }
.lv-sum .fig { flex: none; font-size: .95rem; font-weight: 500; }
.lv-sum > li.grp { border-bottom: 0; padding-bottom: .1rem; }
.lv-sum > li.part { border-bottom: 0; padding: .2rem 0; padding-inline-start: 1.35rem; }
.lv-sum > li.part .what { font-size: .85rem; color: var(--ink); }
.lv-sum > li.part .fig { font-size: .85rem; font-weight: 400; color: var(--muted); }
.lv-sum > li.part + li.grp { border-top: 1px solid var(--line); margin-top: .3rem; }   /* «+ مضاف» then «− المعتمد» */
.lv-sum > li.total { border-bottom: 0; border-top: 1.5px solid var(--qar); margin-top: .3rem; }
.lv-sum > li.total .what, .lv-sum > li.total .fig { font-weight: 700; font-size: 1rem; color: var(--qar); }
.lv-sum bdi[dir="ltr"] { white-space: nowrap; }   /* a date range never breaks inside its line */
.lv-out { margin: .1rem 0 .5rem; line-height: 1.85; }
.lv-out bdi { white-space: nowrap; }
.lv-bal-how { margin: .6rem 0 0; }
/* ---- v2.20 L D3 (صفحة المساعدة) ---- */
.help-page { max-width: 40rem; }
.help-sec { scroll-margin-top: .8rem; }
.help-sec > h2 { margin-bottom: .45rem; }
.help-sec p { margin: .35rem 0; line-height: 1.95; }
.help-sec h3 { font-size: .95rem; font-weight: 700; margin: 1.05rem 0 .25rem; color: var(--qar); }
.help-sec ul { margin: .25rem 0 .45rem; padding-inline-start: 1.15rem; }
.help-sec li { margin: .3rem 0; line-height: 1.9; }
.help-sec li::marker { color: var(--brass-deep); }
.help-sec .facts p { margin: .1rem 0; }
.help-go { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: .35rem 0 0; }
.help-go a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; font-weight: 500; }

/* ---- v2.20 G2 ---- */
/* «ملفي» #box: the two hint lines under «التصنيف», one per new kind, always shown (picture 6). */
.box-hints { margin: .45rem 0 0; }
.box-hints p { margin: .15rem 0; line-height: 1.85; }

/* ---- v2.20 H2 ---- */
/* «معاينة التعميم قبل الإصدار»: the employee's phone drawn as a box of a phone's width holding the real mine.php card
   and the notification row; the two stand side by side on a wide screen and stack on a phone. */
.cp-phones { display: flex; flex-wrap: wrap; gap: .9rem .8rem; align-items: flex-start; }
.cp-col { width: 354px; max-width: 100%; }
.cp-label { margin: 0 0 .35rem; }
.cp-phone { background: var(--ivory); border: 1px solid var(--line-strong); border-radius: 18px; padding: 1.1rem; }
.cp-phone > :last-child { margin-bottom: 0; }
.cp-phone button[disabled] { opacity: .45; cursor: not-allowed; }
.cp-phone button[disabled]:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.cp-pair { white-space: nowrap; }
.cp-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; }

/* ---- v2.20 I2 ---- */
.reg-tools { margin-top: .9rem; padding-top: .1rem; border-top: 1px solid var(--line); }
.reg-tools .hint { margin: .15rem 0 0; line-height: 1.8; }
.reg-count { margin: .3rem 0 0; font-weight: 700; color: var(--qar); }
.reg-count + .hint { margin: 0 0 .5rem; }
.article mark { background: color-mix(in srgb, var(--brass) 26%, #FFFFFF); color: inherit; border-radius: 3px; padding: 0 .12em;
                box-shadow: inset 0 -2px 0 var(--brass-deep); }

/* ---- v2.20 I3 ---- */
/* «مقارنة مادة بين الشركات»: the three columns stand side by side on a wide screen and one under another on a phone. */
.reg-compare { margin: .5rem 0 0; }
.cmp-legend { margin: 0 0 .2rem; line-height: 1.85; }
.cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: .7rem 0 0; align-items: start; }
@media (max-width: 920px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }
.cmp-col { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: .65rem .85rem .8rem; background: #FDFCF8; }
.cmp-col > h3 { margin: 0; font-size: 1.02rem; color: var(--qar); }
.cmp-title { margin: 0 0 .45rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.cmp-text { margin: 0; font-size: .9rem; line-height: 1.95; overflow-wrap: break-word; }
mark.cmp-diff { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 .12em;
                box-shadow: inset 0 -2px 0 var(--warn); }
.cmp-note, .cmp-source-co { margin: 0 0 .6rem; }
.cmp-note bdi { white-space: nowrap; }
.cmp-source { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); text-align: center; font-weight: 500; color: var(--qar); }

/* ---- v2.20 J2 ---- */
/* «حجم الشغل — <الشهر>» on /report (picture 10), the owner's alone: one table inside the house .tw — kinds down, the
   three companies and المجموع across, then the two times (hours) after a rule. «الصندوق» and «تعاميم» are caption rows
   with their kinds indented under them. */
.wl-table .wl-t1 { border-inline-start: 1px solid var(--line-strong); }   /* counts | times */
.wl-table tr.wl-group td { background: #FAF8F3; font-weight: 700; font-size: .84rem; color: var(--qar);
                           padding-top: .4rem; padding-bottom: .3rem; }
.wl-table tr.wl-sub td:first-child { padding-inline-start: 1.9rem; }
.wl-table td.wl-span { text-align: center; color: var(--muted); font-size: .82rem; }
.wl-notes { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--line); }
.wl-notes p { margin: .2rem 0; line-height: 1.8; }

/* ---- v2.20 I5 ---- */
/* /regulation for an account the regulation gate holds: the house's amber callout (.legal) right under the page's
   heading says why the home sent him here, a little larger than the legal lines it borrows; its jump link never breaks. */
.reg-gate { margin: 0 0 1rem; font-size: .95rem; }
.reg-gate p { margin: 0; }
.reg-gate p + p { margin-top: .35rem; }
.reg-gate-go { font-weight: 700; white-space: nowrap; }

/* ---- v2.20 FR5 ---- */
/* The bar's date is one piece: it never breaks at its hyphen («2026-10-» over «27»), on any screen. */
.top-date { white-space: nowrap; }
/* On a phone the 44-px «؟» (D1) beside the 44-px bell left the title too little of the bar: the date broke in two and
   two-word titles («كشوف الرواتب», «صندوق الموظفين») went to two lines. The bar's two gaps narrow and the date takes the
   header's small size (.76rem, as «حسابي — كلمة السر»); the bell and the «؟» keep their 44 px. Measured at 360 px: the
   title's room 112.7 → 149.6 px, the date 68 px on one line, the regulation page's title back to three lines (four with
   the date whole at its old size), every two-word title on one. */
@media (max-width: 920px) {
  .top { gap: .4rem; }
  .top-side { gap: .4rem; }
  .top-date { font-size: .76rem; }
}
/* The search field (the regulation box, the certificates board) was missing from the house input rule above: it drew
   the browser's bare box, 21 px tall. It takes every declaration of that rule, a 44-px floor and no native search look;
   its focus state is said again after it, as the house's focus rule stands before this one at the same weight. */
input[type=search] {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font: inherit;
  font-size: .92rem;
  background: #FBFAF7;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.75rem;
}
input[type=search]:focus { border-color: var(--brass); background: var(--paper); outline: none; }
/* On a phone the regulation box's label takes its own line, so the field has the row beside «بحث»
   (measured at 360 px: 62 → 195 px wide). */
@media (max-width: 920px) {
  .search-form label { flex-basis: 100%; }
}
/* ---- v2.21 T5 ---- */
.stmt-form { display: grid; gap: .6rem; max-width: 40rem; }
.stmt-form .stmt-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.stmt-links { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) { .stmt-open { display: none; } }
@media (display-mode: standalone) { .stmt-open { display: none; } }