/* madrasa.host owner's panel, v2 */
:root {
    --bg: #F4F6F4; --side: #0D3B2D; --card: #FFFFFF; --ink: #13201A; --muted: #56635C; --line: #E2E8E4; --soft: #EEF2EF;
    --brand: #0F5A43; --brand-2: #1B7A5C; --gold: #D9A42B; --gold-ink: #7A4E00;
    --ok-bg: #DCF3E7; --ok: #0B5E3D; --warn-bg: #FBF0D2; --warn: #7A4E00; --orange-bg: #FFE7D6; --orange: #9A3412; --bad-bg: #FDE2E2; --bad: #9B1C1C; --info-bg: #E3EEFB; --info: #1D4F8F;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0E1512; --side: #08100D; --card: #152019; --ink: #E8EFEB; --muted: #A3B3AB; --line: #26332C; --soft: #1D2A23;
    --brand: #1B8A64; --brand-2: #23A077; --gold: #E3B84A; --gold-ink: #F3D58A;
    --ok-bg: #123B2C; --ok: #7FE0B2; --warn-bg: #3A2E0E; --warn: #F3D58A; --orange-bg: #3B2312; --orange: #FDBA74; --bad-bg: #3B1414; --bad: #FCA5A5; --info-bg: #16283B; --info: #93C5FD;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0E1512; --side: #08100D; --card: #152019; --ink: #E8EFEB; --muted: #A3B3AB; --line: #26332C; --soft: #1D2A23;
        --brand: #1B8A64; --brand-2: #23A077; --gold: #E3B84A; --gold-ink: #F3D58A;
        --ok-bg: #123B2C; --ok: #7FE0B2; --warn-bg: #3A2E0E; --warn: #F3D58A; --orange-bg: #3B2312; --orange: #FDBA74; --bad-bg: #3B1414; --bad: #FCA5A5; --info-bg: #16283B; --info: #93C5FD;
        color-scheme: dark;
    }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif; }
a { color: var(--brand); }
.num, .ap-num { font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", sans-serif; }

/* Frame */
.ap-shell { display: flex; min-height: 100vh; }
.ap-side { position: sticky; top: 0; display: flex; flex: 0 0 248px; flex-direction: column; gap: 22px; height: 100vh; padding: 22px 16px; background: var(--side); color: #E7F0EC; }
.ap-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #fff; font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 18px; font-weight: 700; text-decoration: none; }
.ap-logo b { color: #F3D58A; }
.ap-nav { display: flex; flex-direction: column; gap: 2px; }
.ap-nav a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; color: #C5D7CF; font-weight: 500; text-decoration: none; }
.ap-nav a i { font-size: 17px; }
.ap-nav a span { flex: 1; }
.ap-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ap-nav a.is-on { background: rgba(255, 255, 255, .12); color: #fff; }
.ap-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #F3D58A; color: #3A2A00; font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 11.5px; text-align: center; }
.ap-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.ap-me-avatar { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 50%; background: #F3D58A; color: #3A2A00; font-weight: 700; }
.ap-me-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ap-me-copy b { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.ap-me-copy a { color: #B9CEC5; font-size: 12.5px; text-decoration: none; }
.ap-me form { margin: 0; }
.ap-me button { border: 0; background: none; color: #C5D7CF; font-size: 18px; cursor: pointer; }
.ap-body { flex: 1; min-width: 0; }
.ap-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 32px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.ap-search { display: flex; flex: 1 1 320px; align-items: center; gap: 10px; max-width: 520px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); }
.ap-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink); }
.ap-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ap-search kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 11.5px; }
.ap-bar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ap-icon-btn { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 18px; text-decoration: none; cursor: pointer; }
.ap-dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: #C2410C; }
.ap-menu-btn { display: none; }
.ap-main { max-width: 1320px; padding: 8px 32px 48px; }
.ap-main--guest { margin: 0 auto; }

/* Building blocks used on every page */
.ap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.ap-head h1 { margin: 0; font-size: 26px; font-weight: 700; }
.ap-head > :first-child { margin-right: auto; }
.ap-card { margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ap-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.ap-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ap-card-head h2 { margin: 0; }
.ap-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.ap-grid > .ap-card { margin-bottom: 0; }
.ap-grid--form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ap-col { display: flex; flex-direction: column; gap: 16px; }
.ap-col > .ap-card { margin-bottom: 0; }
.ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ap-stats > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ap-stats span { display: block; color: var(--muted); font-size: 13px; }
.ap-stats b { font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", sans-serif; font-size: 24px; }
.ap-stats small { display: block; color: var(--muted); font-size: 12px; }
.ap-stats .is-warn { border-color: #e7b74a; background: var(--warn-bg); }
.ap-stats .is-bad { border-color: #e9a3a3; background: var(--bad-bg); }
.ap-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); color: inherit; text-decoration: none; }
.ap-row > :first-child { flex: 1; }
.ap-row form { margin: 0; }
.ap-muted { color: var(--muted); }
.ap-small { font-size: 13px; }
.ap-table-wrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-table th { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.ap-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ap-table td small { display: block; color: var(--muted); font-size: 12px; }
.ap-table .num { text-align: right; white-space: nowrap; }
.ap-table tr:last-child td { border-bottom: 0; }
.is-bad { color: var(--bad); }
.ap-domain { display: block; font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 12.5px; }
.ap-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ap-badge--ok { background: var(--ok-bg); color: var(--ok); }
.ap-badge--warn { background: var(--warn-bg); color: var(--warn); }
.ap-badge--orange { background: var(--orange-bg); color: var(--orange); }
.ap-badge--bad { background: var(--bad-bg); color: var(--bad); }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: 600 14.5px "Hind Siliguri", sans-serif; text-decoration: none; cursor: pointer; }
.ap-btn:hover { background: var(--brand-2); color: #fff; }
.ap-btn--wide { width: 100%; }
.ap-btn--sm { min-height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; }
.ap-btn--ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.ap-btn--ghost:hover { background: var(--soft); color: var(--ink); }
.ap-link { border: 0; background: none; color: var(--brand); font: inherit; font-size: 14px; cursor: pointer; }
.ap-link--bad { color: var(--bad); }
.ap-form label, .ap-auth label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }
.ap-form small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-weight: 400; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ap-form h2 { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ap-form h2:first-of-type { margin-top: 0; padding-top: 0; border: 0; }
.ap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ap-inline input, .ap-inline select { flex: 1 1 140px; width: auto; }
.ap-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; margin: 0 !important; font-weight: 400 !important; }
.ap-check input { width: auto; }
.ap-help ol { padding-left: 18px; }
.ap-help li { margin-bottom: 8px; }
.ap-flash { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; }
.ap-flash--ok { background: var(--ok-bg); color: var(--ok); }
.ap-flash--bad { background: var(--bad-bg); color: var(--bad); }
.ap-flash--info { display: flex; flex-direction: column; gap: 6px; background: var(--info-bg); color: var(--info); }
.ap-flash--warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--warn-bg); color: var(--warn); }
.ap-copy, .ap-mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* Sign-in */
.ap-auth { max-width: 400px; margin: 9vh auto; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-align: center; }
.ap-auth--wide { max-width: 480px; }
.ap-auth h1 { margin: 0 0 6px; font-size: 22px; }
.ap-auth h1 b { color: var(--gold); }
.ap-auth label { text-align: left; }
.ap-code { font-size: 26px; letter-spacing: 8px; text-align: center; }
.ap-qr { display: inline-block; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ap-qr svg { display: block; width: 200px; height: 200px; }
.ap-secret { display: block; margin: 8px 0 14px; font-size: 14px; letter-spacing: 1px; word-break: break-all; }
.ap-steps { padding-left: 18px; text-align: left; }
.ap-note { padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.ap-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 14px 0; padding-left: 22px; text-align: left; }
.ap-codes code { font-size: 17px; letter-spacing: 1px; }

/* Dashboard */
.db-hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.db-hello h1 { margin: 0; font-size: 28px; font-weight: 700; }
.db-hello p { margin: 4px 0 0; color: var(--muted); }
.db-hello p b { color: #B45309; }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.db-kpi { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.db-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.db-delta { padding: 2px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 12px; font-weight: 700; }
.db-delta--down { background: var(--bad-bg); color: var(--bad); }
.db-kpi-val { margin-top: 8px; font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.db-spark { display: block; width: 100%; height: 38px; margin-top: 8px; }
.db-kpi-note { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.db-legend { display: flex; gap: 14px; color: var(--muted); font-size: 13px; }
.db-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.db-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.db-bar { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 100%; }
.db-bar i { display: block; }
.db-bar .lic { background: #3E8A6E; }
.db-bar.is-now .lic { background: var(--brand); }
.db-bar .sms { border-radius: 5px 5px 0 0; background: var(--gold); }
.db-bar .lic:first-child { border-radius: 5px 5px 0 0; }
.db-months { display: flex; gap: 10px; margin-top: 8px; }
.db-months span { flex: 1; color: var(--muted); font-size: 11.5px; text-align: center; }
.db-att { margin: 0; padding: 0; list-style: none; }
.db-att li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.db-att li:last-child { border-bottom: 0; }
.db-att-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.db-att-dot--red { background: #B91C1C; box-shadow: 0 0 0 4px #B91C1C22; }
.db-att-dot--orange { background: #C2410C; box-shadow: 0 0 0 4px #C2410C22; }
.db-att-dot--amber { background: #B45309; box-shadow: 0 0 0 4px #B4530922; }
.db-att-dot--grey { background: #64748B; box-shadow: 0 0 0 4px #64748B22; }
.db-att-dot--green { background: #15803D; box-shadow: 0 0 0 4px #15803D22; }
.db-health { margin-bottom: 18px; }
.db-att-copy { flex: 1; min-width: 0; }
.db-att-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-att-copy small { color: var(--muted); font-size: 12.5px; }
.db-pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.db-pipe > div { padding: 14px; border-radius: 12px; background: var(--soft); }
.db-pipe-month { color: var(--muted); font-size: 13px; }
.db-pipe-total { margin-top: 2px; font-family: Inter, "Noto Sans Bengali", "Hind Siliguri", sans-serif; font-size: 21px; font-weight: 700; }
.db-pipe-item { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: var(--card); color: inherit; font-size: 12.5px; text-decoration: none; }
.db-pipe-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-feed { margin: 0; padding: 0; list-style: none; }
.db-feed li { display: flex; gap: 12px; padding-bottom: 14px; }
.db-feed-icon { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 10px; }
.db-feed-icon--paid, .db-feed-icon--created { background: var(--ok-bg); color: var(--ok); }
.db-feed-icon--set_up, .db-feed-icon--invoice { background: var(--info-bg); color: var(--info); }
.db-feed-icon--claim { background: var(--warn-bg); color: var(--warn); }
.db-feed-icon--ended, .db-feed-icon--readonly { background: var(--bad-bg); color: var(--bad); }
.db-feed small { display: block; color: var(--muted); font-size: 12.5px; }
.db-logo { display: inline-grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; font-weight: 700; }
.db-name { display: flex; align-items: center; gap: 10px; }
.db-seat { min-width: 170px; }
.db-seat-row { display: flex; justify-content: space-between; font-size: 13px; }
.db-meter, .ap-meter { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.db-meter i, .ap-meter i { display: block; height: 100%; border-radius: inherit; background: #0F7A57; }
.db-meter i.is-warn, .ap-meter i.is-warn { background: #B45309; }
.db-meter i.is-bad, .ap-meter i.is-bad { background: #C2410C; }

/* Licensing and bills */
.ap-fee { margin: -4px 0 12px; color: var(--muted); }
.ap-fee b { color: var(--brand); font-size: 18px; }
.ap-billmake { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; padding: 12px; border-radius: 12px; background: var(--soft); }
.ap-billmake .ap-inline { margin-top: 0; }
.ap-billmake-label { min-width: 120px; font-weight: 600; }
.ap-pay { display: inline-block; text-align: left; }
.ap-pay summary { list-style: none; }
.ap-pay summary::-webkit-details-marker { display: none; }
.ap-pay[open] { display: block; margin-top: 4px; }
.ap-pay-form { display: grid; grid-template-columns: 110px 130px minmax(120px, 1fr) 140px auto; gap: 6px; margin-top: 8px; }
.ap-save-row { grid-column: 1 / -1; }
.ap-packs { display: flex; flex-direction: column; gap: 6px; }
.ap-qrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ap-qr-slot { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.ap-qr-slot img { width: 160px; height: 160px; object-fit: contain; border-radius: 10px; background: #fff; }
.ap-qr-empty { display: grid; width: 160px; height: 160px; place-items: center; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 54px; }
.ap-claim { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.ap-claim-main { display: flex; flex: 1 1 420px; flex-direction: column; gap: 4px; }
.ap-claim-facts { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.ap-claim-facts span { display: flex; flex-direction: column; }
.ap-claim-facts small { color: var(--muted); font-size: 12px; }
.ap-claim-act { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }

@media (max-width: 1100px) {
    .ap-side { position: fixed; z-index: 20; left: 0; transform: translateX(-100%); transition: transform .2s ease; }
    .ap-side.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
    .ap-menu-btn { display: grid; }
    .ap-bar, .ap-main { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 860px) {
    .ap-grid, .ap-grid--form, .ap-two { grid-template-columns: 1fr; }
    .ap-pay-form { grid-template-columns: 1fr 1fr; }
    .db-pipe { grid-template-columns: 1fr; }
    .ap-search kbd, .ap-bar-end .ap-btn span { display: none; }
}
@media print { .ap-side, .ap-bar, .ap-inline, .ap-btn, .ap-link { display: none !important; } .ap-auth { border: 0; } }

/* Lists, tabs, language, notifications (v2.1) */
.ap-lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ap-lang a { padding: 5px 10px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.ap-lang a.is-on { background: var(--soft); color: var(--ink); }
.ap-lang--guest { position: fixed; top: 16px; right: 16px; }
.ap-bell { position: relative; }
.ap-bell summary { list-style: none; }
.ap-bell summary::-webkit-details-marker { display: none; }
.ap-bell-panel { position: absolute; right: 0; top: 52px; z-index: 30; width: 320px; max-height: 70vh; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.ap-bell-title { display: block; margin: 4px 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.ap-bell-item { display: flex; gap: 8px; padding: 8px 6px; border-radius: 8px; color: var(--ink); font-size: 13.5px; text-decoration: none; }
a.ap-bell-item:hover { background: var(--soft); }
.ap-bell-item span { display: flex; flex-direction: column; }
.ap-bell-item small { color: var(--muted); font-size: 12px; }
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; text-decoration: none; }
.tl-chips a b { color: var(--muted); font-family: Inter, "Noto Sans Bengali", sans-serif; font-size: 12px; }
.tl-chips a.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.tl-chips a.is-on b { color: #DDEFE7; }
.tl-form { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-form input[type="search"] { width: 240px; }
.tl-form select, .tl-form input[type="month"] { width: auto; }
.tl-pages { margin-top: 12px; }
.tl-pages nav { display: flex; justify-content: center; }
.tp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.tp-logo { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.tp-title { flex: 1; min-width: 220px; }
.tp-title h1 { margin: 0; font-size: 26px; }
.tp-title p { margin: 2px 0 0; }
.tp-actions { display: flex; gap: 8px; }
.tp-actions form { margin: 0; }
.tp-tabs { display: flex; gap: 2px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tp-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tp-tabs a.is-on { border-bottom-color: var(--brand); color: var(--ink); }
.tp-tabs a:hover { color: var(--ink); }
@media (max-width: 860px) { .tl-form input[type="search"] { width: 100%; } .ap-bell-panel { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; } }

/* Full width on every screen, and nothing wider than a phone (v2.2) */
.ap-body { width: 100%; }
.ap-main { width: 100%; max-width: none; padding: 8px clamp(14px, 2.4vw, 40px) 48px; }
.ap-bar { padding: 14px clamp(14px, 2.4vw, 40px); }
.ap-main--guest { max-width: 520px; margin: 0 auto; }
.ap-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.ap-grid--form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.db-kpis { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.ap-stats { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.ap-qrs { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ap-search { flex: 1 1 auto; min-width: 0; }
.ap-claim-act { min-width: min(260px, 100%); }
.ap-card, .db-kpi, .ap-stats > div { min-width: 0; }
.ap-table-wrap { margin: 0 -4px; padding: 0 4px; -webkit-overflow-scrolling: touch; }
@media (min-width: 1600px) {
    .db-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .db-bars { height: 160px; }
}
@media (max-width: 1100px) {
    .ap-grid--form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ap-bar { flex-wrap: wrap; gap: 8px; }
    .ap-search { order: 3; flex-basis: 100%; }
    .ap-bar-end { gap: 6px; }
    .ap-icon-btn { width: 40px; height: 40px; }
    .ap-lang a { padding: 5px 8px; }
    .db-hello h1, .ap-head h1, .tp-title h1 { font-size: 22px; }
    .db-kpi-val { font-size: 25px; }
    .db-bars { gap: 4px; height: 160px; }
    .db-months { gap: 4px; }
    .db-months span { font-size: 10px; }
    .db-att li { flex-wrap: wrap; }
    .db-att li .ap-btn { margin-left: 22px; }
    .ap-card { padding: 16px; }
    .ap-pay-form { grid-template-columns: 1fr; }
    .tp-actions { width: 100%; }
    .tp-actions .ap-btn, .tp-actions form { flex: 1; }
    .tp-actions form .ap-btn { width: 100%; }
    .tl-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .tl-chips a { flex: none; }
    .ap-auth { margin: 72px 0 24px; padding: 22px 18px; }
    .ap-codes { grid-template-columns: 1fr; }
}

/* Guide videos */
.vd-add summary { list-style: none; width: max-content; }
.vd-add summary::-webkit-details-marker { display: none; }
.vd-add[open] summary { margin-bottom: 16px; }
.vd-list { margin: 0; padding: 0; list-style: none; }
.vd-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vd-item:last-child { border-bottom: 0; }
.vd-item.is-off { opacity: .55; }
.vd-item.is-drag { opacity: .4; }
.vd-grip { color: var(--muted); font-size: 18px; cursor: grab; }
.vd-thumb { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #111; }
.vd-copy { display: flex; flex: 1 1 240px; flex-direction: column; min-width: 0; }
.vd-copy small { color: var(--muted); font-size: 12.5px; }
.vd-edit { flex-basis: auto; }
.vd-edit summary { list-style: none; }
.vd-edit summary::-webkit-details-marker { display: none; }
.vd-edit[open] { flex-basis: 100%; order: 9; padding: 12px; border-radius: 12px; background: var(--soft); }
.vd-edit[open] summary { display: none; }
@media (max-width: 640px) { .vd-thumb { width: 96px; } }

/* Announcements and support (panel) */
.an-form textarea { resize: vertical; }
.an-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.an-kind { margin: 0 !important; cursor: pointer; }
.an-kind input { position: absolute; opacity: 0; }
.an-kind span { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.an-kind--info input:checked + span { border-color: var(--info); background: var(--info-bg); color: var(--info); font-weight: 700; }
.an-kind--feature input:checked + span { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.an-kind--warning input:checked + span { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.an-kind--urgent input:checked + span { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.an-tenants { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 220px; margin-bottom: 12px; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.an-sms { margin-bottom: 12px !important; }
.an-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.an-tag--info { background: var(--info-bg); color: var(--info); }
.an-tag--feature { background: var(--ok-bg); color: var(--ok); }
.an-tag--warning { background: var(--warn-bg); color: var(--warn); }
.an-tag--urgent { background: var(--bad-bg); color: var(--bad); }
.sup-new td { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.sup-st--open, .sup-st--working { background: var(--warn-bg); color: var(--warn); }
.sup-st--waiting { background: var(--info-bg); color: var(--info); }
.sup-st--solved, .sup-st--closed { background: var(--ok-bg); color: var(--ok); }
.sup-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sup-msg { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sup-msg--owner { margin-left: 10%; border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--card)); }
.sup-msg--note { border-style: dashed; background: var(--warn-bg); color: var(--warn); }
.sup-msg header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sup-msg header small { color: var(--muted); }
.sup-msg p { margin: 0; white-space: pre-line; }

/* Calendars (flatpickr) */
.flatpickr-calendar { border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); font-family: inherit; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-monthSelect-month.selected { border-color: var(--brand); background: var(--brand); }
.flatpickr-day.today { border-color: var(--brand); }
input.fp-alt[readonly] { background-color: var(--card); cursor: pointer; }
/* The year drop-down that datepicker.js puts beside the month (same as ui.css, this panel's colours) */
.flatpickr-current-month.fp-has-year { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0; white-space: nowrap; }
.flatpickr-current-month.fp-has-year .numInputWrapper { display: none; }
.flatpickr-current-month .fp-year { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; cursor: pointer; }
.flatpickr-current-month .fp-year .bi { font-size: .55em; }
.flatpickr-current-month .fp-year:hover, .flatpickr-current-month .fp-year[aria-expanded="true"] { background: var(--line); }
/* The list of years: short, scrolls inside the calendar */
.fp-year-list { position: absolute; z-index: 5; width: 112px; max-height: 220px; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); scrollbar-width: thin; }
.fp-year-list[hidden] { display: none; }
.fp-year-item { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.fp-year-item:hover, .fp-year-item:focus { background: var(--line); outline: none; }
.fp-year-item.is-selected { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .flatpickr-calendar { background: var(--soft); }
:root[data-theme="dark"] .flatpickr-calendar .flatpickr-month, :root[data-theme="dark"] .flatpickr-weekday, :root[data-theme="dark"] .flatpickr-day, :root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, :root[data-theme="dark"] .flatpickr-time input, :root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--ink); fill: var(--ink); background: transparent; }
:root[data-theme="dark"] .flatpickr-day:hover { background: var(--line); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flatpickr-calendar { background: var(--soft); }
    :root:not([data-theme="light"]) .flatpickr-calendar .flatpickr-month, :root:not([data-theme="light"]) .flatpickr-weekday, :root:not([data-theme="light"]) .flatpickr-day, :root:not([data-theme="light"]) .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ink); fill: var(--ink); background: transparent; }
}

/* Backups */
.bk-list { margin: 6px 0 0; padding-left: 18px; }
td.is-bad { color: var(--bad); }
.bk-howto { margin-top: 12px; }
.bk-howto summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.bk-howto pre { padding: 10px; overflow-x: auto; border-radius: 8px; background: var(--soft); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }

/* Pager (admin._pager): previous · page x of y · next */
.ap-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ap-pager-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--brand); font-size: 14px; font-weight: 600; text-decoration: none; }
a.ap-pager-btn:hover { border-color: var(--brand); background: var(--soft); }
.ap-pager-btn.is-off { color: var(--muted); opacity: .5; }
.ap-pager-info { color: var(--ink); font-size: 14px; font-weight: 600; text-align: center; }
.ap-pager-info small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

/* Password page */
.ap-narrow { max-width: 540px; }
.ap-error { margin: -6px 0 12px; color: #B42318; font-size: 13px; }

/* Dashboard: one quiet line while every task runs; main and side columns */
.db-pulse { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; color: var(--muted); font-size: 13.5px; }
.db-pulse .db-att-dot { flex: none; width: 8px; height: 8px; margin: 0; }
.db-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.db-col-main, .db-col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.db-col-main > .ap-card, .db-col-side > .ap-card { margin: 0; }
.db-col-side .db-pipe { grid-template-columns: 1fr; gap: 8px; }
@media (max-width: 1100px) { .db-cols { grid-template-columns: 1fr; } }
/* The Madariq emblem on a white badge (side bar, sign-in) */
.ap-logo-badge { display: inline-grid; place-items: center; flex: none; padding: 4px 6px; border-radius: 10px; background: #fff; }
.ap-logo-badge img { display: block; width: auto; height: 26px; }
.ap-auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.ap-auth-brand .ap-logo-badge { box-shadow: 0 0 0 1px var(--line); }
.ap-auth-brand .ap-logo-badge img { height: 34px; }
.ap-auth-brand h1 { margin: 0; }
.db-col-side .db-pipe > div { padding: 10px 14px; }