/* =====================================================================
   BOSLA Design System — tokens, layout, components (RTL-first)
   ===================================================================== */
@font-face { font-family: 'Lama Sans'; src: url('/shared/fonts/LamaSans-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lama Sans'; src: url('/shared/fonts/LamaSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lama Sans'; src: url('/shared/fonts/LamaSans-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lama Sans'; src: url('/shared/fonts/LamaSans-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lama Sans'; src: url('/shared/fonts/LamaSans-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* brand */
  /* Bosla brand palette (from the identity guide) */
  --navy: #1E2229;      /* charcoal — primary dark */
  --petrol: #2B3949;    /* deep navy */
  --steel: #536879;     /* slate blue — logo colour, primary accent */
  --mist: #8D9CAB;      /* muted blue-grey */
  --ice: #E5E4E2;       /* stone — logo background */
  --snow: #F4F3F1; --white: #FFFFFF; --ink: #1E2229; --slate: #6A7480; --line: #E3E1DD;
  --grad-main: linear-gradient(160deg, #1E2229 0%, #2B3949 34%, #536879 66%, #E5E4E2 100%);
  --grad-deep: linear-gradient(160deg, #2B3949 0%, #1E2229 100%);
  --grad-soft: radial-gradient(120% 140% at 85% 0%, #536879 0%, #2B3949 45%, #1E2229 100%);
  /* status */
  --ok-d: #166534; --ok: #15803D; --ok-l: #DCFCE7; --ok-bg: #F0FDF4;
  --warn-d: #A16207; --warn: #CA8A04; --warn-l: #FEF3C7; --warn-bg: #FFFBEB;
  --err-d: #991B1B; --err: #DC2626; --err-l: #FEE2E2; --err-bg: #FEF2F2;
  --info: #3D6587; --info-bg: #EDF2F6; --special: #6A5A8C; --special-bg: #F1EEF6; --neutral: #64748B; --neutral-bg: #F1F5F9;
  /* scale */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(30,34,41,.06), 0 1px 1px rgba(30,34,41,.04);
  --sh-2: 0 4px 16px rgba(30,34,41,.08);
  --sh-3: 0 18px 50px rgba(30,34,41,.18);
  --font: 'Lama Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
  --side-w: 264px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--snow); color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--steel); text-decoration: none; } a:hover { color: var(--petrol); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--navy); line-height: 1.35; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); } .small { font-size: 12px; } .tiny { font-size: 11px; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
::selection { background: var(--ice); }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.side { background: var(--navy); color: #D3D8DD; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.side .brand { padding: 22px 20px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-main); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.brand-name { font-weight: 700; color: #fff; font-size: 16px; line-height: 1.1; }
.brand-name small { display: block; font-weight: 500; font-size: 9.5px; letter-spacing: 3.2px; color: #AEB9C4; margin-top: 3px; }
.nav { padding: 12px 10px 20px; flex: 1; }
.nav-group { margin-bottom: 2px; }
.nav-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; color: #D3D8DD; background: none; border: 0; font: inherit; cursor: pointer; text-align: right; }
.nav-head:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-head.active { background: rgba(83,104,121,.38); color: #fff; }
.nav-head svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav-head .chev { margin-inline-start: auto; width: 14px; height: 14px; transition: transform .2s; opacity: .5; }
.nav-group.open .chev { transform: rotate(-90deg); }
.nav-sub { display: none; padding: 2px 0 6px; margin-inline-start: 20px; border-inline-start: 1px solid rgba(255,255,255,.08); }
.nav-group.open .nav-sub { display: block; }
.nav-sub a { display: block; padding: 6px 16px; color: #A9B3BD; font-size: 13px; border-radius: 6px; margin-inline-start: 6px; }
.nav-sub a:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-sub a.active { color: #fff; background: rgba(255,255,255,.07); }
.side-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; color: #7D8792; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 64px; background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.menu-btn { display: none; }
.gsearch { position: relative; flex: 1; max-width: 520px; }
.gsearch input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--snow); padding: 0 40px 0 14px; font: inherit; }
.gsearch svg { position: absolute; right: 12px; top: 11px; width: 18px; height: 18px; color: var(--slate); }
.gsearch .results { position: absolute; top: 46px; right: 0; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); max-height: 420px; overflow: auto; z-index: 40; }
.gsearch .results a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--ink); border-bottom: 1px solid var(--snow); }
.gsearch .results a:hover { background: var(--snow); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; position: relative; color: var(--ink); }
.icon-btn:hover { background: var(--snow); }
.icon-btn svg { width: 19px; height: 19px; }
.dot { position: absolute; top: 7px; left: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--err); color: #fff; font-size: 10px; display: grid; place-items: center; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; background: #fff; font: inherit; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-deep); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.dropdown { position: absolute; top: 56px; left: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); min-width: 300px; z-index: 50; overflow: hidden; }
.dropdown .item { padding: 11px 16px; border-bottom: 1px solid var(--snow); display: block; color: var(--ink); cursor: pointer; }
.dropdown .item:hover { background: var(--snow); }
.dropdown .item.unread { background: #F7F6F4; }

.content { padding: 24px 28px 60px; max-width: 1480px; width: 100%; }
.crumbs { display: flex; gap: 6px; font-size: 12px; color: var(--slate); margin-bottom: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--slate); } .crumbs span.sep { opacity: .5; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { color: var(--slate); margin-top: 2px; font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- surfaces ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); gap: 10px; }
.card-head h3 { font-size: 14px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { 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: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }

.hero { background: var(--grad-main); color: #fff; border-radius: var(--r-xl); padding: 26px 28px; position: relative; overflow: hidden; border: none; }
.hero::after { content: ""; position: absolute; inset: auto -60px -120px auto; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.hero::before { content: ""; position: absolute; inset: -80px auto auto -40px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }
.hero h1 { color: #fff; font-size: 24px; } .hero p { margin: 6px 0 0; color: rgba(255,255,255,.82); }
.hero .row { position: relative; z-index: 1; }

.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi .label { color: var(--slate); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.kpi .label svg { width: 16px; height: 16px; opacity: .8; }
.list-item > svg { flex: none; color: var(--steel); }
.kpi .value { font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.1; }
.kpi .meta { font-size: 12px; color: var(--slate); }
.kpi.deep { background: var(--grad-deep); border: none; } .kpi.deep .label, .kpi.deep .meta { color: #B6C1CB; } .kpi.deep .value { color: #fff; }
.kpi .value small { font-size: 13px; font-weight: 500; color: var(--slate); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--snow); border-color: #CFD8DF; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-primary:hover { background: var(--petrol); border-color: var(--petrol); }
.btn-accent { background: var(--steel); color: #fff; border-color: var(--steel); } .btn-accent:hover { background: var(--petrol); }
.btn-success { background: var(--ok); color: #fff; border-color: var(--ok); } .btn-success:hover { background: var(--ok-d); }
.btn-danger { background: #fff; color: var(--err); border-color: var(--err-l); } .btn-danger:hover { background: var(--err-bg); }
.btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--snow); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.loading { pointer-events: none; opacity: .7; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.success { background: var(--ok-l); color: var(--ok-d); } .badge.warning { background: var(--warn-l); color: var(--warn-d); }
.badge.danger { background: var(--err-l); color: var(--err-d); } .badge.info { background: var(--info-bg); color: var(--info); }
.badge.special { background: var(--special-bg); color: var(--special); } .badge.brand { background: var(--ice); color: var(--petrol); }
.badge.plain::before { display: none; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--snow); border: 1px solid var(--line); font-size: 11.5px; color: var(--slate); }

/* ---------- alerts ---------- */
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 13px; align-items: flex-start; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert.warning { background: var(--warn-bg); border-color: var(--warn-l); color: var(--warn-d); }
.alert.danger { background: var(--err-bg); border-color: var(--err-l); color: var(--err-d); }
.alert.success { background: var(--ok-bg); border-color: var(--ok-l); color: var(--ok-d); }
.alert.info { background: var(--info-bg); border-color: #DBEAFE; color: #1E40AF; }
.alert ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; }
.form-grid.g3f { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.field label .req { color: var(--err); margin-inline-start: 2px; }
.field .hint { font-size: 11.5px; color: var(--slate); }
.field .err { font-size: 11.5px; color: var(--err); }
.input, select.input, textarea.input { height: 40px; border: 1px solid #D5DEE5; border-radius: 9px; padding: 0 12px; font: inherit; background: #fff; color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.7; }
.input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(83,104,121,.18); }
.input.invalid { border-color: var(--err); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.input[readonly] { background: var(--snow); }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 13px; }
.check input { width: 17px; height: 17px; accent-color: var(--petrol); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; user-select: none; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.input-group { display: flex; } .input-group .input { border-radius: 9px 0 0 9px; } .input-group .addon { padding: 0 12px; display: grid; place-items: center; background: var(--snow); border: 1px solid #D5DEE5; border-inline-start: 0; border-radius: 0 9px 9px 0; color: var(--slate); font-size: 12px; }
html[dir=rtl] .input-group .input { border-radius: 0 9px 9px 0; } html[dir=rtl] .input-group .addon { border-radius: 9px 0 0 9px; border-inline-start: 0; border-inline-end: 1px solid #D5DEE5; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
legend { padding: 0 8px; font-weight: 600; color: var(--navy); font-size: 13px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { text-align: right; font-weight: 500; color: var(--slate); background: #FAF9F7; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 12px; position: sticky; top: 0; }
.tbl th.sortable { cursor: pointer; user-select: none; } .tbl th.sortable:hover { color: var(--ink); }
.tbl th .arr { opacity: .5; margin-inline-start: 4px; font-size: 10px; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid #ECEAE6; vertical-align: middle; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr.clickable { cursor: pointer; } .tbl tbody tr:hover { background: #F8F7F5; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: left; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--slate); }
.toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .input { height: 36px; width: auto; min-width: 140px; }
.toolbar .search { min-width: 240px; flex: 1; max-width: 360px; }
.cell-main { font-weight: 500; color: var(--ink); } .cell-sub { font-size: 11.5px; color: var(--slate); }
.thumb { width: 52px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--ice); display: block; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; padding: 12px 14px; font: inherit; color: var(--slate); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.tabs button .count { background: var(--snow); border-radius: 99px; padding: 0 7px; font-size: 11px; color: var(--slate); }
.tab-body { padding: 18px 20px; }

/* ---------- description lists ---------- */
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 22px; }
.dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl dt { font-size: 11.5px; color: var(--slate); } .dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.masked { color: var(--slate); letter-spacing: 1px; }

/* ---------- timeline / lists ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 22px 16px 0; border-inline-start: 0; }
.timeline li::before { content: ""; position: absolute; right: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 3px var(--ice); }
.timeline li::after { content: ""; position: absolute; right: 8px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #ECEAE6; }
.list-item:last-child { border-bottom: 0; }
.progress { height: 6px; background: var(--snow); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--steel); border-radius: 99px; }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: #EDECE9; border-radius: 14px; padding: 10px; min-height: 300px; }
.kcol h4 { display: flex; justify-content: space-between; padding: 4px 6px 10px; color: var(--ink); }
.kcol.drop { background: var(--ice); }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--sh-1); }
.kcard .t { font-weight: 500; font-size: 13px; } .kcard .m { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--slate); }

/* ---------- wizard ---------- */
.steps { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 14px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: var(--slate); white-space: nowrap; font-size: 12.5px; cursor: pointer; border: 1px solid transparent; background: none; font-family: inherit; }
.step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--snow); border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.step.on { background: #fff; border-color: var(--line); color: var(--navy); box-shadow: var(--sh-1); } .step.on .n { background: var(--navy); color: #fff; border-color: var(--navy); }
.step.done .n { background: var(--ok-l); color: var(--ok-d); border-color: var(--ok-l); }

/* ---------- media ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.media { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--ice); }
.media img { width: 100%; height: 120px; object-fit: cover; display: block; }
.media .bar { display: flex; gap: 4px; padding: 6px; background: #fff; flex-wrap: wrap; align-items: center; }
.media .flag { position: absolute; top: 8px; right: 8px; }
.drop-zone { border: 2px dashed #D3D8DD; border-radius: 14px; padding: 26px; text-align: center; color: var(--slate); cursor: pointer; background: #FAF9F7; }
.drop-zone.over { border-color: var(--steel); background: var(--ice); }

/* ---------- modal / toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(30,34,41,.45); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border-radius: 18px; box-shadow: var(--sh-3); width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: pop .18s; }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-start; flex-direction: row-reverse; }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.toasts { position: fixed; bottom: 20px; left: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { min-width: 280px; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: var(--sh-3); font-size: 13px; animation: pop .2s; display: flex; gap: 10px; align-items: flex-start; }
.toast.success { background: var(--ok-d); } .toast.error { background: var(--err-d); } .toast.warning { background: var(--warn-d); }

/* ---------- states ---------- */
.empty { padding: 44px 20px; text-align: center; color: var(--slate); }
.empty svg { width: 46px; height: 46px; color: #B8C7D1; margin-bottom: 8px; }
.empty h3 { color: var(--ink); margin-bottom: 4px; }
.skeleton { background: linear-gradient(90deg, #ECEAE6 25%, #F6F8FA 50%, #ECEAE6 75%); background-size: 200% 100%; animation: shim 1.2s infinite; border-radius: 8px; }
@keyframes shim { to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { border-color: var(--line); border-top-color: var(--steel); }
@keyframes spin { to { transform: rotate(360deg); } }
.page-loading { display: grid; place-items: center; padding: 80px; }

/* ---------- charts (pure CSS bars) ---------- */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row .track { height: 10px; background: var(--snow); border-radius: 99px; overflow: hidden; }
.bar-row .track i { display: block; height: 100%; border-radius: 99px; background: var(--steel); }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.vbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.vbars .col i { width: 100%; max-width: 44px; background: var(--grad-deep); border-radius: 8px 8px 3px 3px; min-height: 3px; }
.vbars .col span { font-size: 11px; color: var(--slate); }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { background: var(--grad-main); position: relative; overflow: hidden; color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-art .rings { position: absolute; inset: 0; pointer-events: none; }
.auth-art .rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.auth-art h2 { color: #fff; font-size: 34px; font-weight: 600; max-width: 460px; line-height: 1.35; position: relative; }
.auth-art p { color: rgba(255,255,255,.8); max-width: 420px; position: relative; }
.auth-form { display: grid; place-items: center; padding: 32px; background: #fff; }
.auth-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.demo-box { background: var(--snow); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 12px; color: var(--slate); }
.demo-box button { margin: 3px; }

/* ---------- misc ---------- */
.stat-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.stat-line:last-child { border: 0; }
.sticky-foot { position: sticky; bottom: 0; background: rgba(247,249,251,.92); backdrop-filter: blur(6px); padding: 12px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; }
.matrix td, .matrix th { text-align: center !important; } .matrix td:first-child, .matrix th:first-child { text-align: right !important; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--snow); padding: 1px 6px; border-radius: 5px; direction: ltr; unicode-bidi: isolate; }
.demo-ribbon { background: var(--warn-bg); color: var(--warn-d); border-bottom: 1px solid var(--warn-l); font-size: 12px; text-align: center; padding: 6px; }
.pre { white-space: pre-wrap; background: var(--snow); border: 1px solid var(--line); border-radius: 10px; padding: 16px; line-height: 1.9; max-height: 520px; overflow: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-main { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 0 0 auto; width: var(--side-w); z-index: 60; transform: translateX(100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: var(--sh-3); }
  .menu-btn { display: grid; }
  .content { padding: 18px 16px 50px; }
  .topbar { padding: 0 12px; }
  .user-chip .name { display: none; }
  .g2, .g3, .form-grid, .form-grid.g3f { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .kanban { grid-template-columns: repeat(5, 240px); }
}
@media (max-width: 560px) { .g4 { grid-template-columns: 1fr 1fr; } .kpi .value { font-size: 21px; } .page-head h1 { font-size: 19px; } .toolbar .search { min-width: 0; max-width: none; width: 100%; } .bar-row { grid-template-columns: 90px 1fr 36px; } }
@media print { .side, .topbar, .no-print { display: none !important; } .shell { display: block; } }

/* ---------- Bosla brand marks ---------- */
.brand-logo { display: block; height: 52px; width: auto; }
.brand-logo.sm { height: 42px; } .brand-logo.lg { height: 72px; }
.side .brand-logo { height: 58px; }
.side .brand { padding: 20px 20px 18px; }
.hero { background: var(--grad-soft); }
.hero::after, .hero::before { border-color: rgba(229,228,226,.14); }
.hero-mark { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); height: 150%; opacity: .07; pointer-events: none; }
.auth-art { background: var(--grad-main); }
.auth-art .art-mark { position: absolute; left: -90px; bottom: -90px; width: 460px; opacity: .08; pointer-events: none; }
h1, h2 { letter-spacing: -0.2px; }

/* =====================================================================
   iOS-style layer — calm, grouped, low-noise. Overrides the base above.
   ===================================================================== */
:root {
  --ios-bg: #F2F2F7; --ios-card: #FFFFFF; --ios-sep: rgba(60,60,67,.13); --ios-label: #1C1C1E; --ios-2: #6C6C70; --ios-3: #AEAEB2;
  --ios-fill: rgba(118,118,128,.12); --ios-fill-2: rgba(118,118,128,.08); --tint: #536879;
  --c-blue: #007AFF; --c-green: #34C759; --c-orange: #FF9500; --c-red: #FF3B30; --c-indigo: #5856D6; --c-teal: #30B0C7; --c-yellow: #FFCC00; --c-gray: #8E8E93; --c-slate: #536879;
  --snow: var(--ios-bg); --line: var(--ios-sep); --slate: var(--ios-2); --ink: var(--ios-label);
  --sh-1: none; --sh-2: 0 6px 24px rgba(0,0,0,.06); --sh-3: 0 20px 60px rgba(0,0,0,.16);
}
body { background: var(--ios-bg); color: var(--ios-label); font-size: 15px; letter-spacing: -0.1px; }
a { color: var(--tint); } a:hover { color: var(--petrol); }
h1, h2, h3, h4 { color: var(--ios-label); }
.muted, .cell-sub { color: var(--ios-2); }

/* sidebar — iPadOS style */
.side { background: #F7F7F9; color: var(--ios-label); border-inline-end: 1px solid var(--ios-sep); }
.side .brand { border-bottom: 0; padding: 22px 18px 10px; }
.side .brand-logo { height: 46px; }
.nav { padding: 6px 12px 24px; display: flex; flex-direction: column; gap: 14px; }
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 12.5px; color: var(--ios-2); padding: 0 10px 4px; font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 10px; color: var(--ios-label); font-size: 15px; }
.nav-item:hover { background: var(--ios-fill-2); color: var(--ios-label); }
.nav-item.active { background: var(--tint); color: #fff; }
.nav-item.active .nav-ic { background: rgba(255,255,255,.22) !important; }
.nav-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; background: var(--c-gray); }
.nav-ic svg { width: 16px; height: 16px; stroke-width: 2; }
.ic-dashboard { background: var(--c-slate); } .ic-today { background: var(--c-orange); } .ic-properties { background: var(--c-blue); } .ic-owners { background: var(--c-indigo); }
.ic-clients { background: var(--c-teal); } .ic-services { background: #A2845E; } .ic-tasks { background: var(--c-green); } .ic-meetings { background: var(--c-red); }
.ic-contracts { background: #5E6C84; } .ic-finance { background: #2E9C6A; } .ic-documents { background: #8E8E93; } .ic-hr { background: #AF52DE; } .ic-reports { background: #0A84FF; } .ic-settings { background: #8E8E93; }
.side-foot { border-top: 1px solid var(--ios-sep); color: var(--ios-2); font-size: 12.5px; }
.side-foot a { color: var(--tint); }
.side-scrim { display: none; }

/* top bar + segmented sub-pages */
.topbar { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ios-sep); height: 56px; }
.gsearch input { background: var(--ios-fill); border: 0; height: 36px; border-radius: 10px; font-size: 14.5px; }
.gsearch input:focus { outline: none; box-shadow: 0 0 0 3px rgba(83,104,121,.2); }
.icon-btn { border: 0; background: transparent; color: var(--tint); }
.icon-btn:hover { background: var(--ios-fill); }
.user-chip { border: 0; background: transparent; }
.avatar { background: var(--tint); }
.subbar { position: sticky; top: 56px; z-index: 15; padding: 10px 28px; background: rgba(242,242,247,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--ios-fill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { padding: 6px 14px; border-radius: 8px; color: var(--ios-label); font-size: 13.5px; white-space: nowrap; transition: background .15s; }
.seg a:hover { color: var(--ios-label); background: rgba(255,255,255,.5); }
.seg a.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }
body.has-sub .page-head .crumbs { display: none; }

/* page */
.content { padding: 18px 28px 64px; }
.page-head { margin-bottom: 18px; align-items: flex-end; }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.4px; }
.page-head .sub { color: var(--ios-2); font-size: 14px; }
.crumbs { font-size: 13px; } .crumbs a { color: var(--tint); }
.demo-ribbon { background: var(--ios-bg); color: var(--ios-2); border: 0; font-size: 11.5px; padding: 4px; }

/* cards & lists */
.card { border: 0; border-radius: 14px; box-shadow: none; }
.card-head { border-bottom: 1px solid var(--ios-sep); padding: 13px 18px; }
.card-head h3 { font-size: 16px; font-weight: 600; }
.card-pad { padding: 16px 18px; }
.kpi .label { color: var(--ios-2); font-size: 13px; } .kpi .label svg { display: none; }
.kpi .value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.kpi.deep { background: var(--ios-card); } .kpi.deep .label, .kpi.deep .meta { color: var(--ios-2); } .kpi.deep .value { color: var(--ios-label); }
.hero { background: transparent !important; color: var(--ios-label); padding: 6px 2px 4px; border-radius: 0; }
.hero::before, .hero::after, .hero-mark { display: none; }
.hero h1 { color: var(--ios-label); font-size: 32px; font-weight: 700; letter-spacing: -0.5px; } .hero p { color: var(--ios-2); }
.hero .btn { background: var(--ios-card) !important; color: var(--tint) !important; border-color: transparent !important; }
.list-item { border-bottom-color: var(--ios-sep); }
.stat-line { border-bottom: 1px solid var(--ios-sep); }
.bar-row .track { background: var(--ios-fill); height: 8px; } .bar-row .track i { background: var(--tint) !important; }
.vbars .col i { background: var(--tint); }
.progress { background: var(--ios-fill); } .progress > i { background: var(--c-green); }
.timeline li::before { background: var(--tint); box-shadow: 0 0 0 3px var(--ios-fill); }
.timeline li::after { background: var(--ios-sep); }
.dl dt { color: var(--ios-2); font-size: 12.5px; }

/* buttons — tinted, borderless */
.btn { border: 0; background: var(--ios-fill); color: var(--tint); border-radius: 10px; height: 36px; padding: 0 14px; font-weight: 500; }
.btn:hover { background: rgba(118,118,128,.18); }
.btn-primary, .btn-accent { background: var(--tint); color: #fff; } .btn-primary:hover, .btn-accent:hover { background: var(--petrol); }
.btn-success { background: var(--c-green); color: #fff; } .btn-success:hover { background: #2DB24F; }
.btn-danger { background: var(--ios-fill); color: var(--c-red); } .btn-danger:hover { background: rgba(255,59,48,.12); }
.btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--ios-fill-2); }
.btn-sm { height: 30px; border-radius: 8px; padding: 0 11px; }

/* badges — quiet */
.badge { border-radius: 6px; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 500; background: var(--ios-fill); color: var(--ios-2); }
.badge::before { display: none; }
.badge.success { background: rgba(52,199,89,.14); color: #1E8E3E; } .badge.warning { background: rgba(255,149,0,.14); color: #B86A00; }
.badge.danger { background: rgba(255,59,48,.12); color: #D70015; } .badge.info { background: rgba(0,122,255,.1); color: #0062CC; }
.badge.special { background: rgba(88,86,214,.12); color: #4B49B6; } .badge.brand { background: rgba(83,104,121,.12); color: var(--tint); }
.tag { background: var(--ios-fill); border: 0; border-radius: 6px; color: var(--ios-2); }

/* forms */
.input, select.input, textarea.input { background: var(--ios-fill); border: 0; border-radius: 10px; }
.input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(83,104,121,.22); }
.field label { color: var(--ios-2); font-weight: 500; font-size: 13px; }
fieldset { border-color: var(--ios-sep); border-radius: 12px; }
.chip { border: 0; background: var(--ios-fill); } .chip.on { background: var(--tint); }
.check input { accent-color: var(--tint); }

/* tables */
.tbl th { background: transparent; color: var(--ios-2); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--ios-sep); }
.tbl td { border-bottom: 1px solid var(--ios-sep); padding: 12px 14px; }
.tbl tbody tr:hover { background: #F7F7F9; }
.toolbar { border-bottom: 1px solid var(--ios-sep); }
.toolbar .input { height: 34px; }
.tbl-foot { border-top: 1px solid var(--ios-sep); }

/* record tabs → segmented */
.tabs { border-bottom: 0; display: inline-flex; gap: 2px; padding: 2px; margin: 14px 16px 0; background: var(--ios-fill); border-radius: 10px; max-width: calc(100% - 32px); }
.tabs button { border: 0; border-radius: 8px; padding: 6px 12px; color: var(--ios-label); font-size: 13.5px; }
.tabs button.on { background: #fff; border: 0; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--ios-label); }
.tabs button .count { background: transparent; color: var(--ios-2); padding: 0; }
.steps .step.on { box-shadow: none; } .step.on .n { background: var(--tint); border-color: var(--tint); }

/* overlays */
.overlay { background: rgba(0,0,0,.28); backdrop-filter: blur(6px); }
.modal { border-radius: 16px; } .modal-head, .modal-foot { border-color: var(--ios-sep); }
.dropdown { border: 0; border-radius: 14px; } .dropdown .item { border-bottom-color: var(--ios-sep); }
.toast { background: rgba(28,28,30,.92); border-radius: 14px; backdrop-filter: blur(10px); }
.toast.success { background: rgba(28,28,30,.92); } .toast.error { background: #D70015; } .toast.warning { background: #B86A00; }
.alert { border: 0; border-radius: 12px; }
.kcol { background: var(--ios-fill-2); } .kcard { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.media { border: 0; } .drop-zone { border-color: var(--ios-3); background: #fff; }

/* ===== «يومي» — inset grouped lists ===== */
.ios-page { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.ios-large h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.6px; margin-top: 2px; }
.ios-date { color: var(--ios-2); font-size: 14px; font-weight: 500; }
.ios-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ios-chip { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ios-chip b { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ios-chip span { font-size: 12.5px; color: var(--ios-2); }
.ios-chip.blue b { color: var(--c-blue); } .ios-chip.red b { color: var(--c-red); } .ios-chip.orange b { color: var(--c-orange); }
.ios-chip.green b { color: var(--c-green); } .ios-chip.indigo b { color: var(--c-indigo); } .ios-chip.gray b { color: var(--ios-3); }
.ios-section { display: flex; flex-direction: column; gap: 7px; }
.ios-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px; font-size: 13px; color: var(--ios-2); font-weight: 500; }
.ios-list { background: #fff; border-radius: 14px; overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 52px; color: var(--ios-label); width: 100%; background: none; border: 0; font: inherit; text-align: start; position: relative; cursor: default; }
a.ios-row, button.ios-row { cursor: pointer; }
a.ios-row:hover, button.ios-row:hover { background: #F7F7F9; color: var(--ios-label); }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; inset-inline-start: 56px; inset-inline-end: 0; height: 1px; background: var(--ios-sep); }
.ios-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; background: var(--c-gray); }
.ios-ic svg { width: 17px; height: 17px; stroke-width: 2; }
.ios-ic.blue { background: var(--c-blue); } .ios-ic.green { background: var(--c-green); } .ios-ic.orange { background: var(--c-orange); } .ios-ic.red { background: var(--c-red); }
.ios-ic.indigo { background: var(--c-indigo); } .ios-ic.teal { background: var(--c-teal); } .ios-ic.yellow { background: #E6B800; } .ios-ic.slate { background: var(--c-slate); } .ios-ic.gray { background: var(--c-gray); }
.ios-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ios-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-sub { font-size: 13px; color: var(--ios-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-trail { color: var(--ios-2); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ios-chev { color: var(--ios-3); font-size: 22px; line-height: 1; margin-inline-start: -4px; }
.ios-link { color: var(--tint); font-size: 14px; font-weight: 500; }
.ios-empty { padding: 18px 16px; color: var(--ios-2); font-size: 14px; }
.ios-empty.big { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px; text-align: center; }
.ios-empty.big svg { width: 34px; height: 34px; color: var(--c-green); stroke-width: 2; }
.ios-empty.big b { color: var(--ios-label); font-size: 17px; }

@media (max-width: 920px) {
  .side { background: #F7F7F9; } .side.open + .side-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 55; }
  .subbar { padding: 8px 16px; } .content { padding: 14px 16px 50px; }
  .ios-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .ios-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-head h1, .ios-large h1 { font-size: 28px; } }

/* ===================== Round 2 — calmer chrome, calendar, chats ===================== */
.page-head .crumbs { display: none; }
.nav { gap: 18px; }
.nav-label { display: none; }
.nav-badge { margin-inline-start: auto; background: var(--c-green); color: #fff; font-size: 12px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.nav-item.active .nav-badge { background: #fff; color: var(--tint); }
.ic-calendar { background: var(--c-red); } .ic-chats { background: #25D366; } .ic-more { background: #8E8E93; }
.user-chip .avatar { width: 32px; height: 32px; }
.back-link { display: inline-flex; align-items: center; gap: 2px; color: var(--tint); font-size: 15px; font-weight: 500; }
.back-link svg { width: 20px; height: 20px; stroke-width: 2.4; }
.btn-icon { width: 36px; padding: 0; justify-content: center; }
.btn-icon svg { width: 18px; height: 18px; }
.seg.mini a { padding: 5px 12px; font-size: 13px; }

/* tabs: «المزيد» overflow */
.tabs { position: relative; overflow: visible; }
.tab-more { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; color: var(--tint); font: inherit; font-size: 13.5px; cursor: pointer; }
.tab-more svg { width: 14px; height: 14px; }
.tab-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 210px; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.16); padding: 6px; display: flex; flex-direction: column; }
.tab-menu[hidden] { display: none; }
.tab-menu button, .tab-menu a, .tab-menu .menu-item { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0 !important; background: transparent !important; color: var(--ios-label) !important;
  padding: 10px 12px !important; border-radius: 9px !important; font: inherit; font-size: 14.5px !important; text-align: start; cursor: pointer; height: auto !important; box-shadow: none !important; }
.tab-menu button:hover, .tab-menu a:hover { background: var(--ios-fill-2) !important; }
.tab-menu .menu-item.btn-danger { color: var(--c-red) !important; }
.tab-menu .count { color: var(--ios-2); font-size: 13px; }
.more-wrap { position: relative; display: inline-flex; }

/* dashboard & more */
.ios-page { max-width: 820px; }
a.ios-chip { color: inherit; transition: transform .12s; } a.ios-chip:hover { color: inherit; transform: translateY(-1px); }
.ios-chips.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ios-chips.four b { font-size: 24px; }
.ios-large .actions { display: flex; gap: 8px; }
.ios-head:empty, .ios-head > span:empty:only-child { display: none; }
.ios-foot { text-align: center; color: var(--ios-2); font-size: 13px; padding: 4px 0 10px; }

/* calendar */
.cal-page { display: flex; flex-direction: column; gap: 14px; max-width: 1280px; margin: 0 auto; }
.cal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cal-head h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
.cal-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #fff; border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; color: var(--ios-label); cursor: pointer; }
.cal-key.off { opacity: .45; } .cal-key i, .cal-dots i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 8px; gap: 0; }
.cal-wd { text-align: center; font-size: 12px; color: var(--ios-2); padding: 4px 0 8px; font-weight: 500; }
.cal-cell { min-height: 104px; border: 0; background: transparent; border-top: 1px solid var(--ios-sep); padding: 6px 4px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; cursor: pointer; font: inherit; text-align: start; border-radius: 0; }
.cal-cell:hover { background: #FAFAFC; }
.cal-cell.out { opacity: .38; }
.cal-num { align-self: flex-start; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ios-label); }
.cal-cell.today .cal-num { color: var(--c-red); font-weight: 700; }
.cal-cell.sel .cal-num { background: var(--ios-label); color: #fff; font-weight: 600; }
.cal-cell.today.sel .cal-num { background: var(--c-red); color: #fff; }
.cal-pills { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-pill { font-size: 11.5px; line-height: 1.5; padding: 0 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ios-label); border-inline-start: 3px solid; }
.cal-pill.done { opacity: .5; text-decoration: line-through; }
.cal-pill.red { background: rgba(255,59,48,.10); border-color: var(--c-red); } .cal-pill.blue { background: rgba(0,122,255,.10); border-color: var(--c-blue); }
.cal-pill.indigo { background: rgba(88,86,214,.10); border-color: var(--c-indigo); } .cal-pill.teal { background: rgba(48,176,199,.12); border-color: var(--c-teal); }
.cal-pill.orange { background: rgba(255,149,0,.12); border-color: var(--c-orange); }
.cal-more { font-size: 11px; color: var(--ios-2); padding: 0 6px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-key i.red, .cal-dots i.red { background: var(--c-red); } .cal-key i.blue, .cal-dots i.blue { background: var(--c-blue); } .cal-key i.indigo, .cal-dots i.indigo { background: var(--c-indigo); }
.cal-key i.teal, .cal-dots i.teal { background: var(--c-teal); } .cal-key i.orange, .cal-dots i.orange { background: var(--c-orange); }
.cal-day { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 1100px) { .cal-wrap { grid-template-columns: 1fr; } .cal-day { position: static; } }
@media (max-width: 720px) {
  .cal-cell { min-height: 54px; align-items: center; } .cal-num { align-self: center; } .cal-pills { display: none; } .cal-dots { display: flex; }
  .cal-head h1 { font-size: 26px; } .cal-grid { padding: 4px; }
}

/* chats */
.chat-page { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - 56px - 42px); min-height: 520px; background: #fff; border-radius: 16px; overflow: hidden; }
.chat-side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--ios-sep); min-height: 0; background: #fff; }
.chat-side-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; }
.chat-side-head h1 { font-size: 26px; font-weight: 700; }
.chat-tools { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.chat-tools .seg { align-self: flex-start; }
.chat-list { overflow-y: auto; flex: 1; }
.chat-item { display: flex; gap: 12px; padding: 10px 14px; color: var(--ios-label); align-items: center; position: relative; }
.chat-item + .chat-item::before { content: ""; position: absolute; top: 0; inset-inline-start: 72px; inset-inline-end: 0; height: 1px; background: var(--ios-sep); }
.chat-item:hover { background: #F7F7F9; color: var(--ios-label); }
.chat-item.on { background: rgba(83,104,121,.10); }
.chat-av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 600; color: #fff; background: linear-gradient(180deg, #A8B4BF, #7F8C98); font-size: 15px; }
.chat-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row1, .chat-row2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-row1 b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { font-size: 12.5px; color: var(--ios-2); white-space: nowrap; }
.chat-prev { font-size: 14px; color: var(--ios-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread { background: #25D366; color: #fff; font-size: 12px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; background: #EFEAE2; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 18px 18px; }
.chat-blank { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ios-2); text-align: center; padding: 20px; }
.chat-blank svg { width: 46px; height: 46px; color: #25D366; stroke-width: 1.6; } .chat-blank b { color: var(--ios-label); font-size: 18px; }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--ios-sep); }
.chat-top .chat-av { width: 38px; height: 38px; font-size: 13px; }
.chat-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--ios-2); }
.chat-who b { width: 100%; font-size: 16px; color: var(--ios-label); }
.chat-who .tag { font-size: 12px; padding: 1px 8px; }
.chat-back { display: none; }
.chat-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px auto 0; max-width: 560px; background: #FFF6D6; color: #6B5300; font-size: 13px; padding: 8px 12px; border-radius: 10px; }
.chat-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 6% 10px; display: flex; flex-direction: column; gap: 4px; }
.chat-day { text-align: center; margin: 10px 0 6px; } .chat-day span { background: rgba(255,255,255,.9); font-size: 12px; color: var(--ios-2); padding: 3px 10px; border-radius: 8px; }
.bubble { max-width: min(520px, 78%); padding: 7px 10px 5px; border-radius: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 14.5px; line-height: 1.55; }
.bubble.in { align-self: flex-start; background: #fff; border-start-start-radius: 4px; }
.bubble.out { align-self: flex-end; background: #D9FDD3; border-start-end-radius: 4px; }
.bubble.out.not_sent, .bubble.out.failed { background: #F3F3F3; }
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-meta { font-size: 11px; color: var(--ios-2); text-align: end; margin-top: 2px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.bubble-st { display: inline-flex; align-items: center; gap: 2px; } .bubble-st svg { width: 12px; height: 12px; }
.bubble-st.read { color: #34B7F1; } .bubble-st.not_sent { color: #B26B00; } .bubble-st.failed { color: var(--c-red); }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 12px; background: #F0F2F5; }
.chat-input { resize: none; background: #fff !important; border-radius: 20px !important; padding: 9px 14px; min-height: 40px; line-height: 1.5; }
.chat-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #25D366; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-send svg { width: 18px; height: 18px; transform: scaleX(-1); } .chat-send:disabled { opacity: .5; }
body:has(.chat-page) .content { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 860px) {
  .chat-page { grid-template-columns: 1fr; height: calc(100vh - 56px - 28px); border-radius: 14px; }
  .chat-page.has-thread .chat-side { display: none; } .chat-page:not(.has-thread) .chat-pane { display: none; }
  .chat-back { display: inline-flex; }
  .ios-chips.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chat-compose .chat-input { flex: 1; min-height: 40px; height: 40px; max-height: 140px; border: 0 !important; box-shadow: none; overflow-y: auto; }
.chat-compose .chat-input:focus { box-shadow: 0 0 0 2px rgba(37,211,102,.35); }
.ios-ic.brown { background: #A2845E; } .ios-ic.pink { background: #FF2D55; } .ios-ic.purple { background: #AF52DE; }

/* =====================================================================
   BOSLA OS layer — same layout & visual language as «بوصلة الأعمال» (os.bousslah.com),
   in Bosla Real Estate colours. Glass cards on a soft mesh, dark glass sidebar, gradient actions.
   ===================================================================== */
:root {
  --primary: #536879; --p-hi: #6F8597; --p-lo: #46596A; --p-soft: rgba(83,104,121,.12); --p-line: rgba(83,104,121,.28);
  --ink: #1E2229; --muted: #5B6573; --line: rgba(43,57,73,.13);
  --glass: rgba(255,255,255,.62); --glass-line: rgba(255,255,255,.85);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(30,34,41,.05), 0 10px 30px rgba(43,57,73,.10);
  --tint: var(--primary); --ios-label: var(--ink); --ios-2: var(--muted); --ios-sep: var(--line); --slate: var(--muted);
  --side-w: 266px; --font: 'Lama Sans', Tahoma, Arial, sans-serif;
}
body {
  font-family: var(--font); color: var(--ink); background-color: #E7EAEE;
  background-image:
    radial-gradient(900px 600px at 100% -5%, rgba(83,104,121,.26), transparent 60%),
    radial-gradient(800px 560px at -5% 105%, rgba(214,196,170,.30), transparent 60%),
    radial-gradient(700px 520px at 0% 0%, rgba(141,156,171,.26), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(43,57,73,.14), transparent 60%);
  background-attachment: fixed; min-height: 100vh;
}
h1, h2, h3, h4 { color: var(--ink); }
.demo-ribbon { background: transparent; color: var(--muted); font-size: 11px; padding: 3px; }

/* ---- shell ---- */
.shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
.side { background: linear-gradient(180deg, rgba(43,57,73,.96), rgba(30,34,41,.97)); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 0; padding: 18px 14px; color: #fff; display: flex; flex-direction: column; gap: 3px; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side .brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; border: 0; color: #fff; }
.side .brand-mark { width: 38px; height: 38px; object-fit: contain; flex: none; }
.brand-word { display: flex; flex-direction: column; font-size: 18px; font-weight: 600; color: #fff; line-height: 1.15; }
.brand-word small { font-size: 10px; font-weight: 400; opacity: .7; margin-top: 3px; letter-spacing: .3px; }
.side .nav { padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side .nav-label { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.42); padding: 14px 12px 5px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.side .nav-item { display: flex; align-items: center; gap: 11px; height: 40px; padding: 8px 12px; margin: 1px 0; border-radius: 10px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.side .nav-item .ic { width: 22px; display: grid; place-items: center; flex: none; }
.side .nav-item .ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.side .nav-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.side .nav-item.active { background: linear-gradient(180deg, #FFFFFF, #ECEFF2); color: #1E2229; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 #fff; }
.side .nav-item.active .ic { color: var(--primary); }
.side .nav-badge { background: #25D366; color: #fff; }
.side .nav-item.active .nav-badge { background: var(--primary); color: #fff; }

.topbar { position: sticky; top: 0; z-index: 30; height: 65px; padding: 13px 26px; gap: 14px; display: flex; align-items: center;
  background: rgba(255,255,255,.55); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-bottom: 1px solid rgba(255,255,255,.6); }
.top-title { display: none; font-size: 17px; font-weight: 700; }
.gsearch { flex: 0 1 420px; display: flex; align-items: center; gap: 9px; background: rgba(83,104,121,.10); border-radius: 12px; padding: 0 12px; height: 39px; color: var(--muted); position: relative; }
.gsearch > svg { width: 16px; height: 16px; flex: none; }
.gsearch input { flex: 1; min-width: 0; height: 37px; border: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 13.5px; color: var(--ink); padding: 0; }
.gsearch input:focus { outline: none; }
.gsearch .kbd { font-size: 11px; color: var(--muted); background: rgba(255,255,255,.7); border-radius: 6px; padding: 1px 6px; direction: ltr; }
.gsearch .results { top: 46px; border-radius: 16px; }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; background: #fff; border: 1px solid rgba(43,57,73,.14); color: var(--muted); display: grid; place-items: center; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95); cursor: pointer; }
.icon-btn:hover { color: var(--primary); border-color: var(--p-line); background: #fff; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot { position: absolute; top: -5px; inset-inline-end: -5px; }
.topbar .avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(180deg, var(--p-hi), var(--p-lo)); color: #fff; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.topbar .dropdown { top: 58px; inset-inline-end: 26px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(22px); box-shadow: 0 18px 50px rgba(30,34,41,.18); }
.menu-btn { display: none; }
.content { padding: 26px; max-width: none; }

/* ---- page head ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.2px; }
.page-head p, .page-head .sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.page-head .motto { color: var(--primary); font-size: 14.5px; font-weight: 500; margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* in-page sub-pages (segmented pills) */
.subbar { position: static; padding: 0; margin: -4px 0 18px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.subbar .seg, .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-sh);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subbar .seg a, .tabs button, .tabs .tab-more { padding: 8px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); background: transparent; border: 0; white-space: nowrap; box-shadow: none; }
.subbar .seg a:hover, .tabs button:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.subbar .seg a.on, .tabs button.on { background: linear-gradient(180deg, var(--p-hi), var(--p-lo)); color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(70,89,106,.32), inset 0 1px 0 rgba(255,255,255,.3); }
.tabs button.on .count { color: rgba(255,255,255,.8); }
.tabs { margin: 0 0 16px; overflow: visible; }
.card > .tabs { margin: 16px 16px 4px; }
.back-link { color: var(--primary); font-weight: 600; }
.subbar:has(.back-link) { margin: 0 0 8px; }
.seg.mini { background: rgba(83,104,121,.10); border-radius: 12px; padding: 3px; box-shadow: none; border: 0; }
.seg.mini a { padding: 5px 12px; border-radius: 9px; font-size: 13px; color: var(--muted); }
.seg.mini a.on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---- buttons ---- */
.btn { height: 40px; padding: 0 16px; border-radius: 14px; font-size: 13.5px; font-weight: 700; gap: 7px; color: var(--ink); background: rgba(255,255,255,.82); border: 1px solid rgba(43,57,73,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(43,57,73,.06); backdrop-filter: blur(12px); }
.btn:hover { background: #fff; border-color: var(--p-line); color: var(--ink); }
.btn-primary, .btn.btn-primary { background: linear-gradient(180deg, var(--p-hi), var(--p-lo)); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 18px rgba(70,89,106,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover { filter: brightness(1.06); color: #fff; background: linear-gradient(180deg, var(--p-hi), var(--p-lo)); }
.btn-soft { background: rgba(255,255,255,.82); color: var(--primary); border: 1px solid var(--p-line); }
.btn-soft:hover { color: var(--p-lo); }
.btn-ghost { background: transparent; border-color: rgba(43,57,73,.16); box-shadow: none; backdrop-filter: none; }
.btn-success, .btn-accent { background: linear-gradient(180deg, #3FBF7F, #2A9D63); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 18px rgba(42,157,99,.3), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-success:hover, .btn-accent:hover { color: #fff; filter: brightness(1.05); background: linear-gradient(180deg, #3FBF7F, #2A9D63); }
.btn-danger { color: #C0392B; background: rgba(255,255,255,.82); border-color: rgba(192,57,43,.25); }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 11px; font-size: 12px; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }

/* ---- glass surfaces ---- */
.card, .ios-section, .os-strip, .kcol, .chat-page, .cal-grid, .tab-menu, .modal {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-sh);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
.card { border-radius: 22px; }
.card-head { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.card-head h3 { font-size: 15.5px; font-weight: 700; }
.modal { background: rgba(255,255,255,.94); border-radius: 22px; }
.overlay { background: rgba(30,34,41,.28); backdrop-filter: blur(3px); }
.tab-menu { background: rgba(255,255,255,.95); border-radius: 16px; }

/* inputs */
.input, select.input, textarea.input, .toolbar input, .toolbar select { background: rgba(255,255,255,.78); border: 1px solid rgba(43,57,73,.16); border-radius: 12px; }
.input:focus, .toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,104,121,.16); outline: none; }
.field label { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* tables */
.toolbar { border-bottom: 1px solid var(--line); padding: 14px 16px; }
.tbl th { background: transparent; color: var(--muted); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--line); }
.tbl td { border-bottom: 1px solid var(--line); padding: 12px 14px; }
.tbl tbody tr:hover td { background: rgba(83,104,121,.05); }
.badge { border-radius: 8px; }

/* ---- grouped lists become OS cards ---- */
.os-page, .ios-page { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.os-page.narrow { max-width: 1100px; }
.ios-section { border-radius: 22px; padding: 18px; gap: 6px; }
.ios-head { padding: 0 2px 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); align-items: center; }
.ios-head:has(> span:empty:only-child) { display: none; }
.ios-list { background: transparent; border-radius: 0; overflow: visible; }
.ios-row { padding: 10px 6px; border-radius: 12px; min-height: 56px; position: relative; }
a.ios-row:hover, button.ios-row:hover { background: rgba(83,104,121,.07); }
.ios-row + .ios-row::before { inset-inline-start: 52px; }
.ios-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--p-soft); color: var(--primary); }
.ios-ic svg { width: 17px; height: 17px; stroke-width: 1.9; }
.ios-ic.blue { background: rgba(10,132,255,.12); color: #0A6FD6; } .ios-ic.green { background: rgba(52,199,89,.14); color: #1F9A4C; }
.ios-ic.orange { background: rgba(255,149,0,.14); color: #C76E00; } .ios-ic.red { background: rgba(255,59,48,.12); color: #D63A2E; }
.ios-ic.indigo { background: rgba(88,86,214,.12); color: #5250C8; } .ios-ic.teal { background: rgba(48,176,199,.14); color: #1E8DA1; }
.ios-ic.yellow { background: rgba(230,184,0,.16); color: #9A7A00; } .ios-ic.slate { background: var(--p-soft); color: var(--primary); }
.ios-ic.gray { background: rgba(142,142,147,.14); color: #6C6C70; } .ios-ic.brown { background: rgba(162,132,94,.16); color: #8A6B44; }
.ios-ic.pink { background: rgba(255,45,85,.12); color: #D12B4F; } .ios-ic.purple { background: rgba(175,82,222,.12); color: #9440C4; }
.ios-title { font-weight: 600; } .ios-empty { padding: 22px 10px; text-align: center; color: var(--muted); }
.ios-empty.big svg { color: #2A9D63; }
.ios-foot { color: var(--muted); }

/* numbers strip */
.os-strip { border-radius: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: hidden; }
.os-s { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; color: var(--ink); text-align: start; position: relative; }
.os-s + .os-s::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 1px; background: var(--line); }
a.os-s:hover { background: rgba(255,255,255,.45); color: var(--ink); }
.os-s b { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.os-s span { font-size: 12.5px; color: var(--muted); }
.os-s.bad b { color: #D63A2E; } .os-s.warn b { color: #C76E00; }
.os-good { background: rgba(52,199,89,.12); border: 1px solid rgba(52,199,89,.25); color: #1F7A43; border-radius: 16px; padding: 13px 18px; font-weight: 600; }
.os-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.os-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.os-legend { font-size: 11.5px; color: var(--muted); font-weight: 400; display: inline-flex; align-items: center; gap: 5px; }
.os-legend i { width: 9px; height: 9px; border-radius: 3px; background: rgba(83,104,121,.25); display: inline-block; margin-inline-start: 6px; }
.os-legend i.o { background: rgba(83,104,121,.12); } .os-legend i.r { background: rgba(255,59,48,.25); }
.os-team { display: flex; flex-direction: column; }
.os-m { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--ink); border-top: 1px solid var(--line); }
.os-m:first-child { border-top: 0; } .os-m:hover { color: var(--ink); background: rgba(83,104,121,.05); border-radius: 12px; }
.os-av { width: 36px; height: 36px; border-radius: 50%; background: var(--p-soft); color: var(--primary); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.os-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .os-mt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-mt small { color: var(--muted); font-size: 11.5px; }
.os-k { min-width: 26px; height: 26px; border-radius: 8px; background: rgba(83,104,121,.16); color: var(--primary); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.os-k.o { background: rgba(83,104,121,.08); } .os-k.r { background: rgba(255,59,48,.12); color: #D63A2E; } .os-k.r.z { background: rgba(142,142,147,.1); color: #9A9AA0; }

/* calendar: separate rounded day boxes */
.cal-grid { border-radius: 22px; padding: 14px; gap: 6px; }
.cal-wd { padding: 2px 0 6px; }
.cal-cell { background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; min-height: 96px; padding: 6px; box-shadow: 0 1px 2px rgba(30,34,41,.04); }
.cal-cell:hover { background: #fff; }
.cal-cell.out { opacity: .45; }
.cal-cell.today { border: 2px solid var(--primary); }
.cal-cell.sel { box-shadow: 0 0 0 3px rgba(83,104,121,.22); }
.cal-cell.sel .cal-num { background: var(--primary); }
.cal-cell.today .cal-num { color: var(--primary); } .cal-cell.today.sel .cal-num { background: var(--primary); color: #fff; }
.cal-month { font-size: 16px; min-width: 120px; text-align: center; }
.cal-key { background: rgba(255,255,255,.75); }
.cal-day .ios-head { padding: 0 6px; }
.cal-day .ios-list { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--glass-sh); padding: 6px; }

/* chats in brand colours */
.chat-page { border-radius: 22px; height: calc(100vh - 65px - 52px - 30px); }
.chat-side { background: rgba(255,255,255,.7); }
.chat-pane { background-color: #EEF1F4; background-image: radial-gradient(rgba(83,104,121,.10) 1px, transparent 1px); }
.bubble.out { background: #DDE5EC; } .chat-unread, .chat-send { background: linear-gradient(180deg, var(--p-hi), var(--p-lo)); }
.nav-badge, .side .nav-badge { background: #25D366; }
.chat-item.on { background: var(--p-soft); }

/* kanban */
.kcol { border-radius: 18px; } .kcard { border-radius: 14px; background: rgba(255,255,255,.92); }

/* ---- sign-in (split) ---- */
.auth2 { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth2-form { display: grid; place-items: center; padding: 40px 24px; background: transparent; }
.auth2-card { width: min(400px, 100%); background: rgba(255,255,255,.88); border: 1px solid #fff; border-radius: 26px; padding: 30px; box-shadow: 0 30px 80px rgba(43,57,73,.18); backdrop-filter: blur(20px); }
.auth2-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-hello h1 { font-size: 24px; font-weight: 700; } .auth-hello p { color: var(--muted); margin: 4px 0 0; }
.auth2-card .btn-primary { height: 48px; font-size: 15px; justify-content: center; }
.auth2-art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; color: #fff;
  background: radial-gradient(700px 500px at 20% 20%, rgba(141,156,171,.45), transparent 60%), radial-gradient(600px 500px at 90% 90%, rgba(214,196,170,.25), transparent 60%), linear-gradient(160deg, #2B3949, #1E2229 70%); }
.auth2-in { max-width: 430px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.auth2-brand img { height: 74px; width: auto; }
.auth2-art h2 { color: #fff; font-size: 30px; font-weight: 700; margin-top: 10px; }
.auth2-art p { color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.9; margin: 0; }
.auth2-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.auth2-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-size: 13.5px; }
.auth2-pills i { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; } .auth2-pills svg { width: 16px; height: 16px; }
.auth2-note { font-size: 12px; opacity: .65; margin-top: 8px; }
.demo-box { background: rgba(83,104,121,.07); border: 1px dashed var(--p-line); border-radius: 14px; }

/* ---- portals (staff/owner) top navigation ---- */
.topbar .tag { background: var(--p-soft); color: var(--primary); }

/* ---- phone ---- */
.tabbar { display: none; }
@media (max-width: 920px) {
  .side { position: fixed; inset: 0 0 0 auto; width: 284px; z-index: 70; transform: translateX(100%); transition: transform .22s; }
  .side.open { transform: none; box-shadow: -20px 0 60px rgba(0,0,0,.35); }
  .side.open + .side-scrim { display: block; position: fixed; inset: 0; background: rgba(30,34,41,.35); z-index: 65; }
  .menu-btn { display: grid; }
  .topbar { padding: 10px 14px; height: 60px; }
  .top-title { display: block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsearch { display: none; }
  .top-actions .icon-btn[aria-label="تسجيل الخروج"] { display: none; }
  .content { padding: 16px 14px 96px; }
  .page-head h1 { font-size: 22px; }
  .os-grid { grid-template-columns: 1fr; }
  .os-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-s:nth-child(odd)::before { display: none; } .os-s { border-top: 1px solid var(--line); } .os-s:nth-child(-n+2) { border-top: 0; }
  .tabbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 60; height: calc(66px + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.85); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-top: 1px solid rgba(43,57,73,.1); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #6E7782; font: inherit; font-size: 11px; font-weight: 600; background: none; border: 0; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .tabbar .on { color: var(--primary); }
  .chat-page { height: calc(100vh - 60px - 66px - 30px); }
  .auth2 { grid-template-columns: 1fr; } .auth2-art { order: -1; padding: 34px 22px; } .auth2-art h2 { font-size: 22px; } .auth2-pills { display: none; } .auth2-brand img { height: 54px; }
  .cal-cell { min-height: 52px; border-radius: 10px; }
  .cal-grid { gap: 4px; padding: 8px; }
}
.nav-badge[hidden] { display: none !important; }
.gsearch > svg { position: static; transform: none; inset: auto; color: var(--muted); }
.gsearch input { padding: 0 !important; text-indent: 0; }
.auth2-art { order: -1; }
.auth2-art { background: radial-gradient(700px 500px at 80% 15%, rgba(141,156,171,.55), transparent 60%), radial-gradient(600px 500px at 10% 95%, rgba(214,196,170,.28), transparent 60%), linear-gradient(160deg, #536879 0%, #2B3949 45%, #1E2229 100%); }
@media (max-width: 920px) { .os-s:last-child:nth-child(odd) { grid-column: span 2; } .os-s:last-child:nth-child(odd)::before { display: none; } }
html { background: #E7EAEE; }

/* ===================== Phone sizing (≤ 720px) — native-app feel ===================== */
.tb-filters { display: contents; }
@media (max-width: 720px) {
  html, body { overflow-x: clip; }
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  .demo-ribbon { display: none; }
  .topbar { height: 56px; padding: 8px 12px; gap: 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  .top-title { font-size: 17px; }
  .icon-btn, .topbar .avatar { width: 36px; height: 36px; border-radius: 11px; }
  .content { padding: 14px 12px calc(92px + env(safe-area-inset-bottom)); }

  /* page head: title, then a full-width row of actions */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
  .page-head h1 { font-size: 23px; line-height: 1.3; }
  .page-head .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .page-head .actions > * { width: 100%; justify-content: center; }
  .page-head .actions:has(> :only-child) { grid-template-columns: 1fr; }
  .page-head .actions .more-wrap { width: auto; } .page-head .actions .more-wrap .btn { width: 100%; }

  /* buttons & inputs: 44px touch targets, 16px text so iOS doesn't zoom */
  .btn { height: 44px; border-radius: 13px; font-size: 14.5px; }
  .btn-sm { height: 36px; font-size: 13px; }
  .input, select.input, textarea.input, .toolbar input, .toolbar select { font-size: 16px; min-height: 44px; }
  textarea.input { min-height: 88px; }

  /* sub-pages & record tabs scroll sideways, never the page */
  .subbar { margin: 0 -12px 12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .subbar::-webkit-scrollbar { display: none; }
  .subbar .seg { max-width: none; }
  .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .card > .tabs { margin: 12px 12px 4px; max-width: calc(100% - 24px); }
  .subbar .seg a, .tabs button, .tabs .tab-more { padding: 8px 14px; font-size: 14px; }
  .tab-menu { position: fixed; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline: 12px; min-width: 0; z-index: 90; border-radius: 18px; padding: 8px; }
  .tab-menu button, .tab-menu a, .tab-menu .menu-item { padding: 13px 14px !important; font-size: 15.5px !important; }

  /* list toolbars: search full width, filters as one sideways row */
  .toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .toolbar .search { width: 100%; max-width: none; min-width: 0; }
  .tb-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .tb-filters::-webkit-scrollbar { display: none; }
  .tb-filters select { flex: none; width: auto; min-width: 118px; min-height: 38px; font-size: 14px; border-radius: 999px; padding-inline: 14px 30px; }
  .toolbar > .actions { margin: 0 !important; }

  /* tables become cards: first column is the title, the rest label · value */
  .table-wrap { overflow: visible; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tbl tbody tr:hover td { background: transparent; }
  .tbl td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 26px; text-align: start; font-size: 14px; }
  .tbl td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; flex: none; }
  .tbl td[data-label=""]::before { display: none; }
  .tbl td.td-first { display: block; padding-bottom: 6px; font-size: 15.5px; font-weight: 600; }
  .tbl td.td-first::before { display: none; }
  .tbl td:empty, .tbl td.td-first:empty { display: none; }
  .tbl td > * { max-width: 70%; text-align: end; }
  .tbl td.td-first > * { max-width: none; text-align: start; }
  .tbl-foot { flex-wrap: wrap; gap: 8px; padding: 12px; }

  /* record pages */
  .g-main, .g2, .g3, .grid.g2, .grid.g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .dl { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .card-pad { padding: 14px; }
  .ios-section { padding: 14px; border-radius: 20px; }
  .os-s { padding: 13px 14px; } .os-s b { font-size: 24px; }

  /* dialogs become bottom sheets */
  .overlay { place-items: end stretch; padding: 0; }
  .modal, .modal.wide { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal-body { padding: 16px; } .modal-head { padding: 14px 16px; }
  .modal-foot { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .modal-foot .btn { width: 100%; justify-content: center; }
  .form-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* calendar & chats */
  .cal-head .cal-ctl { width: 100%; justify-content: space-between; }
  .cal-head .cal-ctl .btn-primary { flex: 1 1 100%; }
  .cal-legend { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .cal-key { flex: none; }
  .chat-page { border-radius: 18px; margin: 0 -4px; height: calc(100dvh - 56px - 66px - 26px - env(safe-area-inset-bottom)); }
  .chat-msgs { padding: 12px 10px; }
  .bubble { max-width: 86%; font-size: 15px; }
  .chat-compose { padding: 8px; }
  .kboard, .kanban { overflow-x: auto; scroll-snap-type: x mandatory; }
  .kcol { min-width: 82vw; scroll-snap-align: start; }

  /* drawer */
  .side { width: min(300px, 86vw); padding-top: max(18px, env(safe-area-inset-top)); }
  .side .nav-item { height: 46px; font-size: 15px; }
}
@media (max-width: 920px) { .shell { grid-template-columns: minmax(0, 1fr); } .shell > .main { grid-column: 1; } }
@media (max-width: 720px) {
  .tb-filters { margin: 0; padding: 0 0 2px; }
  .chat-compose textarea.chat-input { min-height: 44px; height: 44px; font-size: 16px; }
  .tbl td.td-first:has(> img:only-child), .tbl td.td-first:has(> .thumb:only-child) { display: none; }
}
.tabs { position: relative; z-index: 20; }
.req[hidden], [hidden] { display: none !important; }
.more-wrap { z-index: 25; }
.page-head { position: relative; z-index: 15; }

/* ===================== Round 4: combo, dual-calendar dates, task sheet, owners shares, report ===================== */
.combo { position: relative; }
.combo-in { padding-inline-end: 34px; }
.combo-x { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.combo-x svg { width: 14px; height: 14px; }
.combo-x:hover { background: var(--ios-fill, #EEF1F4); }
.combo-list { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 4px); max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(30,34,41,.16); padding: 4px; }
.combo-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; min-height: 40px; }
.combo-opt small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.combo-opt.on, .combo-opt:hover { background: var(--ice, #EEF2F5); }
.combo-opt.custom { border-top: 1px dashed var(--line); margin-top: 4px; color: var(--slate); }
.combo-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.datef-row { display: flex; gap: 6px; align-items: center; }
.datef-row > .input { flex: 1; min-width: 0; }
.hijri-pick { flex: 1; display: grid; grid-template-columns: 0.8fr 1.6fr 1.1fr; gap: 6px; min-width: 0; }
.hijri-pick[hidden] { display: none !important; }
.cal-sw { flex: none; height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--slate); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cal-sw:hover { border-color: var(--slate); }
.date-alt { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 1em; }
.cal-toggle { display: inline-flex; background: var(--ios-fill, #EEF1F4); border-radius: 9px; padding: 3px; gap: 2px; }
.cal-toggle button { border: 0; background: transparent; font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 7px; color: var(--muted); cursor: pointer; }
.cal-toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }

/* ownership shares */
.share-bar { height: 10px; border-radius: 99px; background: var(--ios-fill, #EEF1F4); overflow: hidden; display: flex; }
.share-bar i { display: block; height: 100%; background: var(--grad-main, #536879); border-inline-start: 2px solid #fff; }
.share-bar i:first-child { border: 0; }
.share-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.share-head b.full { color: var(--ok, #15803D); }
.share-head b.left { color: var(--slate); }

/* property tasks: inline list you edit in place */
.ptasks { display: flex; flex-direction: column; gap: 8px; }
.ptask { display: grid; grid-template-columns: 30px minmax(0, 2fr) minmax(0, 1.3fr) 150px 110px auto; gap: 8px; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.ptask.done { background: var(--ok-bg, #F0FDF4); }
.ptask.done .ptask-t { text-decoration: line-through; color: var(--muted); }
.ptask.late { border-color: var(--err-l, #FCA5A5); }
.ptask .input { height: 36px; font-size: 13px; }
.ptask-chk { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--mist, #8D9CAB); background: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; color: #fff; }
.ptask-chk svg { width: 14px; height: 14px; }
.ptask.done .ptask-chk { background: var(--ok, #15803D); border-color: var(--ok, #15803D); }
.ptask-t { font-weight: 500; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.ptask-t small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.ptask-del { border: 0; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.ptask-del:hover { background: var(--err-bg, #FEF2F2); color: var(--err, #DC2626); }
.ptask-del svg { width: 16px; height: 16px; }
.ptasks-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 150px 110px auto; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.ptasks-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptasks-prog { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ptasks-prog .progress { width: 140px; }

/* bundle sheet */
.bundle-row { display: grid; grid-template-columns: 26px minmax(0, 1.6fr) minmax(0, 1.3fr) 150px 110px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bundle-row:last-child { border-bottom: 0; }
.bundle-row.off { opacity: .45; }
.bundle-row input[type=checkbox] { width: 20px; height: 20px; }

/* task sheet (يومي) */
.tsheet { display: flex; flex-direction: column; gap: 14px; }
.tsheet-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tsheet-meta span { background: var(--ios-fill, #EEF1F4); border-radius: 99px; padding: 4px 10px; font-size: 12px; color: var(--slate); }
.tsheet-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tsheet-comments { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: auto; }
.tsheet-c { background: var(--ios-fill, #EEF1F4); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.tsheet-c b { font-size: 12px; } .tsheet-c small { color: var(--muted); font-size: 11px; margin-inline-start: 6px; }
.draft-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.draft-box h4 { margin: 0; font-size: 13px; color: var(--slate); display: flex; justify-content: space-between; align-items: center; }
.draft-box pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.8; }

/* contracts: kind picker + documentation */
.kind-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kind-pick button { text-align: start; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 14px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; min-height: 92px; }
.kind-pick button b { font-size: 15px; color: var(--ink); } .kind-pick button small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.kind-pick button.on { border-color: var(--slate); background: var(--ice, #EEF2F5); box-shadow: 0 0 0 3px rgba(83,104,121,.14); }
.doc-card { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: #fff; }
.doc-card.ok { border-color: var(--ok-l, #86EFAC); background: var(--ok-bg, #F0FDF4); }
.doc-card.no { border-color: var(--warn-l, #FCD34D); background: var(--warn-bg, #FFFBEB); }

/* property report (screen + print) */
.rep { max-width: 980px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 30px; border: 1px solid var(--line); }
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.rep-head img { height: 52px; }
.rep-head .meta { font-size: 12px; color: var(--muted); text-align: end; line-height: 1.9; }
.rep h1 { font-size: 22px; margin: 0 0 4px; } .rep h2 { font-size: 16px; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--navy, #2B3949); }
.rep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; }
.rep-grid div { font-size: 13px; } .rep-grid div span { display: block; color: var(--muted); font-size: 11px; }
.rep table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep th, .rep td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rep th { background: var(--snow, #F7F8F9); font-weight: 600; color: var(--slate); }
.rep-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rep-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.rep-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rep-kpis div { background: var(--snow, #F7F8F9); border-radius: 10px; padding: 10px; text-align: center; } .rep-kpis b { display: block; font-size: 20px; } .rep-kpis span { font-size: 11px; color: var(--muted); }
.rep-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.rep-tools { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff !important; }
  .sidebar, .topbar, .tabbar, .rep-tools, .toasts, .page-head { display: none !important; }
  .shell { display: block !important; } .main, main { padding: 0 !important; margin: 0 !important; }
  .rep { border: 0; padding: 0; max-width: none; border-radius: 0; }
  .rep h2 { break-after: avoid; } .rep table, .rep-photos { break-inside: auto; } .rep tr { break-inside: avoid; }
}

@media (max-width: 720px) {
  .ptask { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "c t d" "a a a" "dt dt dt"; }
  .ptask > .ptask-chk { grid-area: c; } .ptask > .ptask-t { grid-area: t; } .ptask > .ptask-del { grid-area: d; }
  .ptask > .p-as { grid-area: a; } .ptask > .p-dt { grid-area: dt; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ptasks-add, .bundle-row { grid-template-columns: 1fr 1fr; }
  .ptasks-add > :first-child, .bundle-row > .b-t { grid-column: 1 / -1; }
  .bundle-row > input[type=checkbox] { grid-column: 1 / -1; justify-self: start; }
  .kind-pick { grid-template-columns: 1fr 1fr; }
  .rep { padding: 16px; } .rep-grid { grid-template-columns: 1fr 1fr; } .rep-photos { grid-template-columns: 1fr 1fr; } .rep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-head { flex-direction: column; } .rep-head .meta { text-align: start; }
  .hijri-pick { grid-template-columns: 0.8fr 1.5fr 1.2fr; }
  .combo-list { max-height: 45vh; }
}
.ptasks-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, .9fr); }
@media (max-width: 720px) { .ptasks-form { grid-template-columns: 1fr 1fr; } .ptasks-form > .field:first-child, .ptasks-form > .field:nth-child(3) { grid-column: 1 / -1; } }
.cal-h { font-size: 10px; color: var(--muted); margin-inline-start: 4px; font-weight: 400; }
@media (max-width: 720px) { .top-actions .cal-toggle { display: none; } }
.hijri-pick select.input { padding: 0 6px; font-size: 14px; min-width: 0; }
.hijri-pick { grid-template-columns: minmax(56px, .7fr) minmax(0, 1.7fr) minmax(70px, 1fr); }

/* employee file */
.emp-photo { border-radius: 50%; object-fit: cover; display: block; background: var(--ios-fill, #EEF1F4); }
.emp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px; }
.emp-head h1 { margin: 0 0 4px; font-size: 24px; }
.emp-ph { position: relative; width: 96px; height: 96px; }
.emp-ph .avatar { border-radius: 50%; display: grid; place-items: center; }
.emp-ph-btn { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.emp-ph-btn svg { width: 15px; height: 15px; }
.emp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.emp-chip { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.emp-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--muted); }
.gov-src { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--snow, #F7F8F9); border: 1px solid var(--line); }
.gov-src svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--slate); }
@media (max-width: 720px) {
  .emp-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .emp-chips, .emp-facts { justify-content: center; }
  .emp-head .actions { justify-content: center; }
}

/* Round 5: no hidden menus — tabs scroll, secondary actions sit in a row */
.tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > button { flex: none; white-space: nowrap; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; }
.act-row .btn { white-space: nowrap; }
/* chats round 5 */
.seg-n { font-size: 10px; background: rgba(0,0,0,.08); border-radius: 99px; padding: 0 6px; margin-inline-start: 4px; }
.chat-kind { font-size: 10px; font-weight: 500; border-radius: 99px; padding: 1px 7px; margin-inline-start: 6px; vertical-align: middle; }
.chat-kind.o { background: #E0E7FF; color: #3730A3; } .chat-kind.c { background: #DCFCE7; color: #166534; }
.chat-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--snow, #F7F8F9); }
.chat-prop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-inline-end: auto; }
.chat-prop svg { width: 15px; height: 15px; color: var(--slate); }
.chat-tool { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--slate); display: grid; place-items: center; cursor: pointer; flex: none; font: inherit; font-size: 12px; }
.chat-tool svg { width: 20px; height: 20px; }
.chat-tool:hover { background: var(--ios-fill, #EEF1F4); }
.chat-tool.rec { width: auto; padding: 0 12px; border-radius: 20px; background: var(--err, #DC2626); color: #fff; }
.bubble-img { display: block; max-width: 240px; max-height: 260px; border-radius: 10px; object-fit: cover; margin-bottom: 4px; }
.bubble-audio { width: 240px; max-width: 100%; display: block; margin-bottom: 4px; }
.bubble-video { max-width: 260px; border-radius: 10px; display: block; margin-bottom: 4px; }
.bubble-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.05); font-size: 13px; margin-bottom: 4px; color: inherit; }
.bubble-file svg { width: 16px; height: 16px; }
.bubble-save { border: 0; background: none; color: var(--slate); font: inherit; font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 720px) { .bubble-img, .bubble-video { max-width: 200px; } .chat-bar { padding: 8px 10px; } }
.day-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
@media (max-width: 720px) { .day-add { display: grid; grid-template-columns: 1fr 1fr; } .day-add .btn { justify-content: center; } }
.tsheet-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tsheet-sec h4 { margin: 0; font-size: 14px; }
.delivs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.deliv { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.deliv-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000; }
.deliv-link { display: flex; align-items: center; gap: 8px; padding: 14px 12px; color: var(--ink); font-size: 13px; }
.deliv-link svg { width: 16px; height: 16px; }
.deliv-meta { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 12px; }
.deliv-meta small { color: var(--muted); }
/* finance */
.fchart { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 220px; padding: 8px 4px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.fchart-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.fchart-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.fchart-bars i { width: 10px; border-radius: 4px 4px 0 0; display: block; cursor: default; }
.fchart-bars i:hover { filter: brightness(.9); }
.fchart-x { font-size: 11px; color: var(--muted); text-align: center; padding: 6px 0 4px; white-space: nowrap; }
.fchart-tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 5; }
.fchart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.fchart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fchart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.agerow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px 64px; gap: 10px; align-items: center; font-size: 13px; }
.agebar { height: 10px; background: var(--ios-fill, #EEF1F4); border-radius: 99px; overflow: hidden; }
.agebar i { display: block; height: 100%; background: var(--slate); border-radius: 99px; }
.agebar i.late { background: #c2410c; }
@media (max-width: 720px) { .agerow { grid-template-columns: 74px minmax(0, 1fr) 96px; } .agerow small { display: none; } }
.page-head .actions .act-row { display: contents; }
@media (max-width: 720px) {
  .page-head .actions { flex-wrap: wrap; justify-content: flex-start; width: 100%; }
  .page-head .actions > .seg, .page-head .actions .seg.mini { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .chat-tools .seg { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .chat-tools .seg a { flex: none; }
}