/*
 * «الماهر حلقات» in Khlel's layout (docs/02-khlel-reference.md §1) and Al-Maher's identity: a plum sidebar on the right
 * with light text and a light-plum active item, Al-Maher's ground behind white cards. The scale is landing's --color-brand-*.
 */
:root {
    --hq-ink: #4A2839;
    --hq-ink-dark: #683B50;
    --hq-accent: #E4D2DB;
    --hq-page: #F6F4F2;
}

.fi-body { background: var(--hq-page); }
.dark .fi-body { background: #1a1418; }

.fi-sidebar,
.fi-sidebar-header { background: var(--hq-ink) !important; }
.fi-sidebar { border-inline-start: 0 !important; }
.fi-sidebar-header { box-shadow: none !important; border-bottom: 1px solid rgb(255 255 255 / .12); }
.fi-sidebar-header a, .fi-sidebar-header .fi-logo { color: #fff !important; }

.fi-sidebar-item-label,
.fi-sidebar-group-label { color: rgb(255 255 255 / .82) !important; }
.fi-sidebar-item-icon,
.fi-sidebar-group-btn svg,
.fi-sidebar-group-collapse-btn svg { color: rgb(255 255 255 / .7) !important; }

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible { background: rgb(255 255 255 / .08) !important; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: rgb(255 255 255 / .06) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--hq-accent) !important; }

.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last { background: rgb(255 255 255 / .25) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part { background: var(--hq-accent) !important; }

.fi-topbar { box-shadow: 0 1px 0 rgb(0 0 0 / .06); }

/* Home page widgets (our own classes: Filament ships only the utilities it uses itself). */
.hq-muted { color: #8a847c; font-size: .75rem; }
.hq-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.hq-row-end { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.hq-term + .hq-term { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #efedea; }
.hq-title { font-weight: 600; color: #1c1a18; }
.dark .hq-title { color: #fff; }
.hq-big { font-size: 1.9rem; font-weight: 600; line-height: 1; color: #683B50; }
.hq-big small { font-size: 1rem; color: #a39c93; font-weight: 400; }
.hq-bar { margin-top: .75rem; height: .5rem; border-radius: 999px; background: #efedea; overflow: hidden; }
.dark .hq-bar { background: rgb(255 255 255 / .1); }
.hq-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--hq-ink-dark); }
.hq-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; font-size: .8rem; }
.hq-facts dt { color: #a39c93; font-size: .72rem; }
.hq-list { list-style: none; margin: 0; padding: 0; }
.hq-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; }
.hq-list li + li { border-top: 1px solid #efedea; }
.dark .hq-list li + li { border-color: rgb(255 255 255 / .08); }
.hq-item { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.hq-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.hq-count.danger { background: #fdecea; color: #b42318; }
.hq-count.warning { background: #fdf0e6; color: #8A6516; }
.hq-count.info { background: #efedea; color: #57534e; }
.hq-ok { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #57534e; }
.hq-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.hq-table th { font-weight: 500; font-size: .75rem; color: #8a847c; padding: .5rem; text-align: center; }
.hq-table th:first-child, .hq-table td:first-child { text-align: start; }
.hq-table td { padding: .6rem .5rem; text-align: center; border-top: 1px solid #efedea; }
.dark .hq-table td { border-color: rgb(255 255 255 / .08); }
.hq-table .hot { color: #8A6516; font-weight: 600; }
.hq-meter { display: flex; align-items: center; gap: .5rem; max-width: 9rem; margin: 0 auto; }
.hq-meter > div { flex: 1; height: .375rem; border-radius: 999px; background: #efedea; overflow: hidden; }
.hq-meter > div > span { display: block; height: 100%; border-radius: 999px; }

/*
 * The platforms' fonts: headings in Cairo; numbers in IBM Plex Mono in the panel, its tables and cards. A table cell's
 * Arabic letters fall back to IBM Plex Sans Arabic, its digits come in Mono.
 */
:root { --hq-heading: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; --hq-numbers: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; }
h1, h2, h3, .fi-header-heading, .fi-section-header-heading, .fi-modal-heading, .fi-wi-chart-heading, .fi-simple-header-heading { font-family: var(--hq-heading); }
.fi-ta-cell, .fi-wi-stats-overview-stat-value, .hq-table td, .hq-big, .hq-count, .fi-badge, .fi-pagination { font-family: var(--hq-numbers); font-variant-numeric: tabular-nums; }

.hq-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; font-size: .8rem; color: #57534e; }
.hq-filters label { display: flex; flex-direction: column; gap: .25rem; }
.hq-select { height: 2.4rem; min-width: 11rem; border: 1px solid #dedad4; border-radius: .5rem; padding: 0 .6rem; background: #fff; font: inherit; color: #2a2724; }
.hq-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.hq-chip { min-width: 3.2rem; height: 2rem; padding: 0 .5rem; border: 1px solid #dedad4; border-radius: .45rem; background: #fff; font-size: .75rem; cursor: pointer; }
.hq-chip.on { color: #fff; border-color: transparent; }

/* Report pages, in Khlel's look: cards "target / done" with a coloured percentage, tabs, wide tables. */
.hq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.hq-kpi { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #fff; border-radius: .75rem; padding: .9rem 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dark .hq-kpi { background: rgb(255 255 255 / .05); }
.hq-kpi-t { font-size: .8rem; color: #8a847c; }
.hq-kpi-v { font-family: var(--hq-numbers); font-size: 1.15rem; text-align: right; }
.hq-kpi-p { font-family: var(--hq-numbers); font-size: 1.7rem; font-weight: 500; }
.hq-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.hq-tab { border: 1px solid #dedad4; background: #fff; border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; cursor: pointer; }
.hq-tab.on { background: var(--hq-ink-dark); border-color: var(--hq-ink-dark); color: #fff; }
.hq-tab .n { display: inline-block; min-width: 1.4rem; margin-inline-start: .35rem; padding: 0 .35rem; border-radius: 999px; background: #A87A93; color: #fff; font-family: var(--hq-numbers); font-size: .7rem; }
.hq-scroll { overflow-x: auto; }
.hq-table .range { font-size: .78rem; color: #57534e; white-space: nowrap; }
.hq-table .pct { font-family: var(--hq-numbers); }
.hq-table .name { white-space: nowrap; }
.hq-status { display: inline-block; padding: .1rem .5rem; border-radius: .4rem; font-size: .75rem; color: #fff; }
.hq-grid-week td, .hq-grid-week th { white-space: nowrap; }
.hq-empty { color: #8a847c; font-size: .9rem; padding: .5rem 0; }

/* The platforms' rights line. */
.hq-footer { text-align: center; color: #8a847c; font-size: .75rem; padding: 1rem 1rem 1.25rem; }