/* Alfiya Academy · admin theme. Loaded after the ported Pearls of Quran styles: Alfiya's colours, fonts and buttons.
   Indigo night for the sidebar and primary actions, warm paper for the canvas, gold for highlights. */
:root {
  --gold-logo: #B4842A; --gold-500: #C8952E; --gold-600: #A87A20; --gold-800: #7A5A0C; --gold-300: #E3B657; --gold-50: #FDFAF2;
  --gold-400: #D6A846; --gold-200: #F1DDA2; --gold-100: #F9EFD3; --gold-glow: rgba(200, 149, 46, .26);
  --abyss: #0A0433; --deep-950: #0E0640; --deep-900: #160A5E; --deep-800: #23128F; --deep-700: #1F0A8C; --deep-600: #2A1A9E; --deep-500: #4A35D6;
  --teal-600: #23857A; --teal-500: #2FA596; --aqua-400: #8E7BD6; --aqua-300: #B7A9F2; --aqua-200: #DCD3FA;
  --pearl-0: #FFFFFF; --pearl-50: #FBF9F4; --pearl-100: #F4F0E7; --pearl-200: #E9E3D6; --pearl-300: #D8CFBE;
  --indigo: #1F0A8C; --indigo-2: #3A24C4;
  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Switzer', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-num: 'Switzer', 'Segoe UI', system-ui, sans-serif;
}
[data-theme="pearl"] {
  --bg: #F7F4EC; --bg-2: #F1ECE1; --surface: #FFFFFF; --surface-2: #FBF8F1; --surface-3: #F2ECDF;
  --text: #100C2E; --text-soft: #4F4C66; --text-mute: #8C899E;
  --accent: var(--indigo); --accent-strong: var(--indigo); --link: var(--indigo); --focus: var(--indigo);
  --field-line: rgba(16, 12, 46, .2);
}
.adm-body {
  --adm-hover: #FAF7F0; --adm-sel: #EFEAFD; --adm-head: #FAF8F3; --adm-soft: #F5F1E8;
  --gold-ink: #7A5A0C;
  --c-gold: #C8952E; --c-teal: #2FA596; --c-aqua: #3B8FD6; --c-coral: #E0562F; --c-lilac: #8E7BD6; --c-green: #1FAF54; --c-deep: #1F0A8C;
}
/* headings: Zodiak for page titles and big numbers, Switzer everywhere else */
.adm-body :where(h1, h2, h3, h4), .adm-body .adm-card__title { font-family: var(--font-body); }
.adm-top__title, .adm-hero__title, .adm-auth__title, .adm-auth__h, .adm-kpi__value, .adm-kpi .num, .adm-brand__text strong { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; font-variation-settings: normal; }
.num { font-family: var(--font-num); font-weight: 600; }

/* primary buttons: Alfiya indigo */
.btn--primary, .adm-body .btn--primary { background: linear-gradient(180deg, #3A24C4 0%, #1F0A8C 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 0 rgba(10, 4, 51, .5), 0 6px 16px -6px rgba(31, 10, 140, .55); }
@media (hover: hover) {
  .adm-body .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 1px 0 rgba(10, 4, 51, .5), 0 12px 24px -8px rgba(31, 10, 140, .6); }
}
.adm-body .input:focus, .adm-body .select:focus, .adm-body .textarea:focus, .adm-body .phone:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(31, 10, 140, .14); }
.check input:checked { background-color: var(--indigo); }

/* sidebar: indigo night with a gold active marker */
.adm-side { background: linear-gradient(180deg, #23128F 0%, #160A5E 52%, #0E0640 100%); }
.adm-nav__link[aria-current="page"] { background: linear-gradient(90deg, rgba(227, 182, 87, .22), rgba(227, 182, 87, .04)); }
.adm-brand__mark { display: grid; place-items: center; background: #FBF9F4; box-shadow: 0 0 0 1px rgba(227, 182, 87, .45), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.adm-brand__mark img { width: auto; height: 76%; }
.adm-brand__text small { color: #E3B657; }
/* sign-in art */
.adm-auth__art { background: radial-gradient(760px 440px at 18% -8%, rgba(146, 128, 255, .34), transparent 64%), linear-gradient(180deg, #2B1BA8 0%, #1F0A8C 36%, #120760 70%, #0A0433 100%); }
.adm-auth__logo img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.adm-auth__mark img { width: auto; height: 100%; }
.adm-auth__scene { display: grid; place-items: center; }
.adm-auth__seal { width: min(260px, 60%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(227, 182, 87, .35); }
.adm-auth__seal img { height: 62%; width: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }

/* avatars made from initials (the pearl artwork is Pearls of Quran's) */
.adm-pearl { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font: 650 .74em/1 var(--font-body); letter-spacing: .02em; }
.adm-mark-art { display: grid; place-items: center; width: var(--s, 92px); height: var(--s, 92px); border-radius: 50%; background: radial-gradient(closest-side, #fff, #F4F0E7); box-shadow: inset 0 0 0 1px rgba(16, 12, 46, .08), 0 18px 34px -24px rgba(16, 12, 46, .5); }
.adm-mark-art img { height: calc(var(--s, 92px) * .58); width: auto; max-width: none; opacity: .9; }
.adm-mark-art.is-closed img { filter: grayscale(1); opacity: .5; }

/* loader (ui.loader) */
.loader__pearl .adm-pearl { width: 28px; height: 28px; background: linear-gradient(135deg, #3A24C4, #1F0A8C); }

/* small Alfiya extras used by the Alfiya views */
.adm-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--adm-soft); color: var(--text-soft); white-space: nowrap; }
.adm-pill--ok { background: var(--ok-soft); color: var(--ok); }
.adm-pill--warn { background: var(--warn-soft); color: var(--warn); }
.adm-pill--danger { background: var(--danger-soft); color: var(--danger); }
.adm-pill--info { background: rgba(31, 10, 140, .08); color: var(--indigo); }
.adm-pill--gold { background: var(--gold-100); color: var(--gold-ink); }
.adm-proof { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--adm-line); }
.adm-quote { max-width: 46ch; color: var(--text-soft); font-size: .86rem; white-space: normal; }
.adm-link-box { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 12px; background: var(--adm-soft); }
.adm-link-box code { font-size: .78rem; word-break: break-all; color: var(--text); }

/* ================================================================ Alfiya screens (kit + views) */
.adm-mt { margin-top: .9rem; }
.adm-w-sm { max-width: 260px; }
.adm-btnrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.adm-code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .82rem; padding: .15em .45em; border-radius: 6px; background: var(--adm-soft); color: var(--text); white-space: nowrap; }
.adm-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-danger-ico:hover { color: var(--danger); background: var(--danger-soft); }
.btn--gold { background: linear-gradient(180deg, #EBCB72 0%, var(--gold-500) 100%); color: #1B1303; border-color: transparent; }
.btn--glass { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.btn--glass:hover { background: rgba(255, 255, 255, .18); }
.adm-tablecard .adm-toolbar { border-radius: var(--adm-r) var(--adm-r) 0 0; }
.adm-tablecard .adm-tablewrap { border-radius: 0 0 var(--adm-r) var(--adm-r); }
.adm-filters .adm-selectwrap .select { min-height: 38px; height: 38px; padding-block: 0; font-size: .86rem; }

/* sub-tabs that are routes (Students · Accounts · Reports) */
.adm-routetabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.adm-routetabs .tabs__tab { position: relative; text-decoration: none; }
.adm-routetabs .tabs__tab[aria-current="page"] { color: var(--text); }
.adm-routetabs .tabs__tab[aria-current="page"]::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--gold-500); }

/* overview hero */
.adm-ov-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: 26px 28px; border-radius: var(--adm-r); overflow: hidden; color: #fff;
  background: radial-gradient(600px 260px at 100% 0%, rgba(227, 182, 87, .28), transparent 60%), radial-gradient(520px 280px at 0% 100%, rgba(74, 53, 214, .55), transparent 65%), linear-gradient(135deg, #160A5E, #1F0A8C 55%, #2A1A9E); box-shadow: 0 18px 40px -22px rgba(22, 10, 94, .7); }
.adm-ov-hero__date { font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.adm-ov-hero__title { margin-top: .4rem; font-family: var(--font-display) !important; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.adm-ov-hero__lead { margin-top: .6rem; max-width: 60ch; color: #D9D3F5; line-height: 1.55; }
.adm-ov-hero__lead strong { color: #fff; }
.adm-ov-hero__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.adm-ov-hero__art { opacity: .95; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
@media (max-width: 719.98px) { .adm-ov-hero { grid-template-columns: 1fr; padding: 20px; } .adm-ov-hero__art { display: none; } }
.adm-ov-web { display: grid; gap: .9rem; }
.adm-ov-web__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.adm-ov-web__nums > div { padding: .7rem .8rem; border-radius: 12px; background: var(--adm-soft); }
.adm-ov-web__nums dt { font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.adm-ov-web__nums dd { margin-top: .25rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.adm-ov-web__spark svg { width: 100%; height: 54px; }
.adm-ov-web__top { display: grid; gap: .3rem; }
.adm-ov-web__top li { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.adm-ov-web__top small { color: var(--text-mute); white-space: nowrap; }

/* breadcrumbs + profile */
.adm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .86rem; color: var(--text-mute); }
.adm-crumbs a { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-soft); font-weight: 550; }
.adm-crumbs a:hover { color: var(--gold-ink); }
.adm-crumbs .i { width: 1rem; height: 1rem; }
.adm-profile__h { font-size: 1.35rem; }
.adm-profile__small { font-family: var(--font-body) !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3 !important; }
.adm-profile__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.adm-profile__ava.adm-tone--gold, .adm-profile__ava.adm-tone--teal { display: grid; place-items: center; }
.adm-profile__ava .i { width: 40%; height: 40%; }
@media (max-width: 1023.98px) { .adm-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-profile__stats > div { border-bottom: 1px solid var(--adm-line); } }
.adm-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.adm-heatmap i { width: 14px; height: 14px; border-radius: 4px; background: rgba(16, 12, 46, .07); }
.adm-heatmap i.is-on { background: var(--c-teal); }
.adm-acts { display: grid; gap: .1rem; }
.adm-list__side .adm-meter { margin-bottom: .2rem; }

/* forms */
.adm-telrow { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: .5rem; }
.adm-form__h { margin-top: .4rem; font-size: .95rem; font-weight: 650; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.adm-form__h small { font-weight: 450; font-size: .82rem; }
.adm-q { display: grid; gap: .5rem; padding: .9rem 1rem 1rem; border: 1px solid var(--adm-line); border-radius: 14px; background: var(--adm-head); margin: 0 0 .7rem; min-width: 0; }
.adm-q__head { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.adm-q__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.adm-q__opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .45rem; }
.adm-q__opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gold-600); margin: 0; }
.adm-q__l { font-weight: 700; font-size: .8rem; color: var(--text-mute); width: 1em; }
@media (max-width: 599.98px) { .adm-q__opts { grid-template-columns: 1fr; } .adm-telrow { grid-template-columns: 1fr; } }
.adm-yt img { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.adm-yt:empty { display: none; }

/* course */
.adm-series { display: grid; gap: 16px; }
.adm-series__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 16px 18px; border-bottom: 1px solid var(--adm-line); background: var(--adm-head); }
.adm-series__n { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--indigo); color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.adm-series__t { flex: 1 1 240px; min-width: 0; }
.adm-lessons { display: grid; }
.adm-lesson { display: flex; align-items: center; gap: .8rem; padding: .55rem 18px; border-bottom: 1px solid var(--adm-row); }
.adm-lesson:last-child { border-bottom: 0; }
.adm-lesson:hover { background: var(--adm-hover); }
.adm-lesson.is-draft .adm-lesson__main strong { color: var(--text-soft); }
.adm-lesson__n { width: 1.6rem; flex: none; text-align: right; color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: .86rem; }
.adm-lesson__thumb { width: 64px; height: 36px; flex: none; border-radius: 7px; overflow: hidden; background: var(--adm-soft); display: grid; place-items: center; color: var(--text-mute); }
.adm-lesson__thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-lesson__thumb .i { width: 1.1rem; height: 1.1rem; }
.adm-lesson__main { flex: 1; min-width: 0; display: grid; text-align: left; padding: .2rem 0; color: inherit; }
.adm-lesson__main strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-lesson__main small { color: var(--text-mute); font-size: .78rem; }
.adm-lesson__main:hover strong { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599.98px) { .adm-lesson__thumb { display: none; } .adm-lesson { flex-wrap: wrap; } .adm-lesson__main { flex-basis: calc(100% - 2.5rem); } }
.adm-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; border: 1.5px dashed var(--adm-line-2); border-radius: 14px; background: var(--adm-head); cursor: pointer; text-align: center; }
.adm-drop:hover { border-color: var(--gold-500); background: var(--gold-50); }
.adm-drop .i { width: 1.6rem; height: 1.6rem; color: var(--gold-600); }
.adm-drop small { color: var(--text-mute); }
.adm-import { display: grid; gap: .6rem; margin-top: 1rem; }

/* settings */
.adm-setform { display: grid; gap: 18px; }
.adm-setform .adm-card { display: grid; gap: 1rem; align-content: start; }
.adm-setform .adm-card__head { margin-bottom: 0; }
.adm-setgroup { display: grid; gap: .8rem; padding-top: .2rem; }
.adm-setgroup[hidden] { display: none; }
.adm-choices { display: grid; gap: .5rem; }
.adm-choices--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adm-choice { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .9rem; border: 1.5px solid var(--adm-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.adm-choice:hover { border-color: var(--adm-line-2); }
.adm-choice.is-on { border-color: var(--indigo); background: #F4F1FE; }
.adm-choice input { width: 18px; height: 18px; margin: .15em 0 0; accent-color: var(--indigo); flex: none; }
.adm-choice span { display: grid; gap: 2px; }
.adm-choice strong { font-weight: 650; font-size: .92rem; }
.adm-choice small { color: var(--text-soft); font-size: .82rem; line-height: 1.4; }
.adm-provlist { display: grid; }
.adm-provlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .6rem 0; border-bottom: 1px solid var(--adm-row); font-size: .9rem; }
.adm-provlist li:last-child { border-bottom: 0; }
.adm-howto { border-radius: 12px; background: var(--adm-soft); padding: .7rem .9rem; font-size: .86rem; }
.adm-howto summary { cursor: pointer; font-weight: 650; }
.adm-howto ol { margin: .6rem 0 .4rem 1.1rem; display: grid; gap: .3rem; list-style: decimal; }
.adm-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.adm-preview { margin-top: .5rem; padding: .6rem .8rem; border-radius: 12px 12px 12px 4px; background: #E7F7EC; color: #1E3A28; font-size: .84rem; line-height: 1.45; white-space: pre-wrap; }
.adm-preview:empty { display: none; }
.adm-setform .adm-savebar { position: sticky; bottom: 12px; z-index: 5; margin-top: 0; justify-content: flex-end; }
.adm-setform .adm-savebar [data-dirty] { color: var(--gold-300); font-weight: 600; margin-right: auto; }
.adm-fieldset:disabled .switch, .adm-fieldset:disabled .adm-choice { opacity: .65; cursor: default; }
.adm-attn__act .adm-linkbtn { display: inline-flex; align-items: center; gap: .3rem; }
.adm-attn__act .adm-linkbtn .i { width: .95rem; height: .95rem; }
.adm-ov-hero__art .adm-mark-art { background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.75)); }

/* tables: keep names and short values on one line; long text wraps */
.adm-tablecard .adm-table td { white-space: nowrap; }
.adm-tablecard .adm-table td.adm-td-wrap { white-space: normal; }
.adm-tablecard .adm-td-main { min-width: 210px; }
.adm-table .adm-td-wrap { min-width: 240px; max-width: 460px; }
@media (max-width: 719.98px) {
  .adm-tablecard .adm-table td { white-space: normal; }
  .adm-tablecard .adm-td-main { min-width: 0; }
  /* plain tables (not cards) scroll sideways inside their card, never the page */
  .adm-tablewrap:not(:has(> .adm-table--cards)) { overflow-x: auto; }
  .adm-tablewrap:not(:has(> .adm-table--cards)) .adm-table { min-width: 640px; }
  .adm-routetabs .tabs__tab { flex: none; }
  .adm-profile__actions { width: 100%; }
}
/* needs attention: one row of five on wide screens */
.adm-attn__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1279.98px) { .adm-attn__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719.98px) { .adm-attn__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379.98px) { .adm-attn__items { grid-template-columns: 1fr; } }
/* course: fold a series */
.adm-series__fold .i { transition: transform .2s; }
.adm-series__fold[aria-expanded="false"] .i { transform: rotate(-90deg); }
.adm-series__card:has(.adm-series__fold[aria-expanded="false"]) .adm-series__head { border-bottom: 0; }
/* settings: the early-access switch stands out while it is on */
.adm-early.is-on { border-color: color-mix(in srgb, var(--success, #2E7D4F) 45%, transparent); background: color-mix(in srgb, var(--success, #2E7D4F) 6%, var(--surface, #fff)); }