/* Application theme. Logical dimensions keep Arabic and English equivalent. */
:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --accent: #1d4ed8;
  --accent-fg: #ffffff;
  --navy: #0F2D52;
  --warn-line: #b45309;
  --warn-bg: #fffbeb;
  --radius: 16px;
  --font-ar: "Segoe UI", Tahoma, Arial, sans-serif;
  --font-en: "Segoe UI", system-ui, Arial, sans-serif;
  --shadow: 0 4px 20px rgb(22 45 80 / 4%);
}
html { scroll-padding-block-start: 6rem; }
html[lang="ar"] body { line-height: 1.7; }
body { font-size: 1rem; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip-link:focus { z-index: 100; padding: .75rem 1rem; background: white; border-radius: 8px; }
h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.4; }
h2 { font-size: 1.1875rem; }
.page-head { align-items: center; margin-block-end: 1.5rem; gap: 1rem; }
.page-head p { margin-block: .35rem 0; }
.app-stage { min-inline-size: 0; margin-inline-start: 15.5rem; }
.app-main { max-inline-size: 100rem; padding: 2rem; }
.app-topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  min-block-size: 80px; padding: 1rem 2rem;
  background: var(--surface); border-block-end: 1px solid var(--line);
}
.app-identity { display: grid; margin-inline-end: auto; }
.app-identity > .muted { font-size: .8125rem; }
.app-topbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-inline-start: auto; }
.brand { font-weight: 700; gap: .75rem; flex-basis: auto; }
.brand-mark { display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 12px; background: #e8efff; color: var(--accent); flex-shrink: 0; }
.brand-mark .icon { inline-size: 26px; block-size: 26px; }
/* The Mulkdar app icon carries its own tile. */
.brand-mark:has(.brand-logo) { background: none; }
.brand-logo { display: block; inline-size: 42px; block-size: 42px; }
.app-sidebar .brand-mark:has(.brand-logo) { box-shadow: 0 0 0 1px rgb(255 255 255 / 22%); border-radius: 11px; }
.app-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
  display: flex; flex-direction: column; inline-size: 15.5rem;
  padding: 1.5rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain;
  color: #fff; background: var(--navy);
}
.sidebar-brand { display: flex; align-items: center; gap: .5rem; padding-inline: .5rem; }
.app-sidebar .brand { color: #fff; }
.app-sidebar .brand-mark { background: #29476e; color: #fff; }
.app-sidebar .brand span { font-size: 1.25rem; letter-spacing: .01em; }
.sidebar-caption { color: #c2cee0; font-size: .8125rem; padding-inline: .5rem; margin-block: .75rem 1.75rem; }
.sidebar-nav { display: grid; gap: .2rem; }
.nav-link { display: flex; align-items: center; gap: .75rem; min-block-size: 44px; padding: .6rem .85rem; border-radius: 9px; color: #e2eaf5; text-decoration: none; font-size: .9375rem; border: 1px solid transparent; }
.nav-link:hover { background: #243f64; color: #fff; }
.nav-link[aria-current="page"] { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 4px 12px rgb(0 0 0 / 8%); }
.nav-group { color: #b7c7dc; font-size: .75rem; margin: 1.25rem .85rem .35rem; }
.app-sidebar :focus-visible { outline-color: #a9c8ff; }
.sidebar-tools { margin-block-start: .75rem; }
.sidebar-tools summary { color: #d7e3f3; padding: .5rem .85rem; min-block-size: 44px; font-size: .875rem; }
.sidebar-footer { margin-block-start: auto; padding-block-start: 1.5rem; }
.sidebar-footer .btn { inline-size: 100%; justify-content: center; color: #e2eaf5; background: transparent; border-color: #466081; font-size: .875rem; }
.sidebar-footer .btn:hover, .sidebar-close:hover { background: #29476e; color: #fff; border-color: #8da7d6; }
.sidebar-toggle, .sidebar-close { display: none; }
.sidebar-scrim { position: fixed; inset: 0; background: rgb(15 23 42 / 55%); z-index: 45; }
.card { padding: 1.5rem; margin-block-end: 1.5rem; box-shadow: var(--shadow); }
.btn { border-radius: 9px; font-weight: 600; transition: background-color .15s, border-color .15s; }
.btn:hover { background: #f1f5f9; border-color: #b8c5d8; }
.btn--primary:hover { background: #1e40af; border-color: #1e40af; }
.btn--danger:hover { background: #991b1b; border-color: #991b1b; }
.btn--primary[disabled] { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.btn--small { font-size: .875rem; }
.btn--ghost { margin-block-end: .75rem; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { border-color: #a8b6c8; border-radius: 9px; }
.field--error input:not([type="radio"]):not([type="checkbox"]) { border-color: #b91c1c; }
.search-form { gap: .75rem; }
.search-form input { border-color: #a8b6c8; }
.choice-card { padding: 1.25rem; box-shadow: var(--shadow); }
.role-card:has(input:checked), .preview { background: #eff6ff; }
.stat-grid { gap: 1rem; margin-block-end: 1.5rem; }
.stat-grid > .card { margin: 0; }
.dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { gap: .5rem; padding: 1.25rem; }
.stat__label { font-weight: 600; }
.stat__value { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.4; letter-spacing: -.025em; }
.stat .muted { font-size: .8125rem; }
.stat__scope { font-size: .75rem; color: var(--muted); }
.stat--featured { background: var(--navy); color: white; border-color: var(--navy); }
.stat--featured .stat__label, .stat--featured .muted, .stat--featured .stat__scope { color: #d5e2f4; }
.stat--attention .stat__value { color: #b91c1c; }
a.card:hover { border-color: #8da7d6; }
.period-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; margin-block-end: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.period-toolbar .filter-row { margin: 0; align-items: center; flex-wrap: wrap; overflow: visible; }
.period-toolbar .muted { font-size: .875rem; }
.financial-strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-block-end: 1px solid var(--line); padding-block-end: 1.5rem; margin-block-end: 1.5rem; }
.financial-strip p { margin: 0; font-size: .875rem; }
.financial-strip strong { margin-inline-start: .5rem; font-size: 1rem; }
.dashboard-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.dashboard-workspace > *, .property-grid > * { min-inline-size: 0; }
.dashboard-workspace .section-head { align-items: flex-start; }
.section-head > .muted { font-size: .8125rem; }
.section-description { font-size: .875rem; color: var(--muted); margin-block: -.25rem 1rem; }
.work-item--flat { padding-block: 1rem; }
.work-item__balance { font-size: 1.125rem; font-weight: 700; color: var(--fg); }
/* Red only for money that is late; amber for what the owner owes the office. */
.work-item__balance--late { color: #b91c1c; }
.work-item__balance--owed { color: var(--warn-line); }
.work-item .muted { font-size: .875rem; }
.plain-list { display: grid; gap: .75rem; }
.property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1.25rem; margin-block-end: 1.5rem; }
.property-card { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.property-card__head { display: flex; align-items: flex-start; gap: .85rem; }
.property-card__head h2 { margin-block: 0 .25rem; font-size: 1.125rem; }
.property-card__head p { margin: 0; font-size: .875rem; }
.property-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding-block: 1rem; border-block: 1px solid var(--line); }
.property-card__metrics dt { font-size: .8125rem; color: var(--muted); }
.property-card__metrics dd { margin: .25rem 0 0; font-size: 1.25rem; font-weight: 700; }
.property-card__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-block-start: auto; }
.property-card__footer .muted { font-size: .8125rem; }
.property-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.5rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
.property-subnav a { text-decoration: none; padding: .5rem 1rem; border: 1px solid var(--line); background: #fff; border-radius: 8px; min-block-size: 44px; }
.property-subnav a:hover { border-color: var(--accent); }
.table-wrap { border: 1px solid var(--line); border-radius: 10px; }
th { background: #f8fafc; color: #334155; font-size: .8125rem; padding-block: .85rem; }
td { padding-block: .85rem; font-size: .9375rem; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: #f8fafc; }
.badge { font-size: .8125rem; padding: .2rem .65rem; background: #f1f5f9; color: #334155; }
.badge--status-leased, .badge--state-paid { color: #047857; background: #ecfdf5; }
.badge--danger, .badge--state-overdue, .badge--op-out_of_service { color: #b91c1c; background: #fef2f2; }
.badge--warning, .badge--op-faulty, .badge--state-within_grace, .badge--state-partially_paid { color: #92400e; background: #fffbeb; }
.badge--status-vacant, .badge--state-due_today { color: #1d4ed8; background: #eff6ff; }
.badge--status-reserved { color: #6b21a8; background: #f3e8ff; }
.alert--success { border-inline-start-color: #047857; background: #ecfdf5; }
.empty-state { padding: 2rem; text-align: center; border: 1px dashed #a8b6c8; border-radius: 12px; background: #f8fafc; color: var(--muted); }
.grid-2 { gap: 0 1.5rem; }
.analysis-panel > summary { font-weight: 600; min-block-size: 44px; }
.analysis-panel[open] > summary { margin-block-end: 1.5rem; }
.footer { max-inline-size: 100rem; padding-inline: 2rem; font-size: .8125rem; }
.auth-shell .app-stage { margin: 0; }
.auth-shell .app-main { max-inline-size: 56rem; padding-block-start: 3rem; }
.auth-shell .card--narrow { margin-inline: auto; padding: 2rem; }
@media (max-width: 80rem) {
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-workspace { grid-template-columns: 1fr; gap: 0; }
  .dashboard-workspace__aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0 1rem; }
}
@media (max-width: 64rem) {
  .app-stage { margin: 0; }
  .app-main { padding: 1.5rem; }
  .app-topbar { padding: 1rem 1.5rem; }
  /* Without JavaScript the full navigation remains reachable in normal flow. */
  .app-sidebar { position: static; inline-size: 100%; }
  .app-nav-ready .app-sidebar { position: fixed; inline-size: min(19rem, 88vw); z-index: 50; }
  .app-nav-ready .sidebar-toggle, .app-nav-ready .sidebar-close { display: inline-flex; }
  .sidebar-close { background: transparent; border-color: #466081; color: #fff; font-size: 1.5rem; min-inline-size: 44px; justify-content: center; padding: 0; }
  .app-nav-open { overflow: hidden; }
  .footer { padding-inline: 1.5rem; }
}
@media (max-width: 40rem) {
  .app-main { padding: 1.25rem .875rem; }
  .app-topbar { padding: .75rem .875rem; gap: .5rem; }
  .app-identity { max-inline-size: calc(100% - 6rem); font-size: .875rem; }
  .app-topbar__actions { flex-basis: 100%; justify-content: space-between; }
  .card { padding: 1.125rem; }
  .stat { padding: 1rem; }
  .stat__value { font-size: 1.375rem; }
  .dashboard-stats { gap: .75rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .money { white-space: normal; }
  .period-toolbar { padding: .875rem; }
  .period-toolbar .filter-row { inline-size: 100%; justify-content: space-between; }
  .period-toolbar .muted { flex-basis: 100%; order: -1; }
  .property-card__metrics { gap: .5rem; }
  .btn--small { min-block-size: 44px; }
  .footer { padding-inline: .875rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print {
  .app-sidebar, .app-topbar, .sidebar-scrim, .skip-link, .property-subnav { display: none !important; }
  .app-stage { margin: 0; }
  .app-main { padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}
/* Sign out sits in the top bar on every page, so it never hides below a long menu. */
.topbar-signout { margin: 0; }