/* ==========================================================================
   نظام المكتب — واجهة عمل يومية: واضحة، كثيفة المعلومات، بهوية المكتب (أخضر + ذهبي)
   ========================================================================== */
:root {
  --green-950: #061C13; --green-900: #0B3324; --green-800: #0F3B28; --green-700: #155036; --green-100: #E7EFEA; --green-50: #F2F7F4;
  --gold-600: #A9832F; --gold-500: #C9A24B; --gold-400: #D9BA6E; --gold-100: #F6EEDB;
  --bg: #F4F3EE; --surface: #FFFFFF; --ink: #1B2420; --muted: #5F6B65; --line: #E3DFD4; --line-2: #EEEBE3;
  --blue: #1D5FA7; --blue-bg: #E8F0FA; --red: #A12A2A; --red-bg: #FBECEC; --amber: #8A5A00; --amber-bg: #FFF4D6; --gray-bg: #EFEEEA;
  --font: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --r: 10px; --r-lg: 14px; --sh: 0 1px 2px rgba(11, 51, 36, .06), 0 4px 14px rgba(11, 51, 36, .05);
  --side: 264px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.7 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--green-800); }
a:hover { color: var(--gold-600); }
h1, h2, h3 { margin: 0; line-height: 1.4; color: var(--green-900); }
p { margin: 0 0 .75rem; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, monospace; font-size: .9em; background: var(--gray-bg); padding: 0 .3em; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; top: -80px; inset-inline-start: 12px; z-index: 100; background: var(--gold-500); color: var(--green-950); padding: 8px 16px; border-radius: var(--r); font-weight: 700; }
.skip-link:focus { top: 12px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .ta-r { text-align: right; }
.late { color: var(--red); font-weight: 600; }
.req { color: var(--red); }
.inline { display: inline; }

/* ---------- الإطار ---------- */
.o { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.o-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--green-900); color: rgba(255, 255, 255, .85); overflow-y: auto; }
.o-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.o-brand img { border-radius: 6px; height: 48px; width: auto; }
.o-brand strong { display: block; font-family: "Amiri", serif; font-size: 1.25rem; color: #fff; line-height: 1.2; }
.o-brand small { color: var(--gold-400); font-size: .78rem; }
.o-brand:hover { color: #fff; }
.o-nav { flex: 1; padding: 8px 10px 16px; }
.o-nav__sec { margin: 14px 10px 6px; font-size: .72rem; letter-spacing: .03em; color: rgba(255, 255, 255, .45); }
.o-nav__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 500; }
.o-nav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.o-nav__link.is-active { background: color-mix(in srgb, var(--gold-500) 16%, transparent); color: #fff; box-shadow: inset -3px 0 0 var(--gold-500); }
.o-nav__link .icon { color: var(--gold-400); }
.o-ext { margin-inline-start: auto; opacity: .5; }
.o-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.o-user strong { display: block; color: #fff; font-size: .92rem; } .o-user small { color: var(--gold-400); font-size: .78rem; }
.o-user__out { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.o-user__out:hover { border-color: var(--gold-500); color: var(--gold-400); }
.o-main { min-width: 0; display: flex; flex-direction: column; }
.o-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 28px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.o-top__title { font-size: 1.25rem; flex: 1; }
.o-top__date { font-size: .85rem; color: var(--muted); text-align: left; } .o-top__date small { display: block; font-size: .78rem; }
.o-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; place-items: center; }
.o-content { padding: 24px 28px 48px; max-width: 1400px; width: 100%; }
.o-content:focus { outline: none; }
.o-backdrop { display: none; }

/* ---------- المكونات ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 16px; border: 1.5px solid transparent; border-radius: 8px;
  background: var(--gray-bg); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(.97); color: inherit; }
.btn--gold { background: var(--gold-500); color: var(--green-950); } .btn--gold:hover { background: var(--gold-400); color: var(--green-950); }
.btn--primary { background: var(--green-800); color: #fff; } .btn--primary:hover { background: var(--green-700); color: #fff; }
.btn--outline { background: var(--surface); border-color: var(--line); color: var(--green-800); } .btn--outline:hover { border-color: var(--green-700); color: var(--green-800); }
.btn--danger { background: var(--surface); border-color: #E7C2C2; color: var(--red); } .btn--danger:hover { background: var(--red-bg); color: var(--red); }
.btn--sm { min-height: 32px; padding: 3px 11px; font-size: .84rem; }
.btn--block { width: 100%; min-height: 46px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--red); cursor: pointer; font-size: .85rem; text-decoration: underline; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 20px 22px; margin-bottom: 20px; }
.card--warn { border-color: #EED9A0; background: #FFFCF2; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card__title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 12px; }
.card__head .card__title { margin: 0; }
.card__sub { font-size: .95rem; margin: 18px 0 8px; }
.details > summary { cursor: pointer; list-style: none; margin: 0; }
.details > summary::-webkit-details-marker { display: none; }
.details[open] > summary { margin-bottom: 14px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.grid-2--wide { grid-template-columns: 1.3fr 1fr; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 + .card, .grid-2 + section { margin-top: 20px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.case-head .page-actions, .card .page-actions { margin-bottom: 0; }

.alert { padding: 11px 16px; border-radius: var(--r); margin-bottom: 18px; border: 1px solid; }
.alert--ok { background: var(--green-50); border-color: #C6DCCE; color: var(--green-800); }
.alert--error { background: var(--red-bg); border-color: #EFC6C6; color: var(--red); }
.alert--warn { background: var(--amber-bg); border-color: #EED9A0; color: var(--amber); }

.badge, .tag { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; line-height: 1.7; white-space: nowrap; background: var(--gray-bg); color: var(--muted); text-decoration: none; }
.tag--ok { background: var(--green-100); color: var(--green-800); } .tag--warn { background: var(--amber-bg); color: var(--amber); }
.badge--case_status-open, .badge--outcome-won, .badge--hearing_status-held, .badge--task_stage-done { background: var(--green-100); color: var(--green-800); }
.badge--outcome-lost, .badge--priority-urgent { background: var(--red-bg); color: var(--red); }
.badge--hearing_status-scheduled, .badge--task_stage-in_progress, .badge--outcome-settled { background: var(--blue-bg); color: var(--blue); }
.badge--hearing_status-postponed, .badge--task_stage-review, .badge--priority-high, .badge--outcome-partial { background: var(--amber-bg); color: var(--amber); }
.badge--party_type-judge { background: #EEE8F7; color: #5B3A8C; } .badge--party_type-client { background: var(--green-100); color: var(--green-800); }
.badge--party_type-opponent, .badge--party_type-opposing_counsel { background: #F8EDE8; color: #8A3B1E; }

/* الجداول */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); margin-bottom: 20px; }
.card .table-wrap { box-shadow: none; margin-bottom: 14px; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 10px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.table thead th { background: #FAF9F5; color: var(--muted); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.table tbody tr:hover { background: #FCFBF8; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.actions { white-space: nowrap; text-align: end; }
.table--compact td, .table--compact th { padding: 7px 10px; font-size: .86rem; }
.row--warn { background: #FFFBEF; } .row--muted { opacity: .55; }

/* النماذج */
.form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.form__sec { font-size: .95rem; color: var(--gold-600); margin: 4px 0 12px; }
.form__sec:not(:first-of-type) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.form__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.form--inline .f { flex: 1 1 170px; }
.f { display: grid; gap: 4px; min-width: 0; }
.f--wide { grid-column: 1 / -1; margin-bottom: 12px; }
.f label { font-size: .84rem; font-weight: 600; color: var(--green-900); }
.f input, .f select, .f textarea, .toolbar input, .toolbar select {
  width: 100%; min-height: 40px; padding: 7px 11px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); }
.f textarea { resize: vertical; min-height: 70px; }
.f input[type="file"] { padding: 6px; }
.f input:focus, .f select:focus, .f textarea:focus, .toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 13%, transparent); }
.f [aria-invalid="true"] { border-color: var(--red); }
.f-err { margin: 0; color: var(--red); font-size: .8rem; }
fieldset { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px 4px; margin: 0 0 14px; }
legend { padding: 0 6px; font-size: .85rem; font-weight: 600; color: var(--gold-600); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .92rem; }
.check input { width: 18px; height: 18px; accent-color: var(--green-800); }
.stack { display: grid; gap: 12px; }
.otp { letter-spacing: .3em; text-align: center; font-size: 1.3rem !important; font-weight: 700; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
.toolbar__filters input[type="search"] { flex: 1 1 260px; width: auto; }
.toolbar__filters select, .toolbar__filters input[type="date"] { width: auto; flex: 0 1 auto; }
form.card.toolbar__filters { padding: 14px; }
.toolbar__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* الإحصاءات والقوائم */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); text-decoration: none; color: inherit; }
.stat:hover { border-color: var(--gold-400); color: inherit; }
.stat__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-100); color: var(--green-800); }
.stat__n { font-size: 1.6rem; font-weight: 700; color: var(--green-900); line-height: 1.1; }
.stat__l { font-size: .84rem; color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.list li > a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.list li > a:hover strong { color: var(--gold-600); }
.list--compact li { padding: 5px 0; font-size: .86rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.timeline__item:last-child { border-bottom: 0; }
.timeline__date strong { display: block; font-size: .86rem; color: var(--green-900); } .timeline__date small { color: var(--gold-600); font-weight: 600; }
.timeline__body { display: grid; text-decoration: none; color: var(--ink); } .timeline__body .muted { font-size: .84rem; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: .93rem; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
.note { background: #FAF9F5; border-inline-start: 3px solid var(--gold-500); padding: 10px 14px; border-radius: 6px; margin: 14px 0 0; font-size: .92rem; }
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state .icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--gold-500); }
.empty-state__code { font-family: "Amiri", serif; font-size: 4.5rem; color: var(--gold-500); line-height: 1; margin-bottom: 8px; }
.empty-state h2 { margin-bottom: 8px; }
.pager { display: flex; gap: 8px; justify-content: center; }
.day-head { font-size: 1.05rem; margin: 22px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.day-head small { font-size: .82rem; color: var(--muted); font-weight: 500; }
.roll__time { font-weight: 700; color: var(--green-900); white-space: nowrap; }

/* القضية */
.case-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.case-head__ref { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.case-head__title { font-size: 1.35rem; margin-bottom: 4px; }
.case-head__side { display: grid; gap: 10px; justify-items: end; }
.next-hearing { background: var(--green-900); color: #fff; border-radius: var(--r); padding: 10px 16px; text-align: center; }
.next-hearing small { display: block; color: var(--gold-400); font-size: .78rem; } .next-hearing strong { display: block; } .next-hearing span { font-size: .8rem; opacity: .85; }
.tabs-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: -6px 0 18px; position: sticky; top: 64px; z-index: 10; background: var(--bg); padding: 6px 0; }
.tabs-nav a { padding: 6px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--green-800); }
.tabs-nav a:hover { border-color: var(--gold-500); }
section[id] { scroll-margin-top: 130px; }
.tree { list-style: none; padding: 0; margin: 0 0 6px; }
.tree li { padding: 6px 0; }
.tree ul { list-style: none; margin: 6px 0 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--gold-100); }
.tree ul li { position: relative; padding-inline-start: 10px; }
.tree__parent small, .tree__parent + li small { display: block; color: var(--muted); font-size: .76rem; }
.tree__current > strong { color: var(--gold-600); }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kanban__col { background: #ECEAE2; border-radius: var(--r-lg); padding: 10px; min-height: 260px; }
.kanban__col--in_progress { background: #E6EDF5; } .kanban__col--review { background: #F4EEDD; } .kanban__col--done { background: #E4EEE7; }
.kanban__head { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; padding: 4px 6px 10px; }
.kanban__count { background: rgba(255, 255, 255, .8); border-radius: 99px; padding: 0 9px; font-size: .8rem; }
.kanban__list { display: grid; gap: 8px; min-height: 200px; align-content: start; }
.kanban__list.is-over { outline: 2px dashed var(--gold-500); outline-offset: 2px; border-radius: 10px; }
.kcard { background: var(--surface); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); border-inline-start: 4px solid transparent; cursor: grab; }
.kcard:active { cursor: grabbing; } .kcard.is-dragging { opacity: .45; }
.kcard--urgent { border-inline-start-color: var(--red); } .kcard--high { border-inline-start-color: var(--gold-500); }
.kcard--late { background: #FFF8F6; }
.kcard__title { display: block; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.kcard__meta { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.kcard__foot { display: flex; justify-content: space-between; gap: 6px; font-size: .8rem; align-items: center; }
.kcard__foot .icon { display: inline; width: 1em; height: 1em; vertical-align: -2px; }
.kcard__move select { margin-top: 8px; width: 100%; font-size: .8rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #FAF9F5; }

.perm-table td, .perm-table th { padding: 7px 12px; }
.perm-table input { width: 18px; height: 18px; accent-color: var(--green-800); }
.perm-group th { background: var(--green-50) !important; color: var(--green-800) !important; font-size: .86rem !important; }
.diff summary { cursor: pointer; color: var(--blue); font-size: .8rem; }
.diff ul { margin: 4px 0 0; padding-inline-start: 18px; font-size: .8rem; }
del { color: var(--red); } ins { color: var(--green-800); text-decoration: none; }
.qr { background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; }
.secret { word-break: break-all; }
.codes { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0; font-family: ui-monospace, monospace; }
.codes li { background: var(--gray-bg); padding: 6px; border-radius: 6px; text-align: center; }

/* ---------- صفحة الدخول ---------- */
.o-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 500px at 15% 110%, color-mix(in srgb, var(--gold-500) 18%, transparent), transparent 60%), linear-gradient(160deg, var(--green-900), var(--green-950)); }
.o-auth__card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 18px; padding: 32px 30px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-top: 4px solid var(--gold-500); }
.o-auth__logo { margin: 0 auto 8px; border-radius: 10px; }
.o-auth__name { text-align: center; font-family: "Amiri", serif; font-size: 1.3rem; color: var(--green-900); margin-bottom: 4px; }
.o-auth__title { text-align: center; font-size: 1.05rem; color: var(--muted); font-weight: 500; margin-bottom: 18px; }
.o-auth__note { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 16px 0 0; font-size: .8rem; color: var(--muted); }

/* ---------- الطباعة (رول الجلسات) ---------- */
.print-page { background: #fff; padding: 18px; font-size: 12px; }
.print-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
.print-meta { font-size: 11px; color: #444; }
.print-table { width: 100%; border-collapse: collapse; }
.print-table th, .print-table td { border: 1px solid #666; padding: 6px; vertical-align: top; text-align: start; }
.print-table th { background: #eee; }
.print-table td.blank { height: 54px; }
.col-decision { width: 28%; } .col-next { width: 12%; }
.print-foot { display: flex; justify-content: space-between; margin-top: 28px; }
@media print {
  .o-side, .o-top, .toolbar, .form--inline, .page-actions, .tabs-nav, .o-backdrop, details.details { display: none !important; }
  .o { display: block; } .o-content { padding: 0; } .card, .table-wrap { box-shadow: none; }
  @page { size: A4 landscape; margin: 10mm; }
}

/* ---------- التجاوب ---------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-2--wide { grid-template-columns: 1fr; }
  .grid-2 > .card { margin-bottom: 0; }
}
@media (max-width: 900px) {
  .o { grid-template-columns: 1fr; }
  .o-side { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; width: min(86vw, 300px); transform: translateX(100%); transition: transform .25s ease; }
  .o-side.is-open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  .o-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .4); }
  .o-burger { display: grid; }
  .o-top { padding: 8px 14px; } .o-top__date { display: none; }
  .o-content { padding: 16px 14px 40px; }
  .tabs-nav { top: 58px; }
  .kanban { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; } .kanban__col { scroll-snap-align: start; }
  .timeline__item { grid-template-columns: 1fr; gap: 2px; }
  .case-head__side { justify-items: start; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 12px; } .stat__icon { width: 36px; height: 36px; }
  .card { padding: 16px; }
  .toolbar__filters > * { flex: 1 1 100% !important; width: 100% !important; }
  .dl { grid-template-columns: 1fr; gap: 0; } .dl dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* المرحلة 2: التنبيهات والتقويم */
.calendar-url { width: 100%; min-height: 40px; padding: 7px 11px; border: 1.5px dashed var(--gold-500); border-radius: 8px; background: var(--gold-100); font-family: ui-monospace, monospace; font-size: .8rem; margin-bottom: 10px; }
.howto { margin: 8px 0; padding-inline-start: 18px; font-size: .88rem; } .howto li { margin-bottom: 6px; }

/* ===== المرحلة 3: المالية ===== */
.tabs-nav--static { position: static; margin: -4px 0 18px; }
.tabs-nav a.is-on { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.o-timer { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: #FFF4F0; border: 1px solid #F1C8BD; border-radius: 99px; font-size: .85rem; }
.o-timer__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
.o-timer__clock { font-family: ui-monospace, monospace; font-weight: 700; color: var(--red); direction: ltr; }
.o-timer__what { color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pulse { 50% { opacity: .3; } }
.check--row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 6px; background: #FCFBF8; }
.check--row span { flex: 1; } .check--row:hover { border-color: var(--gold-400); }
.lines { display: grid; gap: 8px; margin-bottom: 14px; }
.line { display: grid; grid-template-columns: 1fr 80px 130px auto; gap: 8px; align-items: center; }
.line input[type="text"] { min-height: 40px; padding: 7px 11px; border: 1.5px solid var(--line); border-radius: 8px; width: 100%; }
.totals { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; padding: 12px 16px; margin: 6px 0 12px; background: var(--green-50); border-radius: 10px; }
.totals strong { color: var(--green-900); font-size: 1.05rem; }
.table tfoot td { background: #FAF9F5; font-weight: 600; } .tfoot-total td { color: var(--green-900); font-size: 1.05rem; }
.inline-edit { display: inline-flex; gap: 4px; align-items: center; }
.inline-edit input { width: 130px; min-height: 32px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.badge--agreement_status-active, .badge--installment_status-paid, .badge--pay_status-paid, .badge--issue_status-issued { background: var(--green-100); color: var(--green-800); }
.badge--installment_status-invoiced, .badge--pay_status-partial, .badge--issue_status-draft { background: var(--blue-bg); color: var(--blue); }
.badge--pay_status-overdue, .badge--issue_status-cancelled { background: var(--red-bg); color: var(--red); }
.badge--pay_status-due, .badge--installment_status-due { background: var(--amber-bg); color: var(--amber); }

/* الفاتورة والسند للطباعة */
.invoice-doc { max-width: 210mm; margin: 0 auto; font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; color: #111; position: relative; }
.print-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.inv-head { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: start; border-bottom: 3px solid var(--gold-500); padding-bottom: 12px; margin-bottom: 14px; }
.inv-seller { display: grid; gap: 2px; font-size: 12px; } .inv-seller__name { font-size: 16px; color: var(--green-900); }
.inv-title { text-align: center; } .inv-title h1 { font-size: 20px; margin: 0; color: var(--green-900); } .inv-title span { font-size: 12px; color: #555; }
.inv-qr { border: 1px solid #ddd; }
.inv-meta { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 12px; }
.inv-meta th, .inv-meta td { border: 1px solid #ccc; padding: 6px 8px; text-align: start; } .inv-meta th { background: #f4f3ee; width: 16%; white-space: nowrap; }
.inv-buyer { border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px; }
.inv-buyer h2 { font-size: 13px; margin: 0 0 4px; color: var(--gold-600); } .inv-buyer p { margin: 0 0 2px; }
.inv-items { font-size: 12px; }
.inv-bottom { display: grid; grid-template-columns: 1fr 260px; gap: 16px; margin-top: 12px; font-size: 12px; }
.inv-totals { width: 100%; border-collapse: collapse; } .inv-totals th, .inv-totals td { border: 1px solid #ccc; padding: 6px 8px; text-align: start; }
.inv-totals th { background: #f4f3ee; font-weight: 600; } .inv-totals__grand th, .inv-totals__grand td { background: var(--green-900); color: #fff; font-size: 14px; }
.inv-notes, .inv-bank { margin-top: 8px; padding: 8px; background: #f9f8f4; border-radius: 6px; }
.inv-foot { margin-top: 24px; text-align: center; font-size: 10px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; }
.voucher__amount { border: 2px solid var(--green-900); border-radius: 8px; padding: 6px 14px; text-align: center; } .voucher__amount strong { display: block; font-size: 20px; color: var(--green-900); }
.watermark { position: fixed; top: 40%; left: 0; right: 0; text-align: center; font-size: 110px; color: rgba(161, 42, 42, .12); transform: rotate(-20deg); pointer-events: none; font-weight: 700; }
@media print { .no-print, .print-bar { display: none !important; } .invoice-doc { max-width: none; } @page { size: A4 portrait; margin: 12mm; } }
@media (max-width: 700px) { .line { grid-template-columns: 1fr 1fr; } .inv-head, .inv-bottom { grid-template-columns: 1fr; } .o-timer__what { display: none; } }

/* هوية المكتب */
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.brand-box { border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; align-content: start; }
.brand-box__label { margin: 0; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.brand-preview { display: grid; place-items: center; min-height: 110px; border-radius: 8px; background: repeating-conic-gradient(#f2f1ec 0 25%, #fff 0 50%) 0 0 / 16px 16px; padding: 10px; }
.brand-preview--dark { background: var(--green-900); }
.brand-preview img { max-height: 90px; width: auto; }
.brand-og { max-height: 160px !important; border-radius: 6px; }
.brand-icons { display: flex; gap: 10px; align-items: center; }
.brand-icons img { border: 1px solid var(--line); border-radius: 6px; }
.f-inner { display: grid; gap: 4px; }
@media (max-width: 800px) { .brand-grid { grid-template-columns: 1fr; } }

/* ---------- مواعيد الاستشارات وبوابة الموكل (المرحلة 4) ---------- */
.badge--booking_status-requested { background: var(--amber-bg); color: var(--amber); }
.badge--booking_status-confirmed, .badge--booking_status-completed, .badge--booking_payment-paid { background: var(--green-100); color: var(--green-800); }
.badge--booking_status-cancelled, .badge--booking_status-no_show, .badge--booking_payment-unpaid { background: var(--red-bg); color: var(--red); }
.badge--booking_status-unverified, .badge--booking_status-expired { background: var(--gray-bg); color: var(--muted); }
.badge--booking_payment-waived { background: var(--blue-bg); color: var(--blue); }
.o-nav__count { margin-inline-start: auto; min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--gold-500); color: var(--green-950); font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.7; }
.bk-actions { display: grid; gap: 14px; }
.bk-actions form { margin: 0; }
.bk-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; }
.bk-types { display: grid; gap: 10px; margin-bottom: 14px; }
.bk-type { display: grid; grid-template-columns: auto 2fr 1fr 1fr; gap: 10px 14px; align-items: end; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #FCFBF8; }
.bk-type .check { padding-bottom: 10px; }
.req-msg { white-space: pre-line; max-width: 520px; }
@media (max-width: 700px) { .bk-type { grid-template-columns: 1fr 1fr; } }

/* ---------- المظهر والألوان ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.theme-btn { display: grid; gap: 6px; justify-items: start; width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: start; font-weight: 600; }
.theme-btn:hover { border-color: var(--gold-400); }
.theme-btn.is-on { border-color: var(--green-800); box-shadow: inset 0 0 0 1px var(--green-800); }
.theme-btn.is-picked { border-color: var(--gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-500) 30%, transparent); }
.theme-sw { width: 72px; height: 24px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; }
.theme-custom { display: grid; gap: 2px; justify-items: start; }
.theme-colors { display: grid; gap: 10px; margin-bottom: 14px; }
.theme-color { display: flex; align-items: center; gap: 10px; }
.theme-color input[type="color"] { width: 56px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.theme-preview { --tp-primary: #0F3B28; --tp-accent: #C9A24B; --tp-bg: #FAF8F3; --tp-text: #1B2420; --tp-footer: #061C13; --tp-radius: 10px; --tp-font: inherit;
  border: 1px solid var(--line); border-radius: var(--tp-radius); overflow: hidden; font-family: var(--tp-font); background: #fff; }
.tp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--tp-primary); color: #fff; border-bottom: 3px solid var(--tp-accent); }
.tp-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--tp-accent); }
.tp-nav { margin-inline-start: auto; font-size: .8rem; opacity: .8; }
.tp-body { padding: 16px; background: var(--tp-bg); color: var(--tp-text); }
.tp-body h4 { margin: 0 0 6px; color: var(--tp-primary); font-size: 1.05rem; }
.tp-body p { font-size: .9rem; }
.tp-btn { display: inline-block; padding: 6px 16px; border-radius: var(--tp-radius); background: var(--tp-accent); color: #111; font-weight: 700; font-size: .85rem; }
.tp-link { color: var(--tp-primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tp-accent); }
.tp-foot { padding: 10px 14px; background: var(--tp-footer); color: rgba(255, 255, 255, .8); font-size: .8rem; }

/* ---------- محتوى الموقع: المحرر والقوائم ---------- */
.rte { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.rte:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 13%, transparent); }
.rte__bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #FAF9F5; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 5; }
.rte__bar button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 10px; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--green-900); }
.rte__bar button:hover { border-color: var(--gold-500); }
.rte__area { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 14px 18px; line-height: 1.95; outline: none; }
.rte__area h2 { font-size: 1.3rem; margin: 18px 0 8px; } .rte__area h3 { font-size: 1.1rem; margin: 14px 0 6px; }
.rte__area p { margin: 0 0 10px; } .rte__area ul, .rte__area ol { margin: 0 0 10px; padding-inline-start: 24px; }
.rte__area blockquote { margin: 10px 0; padding: 8px 14px; border-inline-start: 3px solid var(--gold-500); background: #FAF9F5; }
.rte__area a { color: var(--blue); text-decoration: underline; }
.content-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.cover-preview { max-width: 360px; border-radius: var(--r); border: 1px solid var(--line); margin-bottom: 8px; }
.yt-thumb { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; background: #FCFBF8; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--green-900); }
.form--inline-tight { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.input-sm { width: 84px; } .input-grow { flex: 1 1 260px; min-width: 0; }
.form--inline-tight input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.text-item { grid-template-columns: 1fr 2fr 1fr; }
.founder-preview { max-width: 220px; }
@media (max-width: 700px) { .text-item { grid-template-columns: 1fr; } }

/* الشعار العريض (فيه اسم المكتب) */
.o-brand--wordmark { flex-direction: column; align-items: flex-start; gap: 6px; }
.o-brand--wordmark img { height: auto; max-height: 52px; max-width: 100%; border-radius: 0; }
.o-auth__brand--wordmark { background: var(--green-900); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.o-auth__brand--wordmark .o-auth__logo { height: auto; max-width: 100%; margin: 0 auto; border-radius: 0; }
.brand-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.brand-preview img { max-width: 100%; height: auto; }