/* Lumax Media HR — Design System
   الهوية مستوحاة من دليل الموظفين: نيلي (Indigo) كلون أساسي، ذهبي/برونزي للإطار القانوني، وخط IBM Plex Sans Arabic. */
:root {
  --brand-50: #fdf6ea; --brand-100: #f9e9cc; --brand-200: #f0d09b; --brand-300: #e2b169;
  --brand-500: #c07d1c; --brand-600: #a8690f; --brand-700: #8a560c; --brand-900: #4a2f08;
  --accent: #a16207; --accent-bg: #fdf6e3;
  --ink: #12131a; --ink-2: #3a3d4a; --muted: #6b6f80; --faint: #9a9db0;
  --line: #e8e9ef; --line-2: #f1f2f6; --bg: #fafafb; --surface: #ffffff; --surface-2: #fafbfe;
  --ok: #0f9960; --ok-bg: #e7f7ef; --warn: #b7791f; --warn-bg: #fff6e0; --bad: #d63b3b; --bad-bg: #fdecec;
  --info: #2563eb; --info-bg: #e8f0fe; --gray-bg: #f0f1f5; --orange: #d9620f; --orange-bg: #fff0e3;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(18, 19, 26, .05);
  --shadow: 0 1px 3px rgba(18, 19, 26, .06), 0 4px 16px rgba(18, 19, 26, .04);
  --shadow-lg: 0 20px 50px rgba(18, 19, 26, .18);
  --sidebar-w: 264px; --topbar-h: 64px;
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14.5px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.num { white-space: nowrap; }
/* الأرقام في الجداول تُحاذى مع العناوين (يمين في العربية، يسار في الإنجليزية) */
[dir=rtl] .table .num { text-align: right; }
[dir=ltr] .table .num { text-align: left; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 500; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--brand-200); }

/* ── Layout ── */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: #fff; color: var(--ink-2); position: fixed; inset-block: 0; inset-inline-start: 0;
  display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease; border-inline-end: 1px solid var(--line);
}
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line-2); }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #d39a3e, #a8690f 60%, #7a4b09); display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .5px; font-family: var(--mono); font-size: 15px; box-shadow: 0 3px 10px rgba(168,105,15,.25); flex-shrink: 0; }
.brand-name { font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: .2px; direction: ltr; text-align: start; }
.brand-sub { font-size: 11.5px; color: var(--muted); }
.lang-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 12.5px; cursor: pointer; flex-shrink: 0; }
.lang-btn:hover { border-color: var(--brand-200); color: var(--brand-600); }
.nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; }
.nav-section { font-size: 11.5px; font-weight: 600; color: var(--faint); padding: 16px 12px 6px; border-top: 1px solid var(--line-2); margin-top: 8px; }
.nav-section:first-child { border-top: 0; margin-top: 0; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--ink-2); font-weight: 500; margin-bottom: 2px; text-decoration: none; position: relative; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nav a.active svg { color: var(--brand-600); }
.nav svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.nav .count { margin-inline-start: auto; background: var(--warn-bg); color: var(--warn); border: 1px solid #f5dfa6; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; line-height: 18px; }
.sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: var(--surface-2); }
.sidebar-foot .who { flex: 1; min-width: 0; }
.sidebar-foot .who b { display: block; color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who span { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: end; }
[dir=ltr] .sidebar-foot .who span { text-align: start; }
.sidebar-foot button { background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-radius: 9px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.sidebar-foot button:hover { color: var(--bad); border-color: #f7c5c5; }
.sidebar-foot button svg { width: 17px; height: 17px; }

.main { flex: 1; margin-inline-start: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 28px; position: sticky; top: 0; z-index: 30; }
.topbar h1 { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-tile { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex-shrink: 0; }
.title-tile svg { width: 19px; height: 19px; }
.lang-top { color: var(--ink-2); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; position: relative; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); border-color: #d7d9e5; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.menu-toggle { display: none; }
#main:focus { outline: none; }
.content { padding: 26px 28px; max-width: 1480px; width: 100%; margin: 0 auto; }
.backdrop { display: none; }

/* ── Page header ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h2 { font-size: 22px; letter-spacing: -.2px; }
.page-head p { color: var(--muted); margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Cards & grid ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card-head h3 { font-size: 15.5px; display: flex; align-items: center; gap: 10px; }
.card-head h3 .hic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex-shrink: 0; }
.card-head h3 .hic svg { width: 16px; height: 16px; }
.card-head .sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12.5px; } .bold { font-weight: 700; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); }
.divider { height: 1px; background: var(--line-2); margin: 16px 0; }

/* Stat cards — بطاقة بيضاء بحد علوي ملوّن وأيقونة في الزاوية (على نمط لوحات SaaS) */
.stat { padding: 18px 20px 20px; display: flex; gap: 14px; align-items: flex-start; border-top: 3px solid var(--line); }
.stat > div:not(.ic) { flex: 1; min-width: 0; }
.stat .ic { order: 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.stat .ic svg { width: 20px; height: 20px; }
.stat .label { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat .value { font-size: 28px; font-weight: 700; line-height: 1.2; margin-top: 8px; font-family: var(--mono); letter-spacing: -.5px; color: var(--ink); }
.stat .value small { font-size: 14px; color: var(--muted); font-weight: 500; font-family: var(--font); letter-spacing: 0; }
.stat .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
a.stat { color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.stat:hover { box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.tone-brand { border-top-color: var(--brand-500); } .tone-brand .ic { background: var(--brand-50); color: var(--brand-600); }
.tone-ok { border-top-color: #16a34a; } .tone-ok .ic { background: var(--ok-bg); color: var(--ok); }
.tone-warn { border-top-color: #e5a50a; } .tone-warn .ic { background: var(--warn-bg); color: var(--warn); }
.tone-bad { border-top-color: #e04848; } .tone-bad .ic { background: var(--bad-bg); color: var(--bad); }
.tone-info { border-top-color: #3b82f6; } .tone-info .ic { background: var(--info-bg); color: var(--info); }
.tone-gray { border-top-color: #a0a4b8; } .tone-gray .ic { background: var(--gray-bg); color: var(--ink-2); }
/* شريط ملخص: بطاقة واحدة مقسّمة لخلايا */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.strip > * { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-inline-start: 1px solid var(--line); color: inherit; text-decoration: none !important; }
.strip > *:first-child { border-inline-start: 0; }
.strip > a:hover { background: #fff; }
.strip .ic { order: 2; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; margin-inline-start: auto; }
.strip .ic svg { width: 21px; height: 21px; }
.strip .label { font-size: 12.5px; color: var(--muted); }
.strip .value { font-size: 21px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
.strip .value small { font-size: 13px; color: var(--muted); font-family: var(--font); font-weight: 500; }
.strip .tone-brand, .strip .tone-ok, .strip .tone-warn, .strip .tone-bad, .strip .tone-info, .strip .tone-gray { border-top: 0; }
.tone-ok .value.colored { color: var(--ok); } .tone-warn .value.colored { color: var(--warn); } .tone-bad .value.colored { color: var(--bad); } .tone-info .value.colored { color: var(--info); } .tone-brand .value.colored { color: var(--brand-600); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; text-decoration: none !important; }
.btn:hover { background: var(--surface-2); border-color: #d2d4e2; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .input:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 1px; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(168,105,15,.3); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #bf2f2f; border-color: #bf2f2f; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #0c7f4f; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--gray-bg); }
.btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
.btn[disabled], .btn.loading { opacity: .6; pointer-events: none; }
.btn.loading::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-block { width: 100%; }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .req { color: var(--bad); }
.input, select.input, textarea.input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d9dbe6; border-radius: 9px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.input[readonly] { background: var(--surface-2); color: var(--muted); }
.input-sm { height: 34px; font-size: 13px; }
input[type=date].input, input[type=time].input, input[type=month].input { direction: ltr; text-align: end; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--brand-600); margin-top: 2px; flex-shrink: 0; }
.check small { display: block; color: var(--muted); font-weight: 400; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #cfd1dd; border-radius: 22px; transition: .2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; inset-inline-start: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--brand-600); }
.switch input:checked + span::before { transform: translateX(-18px); }
[dir=ltr] .switch input:checked + span::before { transform: translateX(18px); }

/* ── Toolbar / filters ── */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.toolbar .search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .search svg { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); }
.toolbar .search .input { padding-inline-start: 36px; height: 36px; }
.toolbar select.input { width: auto; min-width: 140px; height: 36px; }
.toolbar input[type=date].input { width: auto; height: 36px; }

/* ── Tabs / segmented ── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; display: flex; align-items: center; gap: 7px; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.tabs .count { background: var(--warn-bg); color: var(--warn); font-size: 11px; border-radius: 99px; padding: 0 7px; font-weight: 700; }
.seg { display: inline-flex; background: var(--gray-bg); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: #fffcf6; }
.table tr.clickable { cursor: pointer; }
.table .actions { text-align: end; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person > div > b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person > div > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--gray-bg); color: var(--ink-2); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.plain::before { display: none; }
.b-new { background: #eef2ff; color: #4338ca; }
.b-in_progress { background: var(--info-bg); color: var(--info); }
.b-in_review { background: var(--warn-bg); color: var(--warn); }
.b-changes_requested { background: var(--orange-bg); color: var(--orange); }
.b-completed, .b-approved, .b-issued, .b-ok { background: var(--ok-bg); color: var(--ok); }
.b-postponed, .b-cancelled, .b-draft, .b-gray { background: var(--gray-bg); color: #5c6070; }
.b-pending, .b-warn { background: var(--warn-bg); color: var(--warn); }
.b-rejected, .b-bad { background: var(--bad-bg); color: var(--bad); }
.b-info { background: var(--info-bg); color: var(--info); }
.b-brand { background: var(--brand-50); color: var(--brand-600); }
.b-legal { background: var(--accent-bg); color: var(--accent); }
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.prio i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.prio-low i { background: #a0a4b8; } .prio-medium i { background: var(--info); } .prio-high i { background: var(--orange); } .prio-urgent i { background: var(--bad); }
.prio-urgent { color: var(--bad); }

/* ── Alerts ── */
.alert { display: flex; gap: 12px; padding: 13px 16px; border-radius: 10px; border: 1px solid; font-size: 13.5px; align-items: flex-start; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.alert b { display: block; margin-bottom: 2px; }
.alert-info { background: var(--info-bg); border-color: #c9dafb; color: #1e40af; }
.alert-warn { background: var(--warn-bg); border-color: #f5dfa6; color: #7c5410; }
.alert-bad { background: var(--bad-bg); border-color: #f7c5c5; color: #9b2222; }
.alert-ok { background: var(--ok-bg); border-color: #b9e8d0; color: #0b6b44; }
.alert-legal { background: var(--accent-bg); border-color: #efdcae; color: #6b4206; border-inline-start: 3px solid var(--accent); }
.alert ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* ── Attendance hero ── */
.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #fff 0%, #fff 55%, var(--brand-50) 100%); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--brand-500); }
.hero::after { content: ''; position: absolute; inset-inline-end: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(176,122,42,.12), transparent 70%); }
.hero .card-body { position: relative; z-index: 1; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 22px 24px; }
.hero h2 { font-size: 20px; }
.hero .muted { color: var(--muted); }
.clock { font-family: var(--mono); font-size: 36px; font-weight: 600; letter-spacing: 1px; direction: ltr; color: var(--brand-900); }
.hero-stats { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
.hero-stats div { padding: 10px 18px; border-inline-start: 1px solid var(--line); }
.hero-stats div:first-child { border-inline-start: 0; }
.hero-stats div span { display: block; font-size: 12px; color: var(--muted); }
.hero-stats div b { font-family: var(--mono); font-size: 17px; direction: ltr; display: inline-block; }
.hero .btn-light { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.hero .btn-light:hover { background: var(--brand-700); }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--ok-bg); color: #0b6b44; border: 1px solid #b9e8d0; }
.pill.neutral { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.pill .led { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.pill.off { background: var(--bad-bg); color: #9b2222; border-color: #f7c5c5; }
.pill.off .led { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }

/* ── Lists ── */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 600; }
.list .meta { font-size: 12.5px; color: var(--muted); }
.list a.title { color: var(--ink); }
.list-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--gray-bg); color: var(--ink-2); }
.list-ic svg { width: 17px; height: 17px; }
.unread { background: #f8f8ff; }
.unread .title::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--brand-500); border-radius: 50%; margin-inline-start: 8px; vertical-align: middle; }

/* ── Progress / meter ── */
.meter { height: 8px; background: var(--gray-bg); border-radius: 8px; overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; }
.meter .used { background: var(--brand-500); } .meter .future { background: var(--brand-200); } .meter .late { background: var(--orange); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; vertical-align: middle; }
.balance-num { font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
.kv dd.mono { text-align: start; unicode-bidi: plaintext; }

/* Bars (mini chart) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 10px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; min-width: 0; }
.bars .b i { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--brand-500); display: block; }
.bars .b i.late { background: var(--orange); border-radius: 0; }
.bars .b span { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }

/* ── Task detail ── */
.task-desc { white-space: pre-wrap; line-height: 1.8; color: var(--ink-2); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .bubble { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px 12px 12px 12px; padding: 10px 14px; white-space: pre-wrap; margin-top: 4px; }
.timeline .admin .bubble { background: var(--brand-50); border-color: var(--brand-100); }
.timeline .sys { color: var(--muted); font-size: 12.5px; align-items: center; }
.timeline .sys svg { width: 14px; height: 14px; }
.file-list { display: grid; gap: 8px; }
.file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.file .ext { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-family: var(--mono); text-transform: uppercase; flex-shrink: 0; }
.ext-img { background: #e9f7ef; color: #13804f; } .ext-vid { background: #fdecec; color: #c02c2c; } .ext-pdf { background: #fff0e3; color: #c35a0b; }
.ext-ai { background: #fff4e0; color: #9a5b00; } .ext-psd { background: #e5f1ff; color: #1d5fbf; } .ext-doc { background: #eef0ff; color: #4c46c4; } .ext-other { background: var(--gray-bg); color: var(--ink-2); }
.file .info { flex: 1; min-width: 0; }
.file .info b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.file .info span { font-size: 12px; color: var(--muted); }
.dropzone { display: block; border: 2px dashed #d3d5e3; border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; background: var(--surface-2); }
.dropzone:hover, .dropzone.over { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.dropzone svg { display: block; width: 28px; height: 28px; margin: 0 auto 6px; }
.progress { height: 6px; background: var(--gray-bg); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--brand-500); width: 0; transition: width .2s; }

/* Kanban-like status columns */
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.status-strip button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); display: flex; gap: 7px; align-items: center; }
.status-strip button.active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.status-strip button em { font-style: normal; font-family: var(--mono); color: var(--muted); }
.task-card { display: block; padding: 15px 18px; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none !important; transition: background .1s; }
.task-card:hover { background: #fffcf6; }
.task-card:last-child { border-bottom: 0; }
.task-card .t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.task-card .m { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.task-card .m span { display: inline-flex; align-items: center; gap: 4px; }
.task-card .m svg { width: 14px; height: 14px; }
.overdue { color: var(--bad) !important; font-weight: 600; }

/* لوحة المهام حسب التصنيف (خانات) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); border-top: 3px solid var(--c, #94a3b8); border-radius: var(--radius) var(--radius) 0 0; background: #fff; }
.kcol-head b { flex: 1; font-size: 14px; }
.kcol-head .n { font-family: var(--mono); font-size: 12px; background: var(--gray-bg); border-radius: 99px; padding: 0 8px; color: var(--muted); }
.kcol-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.kcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: inherit; text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.kcard:hover { box-shadow: var(--shadow); border-color: var(--brand-200); }
.kcard .t { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.kcard .m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.kcard .m svg { width: 13px; height: 13px; vertical-align: -2px; }
.kempty { text-align: center; color: var(--faint); font-size: 12.5px; padding: 18px 0; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); }

/* ── Modal ── */
.modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; background: rgba(18, 19, 35, .48); backdrop-filter: blur(2px); overflow-y: auto; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; animation: pop .18s ease; display: flex; flex-direction: column; max-height: none; }
.modal.lg { max-width: 820px; } .modal.sm { max-width: 420px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.modal-head h3 { flex: 1; font-size: 16.5px; }
.modal-body { padding: 22px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }
.confirm-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; }
.confirm-ic svg { width: 22px; height: 22px; }

/* ── Toasts ── */
.toasts { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 11px; align-items: flex-start; background: #1b1c29; color: #f1f2fb; padding: 13px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); animation: slide .2s ease; font-size: 13.5px; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.ok svg { color: #4ade80; } .toast.bad svg { color: #f87171; } .toast.warn svg { color: #fbbf24; } .toast.info svg { color: #a3a8fb; }
.toast b { display: block; }
.toast .x { margin-inline-start: auto; background: none; border: 0; color: #9a9cb5; cursor: pointer; padding: 0 0 0 4px; font-size: 18px; line-height: 1; }
.toast.hide { animation: fadeout .25s ease forwards; }

/* ── Dropdown (notifications) ── */
.dropdown { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 380px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; animation: pop .15s ease; }
.dropdown .list { max-height: 420px; overflow-y: auto; }
.dropdown .list li { padding: 12px 16px; cursor: pointer; }
.dropdown .list li:hover { background: var(--surface-2); }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.dropdown-foot { padding: 10px; text-align: center; border-top: 1px solid var(--line-2); }

/* ── States ── */
.state { text-align: center; padding: 48px 20px; color: var(--muted); }
.state .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--gray-bg); display: grid; place-items: center; margin: 0 auto 14px; color: var(--faint); }
.state .ic svg { width: 26px; height: 26px; }
.state h4 { color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.state.error .ic { background: var(--bad-bg); color: var(--bad); }
.state .btn { margin-top: 14px; }
.skeleton { background: linear-gradient(90deg, #eceef4 0%, #f6f7fb 50%, #eceef4 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
.sk-line { height: 13px; margin: 10px 0; }
.sk-card { height: 104px; }
.loader { display: flex; justify-content: center; padding: 40px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--brand-100); border-top-color: var(--brand-500); border-radius: 50%; animation: spin .8s linear infinite; }

/* ── Salary slip ── */
.slip { max-width: 760px; margin: 0 auto; }
.slip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 26px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.slip table { width: 100%; border-collapse: collapse; }
.slip td { padding: 10px 26px; border-bottom: 1px solid var(--line-2); }
.slip td:last-child { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip .total td { font-weight: 700; font-size: 17px; background: var(--brand-50); color: var(--brand-900); border-bottom: 0; }
.slip .sect td { background: var(--surface-2); font-weight: 700; font-size: 12px; color: var(--muted); }

/* ── Login ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 45%, #fbefe0 0%, #fdf8f1 30%, #fff 60%); }
.login-box { width: 100%; max-width: 440px; text-align: center; }
.login-logo { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--brand-600); }
.login-box h1 { font-size: 28px; letter-spacing: -.5px; font-weight: 800; }
.login-box > p { color: var(--muted); margin-top: 6px; }
.login form { margin-top: 36px; text-align: start; display: flex; flex-direction: column; gap: 18px; }
.login label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--brand-600); margin-bottom: 8px; text-transform: uppercase; }
.login .input { height: 52px; border-radius: 12px; background: rgba(240,234,227,.7); border-color: #e2dbd2; font-size: 15px; }
.login .input:focus { background: #fff; }
.login .btn-signin { height: 58px; border-radius: 99px; border: 0; background: var(--brand-600); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; box-shadow: 0 8px 24px rgba(168,105,15,.25); }
.login .btn-signin:hover { background: var(--brand-700); }
.login .btn-signin.loading { opacity: .7; pointer-events: none; }
.login .lang-switch { position: fixed; top: 18px; inset-inline-end: 18px; }

/* ── Misc ── */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-bg); border-radius: 7px; padding: 3px 9px; font-size: 12.5px; font-family: var(--mono); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; font-size: 15px; line-height: 1; }
.code { font-family: var(--mono); background: var(--gray-bg); padding: 2px 7px; border-radius: 6px; font-size: 12.5px; direction: ltr; display: inline-block; }
.pw-box { font-family: var(--mono); font-size: 20px; text-align: center; background: var(--brand-50); border: 1px dashed var(--brand-300); padding: 16px; border-radius: 12px; direction: ltr; letter-spacing: 1px; user-select: all; }
.empty-dash { color: var(--faint); }
.legal-tag { display: inline-flex; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); border: 1px solid #efdcae; }
.policy-tag { display: inline-flex; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 16px); }
.settings-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500; text-decoration: none; }
.settings-nav a:hover { background: var(--gray-bg); }
.settings-section { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.board-item { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.board-item .t { font-size: 12px; color: var(--muted); font-family: var(--mono); direction: ltr; text-align: start; }
@media print {
  .sidebar, .topbar, .no-print, .toasts { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes slide { from { opacity: 0; transform: translateY(12px); } }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > *:nth-child(3) { border-inline-start: 0; }
  .strip > *:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .lang-top span { display: none; }
  .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
  [dir=ltr] .sidebar { transform: translateX(-100%); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(18,19,35,.45); z-index: 35; }
  .main { margin-inline-start: 0; }
  .menu-toggle { display: grid; }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}
@media (max-width: 640px) {
  .content { padding: 16px; }
  .topbar { padding: 0 14px; }
  .g-2, .g-3, .g-4, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip > * { border-inline-start: 0 !important; border-top: 1px solid var(--line); }
  .strip > *:first-child { border-top: 0; }
  .title-tile { display: none; }
  .page-head h2 { font-size: 19px; }
  .stat .value { font-size: 22px; }
  .clock { font-size: 30px; }
  .hero .card-body { padding: 20px; }
  .modal-root { padding: 0; align-items: flex-end; }
  .modal { border-radius: 18px 18px 0 0; max-height: 94vh; overflow-y: auto; }
  .modal-foot { border-radius: 0; position: sticky; bottom: 0; }
  .modal-foot .btn { flex: 1; }
  .toolbar .search { max-width: none; min-width: 100%; }
  .toolbar select.input, .toolbar input[type=date].input { flex: 1; }
  .table th, .table td { padding: 10px 12px; }
  .hide-sm { display: none !important; }
  .toasts { inset-inline: 12px; bottom: 12px; max-width: none; }
}

/* ── التقويم ── */
.cal-toolbar .cal-title { font-size: 16px; min-width: 150px; text-align: center; }
[dir=ltr] .cal-toolbar [data-prev] svg, [dir=ltr] .cal-toolbar [data-next] svg { transform: scaleX(-1); }
.legend-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.legend-btn i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.legend-btn em { font-style: normal; font-family: var(--mono); color: var(--muted); }
.legend-btn.off { opacity: .45; text-decoration: line-through; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-dow.off { color: var(--bad); }
.cal-day { min-height: 118px; padding: 6px; border-bottom: 1px solid var(--line-2); border-inline-start: 1px solid var(--line-2); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .1s; }
.cal-day:nth-child(7n + 1) { border-inline-start: 0; }
.cal-day:hover { background: #fffcf6; }
.cal-day.out { background: var(--surface-2); }
.cal-day.blank { background: var(--surface-2); cursor: default; }
.cal-day.blank:hover { background: var(--surface-2); }
.cal-day.out .cal-num { color: var(--faint); }
.cal-day.weekend { background: #fffafa; }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--brand-300); }
.cal-num { font-family: var(--mono); font-size: 12.5px; font-weight: 600; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-num { background: var(--brand-600); color: #fff; }
.cal-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev { display: block; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); border-inline-start: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; }
.ev.pending { background: repeating-linear-gradient(-45deg, #fff, #fff 4px, color-mix(in srgb, var(--c) 10%, #fff) 4px, color-mix(in srgb, var(--c) 10%, #fff) 8px); }
.ev-more { font-size: 11px; color: var(--muted); font-weight: 600; padding-inline-start: 4px; }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
@media (max-width: 760px) {
  .cal-day { min-height: 58px; padding: 4px; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; }
  .cal-dow { font-size: 10.5px; padding: 8px 2px; }
}

/* قوائم الاختيار: سهم مخصّص أنيق بدلاً من سهم المتصفح */
select.input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9db0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px 16px;
}
[dir=rtl] select.input { background-position: left 12px center; padding-left: 36px; padding-right: 12px; }
[dir=ltr] select.input { background-position: right 12px center; padding-right: 36px; padding-left: 12px; }
select.input:hover { border-color: #c9ccdb; }
select.input:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8690f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* ── منتقي التاريخ والوقت ── */
.picker { position: relative; display: inline-block; width: 100%; min-width: 150px; }
.toolbar .picker { width: auto; }
.picker-native { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; caret-color: transparent; }
.picker-face { display: flex !important; align-items: center; gap: 9px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; }
.picker.sm .picker-face { height: 34px; font-size: 13px; }
.toolbar .picker-face { height: 36px; }
.picker-ic { display: grid; place-items: center; color: var(--brand-600); flex-shrink: 0; }
.picker-ic svg { width: 17px; height: 17px; }
.picker-text { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.picker-text.ph { color: var(--faint); font-weight: 400; }
.picker:hover .picker-face { border-color: #c9ccdb; }
.picker.open .picker-face, .picker-native:focus-visible + .picker-face { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.picker-face.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.dp-pop { position: absolute; z-index: 300; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(18,19,35,.16), 0 2px 6px rgba(18,19,35,.06); padding: 12px; animation: pop .14s ease; width: 300px; max-width: calc(100vw - 16px); }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dp-title { flex: 1; border: 0; background: none; font-weight: 700; font-size: 14.5px; padding: 7px; border-radius: 8px; cursor: pointer; color: var(--ink); text-align: center; }
.dp-title:hover { background: var(--brand-50); color: var(--brand-700); }
.dp-title.static { cursor: default; }
.dp-title.static:hover { background: none; color: var(--ink); }
.dp-nav { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.dp-nav:hover { border-color: var(--brand-300); color: var(--brand-600); }
.dp-nav svg { width: 16px; height: 16px; }
[dir=rtl] .dp-nav svg { transform: scaleX(-1); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dp-week span { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.dp-week .fri { color: var(--bad); }
.dp-d { height: 36px; border: 0; background: none; border-radius: 9px; font-weight: 500; font-size: 13.5px; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums; }
.dp-d:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-700); }
.dp-d.fri { color: #c55; }
.dp-d.today { box-shadow: inset 0 0 0 1.5px var(--brand-300); font-weight: 700; }
.dp-d.sel { background: var(--brand-600); color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(168,105,15,.3); }
.dp-d:disabled { color: #cfd1db; cursor: not-allowed; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-m { height: 44px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.dp-m:hover { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); }
.dp-m.sel { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.dp-link { border: 0; background: none; color: var(--brand-600); font-weight: 700; font-size: 13px; cursor: pointer; padding: 5px 8px; border-radius: 7px; }
.dp-link:hover { background: var(--brand-50); }
.dp-link.muted { color: var(--muted); }
.dp-link:disabled { opacity: .4; cursor: not-allowed; }
.tp-pop { width: 290px; }
.tp-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; direction: ltr; }
.tp-chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 99px; padding: 4px 0; font-size: 12px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tp-chip:hover, .tp-chip.sel { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.tp-cols { display: flex; align-items: stretch; gap: 6px; }
.tp-col { position: relative; flex: 1; height: 190px; overflow-y: auto; scroll-padding: 6px; display: flex; flex-direction: column; gap: 3px; padding: 2px; scrollbar-width: thin; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.tp-col button { flex-shrink: 0; height: 34px; border: 0; background: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tp-col button:hover { background: #fff; color: var(--brand-700); }
.tp-col button.sel { background: var(--brand-600); color: #fff; }
.tp-sep { display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--muted); }
.tp-preview { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; direction: ltr; }

/* عناصر فرعية في القائمة الجانبية (الشركات) */
.nav a.sub { padding-block: 6px; padding-inline-start: 40px; font-size: 13px; color: var(--muted); }
.nav a.sub.active { color: var(--brand-700); }
.sub-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }