/* زميل — مساحة العمل: أسطح عاجية وخضراء هادئة، وموافقة واضحة. */

body.app { min-block-size: 100dvh; }
body.app::before {
  content: ""; position: fixed; inset-inline: 0; top: 0; block-size: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 78% 12%, rgba(23, 63, 53, 0.13), transparent 70%),
    radial-gradient(34% 50% at 22% 6%, rgba(182, 163, 123, 0.09), transparent 70%);
}

/* ── الشريط العلوي الزجاجي ── */
.gbar {
  position: sticky; top: calc(12px + var(--safe-top)); z-index: 40;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  inline-size: calc(100% - 32px); max-inline-size: 1360px; block-size: 58px;
  margin: calc(12px + var(--safe-top)) auto 0; padding: 0 10px 0 10px;
  border: 1px solid var(--glass-line); border-radius: 29px;
  background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--sh-glass);
}
.gbar-start, .gbar-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gbar-end { justify-content: flex-end; }
.brand { display: inline-flex; align-items: center; gap: 9px; padding-inline: 4px 6px; color: var(--ink); text-decoration: none; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .brand:hover { text-decoration: none; } }
.brand-name { font-size: 18px; font-weight: 700; }
.brand-sub { font-size: 13px; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sep { inline-size: 1px; block-size: 18px; background: var(--line-2); margin-inline: 4px; }
.appicon.ink { background: linear-gradient(145deg, #345347, #142C25); }

.segnav { display: flex; gap: 2px; padding: 3px; border-radius: 22px; background: var(--fill); }
.segnav button, .segnav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  block-size: 36px; padding: 0 16px; border: 0; border-radius: 18px;
  background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease, color var(--t-fast) ease, transform 100ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .segnav button:hover, .segnav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); text-decoration: none; } }
.segnav [aria-current="page"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.04); }
.segnav button:active { transform: scale(0.97); }
.segnav .badge { position: static; }

.iconbtn {
  position: relative; display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); transition: background var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { background: var(--fill); color: var(--ink); } }
.iconbtn .badge { position: absolute; top: 2px; inset-inline-end: 0; }
.me {
  display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #536F62, #173F35); color: #fff; font-size: 13.5px; font-weight: 700;
}
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; padding-inline: 6px; }
.live::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink-4); }
.live.is-live { color: var(--green-t); }
.live.is-live::before { background: #347C51; box-shadow: 0 0 0 3px rgba(52, 124, 81, 0.18); }
.live.is-rec { color: var(--orange); }
.live.is-rec::before { background: #A47A37; }

/* قائمة زجاجية (الحساب، المزيد) */
.pop {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 50; min-inline-size: 260px; padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 18px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--sh-3); transform-origin: top left;
  animation: pop-in var(--t) var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.pop-head { padding: 10px 12px 12px; border-block-end: 1px solid var(--line); margin-block-end: 6px; }
.pop-head b { display: block; font-size: 15px; }
.pop-head small { display: block; font-size: 13px; color: var(--ink-3); }
.pop button, .pop a { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14.5px; text-align: start; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pop button:hover, .pop a:hover { background: var(--fill); text-decoration: none; } }
.pop .pop-note { padding: 8px 12px 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.anchor { position: relative; }

/* ── الصفحة ── */
.page { inline-size: 100%; max-inline-size: 1360px; margin: 0 auto; padding: 36px 32px 96px; }
.view { display: flex; flex-direction: column; gap: 28px; animation: view-swap 200ms var(--ease); }
@keyframes view-swap { from { opacity: 0; transform: translateY(4px); } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.head h1, .view-title { font-size: clamp(30px, 2.2vw + 14px, 44px); font-weight: 700; line-height: 1.12; }
.head h1 em, .view-title em { font-style: normal; color: var(--blue); }
.head .sub { margin-block-start: 10px; font-size: 18px; color: var(--ink-2); max-inline-size: 64ch; }
.head .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-h { display: flex; align-items: baseline; gap: 12px; margin-block-end: 14px; }
.sec-h h2 { font-size: 22px; font-weight: 700; }
.sec-h .more { margin-inline-start: auto; font-size: 15px; }
.muted { color: var(--ink-3); }
.fine { font-size: 12.5px; color: var(--ink-3); }

.card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: 24px; min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.card-h h2, .card-h h3 { font-size: 19px; font-weight: 700; }
.card-h .more { margin-inline-start: auto; font-size: 14.5px; }
.glasscard {
  border: 1px solid var(--glass-line); border-radius: var(--r-xl); padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--sh-glass);
}
.grid-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* الصور الرمزية */
.av { display: inline-grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 16px; }
.av-t0 { background: linear-gradient(135deg, #536F62, #173F35); }
.av-t1 { background: linear-gradient(135deg, #A47A37, #A6694B); }
.av-t2 { background: linear-gradient(135deg, #347C51, #346B5A); }
.av-xs { inline-size: 24px; block-size: 24px; font-size: 11.5px; }
.av-sm { inline-size: 32px; block-size: 32px; font-size: 13.5px; }
.av-lg { inline-size: 56px; block-size: 56px; font-size: 22px; }
.av-xl { inline-size: 72px; block-size: 72px; font-size: 28px; }
/* صورة الموظف الرقمي بدل الحرف */
.av-img { display: inline-block; object-fit: cover; background: var(--fill); box-shadow: inset 0 0 0 0.5px var(--line); }

/* الحالات */
.status { display: inline-flex; align-items: center; gap: 6px; block-size: 26px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.status-wait { background: var(--orange-soft); color: var(--orange); }
.status-done { background: var(--green-soft); color: var(--green-t); }
.status-reject { background: var(--red-soft); color: var(--red); }
.status-draft { background: var(--blue-soft); color: var(--blue-t); }
.status-idle { background: var(--fill); color: var(--ink-3); }

/* ── التنبيه الحرج: سطر واحد ── */
.crit { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(173, 63, 53, 0.18); box-shadow: var(--sh-1); }
.crit-ic { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--red); color: #fff; flex: none; }
.crit-ic svg { width: 16px; height: 16px; }
.crit p { flex: 1; min-width: 0; font-size: 15px; }
.crit.warn { border-color: rgba(163, 82, 0, 0.2); }
.crit.warn .crit-ic { background: #A47A37; }

/* ── «اليوم»: خط زمني بخط «الآن» ── */
.tl { display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 58px 10px minmax(0, 1fr); align-items: start; gap: 12px; padding-block: 11px; border-block-start: 1px solid var(--line); }
.tl li:first-child { border-block-start: 0; }
.tl time { font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: end; white-space: nowrap; }
.tl .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--blue); margin-block-start: 7px; }
.tl .past time { color: var(--ink-3); }
.tl .past .dot { background: var(--ink-4); }
.tl span { font-size: 14.5px; line-height: 1.55; }
.tl small { display: block; color: var(--ink-3); font-size: 13px; }
.tl .now { display: flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; color: var(--red); font-size: 12.5px; font-weight: 700; }
.tl .now::after { content: ""; flex: 1; block-size: 1.5px; border-radius: 1px; background: var(--red); }

/* ── «وخلف الكواليس»: بلاطات صغيرة ── */
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.mini {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 18px;
  background: rgba(255, 255, 255, 0.78); box-shadow: var(--sh-1); color: inherit; text-align: start; text-decoration: none;
  transition: box-shadow var(--t-fast) ease, transform 100ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .mini:hover { box-shadow: var(--sh-2); text-decoration: none; } }
.mini:active { transform: scale(0.98); }
.mini-ic { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; color: #fff; flex: none; }
.mini-ic svg { width: 19px; height: 19px; }
.mini b { display: block; font-size: 15px; }
.mini small { display: block; font-size: 13px; color: var(--ink-3); }
.ic-blue { background: #3B725D; } .ic-indigo { background: #536F62; } .ic-green { background: #347C51; } .ic-orange { background: #A47A37; } .ic-pink { background: #FF375F; } .ic-teal { background: #30B0C7; } .ic-gray { background: #6B8072; }

/* ── الحلقة (نسبة) ── */
.ring { --p: 0; --c: var(--blue); position: relative; inline-size: 64px; block-size: 64px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--fill) 0); }
.ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.ring b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.ring.lg { inline-size: 88px; block-size: 88px; }
.ring.lg::after { inset: 9px; }
.ring.lg b { font-size: 18px; }

/* ── مؤشرات ── */
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); min-width: 0; border: 0; text-align: start; }
.kpi .k { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.kpi b { font: 700 30px/1.15 var(--font-num); }
.kpi .s { font-size: 13px; color: var(--ink-3); }
.kpi .up { color: var(--green-t); font-weight: 600; }
.kpi .down { color: var(--red); font-weight: 600; }
.bar { display: block; block-size: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; margin-block-start: 6px; }
.bar i { display: block; block-size: 100%; border-radius: 3px; background: var(--blue); }

/* «كل المؤشرات» مطوية */
.fold { border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.6); box-shadow: var(--sh-1); }
.fold > summary { display: flex; align-items: center; gap: 10px; min-block-size: 56px; padding: 0 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "‹"; margin-inline-start: auto; font-size: 22px; color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--t) var(--ease); }
.fold[open] > summary::after { transform: rotate(90deg); }
.fold > .fold-in { padding: 4px 22px 22px; }

/* الجداول */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
table { inline-size: 100%; border-collapse: collapse; font-size: 14.5px; }
th { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: start; padding: 10px 12px; border-block-end: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px; border-block-end: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-block-end: 0; }
tr.is-total td { font-weight: 700; background: var(--canvas-2); }
.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-link { cursor: pointer; transition: background var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) { .row-link:hover td { background: var(--canvas-2); } }

/* القوائم الصفّية */
.rows { display: flex; flex-direction: column; }
.rows > li { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-block-start: 1px solid var(--line); min-width: 0; }
.rows > li:first-child { border-block-start: 0; padding-block-start: 4px; }
.rows .grow { flex: 1; min-width: 0; }
.rows b { display: block; font-size: 15.5px; font-weight: 600; }
.rows small { display: block; font-size: 13.5px; color: var(--ink-3); }

/* ── شريط التبويبات على الجوال: كبسولة زجاجية عائمة ── */
.tabbar {
  display: none; position: fixed; z-index: 45; inset-inline: 14px; bottom: calc(14px + var(--safe-bottom));
  block-size: 64px; padding: 5px; gap: 2px;
  border: 1px solid var(--glass-line); border-radius: 32px;
  background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.tabbar button { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 27px; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { background: var(--blue-soft); color: var(--blue-t); }
.tabbar .badge { position: absolute; top: 3px; inset-inline-start: calc(50% + 4px); }

.toast {
  position: fixed; z-index: 80; bottom: 28px; inset-inline-start: 50%; transform: translateX(50%);
  max-inline-size: min(560px, calc(100% - 32px)); padding: 12px 20px; border-radius: var(--r-pill);
  background: rgba(16, 45, 38, 0.92); color: #fff; font-size: 14.5px; font-weight: 500; text-align: center;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--sh-3);
  animation: toast-in var(--t) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(50%, 10px); } }

@media (max-width: 1180px) {
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .segnav button, .segnav a { padding: 0 12px; }
  .live { display: none; }
}
@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gbar { grid-template-columns: minmax(0, 1fr) auto; inline-size: calc(100% - 20px); block-size: 54px; top: calc(10px + var(--safe-top)); margin-block-start: calc(10px + var(--safe-top)); }
  .gbar-mid { display: none; }
  .brand-sep, .brand-sub { display: none; }
  .tabbar { display: flex; }
  html { scroll-padding-block-end: calc(96px + var(--safe-bottom)); }
  .page { padding: 24px 16px calc(110px + var(--safe-bottom)); }
  .toast { bottom: calc(96px + var(--safe-bottom)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 20px; }
  .head .sub { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .minis { grid-template-columns: minmax(0, 1fr); }
  .kpi b { font-size: 26px; }
}
/* العنوان يستقبل التركيز عند التنقل لقارئ الشاشة، بلا إطار مرئي */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }