/*
 * e-Infaq Admin: the look. A skin on top of Tabler 1.7.3 (loaded first).
 * No external fonts, scripts or images, and no inline styles anywhere: the page's Content-Security-Policy
 * forbids them, so every colour and size comes from the classes below.
 *
 * Brand colours are taken from the e-Infaq logo (deep blue to lime green). Dark mode is switched by
 * data-bs-theme="dark" on <html> (theme.js sets it from the saved choice or the device setting).
 */

/* ---------------------------------------------------------------- tokens */
:root {
    color-scheme: light;

    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef2f7;
    --border: #e3e8ef;
    --border-strong: #d2d9e4;

    --text: #0f172a;
    --text-2: #334155;
    --muted: #586780;
    --faint: #5d6b82;

    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-soft: #e8f0ff;
    --brand-ink: #1e40af;
    --link: #1d4ed8;
    --link-hover: #1e3a8a;
    --ring: rgba(37, 99, 235, .35);

    --shadow-xs: 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-md: 0 14px 32px -12px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .05);

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* tones: used by avatars, status pills, group chips and stat icons */
    --tone-blue-bg: #e0ebff;   --tone-blue-fg: #1e3a8a;   --tone-blue-dot: #2563eb;
    --tone-teal-bg: #d4f4ee;   --tone-teal-fg: #0f5149;   --tone-teal-dot: #0d9488;
    --tone-green-bg: #dcf7e5;  --tone-green-fg: #14532d;  --tone-green-dot: #16a34a;
    --tone-amber-bg: #fdf0c8;  --tone-amber-fg: #78350f;  --tone-amber-dot: #d97706;
    --tone-orange-bg: #ffe6d2; --tone-orange-fg: #7c2d12; --tone-orange-dot: #ea580c;
    --tone-red-bg: #fde2e2;    --tone-red-fg: #7f1d1d;    --tone-red-dot: #dc2626;
    --tone-pink-bg: #fce4f1;   --tone-pink-fg: #831843;   --tone-pink-dot: #db2777;
    --tone-purple-bg: #ece6fd; --tone-purple-fg: #4c1d95; --tone-purple-dot: #7c3aed;
    --tone-slate-bg: #e8edf4;  --tone-slate-fg: #334155;  --tone-slate-dot: #64748b;

    /* Tabler hooks: make its own components follow these tokens */
    --tblr-body-bg: var(--bg);
    --tblr-bg-surface: var(--surface);
    --tblr-bg-surface-secondary: var(--surface-2);
    --tblr-bg-surface-tertiary: var(--surface-3);
    --tblr-border-color: var(--border);
    --tblr-border-color-translucent: var(--border);
    --tblr-body-color: var(--text);
    --tblr-font-sans-serif: var(--font);
    --tblr-primary: var(--brand);
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-link-color: var(--link);
    --tblr-link-hover-color: var(--link-hover);
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bg: #0a111e;
    --surface: #111a2b;
    --surface-2: #152036;
    --surface-3: #1a2740;
    --border: #22304a;
    --border-strong: #2d3e5e;

    --text: #e8edf7;
    --text-2: #c6d0e2;
    --muted: #94a3bd;
    --faint: #8494b0;

    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-soft: rgba(96, 165, 250, .14);
    --brand-ink: #a9c9ff;
    --link: #8db9ff;
    --link-hover: #bcd6ff;
    --ring: rgba(96, 165, 250, .45);

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, .25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);
    --shadow-md: 0 18px 36px -14px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);

    --tone-blue-bg: rgba(96, 165, 250, .17);   --tone-blue-fg: #b4d1ff;   --tone-blue-dot: #60a5fa;
    --tone-teal-bg: rgba(45, 212, 191, .15);   --tone-teal-fg: #8aeadb;   --tone-teal-dot: #2dd4bf;
    --tone-green-bg: rgba(74, 222, 128, .14);  --tone-green-fg: #8df0b0;  --tone-green-dot: #4ade80;
    --tone-amber-bg: rgba(251, 191, 36, .15);  --tone-amber-fg: #fcd978;  --tone-amber-dot: #fbbf24;
    --tone-orange-bg: rgba(251, 146, 60, .16); --tone-orange-fg: #fdbb82;  --tone-orange-dot: #fb923c;
    --tone-red-bg: rgba(248, 113, 113, .16);   --tone-red-fg: #fdb0b0;    --tone-red-dot: #f87171;
    --tone-pink-bg: rgba(244, 114, 182, .16);  --tone-pink-fg: #f9b4d6;   --tone-pink-dot: #f472b6;
    --tone-purple-bg: rgba(167, 139, 250, .17); --tone-purple-fg: #cdbfff; --tone-purple-dot: #a78bfa;
    --tone-slate-bg: rgba(148, 163, 184, .15); --tone-slate-fg: #c9d3e3;   --tone-slate-dot: #94a3b8;

    --tblr-primary-rgb: 59, 130, 246;
}

.tone-blue { --tone-bg: var(--tone-blue-bg); --tone-fg: var(--tone-blue-fg); --tone-dot: var(--tone-blue-dot); }
.tone-teal { --tone-bg: var(--tone-teal-bg); --tone-fg: var(--tone-teal-fg); --tone-dot: var(--tone-teal-dot); }
.tone-green { --tone-bg: var(--tone-green-bg); --tone-fg: var(--tone-green-fg); --tone-dot: var(--tone-green-dot); }
.tone-amber { --tone-bg: var(--tone-amber-bg); --tone-fg: var(--tone-amber-fg); --tone-dot: var(--tone-amber-dot); }
.tone-orange { --tone-bg: var(--tone-orange-bg); --tone-fg: var(--tone-orange-fg); --tone-dot: var(--tone-orange-dot); }
.tone-red { --tone-bg: var(--tone-red-bg); --tone-fg: var(--tone-red-fg); --tone-dot: var(--tone-red-dot); }
.tone-pink { --tone-bg: var(--tone-pink-bg); --tone-fg: var(--tone-pink-fg); --tone-dot: var(--tone-pink-dot); }
.tone-purple { --tone-bg: var(--tone-purple-bg); --tone-fg: var(--tone-purple-fg); --tone-dot: var(--tone-purple-dot); }
.tone-slate { --tone-bg: var(--tone-slate-bg); --tone-fg: var(--tone-slate-fg); --tone-dot: var(--tone-slate-dot); }

/* ------------------------------------------------------------------ base */
html { scroll-padding-top: 5rem; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { color: var(--text); letter-spacing: -.015em; }
.mono { font-family: var(--mono); font-size: .86em; }
.muted-dash { color: var(--faint); }
.text-secondary { color: var(--muted) !important; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.show-dark { display: none; }
[data-bs-theme="dark"] .show-dark { display: inline-block; }
[data-bs-theme="dark"] .show-light { display: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.skip-link:focus { left: 12px; }

/* ----------------------------------------------------- tabler components */
.card {
    --tblr-card-border-color: var(--border);
    --tblr-card-border-radius: var(--radius);
    --tblr-card-box-shadow: var(--shadow-sm);
    --tblr-card-bg: var(--surface);
}
.btn {
    --tblr-btn-border-radius: var(--radius-sm);
    --tblr-btn-font-weight: 600;
    --tblr-btn-font-size: .875rem;
    --tblr-btn-padding-y: .5rem;
    --tblr-btn-padding-x: .95rem;
    --tblr-btn-bg: var(--surface);
    --tblr-btn-color: var(--text);
    --tblr-btn-border-color: var(--border-strong);
    --tblr-btn-hover-bg: var(--surface-2);
    --tblr-btn-hover-color: var(--text);
    --tblr-btn-hover-border-color: var(--border-strong);
    --tblr-btn-active-bg: var(--surface-3);
    --tblr-btn-active-color: var(--text);
    --tblr-btn-active-border-color: var(--border-strong);
    --tblr-btn-box-shadow: var(--shadow-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-primary {
    --tblr-btn-bg: var(--brand);
    --tblr-btn-color: #fff;
    --tblr-btn-border-color: var(--brand);
    --tblr-btn-hover-bg: var(--brand-hover);
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-border-color: var(--brand-hover);
    --tblr-btn-active-bg: var(--brand-hover);
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-border-color: var(--brand-hover);
}
.btn-sm { --tblr-btn-padding-y: .3rem; --tblr-btn-padding-x: .65rem; --tblr-btn-font-size: .8125rem; }
.btn-ghost-danger { --tblr-btn-color: var(--tone-red-fg); --tblr-btn-bg: transparent; --tblr-btn-border-color: transparent; --tblr-btn-hover-bg: var(--tone-red-bg); --tblr-btn-hover-color: var(--tone-red-fg); --tblr-btn-hover-border-color: transparent; --tblr-btn-box-shadow: none; }
.form-control, .form-select {
    --tblr-control-border-radius: var(--radius-sm);
    --tblr-control-bg: var(--surface);
    --tblr-control-border-color: var(--border-strong);
    --tblr-control-fg: var(--text);
}
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--text-2); }
.alert { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------- app frame */
/* Signed in: a sidebar on the left and the page next to it. Below 992px the sidebar becomes a drawer that the
   menu button in the top bar opens. On wide screens it can shrink to a narrow rail (theme.js sets data-nav). */
:root { --sidebar-w: 248px; --rail-w: 72px; }
.app { flex: 1 1 auto; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; min-width: 0; }
.app-main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }

.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); z-index: 40; }
.sidebar::before, .mobilebar::before { content: ""; display: block; flex: none; height: 3px; background: linear-gradient(90deg, #2a3a90, #1f56a3 38%, #1d8ad0 62%, #acc932); }
.sidebar-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 10px 14px 8px 18px; }
.icon-btn.sidebar-close, .sidebar-scrim, .mobilebar { display: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand-logo { display: inline-flex; align-items: center; border-radius: 10px; padding: 3px 4px; }
[data-bs-theme="dark"] .brand-logo { background: #fff; padding: 3px 8px; }
.brand-logo img { display: block; height: 34px; width: auto; }
/* the small mark for the rail: the wave and its word, cut out of the 64px icon (the rest of the icon is blank) */
.brand-mark { display: none; width: 56px; height: 32px; overflow: hidden; border-radius: 8px; }
[data-bs-theme="dark"] .brand-mark { background: #fff; }
.brand-mark img { display: block; width: 64px; height: 64px; max-width: none; margin: -16px 0 0 -4px; }
.brand-tag { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 9px; }

.sidenav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 14px; }
.nav-group + .nav-group { margin-top: 12px; }
.nav-heading { padding: 8px 12px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.navlink { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--muted); font-weight: 600; font-size: .92rem; transition: background-color .15s, color .15s; }
.nav-group > * + .navlink, .nav-group > * + .navitem { margin-top: 2px; }
.navitem { position: relative; }
.navlink.with-toggle { padding-right: 44px; }
.nav-toggle { position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.nav-toggle:hover { background: var(--surface-3); color: var(--text); }
.nav-toggle .icon { transform: rotate(-90deg); transition: transform .15s; }
.nav-toggle[aria-expanded="true"] .icon { transform: none; }
.navlink.is-active ~ .nav-toggle { color: var(--brand-ink); }
.subnav { margin: 2px 0 4px 21px; padding-left: 10px; border-left: 2px solid var(--border); }
.nav-toggle[aria-expanded="false"] ~ .subnav { display: none; }
.navlink.sub { padding: 7px 10px; font-size: .88rem; }
.navlink:hover { background: var(--surface-3); color: var(--text); }
.navlink.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.nav-badge { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.navlink.is-active .nav-badge { background: var(--surface); color: var(--brand-ink); }

.sidebar-foot { position: relative; flex: none; display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.foot-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 11px; cursor: pointer; transition: background-color .15s, color .15s; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
#nav-collapse { display: none; }

/* the signed-in person: a card at the bottom of the sidebar that opens a small menu above it */
.usermenu { position: relative; }
.usermenu summary { list-style: none; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px 7px 8px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); cursor: pointer; color: var(--text-2); transition: background-color .15s; }
.usermenu-btn:hover, .usermenu[open] .usermenu-btn { background: var(--surface-3); }
.usermenu-btn > .icon { margin-left: auto; color: var(--muted); transform: rotate(180deg); }
.usermenu-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.usermenu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: .84rem; color: var(--text); }
.usermenu-role { font-size: .74rem; color: var(--muted); }
.menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 8px; z-index: 5; }
.menu-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; overflow-wrap: anywhere; }
.menu-head span { color: var(--muted); font-size: .8rem; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text-2); font-weight: 550; }
.menu-item:hover { background: var(--surface-3); color: var(--text); }
.menu-label { padding: 10px 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.menu-sep { margin: 8px 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }

/* narrow rail (wide screens only): icons without words, the words stay for screen readers */
@media (min-width: 992px) {
    #nav-collapse { display: inline-grid; }
    html[data-nav="rail"] { --sidebar-w: var(--rail-w); }
    [data-nav="rail"] .sidebar-top { justify-content: center; padding-inline: 8px; }
    [data-nav="rail"] .brand-full, [data-nav="rail"] .brand-tag { display: none; }
    [data-nav="rail"] .brand-mark { display: block; }
    [data-nav="rail"] .nav-heading { display: none; }
    [data-nav="rail"] .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
    [data-nav="rail"] .navlink { justify-content: center; padding: 12px 0; }
    [data-nav="rail"] .nav-toggle { display: none; }
    html[data-nav="rail"] .navitem > .subnav { display: block; margin: 2px 0 0; padding-left: 0; border-left: 0; }
    [data-nav="rail"] .navlink-text, [data-nav="rail"] .nav-badge { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    [data-nav="rail"] .foot-tools { flex-direction: column; }
    [data-nav="rail"] .usermenu-btn { justify-content: center; padding: 6px; }
    [data-nav="rail"] .usermenu-text, [data-nav="rail"] .usermenu-btn > .icon { display: none; }
    [data-nav="rail"] .menu { left: calc(100% + 18px); right: auto; bottom: 0; width: 256px; }
}

/* drawer (below 992px): the sidebar slides in over the page, the top bar carries the menu button */
@media (max-width: 991.98px) {
    .app { display: block; }
    .mobilebar { display: block; position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); }
    .mobilebar-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 14px; }
    .icon-btn.sidebar-close { display: inline-grid; }
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: min(300px, 86vw); z-index: 60; transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
    .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 15, 30, .55); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
    body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-md); transition: transform .22s ease; }
    body.nav-open .sidebar-scrim { opacity: 1; visibility: visible; transition: opacity .22s ease; }
    body.nav-open { overflow: hidden; }
}

/* segmented control (theme choice, view toggle) */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 11px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .82rem; border-radius: 8px; cursor: pointer; transition: background-color .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.menu .seg { display: flex; }
.menu .seg button { flex: 1; justify-content: center; padding: 6px 4px; }

/* ------------------------------------------------------------------- page */
.main { flex: 1; padding-block: 8px 40px; }
.page-app .main { container: main / inline-size; padding-block: 8px 48px; }
.flash { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 550; }
.flash .icon { margin-top: 2px; }
.flash-ok { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.flash-err { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 28px 0 18px; }
.page-head h1 { font-size: 1.7rem; font-weight: 750; margin: 0; }
.page-head .sub { color: var(--muted); margin: 2px 0 0; max-width: 60ch; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; margin: 24px 0 -10px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--link); }

/* ------------------------------------------------------------- stat cards */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--tone-bg); color: var(--tone-fg); }
.stat-label { color: var(--muted); font-size: .8rem; font-weight: 650; }
.stat-num { font-size: 1.7rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-hint { color: var(--faint); font-size: .76rem; margin-top: 1px; }

/* ----------------------------------------------------------- panel / table */
.panel { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 18px; }
.panel > .panel-body { flex: 1 1 auto; }
.panel > .table-wrap { min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: .95rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 9px; }
.panel-head h2 .icon { color: var(--muted); }
.panel-head .spacer { margin-left: auto; }
.panel-body { padding: 16px 18px; }
.panel-foot { padding: 11px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; background: var(--surface-2); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search { position: relative; flex: 1 1 260px; max-width: 420px; }
.search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search input { padding-left: 40px; height: 40px; }
.toolbar .count { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.dtable th { vertical-align: middle; padding: 10px 16px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
.dtable td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background-color .12s; }
.dtable tbody tr:hover td { background: var(--surface-2); }
.dtable tr[data-href] { cursor: pointer; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.actions { text-align: right; }
.th-sort { display: inline-flex; align-items: center; gap: 5px; line-height: 1.2; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort .icon { width: 13px; height: 13px; opacity: .45; }
.th-sort:hover { color: var(--text); }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--brand-ink); }
th[aria-sort="ascending"] .icon, th[aria-sort="descending"] .icon { opacity: 1; }
th[aria-sort="descending"] .icon { transform: scaleY(-1); }
.num .th-sort { flex-direction: row-reverse; }

.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who-text { min-width: 0; }
.who-name { font-weight: 650; color: var(--text); }
.who-name:hover { color: var(--link); }
.who-slug { font-family: var(--mono); font-size: .74rem; color: var(--faint); }
.avatar { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; font-weight: 700; font-size: .82rem; letter-spacing: .02em; background: var(--tone-bg); color: var(--tone-fg); }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; font-size: .7rem; }
.avatar-lg { width: 68px; height: 68px; border-radius: 20px; font-size: 1.35rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .76rem; font-weight: 650; white-space: nowrap; background: var(--tone-bg); color: var(--tone-fg); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-dot); }
.pill-plain::before { display: none; }
.pill-plain { padding-left: 10px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; text-align: center; color: var(--muted); }
.empty[hidden] { display: none; }
.empty .icon { width: 30px; height: 30px; color: var(--faint); }
.empty strong { color: var(--text); font-size: 1rem; }

/* --------------------------------------------------------- detail page */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 22px 24px; margin: 14px 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hero-main { flex: 1 1 280px; min-width: 0; }
.hero h1 { font-size: 1.55rem; font-weight: 750; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .88rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 15px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kpi-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.kpi-value { font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: .8rem; font-weight: 650; color: var(--muted); margin-right: 3px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.grid-2 > .panel { margin-bottom: 0; }
.stack { display: grid; gap: 18px; margin-bottom: 18px; }
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 12px 20px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 600; font-size: .85rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; }
.copy { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; flex: none; }
.copy:hover { background: var(--surface-3); color: var(--text); }
.copy.is-done { color: var(--tone-green-dot); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.bars .bar-name { font-weight: 600; text-transform: capitalize; }
.bars .bar-n { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 650; }
.bars progress { grid-column: 1 / -1; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-3); appearance: none; -webkit-appearance: none; }
.bars progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.bars progress::-webkit-progress-value { background: var(--bar, var(--brand)); border-radius: 999px; }
.bars progress::-moz-progress-bar { background: var(--bar, var(--brand)); border-radius: 999px; }
.bars .bar-paid { --bar: var(--tone-green-dot); }
.bars .bar-pending { --bar: var(--tone-amber-dot); }
.bars .bar-failed, .bars .bar-cancelled { --bar: var(--tone-red-dot); }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .85rem; }
.note .icon { margin-top: 2px; flex: none; }

/* ------------------------------------------------------ team / forms */
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: end; }
.form-narrow { max-width: 30rem; }
.secret { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .04em; padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); user-select: all; overflow-wrap: anywhere; margin: 6px 0 14px; }
.checklist { margin: 0 0 16px; padding-left: 1.2rem; color: var(--muted); }
.checklist li { margin-bottom: 4px; }

/* ----------------------------------------------------- sign-in pages */
.page-guest .main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 24px 10vh; }
.guest-hero { text-align: center; margin: 0 0 22px; }
.guest-hero h1 { font-size: 1.5rem; font-weight: 750; margin: 0; }
.page-guest .main > .container { width: 100%; max-width: 440px; padding: 0 !important; }
.page-guest .card { width: 100% !important; --tblr-card-box-shadow: var(--shadow-md); --tblr-card-border-radius: var(--radius-lg); }
.page-guest .card-body { padding: 28px; }
.page-guest .card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem !important; }
.page-guest .card-body p { overflow-wrap: anywhere; }   /* a long email address must never push the card wider */

/* --------------------------------------------------------- responsive */
/* The page area is narrower than the window now (the sidebar takes its share, and the rail takes less), so what a page
   does at a given width is decided by the width of the page area itself: a container query on <main> (named "main"),
   not by the window. Only the sign-in pages and the outer padding still follow the window. */
@media (max-width: 767.98px) {
    .wrap { padding-inline: 14px; }
    .page-guest .card-body { padding: 20px; }
}
@container main (max-width: 899.98px) {
    .stats, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container main (max-width: 819.98px) {
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@container main (max-width: 699.98px) {
    .page-head { margin-top: 20px; }
    .form-row { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv dd { margin-bottom: 10px; }
    .hero { padding: 18px; }
}
@container main (max-width: 449.98px) {
    .stat { flex-direction: column; align-items: flex-start; padding: 13px 14px; gap: 10px; }
    .stat-ic { width: 38px; height: 38px; border-radius: 11px; }
    .stat-num { font-size: 1.4rem; }
    .toolbar .count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .sidebar, .sidebar-scrim, .mobilebar, .toolbar, .hero-actions, .skip-link { display: none !important; }
    .app { display: block; }
    body { background: #fff; }
}

/* ------------------------------------------------------------ additions */
.flash-warn { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.dtable tr[hidden] { display: none !important; }
.sr-copy { position: fixed; left: -9999px; top: 0; }
.row-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.dtable[hidden] { display: none !important; }

.dtable td.c-mail { overflow-wrap: anywhere; }
.dtable td.c-name { min-width: 250px; }
/* The Sahabat table in steps, by the width of the page area: every column from 1180px; from 960px without Activities and
   Admins (those are on the Sahabat's own page); below 960px a grid of cards (rules below). While it is a table the
   mailbox stays on one line. */
@container main (min-width: 960px) { .dtable td.c-mail { white-space: nowrap; } }
@container main (min-width: 960px) and (max-width: 1179.98px) { #sahabat-table .c-act, #sahabat-table .c-admins { display: none; } }

/* When the page area is too narrow for a wide table it would scroll sideways, so every table with .cards-sm becomes
   a grid of cards: two across when there is room, one on phones. */
@container main (max-width: 959.98px) {
    .cards-sm thead { display: none; }
    .cards-sm, .cards-sm tbody { display: block; }
    .cards-sm tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
    .cards-sm tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 6px 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
    .cards-sm tbody tr:hover { background: var(--surface-2); border-color: var(--border-strong); }
    .cards-sm td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; }
    .cards-sm tbody tr:hover td { background: none; }
    .cards-sm .c-name, .cards-sm .c-place, .cards-sm .c-mail, .cards-sm .c-role { grid-column: 1 / -1; }
    .cards-sm .c-place { color: var(--muted); }
    .cards-sm .c-mail { white-space: normal; overflow-wrap: anywhere; }
    .cards-sm .c-paid, .cards-sm .c-act, .cards-sm .c-admins, .cards-sm .c-last { margin-top: 6px; }
    .cards-sm [data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 1px; }
    .cards-sm .c-last { grid-column: 1 / 3; }
    .cards-sm .c-status { grid-column: 3; align-self: end; justify-self: start; }
    .cards-sm .actions { grid-column: 1 / -1; text-align: left !important; }
    .row-actions { justify-content: flex-start; }
}
@container main (max-width: 699.98px) {
    .cards-sm tbody { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
}

/* ---------------------------------------------------------------- groups */
.who-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gchip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 650; line-height: 1.5; background: var(--tone-bg); color: var(--tone-fg); white-space: nowrap; }
.gchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-dot); }
.gchip-lg { font-size: .8rem; padding: 3px 11px 3px 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.chip:hover { border-color: var(--tone-dot, var(--brand)); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-dot); }
.chip .n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--tone-bg, var(--brand-soft)); color: var(--tone-fg, var(--brand-ink)); border-color: var(--tone-dot, var(--brand)); }
.chip[aria-pressed="true"] .n { color: inherit; }
.toolbar .seg { margin-left: 0; }

/* a group's heading line inside the list (built by admin.js in the "By group" view) */
.dtable tr.group-row td { padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--text-2); }
.dtable tr.group-row:hover td { background: var(--surface-2); }
.group-row .group-title { display: inline-flex; align-items: center; gap: 10px; }
.group-row .group-count { color: var(--muted); font-weight: 600; }

/* colour choice: round swatches, one radio button each */
.group-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: end; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.swatches legend { float: none; width: 100%; margin-bottom: 8px; }
.swatch { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tone-dot); color: #fff; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch .icon { opacity: 0; }
.swatch:hover { transform: scale(1.08); }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tone-dot); }
.swatch:has(input:checked) .icon { opacity: 1; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 4px; }

.callout { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; background: var(--brand-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.callout-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--brand-ink); flex: none; }
.callout-text { flex: 1 1 260px; display: flex; flex-direction: column; }
.callout-text span { color: var(--muted); }
.group-box { margin-bottom: 18px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-form .form-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.inline-form .form-select { width: auto; min-width: 200px; }
.btn-icon { padding-inline: .55rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.check-who { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; }
.check-who .form-check-input { margin: 0; flex: none; width: 1.15rem; height: 1.15rem; cursor: pointer; }
.check-who .who-text { display: flex; flex-direction: column; min-width: 0; }
.toolbar-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

@container main (max-width: 699.98px) {
    .group-form { grid-template-columns: minmax(0, 1fr); }
    .chips { flex-wrap: nowrap; overflow-x: auto; }
    .chip { flex: none; }
}
@container main (max-width: 959.98px) {
    .cards-sm tr.group-row { display: block; grid-column: 1 / -1; padding: 6px 2px 0; background: none; border: 0; box-shadow: none; }
    .cards-sm tr.group-row td { padding: 0; background: none; border: 0; }
    .cards-sm tbody tr.group-row:hover { background: none; }
}

/* in the "By group" view the heading already says the group, so the small chip on each row is left out */
[data-by="group"] .who-sub .gchip { display: none; }

/* ------------------------------------------------- logos and states */
.avatar { position: relative; overflow: hidden; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; border-radius: inherit; opacity: 0; transition: opacity .2s; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
.avatar-img.is-loaded { opacity: 1; }
.avatar-sm .avatar-img { padding: 2px; }
.avatar-lg .avatar-img { padding: 8px; }
.place-state { font-size: .78rem; color: var(--muted); }
.state-filter { margin: 0; }
.state-filter .form-select { height: 40px; min-width: 170px; padding-block: 0; }
@container main (max-width: 699.98px) {
    .state-filter { flex: 1 1 160px; }
    .state-filter .form-select { width: 100%; }
}

/* --------------------------------------------------- landing page editor */
.panel-about { color: var(--muted); margin: 0 0 16px; }
.block-title { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.block-title:first-of-type { margin-top: 4px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field-wide { grid-column: 1 / -1; }
.field .form-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.field-count { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field-count.is-over { color: var(--tone-red-fg); }
.form-hint { color: var(--muted); font-size: .8rem; margin-top: 5px; }
.form-hint:empty { display: none; }
.field .invalid-feedback { display: block; color: var(--tone-red-fg); font-weight: 550; margin-top: 5px; }
.action-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 4px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.action-note { color: var(--muted); font-size: .85rem; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
@container main (max-width: 699.98px) {
    .field-grid { grid-template-columns: minmax(0, 1fr); }
    /* on a phone the bar is one row of three equal buttons, not a tall block that covers the form */
    .action-note { display: none; }
    .action-buttons { width: 100%; flex-wrap: nowrap; }
    .action-buttons .btn { flex: 1 1 0; min-height: 44px; padding-inline: .4rem; font-size: .8125rem; line-height: 1.2; white-space: normal; }
    .action-buttons .icon { display: none; }
}