/* official riyal sign (U+20C1) — no system font has it yet; this face only draws that one character */
@font-face { font-family: 'Saudi Riyal'; src: url('/fonts/SaudiRiyal.ttf') format('truetype'); font-display: block; unicode-range: U+20C1; }

/* Residia admin — enterprise ERP look (Odoo-like): coloured app bar, dense lists, launcher tiles, status bars */

/* ---------- app bar ---------- */
.fi-topbar-ctn .fi-topbar { background: var(--primary-800); border-bottom: 0; box-shadow: 0 1px 0 rgb(0 0 0 / .08); min-height: 3.25rem; }
.fi-topbar .fi-topbar-item-btn, .fi-topbar .fi-topbar-item-label, .fi-topbar .fi-topbar-item-icon,
.fi-topbar .fi-topbar-group-toggle-icon, .fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn svg { color: rgb(255 255 255 / .86) !important; }
.fi-topbar .fi-topbar-item-btn { border-radius: .5rem; padding-block: .375rem; }
.fi-topbar .fi-topbar-item-btn:hover, .fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn { background: rgb(255 255 255 / .14) !important; }
.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label { color: #fff !important; font-weight: 600; }
.fi-topbar .fi-global-search-field .fi-input-wrp { background: rgb(255 255 255 / .12); --tw-ring-color: transparent; }
.fi-topbar .fi-global-search-field input { color: #fff; }
.fi-topbar .fi-global-search-field input::placeholder, .fi-topbar .fi-global-search-field svg { color: rgb(255 255 255 / .7); }
.fi-topbar .fi-logo { filter: brightness(0) invert(1); }

/* ---------- density ---------- */
.fi-main { padding-inline: 1.25rem; }
.fi-page-header-main-ctn, .fi-page .fi-header { row-gap: .5rem; }
.fi-header-heading { font-size: 1.35rem !important; line-height: 1.6; }
.fi-ta-header-cell { padding-block: .55rem !important; font-size: .78rem; text-transform: none; }
.fi-ta-cell { padding-block: .2rem !important; }
.fi-ta-text-item { font-size: .86rem; }
.fi-ta-row:hover { background: color-mix(in oklab, var(--primary-500) 6%, transparent); }
.fi-section-header { padding-block: .7rem !important; }
.fi-in-entry-label, .fi-in-entry-wrp-label { font-size: .75rem; opacity: .75; }

/* header "smart buttons" */
.fi-header .fi-ac .fi-btn.fi-outlined { border-radius: .6rem; }

/* ---------- status bar (Odoo-style stages) ---------- */
.rx-statusbar { display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-end; }
.rx-step { position: relative; padding: .4rem 1.1rem .4rem 1.4rem; font-size: .8rem; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0;
  clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%); margin-inline-start: -6px; }
.rx-step:first-child { clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%); border-start-start-radius: 0; }
.rx-step.is-done { color: #334155; background: #e2e8f0; }
.rx-step.is-current { color: #fff; background: var(--primary-600); border-color: var(--primary-600); font-weight: 600; }
.rx-step.is-current.is-bad { background: #dc2626; border-color: #dc2626; }

/* ---------- launcher ---------- */
.rx-launcher { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rx-tile { background: var(--color-white, #fff); border: 1px solid rgb(15 23 42 / .08); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04); transition: box-shadow .15s, transform .15s; }
.rx-tile:hover { box-shadow: 0 8px 24px rgb(15 23 42 / .08); transform: translateY(-1px); }
.rx-tile-head { display: flex; align-items: center; gap: .8rem; padding: .95rem 1rem .7rem; text-decoration: none; }
.rx-tile-icon { width: 2.75rem; height: 2.75rem; border-radius: .8rem; display: grid; place-items: center; color: #fff; flex: none; }
.rx-tile-icon svg { width: 1.5rem; height: 1.5rem; }
.rx-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rx-tile-name { font-weight: 700; font-size: 1rem; color: #0f172a; }
.rx-tile-desc { font-size: .72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-tile-kpi { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.rx-tile-kpi b { font-size: 1.15rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.rx-tile-kpi small { font-size: .66rem; color: #64748b; }
.rx-tile-links { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem .8rem .8rem; border-top: 1px dashed rgb(15 23 42 / .08); margin-top: auto; }
.rx-tile-links a { font-size: .74rem; padding: .2rem .55rem; border-radius: 999px; background: rgb(15 23 42 / .04); color: #334155; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.rx-tile-links a:hover { background: color-mix(in oklab, var(--primary-500) 14%, transparent); color: var(--primary-700); }
.rx-badge { background: #f59e0b; color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .65rem; line-height: 1.1rem; }

/* ---------- activities ---------- */
.rx-activity { display: flex; align-items: center; gap: .65rem; padding: .55rem .25rem; border-bottom: 1px solid rgb(15 23 42 / .06); text-decoration: none; color: inherit; }
.rx-activity:last-child { border-bottom: 0; }
.rx-activity:hover .rx-activity-label { color: var(--primary-600); }
.rx-activity-icon { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; flex: none; }
.rx-activity-icon svg { width: 1.1rem; height: 1.1rem; }
.rx-activity-label { flex: 1; font-size: .86rem; }
.rx-activity-count { font-weight: 700; font-size: .8rem; min-width: 1.9rem; text-align: center; border-radius: 999px; padding: .1rem .5rem; }
.rx-c-danger { background: #fee2e2; color: #b91c1c; } .rx-c-warning { background: #fef3c7; color: #b45309; }
.rx-c-info { background: #e0f2fe; color: #0369a1; } .rx-c-gray { background: #f1f5f9; color: #475569; }
.rx-empty { padding: 1.5rem 0; text-align: center; color: #059669; font-weight: 600; }

/* ---------- dark ---------- */
.dark .rx-tile { background: #0f172a; border-color: rgb(255 255 255 / .08); }
.dark .rx-tile-name, .dark .rx-tile-kpi b { color: #f1f5f9; }
.dark .rx-tile-desc, .dark .rx-tile-kpi small { color: #94a3b8; }
.dark .rx-tile-links { border-color: rgb(255 255 255 / .08); }
.dark .rx-tile-links a { background: rgb(255 255 255 / .06); color: #cbd5e1; }
.dark .rx-step { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .rx-step.is-done { background: #334155; color: #e2e8f0; }
.dark .rx-activity { border-color: rgb(255 255 255 / .06); }
.dark .rx-c-danger { background: rgb(220 38 38 / .2); color: #fca5a5; } .dark .rx-c-warning { background: rgb(217 119 6 / .2); color: #fcd34d; }
.dark .rx-c-info { background: rgb(2 132 199 / .2); color: #7dd3fc; } .dark .rx-c-gray { background: rgb(255 255 255 / .08); color: #cbd5e1; }
.dark .fi-topbar-ctn .fi-topbar { background: var(--primary-950); }

/* one-line module bar */
.fi-topbar-nav-groups { flex-wrap: nowrap !important; gap: .1rem !important; margin-inline: .75rem !important; }
.fi-topbar .fi-topbar-item-btn { padding-inline: .6rem !important; white-space: nowrap; }
.fi-topbar .fi-topbar-item-label { font-size: .86rem; }
.fi-topbar .fi-global-search-field { max-width: 15rem; }

/* TV emergency alert: reach report */
.rx-alert-report { display: flex; flex-direction: column; gap: 1rem; }
.rx-alert-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 900px) { .rx-alert-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-alert-stat { border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .9rem 1rem; background: #fff; display: flex; flex-direction: column; gap: .25rem; }
.dark .rx-alert-stat { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .04); }
.rx-alert-stat span { font-size: .85rem; color: rgb(107 114 128); }
.rx-alert-stat b { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rx-alert-stat.is-success b { color: rgb(22 163 74); } .rx-alert-stat.is-warning b { color: rgb(217 119 6); }
.rx-alert-stat.is-info b { color: rgb(37 99 235); } .rx-alert-stat.is-danger b { color: rgb(220 38 38); }
.rx-alert-note { font-size: .85rem; color: rgb(107 114 128); }
.rx-alert-table { overflow-x: auto; border: 1px solid rgb(229 231 235); border-radius: .75rem; }
.dark .rx-alert-table { border-color: rgb(255 255 255 / .1); }
.rx-alert-table table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.rx-alert-table th { text-align: start; font-weight: 500; padding: .7rem 1rem; background: rgb(249 250 251); color: rgb(75 85 99); white-space: nowrap; }
.dark .rx-alert-table th { background: rgb(255 255 255 / .04); color: rgb(209 213 219); }
.rx-alert-table td { padding: .7rem 1rem; border-top: 1px solid rgb(243 244 246); vertical-align: top; }
.dark .rx-alert-table td { border-color: rgb(255 255 255 / .06); }
.rx-alert-table td.t { text-align: start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-alert-table .nm { font-weight: 500; } .rx-alert-table .sub { font-size: .75rem; color: rgb(107 114 128); }
.rx-alert-table .on { color: rgb(22 163 74); font-weight: 500; } .rx-alert-table td.empty { text-align: center; color: rgb(107 114 128); padding: 1.5rem; }