/* Qalam CMS — administration interface */
/* Self-hosted copies of Cairo (Arabic) and Inter (English) from Google Fonts (SIL OFL, assets/fonts/*/OFL.txt).
 * Named "… Self" so that the Google Fonts service, when switched on (Settings → Branding), provides "Cairo"/"Inter"
 * and these files are the fallback. */
@font-face { font-family: "Cairo Self"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/cairo/cairo-arabic-wght-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "Cairo Self"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/cairo/cairo-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cairo Self"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/cairo/cairo-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Self"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Self"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root { --admin-brand: #0b5394; --sidebar-w: 250px; }
html[lang="ar"] body { font-family: "Cairo", "Cairo Self", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; }
html[lang="en"] body { font-family: "Inter", "Inter Self", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
body.admin-body, body.auth-body, body.install-body { background: #f4f6f9; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.skip-link:focus { position: fixed; top: .5rem; inset-inline-start: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }
.admin-topbar { min-height: 56px; }
.admin-shell { display: flex; min-height: calc(100vh - 56px); }
.admin-sidebar { width: var(--sidebar-w); --bs-offcanvas-bg: #16202b; --bs-offcanvas-color: #c9d1db; background-color: #16202b !important; color: #c9d1db; flex-shrink: 0; }
@media (min-width: 992px) { .admin-sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } }
.admin-sidebar .offcanvas-header { background: #16202b; color: #fff; }
.admin-sidebar .btn-close { filter: invert(1); }
.sidebar-heading { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: #7f8b98; padding: 1rem 1rem .25rem; margin: 0; }
html[lang="ar"] .sidebar-heading { letter-spacing: 0; font-size: .8rem; }
.admin-sidebar .nav-link { color: #c9d1db; display: flex; gap: .6rem; align-items: center; padding: .45rem 1rem; border-inline-start: 3px solid transparent; }
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); border-inline-start-color: color-mix(in srgb, var(--admin-brand) 55%, #fff); }
.sidebar-version { font-size: .75rem; color: #6b7785; padding: 1rem; margin: 0; }
.admin-main { flex: 1; min-width: 0; padding: 1.25rem; }
@media (min-width: 1200px) { .admin-main { padding: 1.75rem 2rem; } }
.card { border-color: #e3e7ed; }
.stat-card .stat-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: grid; place-items: center; background: #e8f1fb; color: var(--admin-brand); font-size: 1.4rem; }
.stat-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.w-checkbox { width: 2.5rem; }
.order-input { width: 5.5rem; }
.order-col { width: 7rem; }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden; background: #e8f1fb; display: inline-grid; place-items: center; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.abilities-list { max-height: 16rem; overflow-y: auto; }
.audit-meta { max-width: 28rem; font-size: .75rem; }
.message-body { white-space: normal; overflow-wrap: anywhere; }
.totp-qr img { display: block; image-rendering: pixelated; }
.menu-indent { display: inline-block; width: 1.25rem; }
.fb-thumb { width: 72px; height: 72px; object-fit: cover; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 26rem; border-radius: 1rem; }

/* Media */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.media-tile .media-thumb, .media-pick img, .media-pick i { display: grid; place-items: center; aspect-ratio: 1; background: #eef1f5; color: #6b7785; font-size: 2.5rem; overflow: hidden; }
.media-tile .media-thumb img, .media-pick img { width: 100%; height: 100%; object-fit: cover; }
.media-pick { border: 2px solid transparent; text-align: start; background: #fff; overflow: hidden; }
.media-pick:hover, .media-pick:focus-visible { border-color: var(--admin-brand); }
.media-preview { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; font-size: 1.75rem; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-name { max-width: 14rem; }

/* Editor */
.rte-toolbar .btn { padding: .2rem .45rem; }
.rte-area { min-height: 18rem; max-height: 60vh; overflow-y: auto; background: #fff; }
.rte-area:focus { outline: none; box-shadow: inset 0 0 0 2px #86b7fe; }
.rte-area img { max-width: 100%; height: auto; }
.rte-area blockquote { border-inline-start: 4px solid #cfd6df; padding-inline-start: .75rem; color: #5f6b7a; }
.rte-source { min-height: 18rem; }
.seo-box summary { cursor: pointer; }
.tab-content .tab-pane[dir="rtl"] input[dir="ltr"], .tab-content .tab-pane[dir="rtl"] input[type="url"] { text-align: left; }

@media (max-width: 575.98px) {
  .admin-main { padding: .75rem; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.settings-checklist { max-height: 16rem; overflow-y: auto; }

/* Theme colours from /theme.css (site primary colour) */
.admin-body a:not(.btn):not(.nav-link):not(.dropdown-item) { color: color-mix(in srgb, var(--admin-brand) 85%, #000); }
.btn-primary { --bs-btn-bg: var(--admin-brand); --bs-btn-border-color: var(--admin-brand); --bs-btn-hover-bg: color-mix(in srgb, var(--admin-brand) 80%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--admin-brand) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--admin-brand) 75%, #000); --bs-btn-disabled-bg: var(--admin-brand); --bs-btn-disabled-border-color: var(--admin-brand); }
.btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--admin-brand) 85%, #000); --bs-btn-border-color: var(--admin-brand); --bs-btn-hover-bg: var(--admin-brand); --bs-btn-hover-border-color: var(--admin-brand); --bs-btn-active-bg: var(--admin-brand); }
.text-primary { color: var(--admin-brand) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--admin-brand); }
.pagination { --bs-pagination-active-bg: var(--admin-brand); --bs-pagination-active-border-color: var(--admin-brand); }
.form-check-input:checked { background-color: var(--admin-brand); border-color: var(--admin-brand); }
.form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--admin-brand) 55%, #fff); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--admin-brand) 22%, transparent); }
.stat-card .stat-icon { background: color-mix(in srgb, var(--admin-brand) 10%, #fff); }
.admin-logo { height: 32px; width: auto; }

/* Colour theme picker (Settings → Branding) */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.theme-option { display: flex; flex-direction: column; gap: .45rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .65rem .75rem; cursor: pointer; position: relative; background: #fff; }
.theme-option:hover { border-color: var(--admin-brand, #0b5394); }
.theme-option:has(input:checked) { border-color: var(--admin-brand, #0b5394); box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-brand, #0b5394) 35%, transparent); }
.theme-option input { position: absolute; top: .6rem; inset-inline-end: .6rem; margin: 0; }
.theme-swatch { display: block; border-radius: .35rem; overflow: hidden; width: 72px; height: 24px; }
.theme-swatch-custom { display: grid; place-items: center; background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; }
.theme-name { font-size: .85rem; font-weight: 600; }