/* ==========================================================================
   CommunityOS design system  (ported from UI_EXAMPLE)
   Semantic tokens only — never hard-code theme colours in components.
   ========================================================================== */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-800.woff2') format('woff2')}

:root{
  color-scheme:light;
  /* Blue — default theme */
  --brand:#4f95d8; --brand-2:#244e72; --brand-soft:#e7f2fc;
  --coral:#e76f6a; --coral-soft:#fcebea;
  --success:#278c75; --success-soft:#e8f6f1;
  --warning:#df8c45; --warning-soft:#fff3e7;
  --danger:#d85d61; --danger-soft:#fbeaec;
  --violet:#6e7fc5;
  --bg:#edf5fb; --surface:#f9fbfd; --surface-2:#f2f7fb; --surface-3:#e6eef5;
  --text:#123b5d; --muted:#60788b; --subtle:#8da0b0;
  --border:#cfdee9; --border-strong:#b9ccd9;
  --shadow:0 1px 2px rgba(18,59,93,.04),0 8px 22px rgba(18,59,93,.05);
  --shadow-lg:0 24px 64px rgba(5,34,58,.22);
  --radius:12px; --field-radius:8px; --pill:999px;
  --sidebar:#123b5d; --sidebar-text:#cadbe8; --sidebar-active:#f5f9fc;
  --control:40px; --control-touch:44px; --sidebar-w:232px; --sidebar-rail:64px; --topbar-h:60px;
  --fast:160ms; --normal:220ms; --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="golden"]{
  /* Golden brown — matches the login button */
  --brand:#8a6228; --brand-2:#71501f; --brand-soft:#efe6d3;
  --coral:#c1863c; --coral-soft:#f6ead6;
  --success:#4f8a5c; --success-soft:#e7f1e5;
  --warning:#c1863c; --warning-soft:#f6ead6;
  --danger:#b0524b; --danger-soft:#f4e5e2;
  --violet:#8a7fc0;
  --bg:#f3ecdd; --surface:#fbf7ec; --surface-2:#f3ecda; --surface-3:#e9dfc5;
  --text:#3f382a; --muted:#7c7059; --subtle:#a99c81;
  --border:#ddd0b2; --border-strong:#c8b891;
  --shadow:0 1px 2px rgba(46,34,16,.05),0 8px 22px rgba(46,34,16,.06);
  --shadow-lg:0 24px 64px rgba(30,20,6,.28);
  --sidebar:#4a3721; --sidebar-text:#e2d3ba; --sidebar-active:#fbf7ec;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;
  background:
    radial-gradient(circle at 9% 22%,color-mix(in srgb,var(--brand) 13%,transparent) 0 14%,transparent 28%),
    radial-gradient(circle at 95% 48%,color-mix(in srgb,var(--coral) 10%,transparent) 0 12%,transparent 29%),
    var(--bg);
  transition:background var(--normal),color var(--normal);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- Browser surfaces ---------- */
::selection{background:color-mix(in srgb,var(--brand) 26%,transparent);color:var(--text)}
:root{caret-color:var(--brand)}
input::placeholder,textarea::placeholder{color:var(--subtle);opacity:1}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:5px}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:2px solid var(--surface)}
::-webkit-scrollbar-thumb:hover{background:var(--subtle)}
table.grid td{font-variant-numeric:tabular-nums}

/* ---------- App shell ---------- */
.app-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
/* width/flex-basis still animate (a single flex item resizing) but nothing inside pops via display
   toggling any more — labels fade with opacity+max-width so they never wrap mid-transition (see B5). */
.sidebar{flex:0 0 var(--sidebar-w);width:var(--sidebar-w);background:var(--sidebar);color:#fff;padding:14px 12px;display:flex;flex-direction:column;overflow:visible;z-index:50;transition:flex-basis var(--normal) var(--ease),width var(--normal) var(--ease)}
.sidebar-top{display:flex;align-items:center;gap:10px;padding:0 4px 14px}
.sidebar-burger{flex:none;width:36px;height:36px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center}
.sidebar-burger:hover{background:rgba(255,255,255,.16)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;max-width:200px;overflow:hidden;opacity:1;transition:max-width var(--normal) var(--ease),opacity var(--fast) var(--ease)}
.brand-mark{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--surface);overflow:hidden;padding:4px}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.side-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;flex:1;margin:0 -4px;padding:0 4px}

.nav-cat-wrap{position:relative}
.nav-cat{border:0;background:transparent;color:var(--sidebar-text);display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:8px;text-align:left;font-size:14px;font-weight:600;transition:var(--fast)}
.nav-cat:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-cat.has-active{color:#fff}
.nav-cat .nav-cat-label{flex:1;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:max-width var(--normal) var(--ease),opacity var(--fast) var(--ease)}
.nav-cat .nav-cat-chev{display:grid;color:inherit;opacity:.7;flex:none;transition:transform var(--fast),opacity var(--fast) var(--ease)}
.nav-cat.expanded .nav-cat-chev{transform:rotate(90deg)}
.nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:none;opacity:.9}
.nav-icon svg{display:block}

.nav-cat-body{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px}
.nav-item{border:0;background:transparent;color:var(--sidebar-text);display:flex;align-items:center;width:100%;padding:6px 11px 6px 42px;border-radius:7px;text-align:left;font-size:14px;line-height:1.3;transition:var(--fast);text-decoration:none;opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;opacity:1}
.nav-item.active{background:var(--sidebar-active);color:var(--sidebar);font-weight:700;opacity:1}

/* Rail flyout — positioned by jmtRailFlyout (wwwroot/js/app.js) via getBoundingClientRect, not CSS
   :hover, so it can use position:fixed (immune to .side-nav's overflow-y:auto clipping it — B3) and
   so it never fires from a touch tap (JS gates on data-collapse + matchMedia(hover:hover) — B2). */
.nav-cat-flyout{
  display:flex;flex-direction:column;gap:1px;position:fixed;min-width:212px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;z-index:200;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-4px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast) var(--ease);
}
.nav-cat-flyout.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.nav-cat-flyout{transition:none}}
.nav-cat-flyout-head{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 10px 8px}
.nav-cat-flyout .nav-item{color:var(--text);padding:8px 11px;opacity:1}
.nav-cat-flyout .nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-cat-flyout .nav-item.active{background:var(--brand-soft);color:var(--brand)}

/* Menu type (LayoutState.MenuStyle, <html data-menustyle>). List = the rows above; Thumbnail = the
   pages of a category as icon tiles, three to a row, in the sidebar body, the rail flyout and the
   top-bar dropdown (all carry .nav-pages). */
.nav-item-icon{display:none}
:root[data-menustyle="thumb"] .nav-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
:root[data-menustyle="thumb"] .nav-cat-body.nav-pages{padding:6px 2px 10px}
:root[data-menustyle="thumb"] .nav-pages .nav-item,
:root[data-menustyle="thumb"] .tn-menu.nav-pages a{
  flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  min-height:76px;padding:9px 3px 8px;border-radius:10px;text-align:center;
  font-size:10.5px;letter-spacing:-.01em;line-height:1.2;opacity:1;font-weight:600
}
:root[data-menustyle="thumb"] .nav-pages .nav-item-icon{
  display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:rgba(255,255,255,.08);transition:background var(--fast),color var(--fast)
}
:root[data-menustyle="thumb"] .nav-pages .nav-item-text{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word;hyphens:auto;max-width:100%
}
:root[data-menustyle="thumb"] .nav-cat-body .nav-item{background:rgba(255,255,255,.035)}
:root[data-menustyle="thumb"] .nav-cat-body .nav-item:hover{background:rgba(255,255,255,.09)}
:root[data-menustyle="thumb"] .nav-cat-body .nav-item.active{background:var(--sidebar-active);color:var(--sidebar)}
:root[data-menustyle="thumb"] .nav-cat-body .nav-item.active .nav-item-icon{background:rgba(0,0,0,.08)}
/* light surfaces: flyout and top-bar dropdown */
:root[data-menustyle="thumb"] .nav-cat-flyout.nav-pages{width:312px;min-width:312px;max-width:312px}
:root[data-menustyle="thumb"] .nav-cat-flyout-head{grid-column:1/-1}
:root[data-menustyle="thumb"] .tn-menu.nav-pages{width:330px;min-width:330px;padding:8px}
:root[data-menustyle="thumb"] .tn-menu.nav-pages a{display:flex;color:var(--text)}
:root[data-menustyle="thumb"] .nav-cat-flyout .nav-item-icon,
:root[data-menustyle="thumb"] .tn-menu .nav-item-icon{background:var(--brand-soft);color:var(--brand)}
:root[data-menustyle="thumb"] .nav-cat-flyout .nav-item.active .nav-item-icon,
:root[data-menustyle="thumb"] .tn-menu a.active .nav-item-icon{background:var(--brand);color:#fff}

/* Collapsed-rail category name under its icon (desktop collapsed only, see the min-width:821px block) */
.nav-cat-rail{display:none}
.sidebar-foot{margin-top:8px;border-top:1px solid rgba(255,255,255,.12);padding:12px 6px 2px;display:flex;align-items:center;gap:10px}
.sidebar-foot .avatar{flex:none;background:rgba(255,255,255,.12);color:#fff}
.sidebar-foot>div{min-width:0;max-width:160px;overflow:hidden;opacity:1;transition:max-width var(--normal) var(--ease),opacity var(--fast) var(--ease)}
.sidebar-foot strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-foot span{font-size:10px;color:rgba(255,255,255,.55)}

.main-shell{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;overflow:hidden}
.topbar{flex:0 0 var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 20px;z-index:30}
.operations-title{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.operations-title strong{font-size:16px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operations-title span{font-size:11px;color:var(--muted)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-button{height:36px;min-width:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);display:grid;place-items:center}
.icon-button:hover{background:var(--surface-2);color:var(--text)}
.notification-button{position:relative}

.theme-picker{height:36px;border:1px solid var(--border);background:var(--surface);border-radius:9px;display:flex;align-items:center;gap:5px;padding:0 9px;color:var(--muted)}
.theme-picker:hover{background:var(--surface-2);color:var(--text)}
.theme-picker .theme-palette{color:var(--brand)}
.theme-popover{min-width:0!important;width:max-content;padding:8px}
.theme-swatches{display:flex;gap:8px;padding:2px}
.theme-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;background:transparent;display:grid;place-items:center;padding:0}
.theme-swatch>span{width:24px;height:24px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.theme-swatch.active{border-color:var(--brand)}
.theme-swatch.sw-blue>span{background:#4f95d8}
.theme-swatch.sw-golden>span{background:#8a6228}

.profile-chip{border:0;background:transparent;display:flex;align-items:center;gap:8px;color:var(--text);padding:3px 4px 3px 6px}
.profile-chip>span:nth-child(2){display:flex;flex-direction:column;text-align:left;line-height:1.2}
.profile-chip strong{font-size:12px}
.profile-chip small{font-size:10px;color:var(--subtle)}
.avatar,.mini-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-soft),color-mix(in srgb,var(--brand) 25%,var(--surface)));color:var(--brand);font-size:11px;font-weight:800}
.avatar.large{width:48px;height:48px;font-size:14px}

.nav-scrim{display:none}

.workspace{flex:1;min-height:0;overflow-y:auto;padding:16px 28px 40px;width:100%}
.button-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.button{height:var(--control);padding:0 15px;border-radius:9px;border:1px solid transparent;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap}
.button.small{height:36px;padding:0 12px}
.button.primary{background:var(--text);border-color:var(--text);color:#fff;box-shadow:0 5px 14px rgba(18,59,93,.16)}
.button.primary:hover{background:var(--brand-2)}
.button.secondary{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:0 2px 8px rgba(18,59,93,.035)}
.button.secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}
.button.danger{background:var(--danger);color:#fff}
.button.danger-soft{background:var(--danger-soft);color:var(--danger)}
.button.full{width:100%}
.button:disabled{opacity:.55;cursor:not-allowed}
.text-button{border:0;background:transparent;color:var(--brand);font-weight:700;font-size:12px}
.more-button{border:0;background:transparent;color:var(--subtle);font-weight:900;padding:4px}

/* ---------- Panels / cards / metrics ---------- */
.panel,.metric-card{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.panel{padding:20px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.panel-head h2{font-size:16px;margin:0 0 2px}
.panel-head p{font-size:12px;color:var(--muted);margin:0}
.event-summary-title{margin:0 0 10px;font-size:15px;color:var(--text);display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.event-summary-title span:not(.notify-buttons){font-weight:500;color:var(--muted)}
.notify-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
@media(max-width:640px){.notify-buttons{margin-left:0;width:100%}.notify-buttons .button{flex:1 1 auto}}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.metric-card{padding:18px 20px;min-height:132px;position:relative;overflow:hidden}
.metric-card:before{content:"";position:absolute;width:96px;height:96px;border-radius:38% 0 0 55%;right:-15px;top:-28px;background:color-mix(in srgb,var(--accent,var(--brand)) 20%,transparent)}
.accent-blue{--accent:var(--brand)} .accent-coral{--accent:var(--coral)}
.accent-slate{--accent:#7894a8} .accent-sky{--accent:#76ade0}
.accent-green{--accent:var(--success)} .accent-violet{--accent:var(--violet)}
.metric-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;font-weight:600}
.metric-card>strong{font-size:31px;display:block;letter-spacing:-.03em;margin:7px 0 2px}
.trend{font-size:12px;font-weight:800;margin-top:2px}
.trend span{color:var(--subtle);font-weight:500;margin-left:4px}
.trend.positive{color:var(--success)} .trend.negative{color:var(--danger)} .trend.neutral{color:var(--warning)}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.62fr);gap:14px}
.overview-grid.roles-grid{grid-template-columns:minmax(190px,.42fr) minmax(0,2fr)}
@media(max-width:900px){.overview-grid.roles-grid{grid-template-columns:1fr}}

/* ---------- Status pills ---------- */
.status-pill,.component-tag{font-size:10px;font-weight:700;border-radius:99px;padding:4px 9px;background:var(--surface-3);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.status-pill.success{background:var(--success-soft);color:var(--success)}
.status-pill.warning{background:var(--warning-soft);color:var(--warning)}
.status-pill.danger{background:var(--danger-soft);color:var(--danger)}
.status-pill.neutral{background:var(--surface-3);color:var(--muted)}
.status-pill--sm{font-size:9px;padding:2px 7px;gap:3px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.field-span2{grid-column:span 2}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.field>.lbl{font-size:12px;font-weight:700}
.field>label b,.req{color:var(--danger)}
.field input,.field select,.field textarea{width:100%;min-height:var(--control);border:1px solid var(--border-strong);border-radius:var(--field-radius);background:var(--surface);color:var(--text);padding:8px 11px;outline:0;font-size:13px}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.field .hint{font-size:11px;color:var(--muted)}
.field.error input,.field.error select{border-color:var(--danger)}
.field.error .hint{color:var(--danger)}
.input-icon{position:relative}
.input-icon>span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--subtle)}
.input-icon input{padding-left:31px}
.switch{appearance:none;width:34px;height:19px;border-radius:99px;background:var(--surface-3);padding:2px;transition:var(--fast);flex:none}
.switch:before{content:"";display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:var(--fast)}
.switch:checked{background:var(--brand)}
.switch:checked:before{transform:translateX(15px)}
.check-line{display:flex;align-items:center;gap:9px;font-size:12px}
.check-line input{accent-color:var(--brand);width:16px;height:16px}
.validation-message,.text-danger{color:var(--danger);font-size:11px}

/* ---------- Data grid ---------- */
.data-panel{padding:0;overflow:hidden}
.grid-toolbar{display:flex;align-items:center;gap:8px;padding:14px;flex-wrap:wrap}
.grid-search{height:38px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;display:flex;align-items:center;padding:0 11px;gap:7px;color:var(--subtle);min-width:180px;flex:1 1 180px;max-width:280px}
.grid-search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:13px}
.toolbar-spacer{flex:1}
.dg-heading{display:flex;flex-direction:column;line-height:1.25;margin-right:4px;min-width:0}
.dg-heading strong{font-size:14px;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-heading span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dg-actions:empty{display:none}
@media(max-width:640px){
  .dg-toolbar{gap:8px 6px;padding:12px}
  .dg-heading{flex:1 1 100%;margin:0;order:0}
  .dg-actions{flex:1 1 100%;order:1}
  .dg-actions .button{flex:1}
  .grid-search{flex:1 1 100%;max-width:none;order:2}
  .dg-toolbar>.pop-wrap,.dg-toolbar>select,.dg-toolbar>.button{order:3}
  .dg-toolbar .toolbar-spacer{display:none}
  .dg-toolbar .component-tag{order:4}
}
.table-wrap{overflow:auto}
.table-wrap.dg-is-loading{position:relative;min-height:220px}
/* loading overlay (LoadingOverlay.razor): 8-point star drawing itself while turning */
.jmt-loading{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 75%,transparent);opacity:0;animation:jmtLoadIn .2s ease-out .15s forwards}
.jmt-loading.is-inline{position:absolute;inset:0;z-index:5}
.jmt-loading.is-page{position:fixed;inset:0;z-index:900}
.jmt-loading__box{display:flex;flex-direction:column;align-items:center;gap:10px}
.jmt-loading__star{animation:jmtStarTurn 6s linear infinite}
.jmt-loading__star path{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:jmtStarDraw 2.4s ease-in-out infinite alternate}
.jmt-loading__text{font-size:13px;font-weight:600;color:var(--muted)}
@keyframes jmtLoadIn{to{opacity:1}}
@keyframes jmtStarTurn{to{transform:rotate(360deg)}}
@keyframes jmtStarDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.jmt-loading__star,.jmt-loading__star path{animation:none;stroke-dashoffset:0}}
table.grid{border-collapse:collapse;width:100%;min-width:820px;font-size:12px}
table.grid th{text-align:left;background:var(--surface-2);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.035em;font-weight:800;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
table.grid td{padding:11px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
table.grid tbody tr:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}.person{display:flex;align-items:center;gap:8px}
.person>span{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:10px}
.pagination{display:flex;align-items:center;gap:16px;padding:14px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.pagination .grow{flex:1}
.pagination button{min-width:28px;height:28px;border:1px solid var(--border);background:var(--surface);border-radius:7px;color:var(--muted);font-size:10px}
.pagination button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination button:disabled{opacity:.45}

/* ---------- Bar chart ---------- */
.bar-chart{display:grid;grid-template-columns:30px 1fr;height:240px;margin-top:12px}
.bar-chart .y-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:var(--subtle);padding-bottom:22px}
.bar-chart .plot{position:relative;display:flex;justify-content:space-around;gap:8px;border-bottom:1px solid var(--border)}
.bar-group{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center}
.bar-group>div{height:calc(100% - 22px);width:78%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.bar-group i,.bar-group b{width:38%;border-radius:5px 5px 1px 1px}
.bar-group i{background:var(--brand)}
.bar-group b{background:var(--coral)}
.bar-group span{height:22px;font-size:9px;color:var(--muted);padding-top:6px}
.legend{display:flex;gap:16px;justify-content:flex-end;font-size:10px;color:var(--muted);margin-top:10px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:50%}
.legend .blue{background:var(--brand)} .legend .coral{background:var(--coral)}

/* ---------- Activity list ---------- */
.activity{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.activity:last-child{border:0}
.activity-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:11px}
.activity-icon.blue{background:var(--brand-soft);color:var(--brand)}
.activity-icon.orange{background:var(--warning-soft);color:var(--warning)}
.activity-icon.violet{background:color-mix(in srgb,var(--violet) 13%,transparent);color:var(--violet)}
.activity-icon.green{background:var(--success-soft);color:var(--success)}
.activity strong{font-size:12px}
.activity p{margin:1px 0 0;color:var(--muted);font-size:11px}
.activity time{font-size:9px;color:var(--subtle)}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed;right:24px;bottom:24px;width:340px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);animation:toastIn var(--normal) var(--ease)}
.toast>i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.toast.success>i{background:var(--success-soft);color:var(--success)}
.toast.warning>i{background:var(--warning-soft);color:var(--warning)}
.toast.error>i{background:var(--coral-soft);color:var(--coral)}
.toast.info>i{background:var(--brand-soft);color:var(--brand)}
.toast strong{font-size:12px}
.toast p{font-size:11px;color:var(--muted);margin:1px 0}
.toast button{border:0;background:transparent;color:var(--subtle)}
@keyframes toastIn{from{transform:translateY(15px);opacity:0}}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,12,24,.62);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:min(460px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:26px;position:relative;animation:modalIn var(--normal) var(--ease)}
.modal.modal-wide{width:min(920px,100%)}
.modal-section{margin-top:20px;border-top:1px solid var(--border);padding-top:14px}
.modal-section h3{font-size:13px;margin:0 0 2px}
.modal-section p{font-size:12px;color:var(--muted);margin:0}
.hof-check{margin-top:2px;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:9px;background:var(--surface-2)}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}}

/* ---------- Login ----------
   Scene: Al-Hakim Mosque courtyard. Palette pulled from the photo —
   sandstone ivory surfaces, golden-brown accent (the minaret / warm stone),
   warm brick for danger. */
.login-shell{
  --brand:#8a6228; --brand-2:#71501f; --brand-soft:#efe6d3;
  --coral:#c1863c; --coral-soft:#f6ead6;
  --violet:#8a7fc0;
  --success:#4f8a5c; --success-soft:#e7f1e5;
  --warning:#c1863c; --warning-soft:#f6ead6;
  --danger:#b0524b; --danger-soft:#f4e5e2;
  --bg:#ece1c9; --surface:#fbf7ec; --surface-2:#f3ecda; --surface-3:#e9dfc5;
  --text:#3f382a; --muted:#7c7059; --subtle:#a99c81;
  --border:#ddd0b2; --border-strong:#c8b891;
  --shadow:0 1px 2px rgba(46,34,16,.06),0 10px 26px rgba(46,34,16,.08);
  --shadow-lg:0 28px 70px rgba(30,20,6,.42);

  position:relative;overflow:hidden;min-height:100dvh;
  display:grid;place-items:center;padding:24px;background:#241a0d;
}
.login-shell::before{
  content:"";position:absolute;inset:0;
  background:url('/img/bg-login.jpg') center 42%/cover no-repeat;
  filter:brightness(.86) saturate(1.06);
}
.login-shell::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(135% 105% at 50% 40%, transparent 0%, rgba(34,24,10,.58) 100%),
    linear-gradient(180deg, rgba(34,24,10,.22) 0%, rgba(34,24,10,.4) 100%);
}
.login-shell > *{position:relative;z-index:1}
.login-shell ::selection{background:color-mix(in srgb,var(--brand) 26%,transparent);color:var(--text)}

.login-card{width:min(326px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:31px 26px 24px;animation:login-in .5s var(--ease) both}
@keyframes login-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px}
.login-crest{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);box-shadow:0 0 0 1px color-mix(in srgb,var(--coral) 35%,transparent);margin-bottom:14px}
.login-crest img{width:65px;height:65px;object-fit:contain}
.login-brand h1{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0}
.login-brand p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.login-card .field{margin-bottom:14px}
.login-card .field>label{color:var(--brand);text-align:center}
.login-card .field .validation-message{text-align:center}
.login-card .input-icon input{padding:8px 34px;text-align:center;border-radius:13px}
.login-card .input-icon>span{color:var(--subtle);display:grid;transition:color var(--fast)}
.login-card .input-icon:focus-within>span{color:var(--brand)}
.login-shell .button.primary{background:var(--brand);border-color:var(--brand);border-radius:13px;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent)}
.login-shell .button.primary:hover{background:var(--brand-2)}
.login-submit{margin-top:6px}
.login-help{text-align:center;font-size:12px;color:var(--muted);margin:15px 0 0}
.login-help a{color:var(--brand);font-weight:600}
.form-alert{display:flex;align-items:center;gap:9px;background:var(--danger-soft);color:var(--danger);border-radius:var(--field-radius);padding:10px 12px;font-size:12.5px;margin-bottom:16px}
.form-alert svg{flex:none}

/* ---------- States ---------- */
.empty-state{text-align:center;padding:44px 20px;color:var(--muted)}
.empty-state h2{font-size:16px;color:var(--text);margin:6px 0}
.spinner{width:18px;height:18px;border:2px solid color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:6px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- Collapsed sidebar (rail) ----------
   Labels fade (opacity+max-width, see base rules above) instead of toggling display, so nothing pops
   or wraps mid-transition (B5). .side-nav keeps its normal overflow-y:auto here (dropped the old
   overflow:visible-on-both-axes escape hatch) so a short viewport with all 7 categories still scrolls —
   the rail flyout no longer needs the axis-clipping tradeoff since it's position:fixed (B3).
   B1: scoped to min-width:821px (the mobile block below owns everything at 820px and under) instead of
   being a bare :root[data-collapse="1"] rule — that used to have no viewport condition at all, so a
   desktop-collapsed rail persisted via localStorage would win the cascade on a phone too (every one of
   these declarations outranks its mobile counterpart on specificity alone), leaving the rail wider than
   .app-shell's reserved padding and labels stuck invisible under the open drawer. Scoping the whole
   block here removes the conflict at its root rather than re-fighting specificity property-by-property. */
@media(min-width:821px){
  :root[data-collapse="1"] .sidebar{flex-basis:var(--sidebar-rail);width:var(--sidebar-rail);padding:14px 10px}
  :root[data-collapse="1"] .sidebar-top{justify-content:center;padding:0 0 12px}
  :root[data-collapse="1"] .sidebar .brand,
  :root[data-collapse="1"] .sidebar .nav-cat-label,
  :root[data-collapse="1"] .sidebar .nav-cat-chev,
  :root[data-collapse="1"] .sidebar-foot>div{max-width:0;opacity:0;pointer-events:none}
  :root[data-collapse="1"] .sidebar .nav-cat-body{display:none}
  :root[data-collapse="1"] .nav-cat{justify-content:center;padding:10px 0;gap:0}
  :root[data-collapse="1"] .sidebar-foot{justify-content:center;padding-top:12px}
  /* category name under the icon; the rail keeps its width (only the side padding is trimmed) */
  :root[data-collapse="1"] .sidebar{padding-left:4px;padding-right:4px}
  :root[data-collapse="1"] .nav-cat{flex-direction:column;padding:8px 0 7px;gap:4px}
  :root[data-collapse="1"] .nav-cat-rail{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:9.5px;font-weight:600;line-height:1.1;letter-spacing:-.01em;opacity:.85
  }
  :root[data-collapse="1"] .nav-cat.has-active .nav-cat-rail{opacity:1}
  :root[data-collapse="1"] .sidebar .nav-cat-label,
  :root[data-collapse="1"] .sidebar .nav-cat-chev{display:none}}

/* ---------- Top menu mode ---------- */
.top-nav{display:none}
:root[data-menupos="top"] .sidebar,
:root[data-menupos="top"] .nav-scrim{display:none}
:root[data-menupos="top"] .top-nav{display:flex;align-items:stretch;gap:0;background:var(--sidebar);padding:0 14px;flex:0 0 46px;overflow:visible;z-index:41}
:root[data-menupos="top"] .top-nav .tn-brand{display:flex;align-items:center;gap:9px;color:#fff;padding-right:14px;margin-right:6px;border-right:1px solid rgba(255,255,255,.14);white-space:nowrap}
:root[data-menupos="top"] .top-nav .tn-brand img{width:24px;height:24px;object-fit:contain;background:var(--surface);border-radius:50%;padding:3px}
:root[data-menupos="top"] .top-nav .tn-brand strong{font-size:13px}
.tn-list{display:flex;align-items:stretch}
.tn-item{position:relative;display:flex}
.tn-trigger{border:0;background:transparent;color:var(--sidebar-text);padding:0 13px;font-size:13px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tn-trigger svg{opacity:.7;transition:transform var(--fast)}
.tn-trigger:hover,.tn-item.open .tn-trigger{color:#fff}
.tn-item.open .tn-trigger svg{transform:rotate(180deg)}
.tn-scrim{position:fixed;inset:0;z-index:59}
.tn-menu{position:absolute;top:100%;left:0;margin-top:2px;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:60}
.tn-menu a{display:block;padding:9px 11px;border-radius:8px;color:var(--text);font-size:13px}
.tn-menu a:hover{background:var(--surface-2)}
.tn-menu a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}

/* ---------- Topbar popovers ---------- */
.pop-wrap{position:relative}
.popover{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;z-index:80}
.popover h4{font-size:12px;margin:6px 8px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.popover-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:8px;font-size:13px;text-align:left}
.popover-item:hover{background:var(--surface-2)}
.popover-item.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.popover-sep{height:1px;background:var(--border);margin:6px 4px}
.notif-list{max-height:340px;overflow:auto}
.notif{display:grid;grid-template-columns:8px 1fr;gap:9px;padding:10px;border-radius:8px}
.notif:hover{background:var(--surface-2)}
.notif.unread{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.notif i{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--brand)}
.notif.read i{background:var(--subtle)}
.notif strong{font-size:12px;display:block}
.notif p{font-size:11px;color:var(--muted);margin:2px 0 0}
.notif small{font-size:10px;color:var(--subtle)}
/* the feedback-requests block that now lives above the notification list in the same dropdown */
.popover__subhead{font-size:12px;margin:6px 8px 2px;color:var(--muted);font-weight:700}
.notif-req-list{max-height:180px;overflow:auto;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.notif-req-list .req-panel__row{padding:8px 8px;margin:0}
.badge-count{position:absolute;top:4px;right:4px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;background:var(--coral);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface)}
.notif.is-important{border-left:2px solid var(--coral);padding-left:8px}
.notif__about{margin:2px 0;font-size:10px}
.notif-see-all{justify-content:center;font-size:12px;font-weight:700;color:var(--brand);border-top:1px solid var(--border);margin-top:4px;border-radius:0 0 8px 8px}

/* ---------- Notifications: login popup ---------- */
.notif-popup{max-width:480px}
.notif-popup__flag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--coral);background:var(--coral-soft);padding:3px 9px;border-radius:99px;margin-bottom:8px}
.notif-popup__single{border-left:3px solid transparent;padding-left:0}
.notif-popup__single.is-important{border-left-color:var(--coral);padding-left:14px}
.notif-popup__single h2{font-size:17px;margin:0 0 8px}
.notif-popup__body{font-size:13px;line-height:1.6;color:var(--text);max-width:65ch;white-space:pre-wrap;margin:10px 0}
.notif-popup__preview{font-size:12px;color:var(--muted);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-popup__date{color:var(--subtle);font-size:11px}
.notif-popup__list{max-height:min(50vh,420px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.notif-popup__row{border-radius:10px;padding:10px 12px;border:1px solid transparent}
.notif-popup__row.is-important{border-left:3px solid var(--coral);background:color-mix(in srgb,var(--coral) 5%,transparent)}
.notif-popup__row-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;cursor:pointer}
.notif-popup__row-head strong{font-size:13px}
.notif-popup__row-head small{flex:none;color:var(--subtle);font-size:10.5px;font-variant-numeric:tabular-nums}
.notif-popup__flag-sm{margin-left:8px;font-size:9px;color:var(--coral);background:var(--coral-soft)}

/* ---------- Multi-select field (compose page filters) ---------- */
.ms-field{min-width:0}
.ms-search{min-width:0}
.ms-search .input-icon input{width:100%}
.ms-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ms-chip{font-size:11px;padding:3px 5px 3px 10px}
.ms-backdrop{position:fixed;inset:0;z-index:69;background:transparent}
.ms-menu{max-height:220px}
.ms-option{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;font-size:12.5px;cursor:pointer}
.ms-option:hover{background:var(--surface-2)}
.field .ms-option input[type="checkbox"]{width:16px;height:16px;min-height:0;flex:none;padding:0;accent-color:var(--brand)}
.ms-option span{flex:1;min-width:0}

/* ---------- Notifications: compose flow ---------- */
.compose-flow{display:flex;flex-direction:column;gap:14px;width:100%}
.compose-step{display:flex;gap:16px;align-items:flex-start;width:100%}
.compose-step__num{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-weight:800;font-size:13px;display:grid;place-items:center;margin-top:2px;
}
.compose-step__body{flex:1;min-width:0}
.compose-step__body h3{margin:0 0 4px;font-size:15px}
.its-override-field{margin-top:12px}
.compose-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;margin-top:12px;align-items:start}
.compose-fields .field.is-wide{grid-column:1/-1}
.compose-fields.is-disabled{opacity:.55}
.char-counter{float:right;font-weight:400;color:var(--subtle);font-size:10.5px}
.chip-toggle-group{display:flex;flex-wrap:wrap;gap:6px}
.chip-toggle-group--scroll{max-height:120px;overflow-y:auto;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.chip-toggle{
  border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:99px;
  padding:5px 12px;font-size:12px;font-weight:600;line-height:1.3;
}
.chip-toggle.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.filter-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.filter-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-2);border-radius:99px;padding:4px 6px 4px 12px;font-size:11.5px;font-weight:600}
.filter-chip button{border:0;background:transparent;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 4px}
.recipient-count-hero{display:flex;align-items:baseline;gap:10px;padding:14px 0}
.recipient-count-hero strong{font-size:34px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.recipient-count-hero span{font-size:12.5px;color:var(--muted)}
.preview-grid{border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:320px;overflow-y:auto}
.preview-grid__head,.preview-grid__row{display:grid;grid-template-columns:28px 1.6fr 1fr .6fr .8fr 1.4fr;gap:8px;align-items:center;padding:8px 12px;font-size:12px}
.preview-grid__head{background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}
.preview-grid__row{border-top:1px solid var(--border)}
.compose-actions{justify-content:flex-end;padding:4px 0}
@media(max-width:720px){
  .compose-step{flex-direction:column}
  .preview-grid__head,.preview-grid__row{grid-template-columns:24px 1.4fr .8fr .6fr;font-size:11px}
  .preview-grid__head span:nth-child(5),.preview-grid__head span:nth-child(6),
  .preview-grid__row span:nth-child(5),.preview-grid__row span:nth-child(6){display:none}
  .compose-actions{flex-wrap:wrap;justify-content:stretch}
  .compose-actions .button{flex:1 1 auto}
}

/* ---------- Notifications: history page ---------- */
.notif-history-list{display:flex;flex-direction:column;gap:8px}
.notif-history-row{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);cursor:pointer;
}
.notif-history-row:hover{background:var(--surface-2)}
.notif-history-row.unread{background:color-mix(in srgb,var(--brand) 4%,var(--surface));border-color:color-mix(in srgb,var(--brand) 25%,var(--border))}
.notif-history-row.is-important{border-left:3px solid var(--coral)}
.notif-history-row__dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--subtle)}
.notif-history-row.unread .notif-history-row__dot{background:var(--brand)}
.notif-history-row__body{flex:1;min-width:0}
.notif-history-row__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notif-history-row__head strong{font-size:13.5px}
.notif-history-row.unread .notif-history-row__head strong{font-weight:800}
.notif-history-row__body p{font-size:12.5px;color:var(--muted);margin:4px 0;max-width:65ch;line-height:1.5}
.notif-history-row__body small{font-size:11px;color:var(--subtle)}

/* ---------- Mumin photo ---------- */
.mumin-photo{position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--brand-soft);color:var(--brand);font-weight:800;flex:none;line-height:1}
.mumin-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.mumin-photo .mp-fallback{display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
.mp-sm{width:30px;height:30px;font-size:10px}
.mp-md{width:44px;height:44px;font-size:13px}
.mp-lg{width:96px;height:96px;font-size:26px}
.mumin-photo.mp-zoomable{cursor:zoom-in}
.mp-lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(6,12,24,.78);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;cursor:zoom-out;
  animation:modalIn var(--normal) var(--ease);
}
.mp-lightbox__toolbar{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:5px;cursor:default;backdrop-filter:blur(6px);
}
.mp-lightbox__btn{
  width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;
  font-size:16px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;
}
.mp-lightbox__btn:hover:not(:disabled){background:rgba(255,255,255,.26)}
.mp-lightbox__btn:disabled{opacity:.35;cursor:not-allowed}
.mp-lightbox__reset,.mp-lightbox__close{width:auto;padding:0 12px;border-radius:99px;font-size:12px;font-weight:700}
.mp-lightbox__close{font-size:14px}
.mp-lightbox__pct{color:#fff;font-size:11.5px;font-weight:700;min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.mp-lightbox__viewport{
  max-width:90vw;max-height:calc(100vh - 140px);overflow:auto;border-radius:16px;box-shadow:var(--shadow-lg);
  cursor:default;line-height:0;
}
.mp-lightbox__viewport.is-zoomed{cursor:grab}
.mp-lightbox__viewport img{max-width:min(80vw,480px);max-height:70vh;display:block;object-fit:contain;cursor:zoom-in}
.mp-lightbox__viewport.is-zoomed img{cursor:zoom-out}
.mp-lightbox__name{color:#fff;font-size:14px;font-weight:700}

/* ---------- ITS picker ---------- */
.its-picker .its-selected{display:flex;align-items:center;gap:10px;border:1px solid var(--border-strong);border-radius:var(--field-radius);padding:6px 8px;background:var(--surface)}
.its-picker .its-selected>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.its-picker .its-selected strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.its-picker .its-selected small{font-size:10px;color:var(--muted)}
.its-actions{display:flex;gap:8px;flex:none}
.its-clear{color:var(--danger)}
.its-search{position:relative}
.its-menu{position:absolute;z-index:70;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;max-height:280px;overflow:auto}
.its-menu-head{display:grid;grid-template-columns:1.6fr .7fr .7fr;gap:8px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);padding:4px 8px}
.its-row{display:grid;grid-template-columns:1.6fr .7fr .7fr;gap:8px;align-items:center;width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:6px 8px;border-radius:7px;font-size:12px}
.its-row.hl,.its-row:hover{background:var(--surface-2)}
.its-row-m{display:flex;align-items:center;gap:8px;min-width:0}
.its-row-m b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.its-row em{font-style:normal;font-size:11px}
.its-row small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.its-empty{padding:16px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- Master image upload ---------- */
.img-field{display:flex;align-items:center;gap:12px}
.img-field .img-preview{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.img-field .img-preview.empty{display:grid;place-items:center;color:var(--subtle);font-size:18px}

/* ---------- Profile ---------- */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.profile-grid>.panel{display:flex;flex-direction:column}
.family-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.family-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.family-row .fam-name{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.family-row .fam-meta{font-size:11px;color:var(--muted);margin-top:1px}
.family-row .fam-contact{font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap}
.fam-tag{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:2px 6px}
.hof-list{display:flex;flex-direction:column;gap:8px}
.hof-card{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.hof-card .hof-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hof-card .hof-meta{font-size:11px;color:var(--muted)}
.hof-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.hof-add .field{flex:1 1 240px}
.hof-add textarea{min-height:52px;resize:vertical}
.hof-add>button{flex:0 0 auto}
.hof-add-search{margin:10px 0}
.hof-issues{margin:8px 0 4px;padding-left:18px;font-size:11.5px;color:var(--danger)}
.hof-issues li{margin:2px 0}

/* incharge cell (name + phone stacked) in report grids */
.ic-cell{display:flex;flex-direction:column;line-height:1.25}
.ic-cell small{color:var(--muted);font-size:10.5px}
@media(max-width:560px){.hof-add>button{flex:1 1 100%}}

/* ---------- Dashboard board (runtime + designer preview) ----------
   Same geometry as the designer's GridStack board (12 columns, 28px rows, 7px inset per side =
   14px gutter), so a dashboard renders exactly as designed. Widgets NEVER scroll: the frame is
   the widget's designed size, and jmtFit (app.js) zooms the content inside .dash-fit to fit it.
   The negative margin cancels the outer inset so content sits flush with the page. */
.dash-board{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--dash-row,28px);
  margin:calc(var(--dash-gutter,7px) * -1)
}
.dash-cell{padding:var(--dash-gutter,7px);min-width:0;min-height:0;display:flex;flex-direction:column}
.dash-cell--hidden{display:none}
.dash-frame{
  flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.dash-frame--loading{display:none}
.dash-fit{position:relative;flex:1;min-height:0;overflow:hidden}
.dash-fit__inner{position:absolute;top:0;left:0;width:100%;transform-origin:0 0}
.dash-fit[data-mode="fill"] .dash-fit__inner{inset:0;width:auto;height:100%}
/* The frame is the card — drop the chrome widgets draw for themselves. */
.dash-fit__inner>.panel,.dash-fit__inner>.tk-queue{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;margin:0}
.dash-fit__inner>.tk-queue{padding:14px 16px}
.dash-fit__inner>.tk-queue .tk-queue-head{margin-top:0}
.dash-fit[data-mode="scale"] .dash-rail__sec{height:auto}
.dash-fit[data-mode="scale"] .dash-rail__body{flex:none}
.dash-fit[data-mode="fill"] .dash-fit__inner>.panel{height:100%}
.dash-skeleton{
  flex:1;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 94%,transparent)
}
.dash-skeleton span{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:dash-shimmer 1.4s ease-in-out infinite}
.dash-skeleton span:nth-child(1){width:38%;height:14px}
.dash-skeleton span:nth-child(2){width:88%}
.dash-skeleton span:nth-child(3){width:64%}
@keyframes dash-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:820px){
  /* one column in reading order; card-type widgets grow to their content (jmtFit sets the
     height), charts and number tiles keep their designed height */
  .dash-board{display:flex;flex-direction:column;margin:0}
  .dash-cell{order:var(--order);padding:0 0 var(--dash-gutter,7px)}
  .dash-frame,.dash-fit{flex:none}
  .dash-fit[data-mode="fill"]{height:calc(var(--cell-h) - var(--dash-gutter,7px) * 2)}
  .dash-skeleton{flex:none;height:calc(var(--cell-h) - var(--dash-gutter,7px) * 2)}
  /* phone layout set in the designer: hidden on phone / fixed phone height */
  .dash-cell--m-hidden{display:none}
  .dash-cell--m-h .dash-frame{height:calc(var(--m-h) - var(--dash-gutter,7px) * 2)}
  .dash-cell--m-h .dash-fit{flex:1;min-height:0}
}
/* The designer's phone preview: same rules as the media query above, inside a narrow frame on a
   desktop screen (a media query can't see the frame's width). */
.dash-board--phone{display:flex;flex-direction:column;margin:0}
.dash-board--phone .dash-cell{order:var(--order);padding:0 0 var(--dash-gutter,7px)}
.dash-board--phone .dash-frame,.dash-board--phone .dash-fit{flex:none}
.dash-board--phone .dash-fit[data-mode="fill"]{height:calc(var(--cell-h) - var(--dash-gutter,7px) * 2)}
.dash-board--phone .dash-skeleton{flex:none;height:calc(var(--cell-h) - var(--dash-gutter,7px) * 2)}
.dash-board--phone .dash-cell--m-hidden{display:none}
.dash-board--phone .dash-cell--m-h .dash-frame{height:calc(var(--m-h) - var(--dash-gutter,7px) * 2)}
.dash-board--phone .dash-cell--m-h .dash-fit{flex:1;min-height:0}

/* ---------- Custom SQL widget ---------- */
.dash-custom{display:flex;flex-direction:column;padding:0}
.dash-custom__head{padding:14px 16px 8px;flex:none}
.dash-custom__head h3{margin:0;font-size:13px;font-weight:800;color:var(--text)}
.dash-custom__body{flex:1;min-height:0;padding:0 16px 14px;display:flex;flex-direction:column}
.dash-custom__body:has(.data-panel){padding:0}
.dash-custom__body>.data-panel{border:0;box-shadow:none;background:transparent}
.dash-custom__number{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;container-type:size;min-height:0}
.dash-custom__number strong{font-size:clamp(14px,30cqmin,72px);font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.dash-custom__number span{font-size:clamp(9px,8cqmin,14px);color:var(--muted)}
.dash-custom__chart{flex:1;min-height:0;position:relative}
.dash-custom__truncated{margin:0;padding:6px 16px;font-size:10.5px;color:var(--muted);border-top:1px solid var(--border)}

/* ---------- Dashboard designer ---------- */
.dz-toolbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:58px;
  padding:10px 12px;margin-bottom:18px;border:1px solid var(--border);border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(12px);box-shadow:var(--shadow)
}
.dz-toolbar__group{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.dz-toolbar__actions{display:flex;align-items:center;gap:8px;flex:none}

.dz-select{height:36px;border:1px solid var(--border-strong);border-radius:var(--field-radius);background:var(--surface);color:var(--text);padding:0 30px 0 10px;font-size:12.5px;font-weight:700;max-width:170px;flex:none}
.dz-name{
  height:36px;min-width:90px;flex:1 1 auto;width:auto;max-width:340px;border:1px solid transparent;text-overflow:ellipsis;border-radius:var(--field-radius);
  background:transparent;color:var(--text);font-size:15px;font-weight:800;padding:0 10px;transition:border-color .15s,background .15s
}
.dz-name:hover{border-color:var(--border)}
.dz-name:focus{outline:0;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.dz-badge{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;background:var(--brand-soft);color:var(--brand)}
.dz-dirty{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;font-size:11.5px;font-weight:700;color:var(--warning)}
.dz-dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warning)}
.dz-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-3);border:1px solid var(--border)}
.dz-seg button{height:30px;border:0;border-radius:8px;background:transparent;padding:0 12px;font-size:12px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.dz-seg button.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(18,59,93,.12)}
.dz-btn{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:var(--field-radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.dz-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.dz-btn:disabled{opacity:.5;cursor:not-allowed}
.dz-btn--primary{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.dz-btn--primary:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.dz-btn--icon{width:36px;padding:0;justify-content:center}
.dz-menu{position:relative}
.dz-menu__list{
  position:absolute;right:0;top:calc(100% + 6px);min-width:200px;z-index:40;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column
}
.dz-menu__list button{height:34px;border:0;background:transparent;text-align:left;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text)}
.dz-menu__list button:hover:not(:disabled){background:var(--surface-2)}
.dz-menu__list button:disabled{opacity:.45}
.dz-menu__list .is-danger{color:var(--danger)}
.dz-menu__list hr{border:0;border-top:1px solid var(--border);margin:4px 2px}

/* The canvas is the real dashboard width — nothing sits beside it. */
.dz-canvas{position:relative}
.dz-board{
  margin:-7px;min-height:672px;border-radius:14px;
  background-color:color-mix(in srgb,var(--surface) 40%,transparent);
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--brand) 9%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--brand) 6%,transparent) 1px,transparent 1px);
  background-size:calc(100% / 12) 28px;
  outline:1px dashed color-mix(in srgb,var(--brand) 30%,transparent);outline-offset:-1px
}
.dz-empty{
  position:absolute;inset:60px 0 auto;margin:auto;max-width:360px;text-align:center;padding:28px;z-index:2;
  border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)
}
.dz-empty h3{margin:10px 0 4px;font-size:15px}
.dz-empty p{margin:0 0 16px;color:var(--muted);font-size:12.5px}
.dz-empty__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin:0 auto;background:var(--brand-soft);color:var(--brand)}

.dz-card{
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;cursor:grab;
  border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s
}
.dz-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border))}
.grid-stack-item.is-selected .dz-card{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent),var(--shadow)}
.ui-draggable-dragging .dz-card{cursor:grabbing;box-shadow:var(--shadow-lg)}
.dz-card__head{display:flex;align-items:center;gap:9px;padding:10px 11px;flex:none;min-width:0}
.dz-card__icon{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.dz-card__titles{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dz-card__titles b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-card__titles small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dz-card__pin{display:none;margin-left:auto;flex:none;width:22px;height:22px;border-radius:6px;place-items:center;background:var(--warning-soft);color:var(--warning)}
.grid-stack-item.is-pinned .dz-card__pin{display:grid}
.dz-card__body{flex:1;min-height:0;padding:2px 12px 12px;display:flex}
.dz-card__tools{
  position:absolute;top:8px;right:8px;display:flex;gap:4px;padding:3px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s
}
.dz-card:hover .dz-card__tools,.grid-stack-item.is-selected .dz-card__tools{opacity:1;transform:none}
.dz-card__tools button{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.dz-card__tools button:hover{background:var(--surface-2);color:var(--brand)}
.dz-card__tools button.is-danger:hover{background:var(--danger-soft);color:var(--danger)}
.grid-stack-item.is-pinned .dz-card__tools [data-action="pin"]{color:var(--warning)}

/* Placeholder "sketch" of each widget type inside its designer card */
.dz-mock{flex:1;min-height:0;border-radius:8px;background:var(--surface-2);overflow:hidden;display:flex;padding:10px;gap:8px}
.dz-mock i{display:block;border-radius:4px;background:color-mix(in srgb,var(--brand) 22%,var(--surface-3))}
.dz-mock--list,.dz-mock--info{flex-direction:column}
.dz-mock--list i{height:18px;border-radius:6px}
.dz-mock--info i{height:8px}
.dz-mock--info i:nth-child(1){width:55%}.dz-mock--info i:nth-child(2){width:85%}.dz-mock--info i:nth-child(3){width:70%}
.dz-mock--grid{flex-direction:column;gap:5px}
.dz-mock--grid i{height:9px}
.dz-mock--grid i:first-child{background:color-mix(in srgb,var(--brand) 40%,var(--surface-3))}
.dz-mock--bar{align-items:flex-end;padding-bottom:6px}
.dz-mock--bar i{flex:1;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--brand) 50%,var(--surface-3))}
.dz-mock--line svg{width:100%;height:100%}
.dz-mock--line polyline{fill:none;stroke:var(--brand);stroke-width:2.5;vector-effect:non-scaling-stroke}
.dz-mock--pie{align-items:center;justify-content:center}
.dz-mock--pie i{height:min(80%,70px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--brand) 0 38%,var(--coral) 0 62%,var(--success) 0 84%,var(--violet) 0)}
.dz-mock--number{flex-direction:column;align-items:center;justify-content:center;gap:6px}
.dz-mock--number b{font-size:22px;color:var(--text);font-variant-numeric:tabular-nums}
.dz-mock--number span{width:40%;height:6px;border-radius:3px;background:var(--surface-3)}

.grid-stack>.grid-stack-placeholder>.placeholder-content{background:color-mix(in srgb,var(--brand) 10%,transparent);border:2px dashed color-mix(in srgb,var(--brand) 60%,transparent);border-radius:12px}
.grid-stack-item>.ui-resizable-se{width:18px;height:18px;right:8px!important;bottom:8px!important}

/* Widget library (pop-up) */
.dz-library{width:min(820px,calc(100vw - 32px));max-height:min(80vh,720px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.dz-library__head{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.dz-library__head h2{margin:0 0 3px;font-size:17px}
.dz-library__head p{margin:0 0 12px;color:var(--muted);font-size:12.5px}
.dz-library__filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dz-search{flex:1;min-width:200px;height:36px;border:1px solid var(--border-strong);border-radius:var(--field-radius);padding:0 12px;font-size:13px;background:var(--surface);color:var(--text)}
.dz-search:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.dz-chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.dz-chip.is-active{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.dz-library__grid{padding:16px 20px 20px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.dz-tile{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.dz-tile:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border));box-shadow:var(--shadow)}
.dz-tile__top{display:flex;align-items:center;gap:10px}
.dz-tile__top b{font-size:13px}
.dz-tile__top small{display:block;font-size:10.5px;color:var(--muted)}
.dz-tile p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45;flex:1}
.dz-tile__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dz-tile__foot small{font-size:10.5px;color:var(--subtle);font-variant-numeric:tabular-nums}
.dz-tile__added{font-size:11.5px;font-weight:700;color:var(--success);display:inline-flex;align-items:center;gap:5px}
.dz-library__empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:12.5px}

/* Settings drawer */
.dz-drawer{
  position:fixed;top:calc(var(--topbar-h,64px) + 84px);right:18px;bottom:16px;width:min(340px,calc(100vw - 24px));z-index:50;
  display:flex;flex-direction:column;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  animation:dz-slide .18s ease-out
}
@keyframes dz-slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.dz-drawer__head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--border)}
.dz-drawer__head h3{margin:0;font-size:14px;line-height:1.3}
.dz-drawer__head small{display:block;color:var(--muted);font-size:11px;font-weight:600}
.dz-drawer__body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:20px}
.dz-drawer__foot{padding:12px 16px;border-top:1px solid var(--border)}
.dz-section>h4{margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dz-section>.hint{display:block;margin-top:6px;font-size:11px;color:var(--muted);line-height:1.45}
.dz-size{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dz-stepper{display:flex;flex-direction:column;gap:5px}
.dz-stepper label{font-size:11.5px;font-weight:700}
.dz-stepper__row{display:flex;height:36px;border:1px solid var(--border-strong);border-radius:var(--field-radius);overflow:hidden;background:var(--surface)}
.dz-stepper__row button{width:32px;border:0;background:var(--surface-2);color:var(--text);font-size:15px;font-weight:700;cursor:pointer}
.dz-stepper__row button:hover:not(:disabled){background:var(--brand-soft);color:var(--brand)}
.dz-stepper__row button:disabled{opacity:.4;cursor:not-allowed}
.dz-stepper__row input{flex:1;min-width:0;border:0;text-align:center;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;background:transparent;color:var(--text)}
.dz-stepper small{font-size:10.5px;color:var(--muted)}
.dz-choice{display:flex;flex-direction:column;gap:8px}
.dz-choice label{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.dz-choice label:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.dz-choice label.is-active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.dz-choice input{margin-top:2px;accent-color:var(--brand)}
.dz-choice b{display:block;font-size:12.5px}
.dz-choice span{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.dz-drawer .field input{height:36px}

/* Preview frame + role list + misc */
.dz-preview-note{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:12px;color:var(--muted)}
.dz-preview-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 20%,transparent)}
/* designer: Phone mode */
.dz-phone{display:grid;grid-template-columns:minmax(0,1fr) 414px;gap:20px;align-items:start}
.dz-phone__list{display:flex;flex-direction:column;gap:6px;min-width:0}
.dz-phone__head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.dz-phone__head h3{margin:0 0 2px;font-size:15px}
.dz-phone__head p{margin:0;font-size:12px;color:var(--muted);max-width:60ch}
.dz-phone__row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:grab}
.dz-phone__row.is-hidden{opacity:.55}
.dz-phone__row.is-dragging{outline:2px dashed var(--brand)}
.dz-phone__grip{color:var(--muted);letter-spacing:-3px;user-select:none}
.dz-phone__num{width:22px;text-align:center;font-weight:600;font-size:12px;color:var(--muted)}
.dz-phone__name{flex:1;min-width:0}
.dz-phone__name strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-phone__ctrls{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:3px;font-size:12px;color:var(--muted)}
.dz-phone__ctrls label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.dz-phone__ctrls input[type=number]{width:64px;padding:2px 6px;font-size:12px}
.dz-phone__move{display:flex;gap:4px}
.dz-phone__device{position:sticky;top:12px}
.dz-phone__frame{width:390px;height:calc(100vh - 190px);min-height:420px;overflow-y:auto;overflow-x:hidden;margin:0 auto;padding:10px;border:10px solid #1f2430;border-radius:32px;background:var(--bg)}
.dz-roles{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:50vh;overflow:auto}
.dz-roles label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.dz-roles label.is-active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.dz-roles input{accent-color:var(--brand)}
.dz-roles b{font-size:12.5px}
.dz-roles small{margin-left:auto;font-size:11px;color:var(--muted)}
.dz-narrow{max-width:420px;margin:40px auto;text-align:center}
@media(prefers-reduced-motion:reduce){.dz-drawer,.dz-card,.dz-card__tools{animation:none;transition:none}}

/* ---------- Custom SQL widget editor's raw test preview ---------- */
.plain-table{width:100%;border-collapse:collapse;font-size:11.5px}
.plain-table th,.plain-table td{padding:5px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.plain-table th{font-weight:800;color:var(--muted);position:sticky;top:0;background:var(--surface-2)}

/* ---------- Takhmeen — dashboard response queue ---------- */
.tk-queue{margin-bottom:18px}
.tk-queue-head{margin:2px 0 16px}
.tk-queue-head h2{font-size:17px;line-height:1.25;margin:0;color:var(--text)}
.tk-queue-head p{font-size:12.5px;color:var(--muted);margin:4px 0 0}

.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tk-card-min,284px),100%),1fr));gap:14px}
.tk-grid--compact{gap:8px}
.tk-grid--compact .tk-item{padding:10px 12px;gap:5px;border-radius:10px}
.tk-grid--compact .tk-item__name{font-size:13px}
.tk-grid--compact .tk-item__foot{padding-top:4px}
.tk-grid--compact .tk-item__foot .button.primary{height:32px}
@media(max-width:560px){.tk-grid:not([style*="--tk-card-min"]){grid-template-columns:1fr}}

.tk-item{
  --accent:var(--brand);
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:16px 16px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(18,59,93,.05),0 10px 24px -14px rgba(18,59,93,.16);
  animation:tkIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms);
}
@keyframes tkIn{from{opacity:0;transform:translateY(10px);filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){.tk-item{animation:none}}

.tk-item.is-partial{--accent:var(--warning)}
/* answered — a full card, just tinted so it reads as done at a glance */
.tk-item.is-done{
  --accent:var(--success);
  background:color-mix(in srgb,var(--success) 5%,var(--surface));
  border-color:color-mix(in srgb,var(--success) 22%,var(--border));
}
.tk-item.is-locked{
  --accent:var(--subtle);
  background:color-mix(in srgb,var(--subtle) 6%,var(--surface));
}
.tk-item.is-viewonly{
  --accent:var(--warning);
  background:color-mix(in srgb,var(--warning) 5%,var(--surface));
  border-color:color-mix(in srgb,var(--warning) 22%,var(--border));
}
.tk-item.is-urgent{
  --accent:var(--coral);
  border-color:color-mix(in srgb,var(--coral) 45%,var(--border));
  box-shadow:0 1px 2px rgba(18,59,93,.05),0 14px 30px -14px color-mix(in srgb,var(--coral) 55%,transparent);
}

.tk-item__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tk-item__mark{
  width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));
}
.tk-item.is-done .tk-item__mark,.tk-item.is-locked .tk-item__mark{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}

.tk-item__due{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  padding:3px 8px 3px 6px;border-radius:999px;
  color:var(--muted);background:var(--surface-3);
}
.tk-item__due svg{opacity:.85}
.tk-due--now{color:var(--coral);background:var(--coral-soft)}
.tk-due--soon{color:var(--warning);background:var(--warning-soft)}
.tk-due--week{color:var(--brand-2);background:var(--brand-soft)}
.tk-due--far{color:var(--muted);background:var(--surface-3)}
.tk-due--done{color:var(--success);background:var(--success-soft)}

.tk-item__name{font-size:14.5px;font-weight:700;line-height:1.3;margin:1px 0 0;letter-spacing:-.01em;color:var(--text)}
.tk-item__desc{font-size:12px;line-height:1.45;color:var(--muted);margin:0}
.tk-item__answer{
  display:inline-block;font-weight:800;color:var(--success);
  background:var(--surface);border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
  border-radius:6px;padding:1px 8px;margin-left:4px;
}
.tk-item__answer.is-num{font-variant-numeric:tabular-nums}

.tk-item__progress{display:flex;align-items:center;gap:9px;margin-top:1px}
.tk-item__bar{flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.tk-item__fill{display:block;height:100%;width:100%;transform-origin:left;border-radius:99px;background:var(--accent);transition:transform var(--normal) var(--ease)}
.tk-item__count{font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-item__count span{color:var(--text);opacity:.7;font-weight:700}

.tk-item__foot{margin-top:auto;padding-top:10px;display:flex;gap:8px;align-items:center}
.tk-item__cta{width:100%;height:38px;border-radius:10px}
.tk-item.is-urgent .tk-item__cta{background:var(--coral);border-color:var(--coral);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--coral) 60%,transparent)}
.tk-item.is-urgent .tk-item__cta:hover{background:color-mix(in srgb,var(--coral) 88%,#000)}
.tk-item__quick{flex:1;height:38px}
.tk-item__foot .button.primary{height:38px}
.tk-item__link{
  cursor:pointer;height:34px;padding:0 13px;border-radius:9px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.tk-item__link:hover{background:color-mix(in srgb,var(--accent) 17%,var(--surface))}
.tk-item__link svg{transition:transform var(--fast) var(--ease)}
.tk-item__link:hover svg{transform:translateX(2px)}

/* all-clear state */
.tk-clear{
  text-align:center;padding:52px 24px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
}
.tk-clear__icon{
  width:46px;height:46px;margin:0 auto 14px;border-radius:14px;display:grid;place-items:center;
  color:var(--success);background:var(--success-soft);
}
.tk-clear h2{font-size:16px;color:var(--text);margin:0 0 5px}
.tk-clear p{font-size:12.5px;color:var(--muted);margin:0;max-width:38ch;margin-inline:auto}

.tk-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.tk-crumb strong{font-size:14px}

/* ---- event registration ------------------------------------------------
   One card language for the whole screen: the household takhmeen and every
   member sit in the same shell, so the page reads as a single stack rather
   than a panel plus a list. Held to a document width — a two-person family
   across 1400px of screen is mostly empty space.                          */
.reg-page{max-width:900px;margin-inline:auto}
.reg-list{display:flex;flex-direction:column;gap:8px}
.reg-card{
  border:1px solid var(--border);border-left:3px solid transparent;border-radius:12px;background:var(--surface);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.reg-card:hover{background:var(--surface-2)}
/* a solid brand-coloured left edge reads as "selected" at a glance, the same accent-stripe
   language the Laagat tiles use, rather than relying on a faint background tint alone */
.reg-card.is-on{background:color-mix(in srgb,var(--brand) 5%,var(--surface));border-color:color-mix(in srgb,var(--brand) 30%,var(--border));border-left-color:var(--brand)}
.reg-card.is-on:hover{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.reg-card.is-blocked{background:var(--surface)}
.reg-card.has-issue{border-color:color-mix(in srgb,var(--coral) 45%,var(--border))}

/* the takhmeen card — same shell, marked out by tint rather than a new shape */
.reg-card--tk{background:var(--surface-2)}
.reg-card--tk:hover{background:var(--surface-2)}
.reg-card--tk .reg-card__head{cursor:default}
.reg-card--tk .reg-card__lead{color:var(--muted)}
.reg-card--tk.is-locked{background:color-mix(in srgb,var(--success) 5%,var(--surface));border-color:color-mix(in srgb,var(--success) 22%,var(--border))}
.reg-card--tk.is-locked .reg-card__lead{color:var(--success)}
.reg-card--tk.is-blocked{background:color-mix(in srgb,var(--coral) 5%,var(--surface));border-color:color-mix(in srgb,var(--coral) 24%,var(--border))}
.reg-card--tk.is-blocked .reg-card__lead{color:var(--coral)}

.reg-card__head{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:44px;padding:12px 14px;cursor:pointer;
}
.reg-card.is-blocked .reg-card__head{cursor:default}
.reg-card__check,
.reg-card__lead{display:flex;align-items:center;justify-content:center;width:20px}
.reg-card__check input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.reg-card__who{display:flex;align-items:center;gap:10px;min-width:0}
.reg-card__who .mumin-photo{flex:0 0 auto}
.reg-card__id{min-width:0}
.reg-card__name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* display:block — text-overflow is ignored on an inline box, so the meta would overflow the card */
.reg-card__meta{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg-card__head .status-pill{flex:0 0 auto}
/* the status pill sits in the head, always visible even while the card's own detail section
   (options/remarks/rahat) is collapsed — a cancelled or unselected person should never look
   indistinguishable from someone never registered at all */
.reg-card__badges{display:flex;align-items:center;gap:6px;flex:0 0 auto}

/* the seat assignment — set later by a separate module — gets its own full-width, high-contrast
   strip rather than a small tag lost among the other badges, since it's the one thing on this
   whole screen a person actually needs to remember on the day */
.reg-card__seat-strip{
  display:flex;align-items:center;gap:10px;margin:0 14px 10px;padding:9px 14px;border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--surface)),color-mix(in srgb,var(--brand) 5%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
}
.reg-card__seat-strip__icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--surface);color:var(--brand)}
.reg-card__seat-strip__cat{font-size:12.5px;font-weight:700;color:var(--brand-2);white-space:nowrap}
.reg-card__seat-strip__no{font-size:22px;font-weight:800;letter-spacing:.01em;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.reg-card__seat-strip__label{margin-left:auto;flex:none;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-2);opacity:.7;white-space:nowrap}
@media(max-width:480px){.reg-card__seat-strip{margin:0 10px 10px}}

.reg-card__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--normal) var(--ease)}
.reg-card.is-on .reg-card__detail{grid-template-rows:1fr}
.reg-card__detail-inner{overflow:hidden}
.reg-card__body,
.reg-card__fields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 12px;
  padding:12px 14px 14px;border-top:1px solid var(--border);
}
.reg-card__body .reg-card__fields{padding:0;border-top:0;grid-column:1/-1}
.reg-card__fields .field{margin:0;min-width:0}
.reg-card__fields .field.is-wide{grid-column:1/-1}
/* every control in a card is the same height, so the columns line up */
.reg-card__fields select,
.reg-card__fields input:not([type="checkbox"]),
.switch-field{height:36px}
/* Remarks + Rahat always pair the same way — Remarks wide on the left, Rahat sized to its own
   content on the right — regardless of how many optional fields (Option, Takhmeen, Building…)
   came before them; grouped and forced onto their own row (is-wide) so that pairing never
   depends on how many columns happened to be free at that point in the grid. */
.reg-card__inline-pair{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.reg-card__inline-pair .switch-field{width:fit-content}
@media(max-width:480px){.reg-card__inline-pair{grid-template-columns:1fr}}
.reg-card__issue{grid-column:1/-1;font-size:11.5px;color:var(--coral);margin:0}
/* a staff-entered remark on this person's own registration, surfaced read-only */
.admin-note{
  padding:9px 11px;border-radius:9px;background:var(--warning-soft);
  border:1px solid color-mix(in srgb,var(--warning) 30%,var(--border));
}
.admin-note b{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--warning)}
.admin-note span{font-size:12.5px;color:var(--text)}
.reg-card__blocked-msg{grid-column:1/-1;font-size:12.5px;color:var(--coral);margin:0}
.reg-card__body>.button{justify-self:start}
/* a blocked member card carries its reason under the header, aligned with the name */
.reg-card.is-blocked>.reg-card__blocked-msg{padding:0 14px 12px 44px}

/* toggle switch (Rahat) — worn as a control box so it matches the inputs beside it */
.switch-field{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.switch-field.is-on{background:color-mix(in srgb,var(--brand) 7%,var(--surface));border-color:color-mix(in srgb,var(--brand) 32%,var(--border))}
.switch-field__state{font-size:12.5px;font-weight:600;color:var(--muted)}
.switch-field.is-on .switch-field__state{color:var(--brand)}
.switch{position:relative;display:inline-flex;flex:0 0 auto;width:44px;height:24px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch__track{
  position:absolute;inset:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.switch__thumb{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--fast) var(--ease);
}
.switch input:checked~.switch__track{background:var(--brand);border-color:var(--brand)}
.switch input:checked~.switch__thumb{transform:translateX(20px)}
.switch input:focus-visible~.switch__track{outline:2px solid var(--brand);outline-offset:2px}

/* sits after the list, in flow — a floating bar covered the last card's controls */
.reg-foot{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);
}
.reg-foot__left{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.reg-foot__cancel{color:var(--danger);font-weight:600}
.reg-foot__issues{
  color:var(--coral);font-weight:600;background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;
  text-decoration:underline;text-underline-offset:2px;
}
@media(max-width:480px){.reg-foot{justify-content:stretch}.reg-foot>button{flex:1 1 100%}}
@media(max-width:640px){.reg-card__body,.reg-card__fields{grid-template-columns:1fr}}

.mehman-panel{margin-top:16px}
.mehman-list{display:flex;flex-direction:column}
.mehman-row{
  display:grid;grid-template-columns:130px 1fr 90px 100px auto 1fr auto;gap:10px;align-items:end;
  padding:12px 0;border-top:1px solid var(--border);
}
.mehman-row:first-child{border-top:0;padding-top:4px}
.mehman-row .field{margin:0;min-width:0}
.mehman-row__remove{white-space:nowrap;align-self:center}
@media(max-width:720px){.mehman-row{grid-template-columns:1fr 1fr}.mehman-row__remove{grid-column:1/-1;justify-self:start}}

.mehman-row__seat{
  display:flex;align-items:center;gap:8px;margin:-6px 0 10px;padding:6px 12px;border-radius:8px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,var(--surface)),color-mix(in srgb,var(--brand) 5%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  font-size:11.5px;font-weight:700;color:var(--brand-2);
}
.mehman-row__seat-no{font-weight:800;color:var(--brand)}

.tk-subjects{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tk-subject{border:1px solid var(--border);border-radius:11px;padding:12px;background:var(--surface-2)}
.tk-subject-head{display:flex;align-items:center;gap:10px}
.tk-subject-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tk-subject-meta{font-size:11px;color:var(--muted)}
.tk-subject-head .status-pill{margin-left:auto}
.tk-subject-fields{margin-top:10px;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.tk-subject-fields{grid-template-columns:1fr!important}}

.tk-metrics{margin-bottom:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tk-metrics .metric-card{min-height:104px;padding:14px 16px}
.tk-metrics .metric-card>strong{font-size:26px;margin:5px 0 2px}
@media(max-width:820px){.tk-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tk-metrics{grid-template-columns:1fr}}
.profile-id{text-align:center}
.profile-id .mumin-photo{margin:0 auto 12px}
.profile-id h2{font-size:17px;margin:0}
.profile-id .p-its{font-size:12px;color:var(--muted)}
.p-hof{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:6px}
.p-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.p-row dt{color:var(--muted);font-size:11px}
.p-row dd{margin:0;font-weight:600}
.p-incharge{display:flex;align-items:center;gap:6px;font-weight:500;flex-wrap:wrap}
.p-row-extra{display:flex;flex-direction:column;gap:4px;align-items:flex-start;margin-top:4px;font-weight:400;font-size:11px}
.p-row-link{font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);padding:0;cursor:zoom-in}
.p-row-link:hover{text-decoration-color:var(--brand)}
.p-incharge .p-role{color:var(--muted);font-weight:600}
/* name + number share the row's colour; gents and ladies differ */
.p-incharge--gents .p-name,.p-incharge--gents .p-phone{color:var(--brand)}
.p-incharge--ladies .p-name,.p-incharge--ladies .p-phone{color:var(--coral)}
.p-incharge .p-name{font-weight:700}
.p-phone{font-weight:700;white-space:nowrap;text-decoration:none}
.p-phone:before{content:"·";margin-right:5px;color:var(--subtle)}
@media(max-width:820px){.profile-grid{grid-template-columns:1fr}}

/* ---------- misc helpers / grid thumbnails ---------- */
.text-muted{color:var(--muted)}
.grid-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--border);display:block}
.grid-thumb.empty{display:grid;place-items:center;color:var(--subtle);font-size:16px;background:var(--surface-2,transparent)}

/* ---------- Data grid (reusable) ---------- */
.dg-toolbar{display:flex;align-items:center;gap:8px;padding:14px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
/* table.grid td (line ~249) sets padding at specificity (0,1,2); a bare ".dg-density-X td" is only
   (0,1,1) and silently loses to it regardless of source order, so compact/spacious never took effect
   (comfortable "worked" only because 11px happens to match the base rule). Qualifying with
   "table.grid" pushes these to (0,2,2), which wins. */
table.grid.dg-density-comfortable td{padding:11px 12px}
table.grid.dg-density-compact td{padding:6px 12px}
table.grid.dg-density-spacious td{padding:16px 12px}
.dg-colmenu{max-height:260px;overflow:auto}
.dg-range{display:flex;gap:6px;align-items:center}
.dg-range input{width:100%}
.dg-th-sort{opacity:.4;margin-left:4px}
.dg-th-sort.on{opacity:1;color:var(--brand)}

/* Excel-style per-column header filtering */
table.grid th .th-inner{display:flex;align-items:center;gap:6px}
table.grid th .th-label{flex:1}
.dg-fbtn{border:0;background:transparent;color:var(--subtle);padding:2px;border-radius:5px;line-height:1;cursor:pointer;display:inline-flex}
.dg-fbtn:hover{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.dg-fbtn.on{color:var(--brand)}
.dg-hpop-scrim{position:fixed;inset:0;z-index:75}
.table-wrap.of-visible{overflow:visible}
table.grid th .th-inner .dg-fbtn{font-size:9px}
.dg-hpop{position:absolute;z-index:76;top:calc(100% - 2px);left:0;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:10px;display:flex;flex-direction:column;gap:8px;text-transform:none;letter-spacing:normal}
.dg-hpop.right{left:auto;right:0}
.dg-hpop label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dg-hpop input{width:100%;height:32px;border:1px solid var(--border-strong);border-radius:7px;background:var(--surface);color:var(--text);padding:0 9px;font-size:12px;font-weight:500}
.dg-hpop input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.dg-hpop .dg-hpop-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dg-hpop .dg-hpop-actions button{border:0;background:transparent;font-size:11px;font-weight:700;color:var(--brand);cursor:pointer;padding:4px 2px}
.dg-hpop .dg-hpop-actions .clr{color:var(--muted)}
/* value-list filter (spreadsheet style) */
.dg-hpop--values{width:270px;max-width:calc(100vw - 16px)}
/* floats above the page; jmtPop.place (app.js) sets top/left/max-height, then shows it */
.dg-hpop--float{position:fixed;top:0;left:0;z-index:260;visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
/* while a filter is open: the panel's backdrop blur would trap the fixed dropdown inside it */
.data-panel.dg-pop-open{backdrop-filter:none}
.dg-pop-open .dg-hpop-scrim{z-index:250}
.dg-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dg-range>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.dg-vlist{max-height:240px;overflow-y:auto;margin:0 -4px;padding:2px 4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dg-vopt{display:flex !important;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer;font-size:12.5px !important;font-weight:500 !important;color:var(--text) !important;text-transform:none !important;letter-spacing:normal !important}
.dg-vopt:hover{background:var(--surface-2)}
.dg-vopt input{width:15px !important;height:15px !important;flex:none;margin:0;accent-color:var(--brand)}
.dg-vopt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-vopt small{flex:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dg-vopt--all{font-weight:700 !important}
.dg-vblank{font-style:italic;color:var(--muted)}
.dg-vmore{margin:6px 4px;font-size:11.5px;color:var(--muted)}

/* Modern select + inline filter bar (used by reports) */
.select-modern{-webkit-appearance:none;appearance:none;height:38px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--text);padding:0 32px 0 12px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236b7785' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.select-modern:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.select-modern:disabled{opacity:.5;cursor:not-allowed}
.seg-filters{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-end;padding:14px;border-bottom:1px solid var(--border);overflow-x:auto}
.seg-filters .seg-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.seg-filters .seg-field>span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.seg-filters .seg-field .select-modern{min-width:150px}
.seg-filters .seg-toggle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;white-space:nowrap;height:38px}
.seg-filters .seg-spacer{flex:1}
@media(max-width:820px){.seg-filters{flex-wrap:wrap;overflow-x:visible}.seg-filters .seg-field{flex:1 1 140px}}
.notif-history-search{flex:0 1 260px}
@media(max-width:820px){.notif-history-search{flex:1 1 100%}}

/* Cascading Sector -> Sub-sector -> Building picker */
.hierarchy-picker{display:flex;flex-direction:column;gap:12px}
.hierarchy-picker.horizontal{flex-direction:row;flex-wrap:wrap}
.hierarchy-picker.horizontal .field{flex:1 1 180px}
.hierarchy-picker .field .select-modern{width:100%}
@media(max-width:640px){.hierarchy-picker.horizontal{flex-direction:column}.hierarchy-picker.horizontal .field{flex:none}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  /* Mobile is always the left menu — a fixed rail, with the drawer sliding over content. */
  .hide-mobile{display:none!important}
  .top-nav{display:none!important}
  .app-shell{display:block;padding-left:56px}
  :root[data-menupos="top"] .sidebar{display:flex!important}
  .sidebar{
    display:flex;position:fixed;inset:0 auto 0 0;
    flex-basis:56px;width:56px;
    padding:14px 7px;overflow:visible;z-index:60;
    transition:width var(--normal) var(--ease),flex-basis var(--normal) var(--ease)
  }
  .sidebar .brand,
  .sidebar .nav-cat-label,
  .sidebar .nav-cat-chev,
  .sidebar-foot>div{max-width:0;opacity:0;pointer-events:none}
  .sidebar .nav-cat-body{display:none}
  .sidebar-top{justify-content:center;padding:0 0 12px}
  .sidebar .nav-cat{justify-content:center;padding:11px 0;gap:0}
  .sidebar-foot{justify-content:center}
  .side-nav{overflow-y:auto;overflow-x:hidden;gap:4px}

  .sidebar.open{
    width:var(--sidebar-w);flex-basis:var(--sidebar-w);
    padding:14px 12px;box-shadow:var(--shadow-lg);overflow-y:auto
  }
  .sidebar.open .brand,
  .sidebar.open .nav-cat-label,
  .sidebar.open .nav-cat-chev{max-width:200px;opacity:1;pointer-events:auto}
  .sidebar.open .sidebar-foot>div{max-width:160px;opacity:1;pointer-events:auto}
  .sidebar.open .nav-cat-body{display:flex}
  :root[data-menustyle="thumb"] .sidebar:not(.open) .nav-cat-body{display:none}
  :root[data-menustyle="thumb"] .sidebar.open .nav-cat-body{display:grid}
  .sidebar.open .sidebar-top{justify-content:flex-start;padding:0 4px 14px}
  .sidebar.open .nav-cat{justify-content:flex-start;padding:10px 11px;gap:11px}
  .sidebar.open .sidebar-foot{justify-content:flex-start}

  .main-shell{width:100%;height:100vh;height:100dvh}
  .nav-item{min-height:var(--control-touch);padding-top:9px;padding-bottom:9px}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(8,15,25,.42);z-index:55}
  .topbar{padding:0 12px}
  .workspace{padding:12px 12px 28px}
  .profile-chip>span:nth-child(2){display:none}
  .modal{width:calc(100vw - 28px)}
  .form-grid{grid-template-columns:1fr!important}
  .field-span2{grid-column:1/-1!important}
}
@media(max-width:560px){
  .metric-grid,.form-grid{grid-template-columns:1fr}
  .field input,.field select,.field textarea{min-height:var(--control-touch)}
  .button{height:var(--control-touch)}
}
/* ---------- Thaali module ---------- */

/* segmented button switch — Morning/Evening, Card/Grid, etc. */
.seg-switch{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;height:38px}
.seg-switch button{
  border:0;background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;padding:0 14px;cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.seg-switch button+button{border-left:1px solid var(--border)}
.seg-switch button.is-active{background:var(--brand);color:#fff}
.seg-switch button:not(.is-active):hover{background:var(--surface-2)}

.star-cell{display:inline-flex;align-items:baseline;gap:4px;color:var(--warning);font-weight:700;font-size:12.5px}
.star-cell small{color:var(--muted);font-weight:500}

/* ---------- date field ---------- */
.date-field{display:flex;flex-direction:column;gap:5px}
.date-field__label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.date-field__row{display:flex;align-items:stretch;gap:6px}
.date-field__step{
  width:38px;height:44px;flex:0 0 auto;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background var(--fast) var(--ease);
}
.date-field__step:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.date-field__step:disabled{opacity:.4;cursor:not-allowed}
.date-field__trigger{
  position:relative;height:44px;flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 14px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.date-field__trigger:hover:not(:disabled){background:var(--surface-2)}
.date-field__trigger:disabled{opacity:.6;cursor:not-allowed}
.date-field__icon{flex:0 0 auto;color:var(--brand)}
.date-field__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-field__today{
  flex:0 0 auto;margin-left:auto;font-size:10.5px;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-radius:999px;padding:2px 8px;
}
.date-field__native{position:absolute;inset:0;opacity:0;pointer-events:none;width:1px;height:1px}

.date-range{display:flex;align-items:flex-end;gap:16px;flex-wrap:nowrap;flex:1;min-width:0}
.date-range__fields{display:flex;align-items:flex-end;gap:10px;flex-wrap:nowrap;min-width:0}
.date-range__fields .date-field{flex:1 1 170px;min-width:0}
.date-range__dash{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:8px;color:var(--muted);flex:0 0 auto;
}
.date-range__dash svg{color:var(--border)}
.date-range__dash b{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--brand);white-space:nowrap}
.date-range__presets{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto;padding-bottom:1px}
.chip{
  flex:0 0 auto;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.chip:hover{background:var(--surface-2);color:var(--text)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip--stat{cursor:default;color:var(--text)}
.chip--stat b{color:var(--brand);font-weight:800;margin-left:3px}
@media(max-width:820px){
  .date-range{flex-direction:column;align-items:stretch;gap:10px;flex-wrap:wrap}
  .date-range__fields{flex-direction:column;align-items:stretch;flex-wrap:wrap}
  .date-range__fields .date-field{flex:none;min-width:0}
  .date-range__dash{flex-direction:row;justify-content:center;padding:0}
}

/* ---------- search select ---------- */
.ssel{position:relative}
.ssel__box{position:relative;display:flex;align-items:center}
.ssel__input{
  width:100%;height:44px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  padding:0 34px 0 12px;font-size:13px;color:var(--text);
}
.ssel__input:focus{outline:2px solid var(--brand);outline-offset:1px}
.ssel.is-disabled .ssel__input{opacity:.55;cursor:not-allowed}
.ssel__clear{
  position:absolute;right:8px;width:26px;height:26px;border:0;background:none;color:var(--muted);
  cursor:pointer;border-radius:50%;display:grid;place-items:center;font-size:12px;
}
.ssel__clear:hover{background:var(--surface-2);color:var(--text)}
.ssel__list{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:50vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:4px;
}
.ssel__opt{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  border-radius:7px;cursor:pointer;font-size:13px;
}
.ssel__opt.is-active{background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.ssel__opt.is-selected{font-weight:700}
.ssel__opt-text mark{background:color-mix(in srgb,var(--warning) 35%,transparent);color:inherit;border-radius:2px;padding:0 1px}
.ssel__opt-meta{flex:0 0 auto;color:var(--warning);font-size:11.5px;font-weight:700}
.ssel__empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---------- Menu Entry ---------- */
.menu-entry-head{padding:14px 16px;margin-bottom:14px}
.menu-entry-head__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.menu-entry-head__row .date-field{flex:0 0 auto;min-width:220px}
.seg-switch--meal button{display:flex;align-items:center;gap:6px}
.notice-strip{padding:10px 14px;margin-bottom:14px;border-color:var(--border)}
.notice-strip p{margin:0;font-size:12.5px}
.notice-strip--warning{background:color-mix(in srgb,var(--warning) 8%,var(--surface));border-color:color-mix(in srgb,var(--warning) 30%,var(--border))}
.notice-strip--warning p{color:color-mix(in srgb,var(--warning) 65%,var(--text))}

.visibility-switch{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);margin-bottom:16px;cursor:pointer}
.visibility-switch__text{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.visibility-switch__text small{color:var(--muted)}

.menu-cat-list{display:flex;flex-direction:column;gap:10px}
.menu-cat-row{display:grid;grid-template-columns:160px 1fr 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.menu-cat-row__label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0}
.menu-cat-row__chip{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;
  background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand);
}
.menu-cat-row__remarks input{height:44px}
@media(max-width:640px){
  .menu-cat-row{grid-template-columns:1fr}
  .menu-entry-head__row{flex-direction:column;align-items:stretch}
  .menu-entry-head__row .date-field{min-width:0;width:100%}
  .menu-entry-head__row .seg-switch,
  .menu-entry-head__row .status-pill,
  .menu-entry-head__row .text-button{flex:0 0 auto}
  .menu-entry-head__row .seg-switch{width:100%}
  .menu-entry-head__row .reg-foot__left{display:none}
}

/* ---------- Menu Enquiry / meal card ---------- */
.menu-enquiry-filters{display:flex;align-items:flex-end;gap:14px;flex-wrap:nowrap}
.menu-enquiry-filters>*{min-width:0}
.menu-enquiry-filters__right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
@media(max-width:820px){
  .menu-enquiry-filters{flex-wrap:wrap}
  .menu-enquiry-filters__right{margin-left:0;width:100%;justify-content:space-between}
}

.meal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1280px){.meal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.meal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.meal-grid{grid-template-columns:1fr}}
/* weekly menu modal is capped at 920px — 4 columns would crush the cards, so it gets its own 3-col ladder */
.sheet-modal .meal-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.sheet-modal .meal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sheet-modal .meal-grid{grid-template-columns:1fr}}

.meal-card{
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-top:3px solid transparent;box-shadow:var(--shadow);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
@media(hover:hover){.meal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
@media(prefers-reduced-motion:reduce){.meal-card:hover{transform:none}}
.meal-card--am{border-top-color:color-mix(in srgb,var(--warning) 60%,var(--border))}
.meal-card--pm{border-top-color:color-mix(in srgb,var(--brand) 55%,var(--border))}
.meal-card--add{
  align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--border);border-top:1.5px dashed var(--border);background:transparent;
  color:var(--muted);min-height:120px;cursor:pointer;font-weight:600;
}
.meal-card--add:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,transparent)}
.meal-card--add span{font-size:14px}
.meal-card--add small{font-size:11.5px}

.meal-card__top{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}
.meal-card--am .meal-card__top{background:linear-gradient(135deg,color-mix(in srgb,var(--warning) 12%,var(--surface)),var(--surface) 75%)}
.meal-card--pm .meal-card__top{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 11%,var(--surface)),var(--surface) 75%)}
.meal-card__date{display:flex;align-items:baseline;gap:4px;font-size:10.5px;color:var(--muted);text-transform:uppercase;font-weight:700}
.meal-card__date b{font-size:17px;color:var(--text);font-weight:800;text-transform:none}
.meal-card__badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
}
.meal-card__badge--am{background:color-mix(in srgb,var(--warning) 20%,var(--surface));color:color-mix(in srgb,var(--warning) 70%,var(--text))}
.meal-card__badge--pm{background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand)}
.meal-card__top .status-pill{margin-left:auto}
.meal-card__hidden{color:var(--muted);display:flex;flex:0 0 auto}
.meal-card__today{
  margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--brand);color:#fff;padding:3px 9px;border-radius:999px;flex:0 0 auto;
}
.meal-card__body{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.meal-card__row{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px dashed var(--border)}
.meal-card__row:first-child{border-top:0;padding-top:0}
.meal-card__cat{
  flex:0 0 auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  background:var(--surface-2);border-radius:6px;padding:3px 6px;min-width:68px;text-align:center;
}
/* category color-coding — deterministic by CategoryId so the same category always matches */
.cat-c0{background:color-mix(in srgb,var(--brand) 16%,var(--surface));color:var(--brand)}
.cat-c1{background:color-mix(in srgb,var(--coral) 16%,var(--surface));color:var(--coral)}
.cat-c2{background:color-mix(in srgb,var(--success) 16%,var(--surface));color:var(--success)}
.cat-c3{background:color-mix(in srgb,var(--warning) 18%,var(--surface));color:color-mix(in srgb,var(--warning) 75%,var(--text))}
.cat-c4{background:color-mix(in srgb,var(--violet) 16%,var(--surface));color:var(--violet)}
.meal-card__dish{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.meal-card__dish-name{font-weight:600;font-size:13px}
.meal-card__remarks{font-size:11px;color:var(--muted)}
.meal-card__daynote{margin:2px 0 0;font-size:12.5px;color:var(--muted);font-style:italic}
.meal-card__rating{
  flex:0 0 auto;font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);
}
.meal-card__rating small{font-weight:600;opacity:.8}
.meal-card__rating--great{background:var(--success-soft);color:var(--success)}
.meal-card__rating--good{background:var(--warning-soft);color:color-mix(in srgb,var(--warning) 75%,var(--text))}
.meal-card__rating--low{background:var(--danger-soft);color:var(--danger)}
.meal-card__rating--none{color:var(--subtle);background:transparent}
.meal-card__foot{display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--surface-2)}
.meal-card__approved{font-size:11px;color:var(--muted)}
.meal-card__actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:480px){.meal-card__actions{flex-direction:column}.meal-card__actions .button{width:100%}}
.meal-card.is-public .meal-card__top{background:var(--surface-2)}

/* Menu Feedback */
.feedback-cat{margin-bottom:14px}
.feedback-cat__name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
.feedback-row:first-of-type{border-top:0}
.feedback-row__name{font-size:13px;font-weight:600}
.star-input{display:flex;gap:2px}
.star-input button{
  width:44px;height:44px;border:0;background:none;font-size:22px;line-height:1;color:var(--border);cursor:pointer;
  transition:color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.star-input button.is-on{color:var(--warning)}
.star-input button:hover{transform:scale(1.12)}

/* Thaali Delivery — scanning */
.scan-box{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.scan-box__input{
  height:52px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  padding:0 16px;font-size:16px;font-weight:600;width:100%;
}
.scan-box__input:focus{outline:2px solid var(--brand);outline-offset:1px}
.scan-camera{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;max-width:480px}
.scan-camera video{width:100%;height:100%;object-fit:cover;display:block}
.scan-camera__frame{
  position:absolute;inset:15% 10%;border:3px solid rgba(255,255,255,.85);border-radius:12px;
  box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none;
}
.scan-camera__bar{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:10px}
.scan-result{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;margin-bottom:14px;
  border:1px solid var(--border);
}
.scan-result.is-ok{background:color-mix(in srgb,var(--success) 10%,var(--surface));border-color:color-mix(in srgb,var(--success) 30%,var(--border))}
.scan-result.is-bad{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border-color:color-mix(in srgb,var(--danger) 30%,var(--border))}
.scan-result__icon{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff;
}
.scan-result.is-ok .scan-result__icon{background:var(--success)}
.scan-result.is-bad .scan-result__icon{background:var(--danger)}
.scan-result__body h3{margin:0 0 3px;font-size:16px}
.scan-result__body p{margin:0;font-size:12.5px;color:var(--muted)}

/* ---------- Dashboard: today's menu + delivery status ---------- */
.today-menu{padding:0;overflow:hidden}
.today-menu__head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border)}
.today-menu__dispatched{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--success);white-space:nowrap}
.today-menu__date{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;line-height:1.1;
  padding:6px 12px;border-radius:10px;background:color-mix(in srgb,var(--brand) 10%,var(--surface));
}
.today-menu__date span{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--brand)}
.today-menu__date b{font-size:22px;color:var(--brand);font-weight:800}
.today-menu__head h2{margin:0;font-size:16px}
.today-menu__empty{margin:0;padding:20px 18px;color:var(--muted);font-size:13px}
.today-menu__meals{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.today-menu__meal{display:flex;flex-direction:column;gap:8px}
.today-menu__badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
.today-menu__badge--am{background:color-mix(in srgb,var(--warning) 16%,var(--surface));color:color-mix(in srgb,var(--warning) 70%,var(--text))}
.today-menu__badge--pm{background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand)}
.today-menu__dish{display:grid;grid-template-columns:64px 1fr;align-items:baseline;column-gap:10px;padding-left:4px;font-size:13px}
.today-menu__dish small{grid-column:2}
.today-menu__cat{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);
  background:var(--surface-2);border-radius:6px;padding:2px 6px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.today-menu__note{margin:2px 0 0 4px;font-size:12.5px;color:var(--muted);font-style:italic}
.today-menu__actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
@media(max-width:480px){.today-menu__actions{flex-direction:column}.today-menu__actions .button{width:100%}}


/* weekly menu modal — full-screen sheet on mobile */
.sheet-modal{width:min(920px,100%);max-height:85vh;overflow-y:auto}
.sheet-modal__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}
.sheet-modal__nav .button{display:inline-flex;align-items:center;gap:6px}
@media(max-width:640px){
  .sheet-modal{position:fixed;inset:0;max-width:100%;max-height:100%;border-radius:0;margin:0}
  .sheet-modal__nav .button span{display:none}
}
/* ---------- Thaali Delivery ---------- */
.delivery-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.delivery-topbar .date-field{flex:0 0 auto;min-width:240px}
.delivery-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
@media(max-width:640px){.delivery-topbar{flex-direction:column;align-items:stretch}.delivery-topbar .date-field{min-width:0;width:100%}}

/* ---------- FMB feedback report ---------- */
.fmb-day-heading{margin:20px 0 10px;font-size:14px}
.fmb-dish{padding:8px 0;border-top:1px dashed var(--border)}
.meal-card__body>.fmb-dish:first-child{border-top:0;padding-top:0}
.fmb-dish__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.fmb-dish__avg{margin-left:auto;color:var(--warning);font-weight:700;font-size:12.5px}
.fmb-dish__avg small{color:var(--muted);font-weight:500}
.fmb-dist{display:flex;flex-direction:column;gap:3px}
.fmb-dist__row{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:8px;font-size:10.5px;color:var(--muted)}
.fmb-dist__bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fmb-dist__fill{display:block;height:100%;width:100%;transform-origin:left;background:var(--warning);transition:transform var(--fast) var(--ease)}
.fmb-dist__count{text-align:right}
.fmb-remarks{margin-top:8px;font-size:12px}
.fmb-remarks summary{cursor:pointer;color:var(--brand);font-weight:600}
.fmb-remarks ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.fmb-remarks li{margin:3px 0}

/* compact per-dish summary cards — one small card per dish, many per row */
.fmb-meal-label{display:inline-flex;margin:2px 0 8px}
.fmb-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px}
.fmb-dish-card{
  border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:9px 10px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
@media(hover:hover){.fmb-dish-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}}
.fmb-dish-card .fmb-dish__head{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.fmb-dish-card .meal-card__cat{font-size:9px;padding:2px 6px;min-width:52px;text-align:center}
.fmb-dish-card .meal-card__dish-name{font-size:12.5px}
.fmb-dish-card .fmb-dish__avg{
  display:inline-flex;align-items:center;font-size:11.5px;color:var(--warning);font-weight:700;
  margin:0 0 6px;padding:3px 8px;border-radius:999px;background:var(--surface-2);
}
.fmb-dish-card .fmb-dish__avg small{color:inherit;opacity:.75;font-weight:600;margin-left:2px}
.fmb-dish-card .fmb-dist__row{font-size:9.5px;gap:6px;grid-template-columns:16px 1fr 16px}
.fmb-dish-card .fmb-dist__bar{height:4px}
.fmb-summary .fmb-remarks{font-size:11px;margin:0 0 18px}

/* by-dish / by-category ranked leaderboards */
.fmb-rank-card{position:relative;padding-top:22px}
.fmb-rank-card__rank{
  position:absolute;top:8px;right:9px;font-size:10.5px;font-weight:800;color:var(--subtle);
  font-variant-numeric:tabular-nums;
}

/* print - Menu Enquiry thali sheet (MenuEnquiry.razor + TiffinCard.razor). One tall page the
   shape of the printed poster (210 x 452 mm, no margins so the browser adds no header/footer). */
.print-only{display:none}
.thali-sheet{
  page:thali;position:relative;width:794px;height:1700px;margin:0 auto;overflow:hidden;
  flex-direction:column;color:#2b2118;font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background-color:#efe6d3;
  background-image:
    repeating-linear-gradient(45deg,rgba(150,120,80,.07) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-45deg,rgba(150,120,80,.07) 0 1px,transparent 1px 26px),
    radial-gradient(ellipse at 50% 40%,#f6f0e3 0%,#eee4cf 70%,#e6d9bf 100%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact
}
.thali-sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ts-band{flex:none;height:34px;background:linear-gradient(90deg,#7d5d3a,#c9a77a 18%,#8f6c45 40%,#d4b689 62%,#8a6840 82%,#b8946a);box-shadow:inset 0 -2px 3px rgba(0,0,0,.18)}
.ts-head{flex:none;display:grid;grid-template-columns:150px 1fr 150px;align-items:center;padding:14px 18px 6px}
.ts-logo{width:148px;height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.ts-logo--right{width:124px;justify-self:end;margin-right:6px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 71%)}
.ts-title{text-align:center}
.ts-title small{display:block;font-size:13px;font-weight:700;color:#3a2c1f;letter-spacing:.02em}
.ts-title h1{margin:4px 0 6px;white-space:nowrap;font-size:35px;line-height:1.1;font-weight:800;color:#8e1c1f;letter-spacing:-.005em;font-stretch:condensed;font-family:"Segoe UI","Arial Narrow",Arial,sans-serif}
.ts-sub{display:flex;align-items:center;gap:14px;justify-content:center}
.ts-sub i{display:block;height:2px;flex:1;max-width:95px;background:#7b5a37}
.ts-sub span{font-size:26px;font-weight:800;color:#5c3f22;letter-spacing:.01em;font-family:"Segoe UI","Arial Narrow",Arial,sans-serif}
.ts-cards{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--ts-cols,3),minmax(0,1fr));
  grid-template-rows:repeat(var(--ts-rows,2),auto);align-content:space-evenly;gap:14px 0;padding:10px 30px 6px;justify-items:center;align-items:center
}
.ts-cards>.tiffin-card{width:96%;height:auto;max-height:calc((1110px - (var(--ts-rows,2) - 1) * 14px) / var(--ts-rows,2))}
.tiffin-card{display:block;font-family:"Segoe UI",Arial,Helvetica,sans-serif}
.ts-ribbons{flex:none;margin:6px 32px 0;border-top:1px solid rgba(123,90,55,.45);padding-top:4px;text-align:center}
.ts-ribbons h2{margin:0 0 8px;font-size:22px;font-weight:800;color:#8e1c1f;font-family:"Segoe UI","Arial Narrow",Arial,sans-serif}
.ts-ribbons__row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ts-ribbon{display:flex;align-items:center;gap:4px;height:54px;padding:0 8px;border-radius:5px;
  background:linear-gradient(180deg,#e2cfae,#c9ad86);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(60,40,20,.25)}
.ts-ribbon svg{flex:none}
.ts-ribbon span{flex:1;text-align:center;white-space:nowrap;font-size:17px;font-weight:800;font-style:italic;color:#2a2018}
.ts-help{flex:none;display:grid;grid-template-columns:130px 78px 1fr 118px;align-items:center;gap:14px;padding:22px 36px 10px}
.ts-help__icon{width:122px;height:auto}
.ts-help__wa{width:74px;height:74px}
.ts-help__text strong{display:block;font-size:52px;line-height:1;font-weight:800;color:#141414;letter-spacing:.01em}
.ts-help__text span{display:block;margin-top:4px;font-size:20px;font-weight:800;color:#a3262c;letter-spacing:.01em}
.ts-help__qr{width:104px;height:104px;padding:6px;background:#fff;border:6px solid #c9a14a;box-shadow:0 0 0 2px #e6cf93;box-sizing:content-box}
.ts-help__qr svg{display:block;width:100%;height:100%}
.ts-foot{flex:none;position:relative;height:84px;margin-top:6px;
  background:linear-gradient(180deg,transparent 0 44px,#a17d52 44px),linear-gradient(90deg,#7d5d3a,#c9a77a 22%,#8f6c45 50%,#d4b689 74%,#8a6840)}
.ts-foot{background:none}
.ts-foot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(90deg,#7d5d3a,#c9a77a 18%,#8f6c45 40%,#d4b689 62%,#8a6840 82%,#b8946a)}
.ts-keep{position:absolute;z-index:1;left:50%;top:6px;transform:translateX(-50%);width:440px;height:50px;border-radius:25px;
  display:grid;place-items:center;background:linear-gradient(180deg,#5d3a22,#3f2614);color:#fff;font-size:22px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 2px 4px rgba(0,0,0,.3)}
/* 'Download image': shown off-screen just long enough to be captured (jmtThaliDownload in app.js) */
.thali-sheet.ts-capture{display:flex!important;position:fixed;left:-10000px;top:0;margin:0}
@page thali{size:210mm 450mm;margin:0}
@media print{
  @page{size:A4 portrait;margin:10mm}
  .app-shell .sidebar,.app-shell .top-nav,.topbar,.top-bar,.no-print{display:none!important}
  .app-shell{display:block!important;padding:0!important}
  .main-shell{height:auto!important;overflow:visible!important}
  .workspace{padding:0!important;overflow:visible!important}
  .print-only{display:block}
  .thali-sheet.print-only{display:flex;margin:0}
  body{background:#fff}
  * {-webkit-print-color-adjust:exact;print-color-adjust:exact}
}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Feedback request rows — used in the notification dropdown (AppShell.razor) ---------- */
.req-panel__row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px;margin:0 -6px;border-radius:9px;cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.req-panel__row:hover{background:var(--surface-2)}
.req-panel__row:active{background:var(--surface-3)}
/* the category name carries a small severity dot + a trailing chevron, pure CSS — no extra markup */
.req-panel__row>span:first-child{
  font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.req-panel__row>span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.req-panel__row::after{
  content:"";flex:none;width:6px;height:6px;border-top:1.6px solid var(--subtle);border-right:1.6px solid var(--subtle);
  transform:rotate(45deg);margin-left:-2px;
}
.req-panel__count{
  font-weight:800;font-size:11px;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--coral-soft);color:var(--coral);flex:none;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}

/* ---------- Dashboard: Laagat Dues / Jamaat Info widget cards ----------
   Ordinary dash-board grid items now (a fixed pinned rail before the designer existed) — each is
   its own bordered panel, so dash-rail__sec just supplies the internal header/body layout. */
.dash-rail__sec{display:flex;flex-direction:column;height:100%;overflow:hidden}
.dash-rail__h{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border);flex:none}
.dash-rail__h h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dash-rail__n{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;
  font-size:10.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.dash-rail__body{flex:1;min-height:0;overflow-y:auto;padding:6px 12px 12px}
.dash-rail__empty{color:var(--muted);font-size:12.5px;margin:10px 0}

/* ---------- Laagat Dues panel (dashboard rail) ----------
   Sized so the total strip plus at least 4 tiles fit in view without scrolling. Mobile stays a
   fixed 2-up grid; desktop (the rail's own ≥821px breakpoint) switches to auto-fill so a longer
   due list wraps into 3-4+ narrower columns instead of growing taller. */
.laagat-clear{display:flex;align-items:center;gap:10px;padding:10px 4px;color:var(--muted);font-size:12.5px}
.laagat-clear svg{flex:none;color:var(--success)}

.laagat-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:10px;margin-bottom:8px;
  background:color-mix(in srgb,var(--coral) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--coral) 22%,var(--border));
}
.laagat-total.is-settled{background:color-mix(in srgb,var(--success) 8%,var(--surface));border-color:color-mix(in srgb,var(--success) 22%,var(--border))}
.laagat-total__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.laagat-total__amt{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--coral)}
.laagat-total.is-settled .laagat-total__amt{color:var(--success)}

.laagat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media(min-width:821px){.laagat-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}}
.laagat-tile{
  padding:7px 8px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);
  border-top:3px solid var(--coral);min-width:0;
}
.laagat-tile.is-settled{border-top-color:var(--success)}
/* min-height on the name reserves room for 2 lines whether this tile's name wraps or not, so the
   chip/amount/takhmeen line below it lands at the same Y position in every tile, not just the
   same overall card height (grid stretch equalizes height but not where content inside starts) */
.laagat-tile__top{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;margin-bottom:4px}
.laagat-tile__name{font-size:10.5px;font-weight:700;line-height:1.2;min-height:calc(1.2em * 2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.laagat-tile__chip{
  flex:none;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  padding:1px 5px;border-radius:99px;background:var(--coral-soft);color:var(--coral);
}
.laagat-tile.is-settled .laagat-tile__chip{background:var(--success-soft);color:var(--success)}
.laagat-tile__amt{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--coral);line-height:1.1}
.laagat-tile.is-settled .laagat-tile__amt{color:var(--success)}
.laagat-tile__tk{font-size:9px;color:var(--subtle);margin-top:1px;font-variant-numeric:tabular-nums}
.laagat-tile__note{margin-top:4px;font-size:9.5px;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}

.jm-h{display:flex;align-items:center;gap:8px;padding:9px 12px;flex:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface) 72%);
  border-bottom:1px solid var(--border)}
.jm-crest{width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
  display:grid;place-items:center;font-size:12px;flex:none;color:var(--brand)}
.jm-h b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.jm-h span{font-size:10.5px;color:var(--muted)}

.jm-sec{padding:11px 0;border-bottom:1px dashed var(--border)}
.jm-sec--last{border-bottom:0}
.jm-k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:0 0 7px}
.jm-path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;font-weight:600}
.jm-step{padding:3px 8px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border)}
.jm-sep{color:var(--subtle)}
.jm-addr{margin:8px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jm-addr a{margin-left:auto;font-size:11px;font-weight:700;text-decoration:none;color:var(--brand)}

.jm-mem{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px dashed var(--border)}
.jm-mem:first-of-type{border-top:0}
.jm-mem__n{flex:1;min-width:0}
.jm-mem__n b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jm-mem__n span{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.jm-hof{flex:none;font-size:8.5px;font-weight:800;letter-spacing:.05em;padding:2px 6px;border-radius:5px;
  background:var(--brand-soft);color:var(--brand-2)}
.jm-sab{display:flex;align-items:center;gap:7px;margin-top:9px;padding:8px 10px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--border);font-size:11.5px;color:var(--text)}
.jm-sab b{font-weight:700;font-variant-numeric:tabular-nums}

.jm-ctc{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px dashed var(--border)}
.jm-ctc:first-of-type{border-top:0}
.jm-ctc__r{flex:1;min-width:0}
.jm-ctc__r b{display:block;font-size:12px;font-weight:600}
.jm-ctc__r span{font-size:10px;color:var(--muted)}
.jm-av--muted{background:var(--surface-2);color:var(--muted)}
.jm-call{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;color:var(--brand);text-decoration:none}

.jm-row{display:grid;grid-template-columns:72px 1fr;column-gap:8px;align-items:baseline;padding:5px 0;border-top:1px dashed var(--border);font-size:11.5px}
.jm-row:first-of-type{border-top:0}
.jm-row__k{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em}
.jm-row__v{color:var(--text);line-height:1.35}
.jm-row__v a{color:var(--brand);text-decoration:none;font-weight:600;margin-left:6px}
.jm-tel{color:var(--brand);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.jm-pills{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.jm-pill{align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:99px;
  background:var(--brand-soft);color:var(--brand-2)}

@media(max-width:1180px){.dash-rail{width:38vw}.dash-page.has-rail{padding-right:min(calc(38vw + 20px),480px)}}
@media(max-width:820px){
  .dash-rail{position:static;width:auto;max-width:none;min-width:0;height:auto;
    border-left:0;box-shadow:none;margin-top:22px;background:transparent;gap:14px}
  .dash-page.has-rail{padding-right:0}
  .dash-rail__sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
  .dash-rail__sec--req,.dash-rail__sec--jm{flex:none;border-top:0}
  .dash-rail__body{max-height:none;overflow-y:visible}
}

/* ---------- Event attendance scanning ----------
   jmtAttendance (app.js) owns this markup entirely via plain DOM, not Blazor bindings, so it keeps
   working through a dropped SignalR connection. When that connection drops, Blazor's own reconnect
   overlay would otherwise sit over this page unreachable — suppressed here in favour of the
   always-JS status strip below. */
body.jmt-attendance-active #components-reconnect-modal{display:none!important}

.att-panel{padding:16px}
.att-status{
  display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;flex-wrap:wrap;
}
.att-status__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--success)}
.att-status__dot[data-state="offline"]{background:var(--danger)}
.att-status__dot[data-state="syncing"],.att-status__dot[data-state="pending"]{background:var(--warning)}
.att-status__text{font-weight:700}
.att-status__pending{color:var(--warning);font-weight:600}
.att-status__spacer{flex:1}

.att-input-row{display:flex;gap:10px;margin-bottom:8px}
.att-manual-input{
  flex:1;min-width:0;height:52px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  padding:0 16px;font-size:18px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.att-manual-input:focus{outline:2px solid var(--brand);outline-offset:1px}
.att-remarks-input{
  width:100%;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  padding:0 12px;font-size:12.5px;margin-bottom:12px;
}
.att-cam-btn{flex:none;white-space:nowrap}
/* the placeholder ("Scan or type 8-digit ITS, then Enter") doesn't fit a phone-width input next to
   a camera button — min-width:0 lets the input shrink and clip its own placeholder rather than
   forcing the camera button out past the panel's edge, but a shorter placeholder reads better */
@media(max-width:480px){
  .att-manual-input{font-size:16px}
  .att-manual-input::placeholder{font-size:13px}
}
.att-camera{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;max-width:420px;margin-bottom:12px}
.att-camera__video{width:100%;height:100%;object-fit:cover;display:block}
.att-camera__frame{position:absolute;inset:15% 10%;border:3px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}
.att-cam-stop{position:absolute;left:50%;bottom:10px;transform:translateX(-50%)}

.att-result{
  display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:14px;margin-bottom:14px;
  border:1px solid var(--border);background:var(--surface-2);min-height:70px;justify-content:center;
}
.att-result--empty{color:var(--muted);font-size:13px;align-items:center;justify-content:center}
.att-result__title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.att-result__line{font-size:14px}
.att-result__line b{font-size:17px}
.att-result__pending{margin-top:6px;font-size:11px;font-weight:700;color:var(--warning)}
.att-result--ok{background:color-mix(in srgb,var(--success) 12%,var(--surface));border-color:color-mix(in srgb,var(--success) 32%,var(--border))}
.att-result--ok .att-result__title{color:var(--success)}
.att-result--warn{background:color-mix(in srgb,var(--warning) 12%,var(--surface));border-color:color-mix(in srgb,var(--warning) 32%,var(--border))}
.att-result--warn .att-result__title{color:var(--warning)}
.att-result--bad{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border-color:color-mix(in srgb,var(--danger) 32%,var(--border))}
.att-result--bad .att-result__title{color:var(--danger)}
.att-result--dup{background:color-mix(in srgb,var(--brand) 8%,var(--surface));border-color:color-mix(in srgb,var(--brand) 28%,var(--border))}
.att-result--dup .att-result__title{color:var(--brand)}

.att-counters{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px;font-size:12px;color:var(--muted)}
.att-counter b{font-size:15px;font-variant-numeric:tabular-nums;margin-right:4px;color:var(--text)}
.att-counter--ok b{color:var(--success)}
.att-counter--warn b{color:var(--warning)}
.att-counter--bad b{color:var(--danger)}
.att-counter--dup b{color:var(--brand)}
/* seat-controlled events (a venue has been released) */
.att-seatmode{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));font-size:12.5px;color:var(--text)}
.att-result--noseat{background:color-mix(in srgb,var(--coral) 12%,var(--surface));border-color:color-mix(in srgb,var(--coral) 40%,var(--border))}
.att-result--noseat .att-result__title{color:var(--coral)}
.att-counter--noseat b{color:var(--coral)}
.att-seat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0 10px;padding:10px 14px;border-radius:12px;background:var(--surface);border:2px solid var(--seat,#4f95d8)}
.att-seat__cat{padding:3px 10px;border-radius:var(--pill);background:var(--seat,#4f95d8);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em}
.att-seat__no{font-size:30px;font-weight:900;line-height:1;color:var(--text);letter-spacing:.01em}
.att-seat__venue{flex-basis:100%;font-size:12px;color:var(--muted)}
.att-seat--muted{border-style:dashed;opacity:.8}
.att-seat--muted .att-seat__no{font-size:22px}
.att-notsaved{display:inline-block;margin-top:2px;padding:2px 9px;border-radius:var(--pill);background:var(--danger-soft);color:var(--danger);font-size:12px;font-weight:800}

.att-recent{display:flex;flex-direction:column;gap:1px;max-height:340px;overflow-y:auto;border-top:1px solid var(--border)}
.att-recent__head{position:sticky;top:0;z-index:1;padding:8px 10px;background:var(--surface-2);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.att-recent__row{
  display:grid;grid-template-columns:80px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 4px;border-bottom:1px solid var(--border);font-size:12.5px;
}
.att-recent__its{font-variant-numeric:tabular-nums;color:var(--muted)}
.att-recent__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-recent__tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:99px;background:var(--surface-3);color:var(--muted);white-space:nowrap}
.att-recent__row--ok .att-recent__tag{background:var(--success-soft);color:var(--success)}
.att-recent__row--warn .att-recent__tag{background:var(--warning-soft);color:var(--warning)}
.att-recent__row--bad .att-recent__tag{background:var(--danger-soft);color:var(--danger)}
.att-recent__row--dup .att-recent__tag{background:var(--brand-soft);color:var(--brand)}
.att-recent__time{font-size:11px;color:var(--subtle);white-space:nowrap}
@media(max-width:560px){.att-recent__row{grid-template-columns:60px 1fr auto}.att-recent__time{grid-column:1/-1;text-align:right}}

.att-bydate-grid{display:flex;flex-direction:column;font-size:12.5px}
.att-bydate-grid__head,.att-bydate-grid__row{
  display:grid;grid-template-columns:1.3fr repeat(5,.8fr);gap:8px;padding:9px 16px;align-items:center;
}
.att-bydate-grid__head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--border)}
.att-bydate-grid__row{
  width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);
  text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;transition:background var(--fast) var(--ease);
}
.att-bydate-grid__row:last-child{border-bottom:0}
.att-bydate-grid__row:hover{background:var(--surface-2)}
.att-bydate-grid__row.is-active{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.att-bydate-grid__row b{color:var(--brand)}
@media(max-width:680px){.att-bydate-grid__head{display:none}.att-bydate-grid__row{grid-template-columns:1fr 1fr 1fr;row-gap:4px}}

/* ---------- A/V relay ----------
   The placeholder <div id="..."> below is what YT.Player() targets - the IFrame API doesn't wrap
   it, it REPLACES it in place with an <iframe> (same position in the DOM, so still a direct child
   of .relay-player). A selector like ">div:first-child iframe" never matches that, so the iframe
   fell back to YouTube's own default 640x390 size, unstyled, sitting top-left in the padded black
   box - the "tiny video in the corner" bug. Target the iframe directly instead. */
.relay-player{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:var(--radius);overflow:hidden}
.relay-player>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Native YouTube controls are off (app.js: controls:0) so the hover title bar - with its
   un-removable Share/Watch-Later icons - never renders. Fullscreen drops the aspect-ratio padding
   trick and just fills the screen; the iframe and control bar below (position:absolute;inset/...)
   already stretch to fit either way. */
.relay-player:fullscreen,.relay-player:-webkit-full-screen{padding-top:0;height:100%}
.relay-player__click-block{position:absolute;top:0;left:0;right:0;height:16%;z-index:1;background:transparent}
.relay-player__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,.55);text-align:center;padding:20px}
.relay-player__overlay .button{font-size:15px;padding:10px 26px}
.relay-player__overlay p{color:#e6e6e6;font-size:11.5px;max-width:320px;margin:0}
.relay-controls{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:4px 10px 8px;
  background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));z-index:2}
.relay-controls__row{display:flex;align-items:center;gap:4px}
.relay-controls__spacer{flex:1}
.relay-controls__btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:7px;
  background:transparent;color:#fff;cursor:pointer;transition:background .12s;flex:none}
.relay-controls__btn:hover{background:rgba(255,255,255,.15)}
.relay-controls__btn:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.relay-controls__volume{width:70px;height:4px;accent-color:#fff;cursor:pointer;margin:0 4px;flex:none}
.relay-controls__seek{width:100%;height:4px;accent-color:#fff;cursor:pointer}
.relay-controls__time{color:#fff;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 6px}
.its-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.its-list__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);border-radius:8px}
.its-list__row>span:not(.mumin-photo){flex:1;font-size:12.5px;display:flex;flex-direction:column}
.its-list__row small{color:var(--muted);font-size:10.5px}

/* ---------- Blazor error UI ---------- */
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:12px 18px;background:var(--danger);color:#fff;font-size:13px;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
#blazor-error-ui .reload{color:#fff;text-decoration:underline;margin-left:8px}
#blazor-error-ui .dismiss{cursor:pointer;float:right;font-size:16px}

/* ---------- Custom SQL widget editor layout ---------- */
.cw-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:1024px){.cw-layout{grid-template-columns:1fr}}
.dz-only-narrow{display:none}
@media(max-width:1023px){.dz-only-wide{display:none}.dz-only-narrow{display:block}}
@media(max-width:1360px){.dz-btn__label{display:none}.dz-btn--labelled{width:36px;padding:0;justify-content:center}}

/* ---------- Designer settings controls ---------- */
.dz-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;font-weight:700}
.dz-switch input{position:absolute;opacity:0;width:1px;height:1px}
.dz-switch__track{width:36px;height:20px;border-radius:999px;background:var(--border-strong);position:relative;transition:background .15s;flex:none}
.dz-switch__track span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.dz-switch input:checked+.dz-switch__track{background:var(--brand)}
.dz-switch input:checked+.dz-switch__track span{transform:translateX(16px)}
.dz-switch input:focus-visible+.dz-switch__track{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.dz-section code{font-size:10.5px;padding:1px 4px;border-radius:4px;background:var(--surface-3)}
.dz-range__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.dz-range__top label{font-size:11.5px;font-weight:700}
.dz-range__top b{font-size:12px;font-variant-numeric:tabular-nums;color:var(--brand)}
.dz-range input[type=range]{width:100%;accent-color:var(--brand)}
.dz-range__scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:2px}
.dz-seg--block{display:flex}
.dz-seg--block button{flex:1;justify-content:center}
.dz-card-preview{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--border)}
.dz-card-preview i{display:block;height:34px;min-width:18px;flex-grow:0;border-radius:8px;background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 2px rgba(18,59,93,.06)}
.dz-card-preview.is-compact i{height:22px;border-radius:6px}

/* Designer cards squeezed to 1–2 columns: keep only what fits */
.grid-stack-item-content{container-type:size}
@container (max-width:150px){
  .dz-card__titles small,.dz-card__pin{display:none!important}
  .dz-card__head{padding:8px;gap:6px}
  .dz-card__icon{width:24px;height:24px}
  .dz-card__tools{top:auto;bottom:6px;right:6px;flex-direction:column}
}
@container (max-width:90px){
  .dz-card__titles{display:none}
  .dz-card__head{justify-content:center}
  .dz-card__body{display:none}
}
@container (max-height:70px){
  .dz-card__body{display:none}
}

/* ================= Sector structure report (StructureReport.razor) ================= */
/* toolbar */
.sr-toolbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.sr-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 14px;padding:14px 16px}
.sr-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sr-field>span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sr-field .select-modern{width:100%;min-width:0}
.sr-field .switch-field{height:38px;width:100%;box-sizing:border-box}
.sr-toolbar__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.sr-kpis{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.sr-kpis>div{display:flex;flex-direction:column-reverse}
.sr-kpis dt{font-size:11px;color:var(--muted);font-weight:600}
.sr-kpis dd{margin:0;font-size:19px;font-weight:800;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.sr-views{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--surface-3);border:1px solid var(--border)}
.sr-views button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--fast),color var(--fast)}
.sr-views button:hover{color:var(--text)}
.sr-views button.is-active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(18,59,93,.14)}

/* shared bits */
.sr-muted{color:var(--muted)}
.sr-stack{display:flex;flex-direction:column;gap:2px;line-height:1.35;min-width:0}
.sr-stack small{font-size:11.5px;color:var(--muted)}
.sr-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--pill);font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap;flex:none;background:var(--surface-3);color:var(--muted)}
.sr-tag--brand{background:var(--brand-soft);color:var(--brand)}
.sr-tag--gents{background:var(--brand-soft);color:var(--brand-2)}
.sr-tag--ladies{background:var(--coral-soft);color:var(--danger)}
.sr-landmark{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sr-landmark svg{flex:none;color:var(--coral)}
.sr-phone{display:inline-flex;align-items:center;gap:5px;color:var(--text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.sr-phone:hover{color:var(--brand);text-decoration:underline}
.sr-phone svg{color:var(--muted)}
.sr-person{display:flex;align-items:center;gap:10px;min-width:0}
.sr-person__text{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.sr-person__name{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-person__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sr-pills{display:flex;flex-wrap:wrap;gap:6px}
.sr-pills>span{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--border);font-size:11.5px;color:var(--muted);white-space:nowrap}
.sr-pills b{color:var(--text);font-variant-numeric:tabular-nums}
.sr-chips{display:flex;flex-direction:column;gap:5px;min-width:0}
.sr-chip{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px}
.sr-empty{padding:28px;text-align:center;color:var(--muted)}
.sr-empty h3{margin:0 0 4px;color:var(--text)}

/* table cells */
.sr-table .sr-person{min-width:220px;max-width:320px}
.sr-table .sr-loc{min-width:200px;max-width:300px}
.sr-table .sr-path{font-weight:600}
.sr-table .sr-path i{font-style:normal;color:var(--subtle);margin:0 2px}
.sr-table .sr-incharge{min-width:170px;max-width:240px}
.sr-table .sr-incharge>span{display:flex;align-items:center;gap:6px;min-width:0}

/* org chart */
.sr-org{padding:16px 18px 20px}
.sr-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0 0 16px}
.sr-crumbs button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer}
.sr-crumbs button:hover{background:var(--brand-soft)}
.sr-crumbs button.is-current{color:var(--text);font-weight:800;cursor:default;background:var(--surface-2)}
.sr-crumbs__sep{color:var(--subtle);padding:0 2px}
.sr-focus{max-width:760px;margin:0 auto;padding:16px 18px;border:1px solid color-mix(in srgb,var(--brand) 40%,var(--border));border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand-soft) 70%,var(--surface)),var(--surface) 70%);box-shadow:var(--shadow)}
.sr-focus__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 18px}
.sr-focus__head h2{margin:2px 0 0;font-size:22px;letter-spacing:-.01em}
.sr-focus__head .sr-landmark{margin-top:4px;white-space:normal}
.sr-kind{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand)}
.sr-leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px}
.sr-leader{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.sr-leader .sr-person__text{gap:3px}
.sr-leader .sr-person__name,.sr-card .sr-person__name{font-size:13.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.sr-leader .sr-tag{align-self:flex-start}
.sr-leader__empty{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;background:var(--surface-3);color:var(--subtle);font-weight:800}
.sr-stem{width:2px;height:22px;margin:0 auto;background:var(--border-strong)}
.sr-level{padding:14px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--surface-2)}
.sr-level__title{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sr-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px;text-align:left;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:inherit;color:var(--text);cursor:pointer;transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast)}
.sr-card:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(18,59,93,.10);transform:translateY(-1px)}
.sr-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-card--static{cursor:default}
.sr-card--static:hover{transform:none;box-shadow:none;border-color:var(--border)}
.sr-card__head{display:flex;align-items:center;gap:9px;min-width:0}
.sr-card__head h4{margin:0;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-card__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;background:var(--brand-soft);color:var(--brand)}
.sr-card__go{font-size:20px;line-height:1;color:var(--subtle);transition:transform var(--fast),color var(--fast)}
.sr-card:hover .sr-card__go{color:var(--brand);transform:translateX(2px)}
.sr-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;padding-top:10px;border-top:1px solid var(--border)}
.sr-facts dt{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sr-facts dd{margin:2px 0 0;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* tree */
.sr-tree{padding:14px 16px 18px}
.sr-tree__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sr-search{display:flex;align-items:center;gap:8px;flex:1 1 280px;max-width:460px;height:38px;padding:0 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--muted)}
.sr-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.sr-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text)}
.sr-tree__actions{display:flex;flex-wrap:wrap;gap:6px}
.sr-tree ul{list-style:none;margin:0;padding:0}
.sr-tree ul ul{margin-left:21px;padding-left:12px;border-left:1px solid var(--border)}
.sr-node{margin:3px 0}
.sr-row{display:grid;grid-template-columns:16px 30px minmax(84px,130px) minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:transparent;font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.sr-row:hover{background:var(--surface-2);border-color:var(--border)}
.sr-node--sector>.sr-row{background:var(--surface-2);border-color:var(--border)}
.sr-row__chev{font-size:16px;line-height:1;color:var(--muted);transition:transform var(--fast);justify-self:center}
.sr-row__chev.is-open{transform:rotate(90deg);color:var(--brand)}
.sr-row__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand)}
.sr-row__name{display:flex;flex-direction:column;font-weight:800;font-size:14px;line-height:1.2;min-width:0}
.sr-row__name small{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sr-row__who{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0}
.sr-row__who .sr-chip{max-width:300px}
.sr-row__count{display:flex;gap:6px;justify-self:end}
.sr-row__count span{padding:2px 8px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sr-hh{margin:4px 0 8px 33px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.sr-hh>.sr-muted{margin:0;padding:10px 12px}
.sr-hh__row{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(130px,1fr) minmax(120px,.8fr);align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--border)}
.sr-hh__row:first-child{border-top:0}
.sr-hh__row:hover{background:var(--surface-2)}
.sr-hh__row--member{padding-left:34px;background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
.sr-hh__row--member .sr-person__name{font-weight:600}
.sr-hh__cell{font-size:12.5px;color:var(--muted);min-width:0}

@media(max-width:820px){
  .sr-toolbar__foot{flex-direction:column;align-items:stretch}
  .sr-views{display:flex}
  .sr-views button{flex:1;justify-content:center;padding:0 8px}
  .sr-kpis{justify-content:space-between}
  .sr-row{grid-template-columns:16px 30px minmax(0,1fr) auto}
  .sr-row__who{grid-column:3 / -1;grid-row:2}
  .sr-hh{margin-left:0}
  .sr-hh__row{grid-template-columns:1fr;gap:4px}
  .sr-tree ul ul{margin-left:8px;padding-left:8px}
  .sr-facts{grid-template-columns:1fr}
}

/* ================= Requests page: "Your requests" (Feedback.razor) ================= */
.rq-mine{padding:18px 18px 20px}
.rq-mine__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:14px}
.rq-mine__head h2{margin:0 0 2px;font-size:17px}
.rq-mine__head p{margin:0;font-size:12.5px;color:var(--muted)}
.rq-chips{display:flex;flex-wrap:wrap;gap:6px}
.rq-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--pill);background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.rq-chip span{min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);display:inline-grid;place-items:center;background:var(--surface-3);color:var(--text);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.rq-chip:hover{border-color:var(--brand);color:var(--text)}
.rq-chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.rq-chip.is-on span{background:rgba(255,255,255,.22);color:#fff}

.rq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rq-item{position:relative;padding:14px 16px 14px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.rq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warning)}
.rq-item--replied::before{background:var(--success)}
.rq-item--closed::before{background:var(--border-strong)}
.rq-item__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rq-item__title{min-width:0}
.rq-item__title h3{margin:0;font-size:15px;line-height:1.3}
.rq-item__meta{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.rq-status{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--pill);font-size:11px;font-weight:700;white-space:nowrap}
.rq-status--open{background:var(--warning-soft);color:var(--warning)}
.rq-status--replied{background:var(--success-soft);color:var(--success)}
.rq-status--closed{background:var(--surface-3);color:var(--muted)}

.rq-item__body{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.rq-item__body.is-clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rq-more{margin-top:4px;padding:0;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer}
.rq-more:hover{text-decoration:underline}

.rq-attach{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:12.5px;font-weight:600;text-decoration:none}
.rq-attach img{width:48px;height:48px;border-radius:7px;object-fit:cover;display:block}
.rq-attach:hover{border-color:var(--brand);color:var(--brand)}

.rq-reply{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 25%,transparent)}
.rq-reply__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--muted)}
.rq-reply__badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--pill);background:var(--success);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.rq-reply p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.rq-wait{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.rq-wait__dot{width:8px;height:8px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 3px var(--warning-soft);flex:none}

.rq-empty{display:flex;align-items:center;gap:14px;padding:18px;border:1px dashed var(--border-strong);border-radius:12px;color:var(--muted)}
.rq-empty p{margin:0;font-size:13.5px}
.rq-empty b{color:var(--text)}
.rq-empty__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:18px;flex:none}
.rq-none{margin:4px 0 0;font-size:13px;color:var(--muted)}

@media(max-width:820px){
  .rq-mine{padding:14px}
  .rq-chips{width:100%}
  .rq-chip{flex:1 1 auto;justify-content:center}
}

/* ================= Today's menu widget (W_TodayMenu.razor) ================= */
.tmw{display:flex;flex-direction:column;height:100%;min-height:0;padding:0;overflow:hidden;container-type:inline-size}
.tmw__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 12px}
.tmw__title{min-width:0}
.tmw__eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.tmw__title h2{margin:3px 0 0;font-size:clamp(16px,6cqw,21px);font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--text)}
.tmw__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
.tmw__pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--pill);font-size:11.5px;font-weight:700;white-space:nowrap}
.tmw__pill--am{background:color-mix(in srgb,var(--warning) 15%,var(--surface));color:color-mix(in srgb,var(--warning) 72%,var(--text))}
.tmw__pill--pm{background:color-mix(in srgb,var(--brand) 13%,var(--surface));color:var(--brand)}
.tmw__pill--ok{background:var(--success-soft);color:var(--success)}

.tmw__body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:2px 18px 10px}
.tmw__meal{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:0}
.tmw__meal-tag{align-self:flex-start}
.tmw__list{flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center}
.tmw__row{flex:1 1 0;min-height:0;max-height:84px;display:flex;align-items:center;gap:14px;padding:4px 2px;border-top:1px dashed var(--border);overflow:hidden}
.tmw__row:first-child{border-top:0}
.tmw__ico{flex:none;display:grid;place-items:center;width:clamp(36px,12cqw,46px);height:clamp(36px,12cqw,46px);border-radius:50%;font-size:clamp(18px,6cqw,23px);line-height:1}
.tmw__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tmw__name{font-size:clamp(14.5px,5cqw,18px);font-weight:700;line-height:1.25;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmw__cat{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmw__note{margin:4px 0 0;padding:8px 10px;border-radius:9px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.tmw__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;color:var(--muted);font-size:13px;text-align:center}
.tmw__empty span{font-size:30px}
.tmw__actions{display:flex;gap:8px;padding:12px 18px 16px}
.tmw__actions .button{flex:1;justify-content:center;min-width:0;white-space:nowrap}
/* desktop: the widget fills a fixed box, so it can also adapt to that box's HEIGHT */
@media(min-width:821px){ .tmw{container-type:size} }
.dash-board--phone .tmw{container-type:inline-size}
@container (max-height:360px){
  .tmw__cat{display:none}
  .tmw__head{padding:11px 16px 6px}
  .tmw__title h2{font-size:16px}
  .tmw__ico{width:32px;height:32px;font-size:17px}
  .tmw__name{font-size:15px}
  .tmw__row{gap:11px;padding:1px 2px}
  .tmw__body{padding:0 16px 4px;gap:8px}
  .tmw__actions{padding:8px 16px 12px}
  .tmw__actions .button{height:34px;font-size:12.5px}
}
@container (max-height:250px){
  .tmw__eyebrow{display:none}
  .tmw__tags{display:none}
  .tmw__ico{width:24px;height:24px;font-size:13px}
  .tmw__name{font-size:13.5px}
  .tmw__actions .button{height:30px}
}
/* tiny box: the dishes matter most - drop the buttons (the menu feedback page is in the menu) */
@container (max-height:180px){
  .tmw__actions{display:none}
  .tmw__head{padding-bottom:2px}
}
@container (max-width:300px){
  .tmw__head{flex-direction:column}
  .tmw__tags{justify-content:flex-start}
}
@container (max-width:230px){
  .tmw__actions{flex-direction:column}
}
/* phones: the widget sizes to its dishes instead of the designed desktop height -
   unless a phone height was set for it in the designer */
@media(max-width:820px){
  .dash-cell:not(.dash-cell--m-h) .dash-fit[data-mode="fill"]:has(.tmw){height:auto}
  .dash-cell:not(.dash-cell--m-h) .dash-fit[data-mode="fill"]:has(.tmw)>.dash-fit__inner{position:relative;inset:auto;height:auto}
  .dash-cell:not(.dash-cell--m-h) .tmw__meal,.dash-cell:not(.dash-cell--m-h) .tmw__list,.dash-cell:not(.dash-cell--m-h) .tmw__row{flex:0 0 auto;max-height:none}
  .dash-cell:not(.dash-cell--m-h) .tmw__row{padding:10px 2px}
}
.dash-board--phone .dash-cell:not(.dash-cell--m-h) .dash-fit[data-mode="fill"]:has(.tmw){height:auto}
.dash-board--phone .dash-cell:not(.dash-cell--m-h) .dash-fit[data-mode="fill"]:has(.tmw)>.dash-fit__inner{position:relative;inset:auto;height:auto}
.dash-board--phone .dash-cell:not(.dash-cell--m-h) .tmw__meal,.dash-board--phone .dash-cell:not(.dash-cell--m-h) .tmw__list,.dash-board--phone .dash-cell:not(.dash-cell--m-h) .tmw__row{flex:0 0 auto;max-height:none}
.dash-board--phone .dash-cell:not(.dash-cell--m-h) .tmw__row{padding:10px 2px}

/* ================= Menu Feedback page (MenuFeedback.razor) ================= */
.mf-meal{padding:0;margin-bottom:16px;overflow:hidden}
.mf-meal__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;padding:18px 20px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--brand-soft) 55%,var(--surface)),var(--surface))}
.mf-meal__title{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.mf-meal__title h2{margin:2px 0 0;font-size:20px;letter-spacing:-.01em}
.mf-meal__title p{margin:0;font-size:13px;color:var(--muted)}
.mf-progress{width:min(260px,100%)}
.mf-progress__label{font-size:12.5px;color:var(--muted);margin-bottom:6px;text-align:right}
.mf-progress__label b{color:var(--text)}
.mf-done{color:var(--success);font-weight:700}
.mf-progress__bar{height:8px;border-radius:var(--pill);background:var(--surface-3);overflow:hidden}
.mf-progress__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--warning),var(--success));transition:width var(--normal) var(--ease)}
.mf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:18px 20px}
.mf-dish{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:border-color var(--fast),box-shadow var(--fast)}
.mf-dish.is-rated{border-color:color-mix(in srgb,var(--warning) 55%,var(--border));box-shadow:0 4px 14px color-mix(in srgb,var(--warning) 14%,transparent)}
.mf-dish__cat{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--pill);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mf-dish__name{margin:0;font-size:18px;font-weight:800;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.mf-stars{display:flex;gap:0;width:100%;max-width:230px}
.mf-stars button{flex:1 1 0;min-width:0;height:44px;padding:0;border:0;border-radius:10px;background:transparent;font-size:28px;line-height:1;color:var(--border-strong);cursor:pointer;transition:color var(--fast),transform var(--fast)}
.mf-stars button.is-on{color:var(--warning)}
.mf-stars button:hover{transform:scale(1.15)}
.mf-stars button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.mf-stars:hover button{color:var(--warning)}
.mf-stars button:hover~button{color:var(--border-strong)}
.mf-dish__verdict{font-size:12.5px;font-weight:700;color:var(--muted)}
.mf-dish.is-rated .mf-dish__verdict{color:color-mix(in srgb,var(--warning) 75%,var(--text))}
.mf-meal__foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:14px 20px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
.mf-remarks{flex:1 1 320px;display:flex;flex-direction:column;gap:6px;min-width:0}
.mf-remarks>span{font-size:12.5px;font-weight:700;color:var(--text)}
.mf-remarks small{font-weight:500;color:var(--muted)}
.mf-remarks textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);font:inherit;font-size:13.5px;color:var(--text)}
.mf-remarks textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.mf-save{height:44px;padding:0 22px;white-space:nowrap}
@media(max-width:820px){
  .mf-meal__head{padding:16px}
  .mf-progress{width:100%}
  .mf-progress__label{text-align:left}
  .mf-grid{grid-template-columns:1fr;padding:14px 16px}
  .mf-meal__foot{padding:14px 16px}
  .mf-save{width:100%}
}

/* ================= Committee popup (W_JamaatInfo.razor) ================= */
.jmc{display:flex;flex-direction:column;width:min(1240px,100%);max-height:94vh;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.jmc__head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-soft) 80%,var(--surface)),var(--surface) 65%)}
.jmc__crest{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:var(--brand);color:#fff;font-size:22px;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 32%,transparent)}
.jmc__title{flex:1;min-width:0}
.jmc__title h2{margin:0;font-size:20px;letter-spacing:-.01em}
.jmc__title span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jmc__search{display:flex;align-items:center;gap:8px;width:min(260px,40%);height:38px;padding:0 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--muted)}
.jmc__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.jmc__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text)}
.jmc__close{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-size:15px;cursor:pointer}
.jmc__close:hover{color:var(--text);border-color:var(--border-strong)}
.jmc__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 14px 14px}
.jmc__msg{margin:24px 8px;text-align:center;color:var(--muted)}
/* card grid: 4 per row on desktop so the whole committee is visible at once */
.jmc__grid{list-style:none;margin:0;padding:0 4px 2px;display:grid;grid-template-columns:repeat(var(--jmc-cols,4),minmax(0,1fr));gap:10px}
/* sort order 0: one card, centred on its own row, same width as a grid card */
.jmc__lead{list-style:none;margin:0 0 10px;padding:4px 4px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.jmc__lead>.jmc__card{width:calc((100% - (var(--jmc-cols,4) - 1) * 10px) / var(--jmc-cols,4));min-width:0}
/* jmtCommitteeFit (app.js) may scale this box down so the whole committee fits the screen */
.jmc__fit{transform-origin:0 0}
.jmc__card--lead{border-color:color-mix(in srgb,var(--warning) 55%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--warning-soft) 70%,var(--surface)),var(--surface) 70%);box-shadow:0 6px 18px color-mix(in srgb,var(--warning) 14%,transparent)}
.jmc__card--lead .mumin-photo.jmc__photo{box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--warning) 60%,transparent)}
.jmc__card--lead .jmc__role.is-primary{background:color-mix(in srgb,var(--warning) 80%,var(--text));border-color:transparent}
.jmc__card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast)}
.jmc__card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border));box-shadow:0 8px 22px rgba(18,59,93,.10);transform:translateY(-1px)}
.jmc__top{display:flex;align-items:center;gap:12px;min-width:0}
.mumin-photo.jmc__photo{width:54px;height:54px;font-size:17px;flex:none;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--border)}
.jmc__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.jmc__who b{font-size:13.5px;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jmc__who span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jmc__roles{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.jmc__role{display:inline-flex;align-items:center;max-width:100%;height:24px;padding:0 10px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jmc__role.is-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.jmc__call{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;height:32px;border-radius:9px;border:1px solid color-mix(in srgb,var(--success) 35%,var(--border));background:var(--success-soft);color:var(--success);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.jmc__call:hover{background:var(--success);color:#fff;border-color:var(--success)}.jmc__nophone{margin-top:auto;display:flex;align-items:center;justify-content:center;height:36px;font-size:12px;color:var(--subtle)}
/* short laptop screens: tighter cards so the whole committee still fits without scrolling */
@media(min-width:641px) and (max-height:860px){
  .jmc{max-height:96vh}
  .jmc__head{padding:10px 18px}
  .jmc__crest{width:38px;height:38px;font-size:18px}
  .jmc__title h2{font-size:17px}
  .jmc__body{padding:8px 12px 10px}
  .jmc__card{gap:6px;padding:8px 10px}
  .mumin-photo.jmc__photo{width:44px;height:44px;font-size:14px}
  .jmc__role{height:22px;font-size:11px}
  .jmc__call{height:28px;font-size:12px}
  .jmc__grid,.jmc__lead{gap:10px}
  .jmc__lead{margin-bottom:8px}
}
@media(max-width:1100px){ .jmc{--jmc-cols:3} }
@media(max-width:900px){ .jmc{--jmc-cols:2} }
@media(max-width:640px){
  .jmc{max-height:94vh;border-radius:16px}
  .jmc__head{flex-wrap:wrap;padding:14px 16px}
  .jmc__search{order:3;width:100%}
  .jmc__body{padding:10px 12px 14px}
  .jmc{--jmc-cols:1}
  .jmc__grid{gap:10px}
  .jmc__lead{margin-bottom:10px}
  .jmc__lead>.jmc__card{width:100%;min-width:0}
}

/* ================= Mohallah map (MohallahMapView / MapHotspotEditor) ================= */
.mm{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.mm-empty{padding:28px;text-align:center;color:var(--muted)}
.mm-empty h3{margin:0 0 6px;color:var(--text)}
.mm__map{padding:0;overflow:hidden}
.mm__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.mm__find{display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:340px;height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--muted)}
.mm__find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.mm__find input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--text)}
.mm__zoom{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);overflow:hidden}
.mm__zoom button{width:34px;height:34px;border:0;background:transparent;font:inherit;font-size:17px;font-weight:700;color:var(--text);cursor:pointer}
.mm__zoom button:disabled{color:var(--subtle);cursor:default}
.mm__zoom button:not(:disabled):hover{background:var(--surface-2)}
.mm__zoom span{min-width:46px;text-align:center;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.mm__zoom .mm__fit{width:auto;padding:0 10px;font-size:12px;border-left:1px solid var(--border)}
.mm__toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.mm__stage{position:relative;height:calc(100vh - 210px);min-height:420px;overflow:auto;background:#f3ead7}
.mm__canvas{position:relative;margin:0 auto;min-width:100%}
.mm__canvas img{display:block;width:100%;height:auto;user-select:none}
/* invisible until hovered: the map already prints the building numbers */
.mm__spot{position:absolute;width:3.6%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid transparent;border-radius:50%;background:transparent;padding:0;cursor:pointer;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
.mm__spot:hover,.mm__spot:focus-visible{border-color:#fff;box-shadow:0 0 0 3px var(--brand),0 6px 16px rgba(0,0,0,.25);outline:0}
.mm__spot.is-shown{border-color:color-mix(in srgb,var(--brand) 70%,#fff);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.mm__spot.is-on{border-color:#fff;box-shadow:0 0 0 4px var(--danger),0 0 0 10px color-mix(in srgb,var(--danger) 25%,transparent);animation:mmPulse 1.6s ease-out infinite}
@keyframes mmPulse{0%{box-shadow:0 0 0 4px var(--danger),0 0 0 4px color-mix(in srgb,var(--danger) 45%,transparent)}100%{box-shadow:0 0 0 4px var(--danger),0 0 0 18px transparent}}
.mm__hint{margin:0;padding:8px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}

.mm__panel{position:sticky;top:12px;max-height:calc(100vh - 100px);overflow-y:auto;padding:18px}
.mm__intro{text-align:center;padding:30px 10px;color:var(--muted)}
.mm__intro-icon{font-size:34px}
.mm__intro h3{margin:8px 0 4px;color:var(--text)}
.mm__intro p{margin:0 0 6px;font-size:13px}
.mm__count{font-size:12px!important;color:var(--subtle)}
.mm__head{padding-bottom:14px;border-bottom:1px solid var(--border)}
.mm__kind{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.mm__head h2{margin:2px 0 0;font-size:26px;letter-spacing:-.01em}
.mm__landmark{margin:4px 0 0;font-size:13px;color:var(--muted)}
.mm__path{display:flex;align-items:stretch;gap:6px;margin-top:12px}
.mm__path span{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);min-width:0}
.mm__path small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mm__path b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm__path i{align-self:center;font-style:normal;color:var(--subtle)}
.mm__maplink{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700}
.mm__sec{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mm__sec span{padding:1px 8px;border-radius:var(--pill);background:var(--surface-3);color:var(--text);letter-spacing:0}
.mm__leaders{display:grid;grid-template-columns:1fr;gap:8px}
.mm__leader{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mm__leader .mumin-photo{flex:none}
.mm__avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:800}
.mm__avatar.is-ladies{background:var(--coral-soft);color:var(--coral)}
.mm__avatar--sm{width:30px;height:30px;font-size:10px}
.mm__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm__who b{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm__who a{font-size:12px;font-weight:600;text-decoration:none}
.mm__tag{align-self:flex-start;padding:1px 7px;border-radius:var(--pill);background:var(--brand-soft);color:var(--brand-2);font-size:9.5px;font-weight:800;white-space:nowrap}
.mm__tag.is-ladies{background:var(--coral-soft);color:var(--danger)}
.mm__note{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.mm__homes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mm__home{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}
.mm__home-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;font:inherit;text-align:left;color:var(--text);cursor:pointer}
.mm__home-row:hover{background:var(--surface-2)}
.mm__home-text{display:flex;flex-direction:column;flex:1;min-width:0}
.mm__home-text b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm__home-text small{font-size:11.5px;color:var(--muted)}
.mm__chev{color:var(--muted);transition:transform var(--fast)}
.mm__chev.is-open{transform:rotate(90deg)}
.mm__members{list-style:none;margin:0;padding:4px 10px 8px 50px;display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--border)}
.mm__members li{display:flex;align-items:center;gap:8px}
.mm__members span{display:flex;flex-direction:column;min-width:0}
.mm__members b{font-size:12.5px;font-weight:600}
.mm__members small{font-size:11px;color:var(--muted)}
@media(max-width:1100px){ .mm{grid-template-columns:minmax(0,1fr) 320px} }
@media(max-width:820px){
  .mm{grid-template-columns:1fr}
  .mm__stage{height:62vh}
  .mm__panel{position:static;max-height:none}
  .mm__leaders{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){ .mm__leaders{grid-template-columns:1fr} }

/* marker editor */
.mhe{display:flex;flex-direction:column;width:min(1400px,100%);height:94vh;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.mhe__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--border)}
.mhe__head h2{margin:0;font-size:18px}
.mhe__head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.mhe__head-actions{display:flex;align-items:center;gap:8px}
.mhe__progress{font-size:12.5px;color:var(--muted);margin-right:6px}
.mhe__progress b{color:var(--text)}
.mhe__body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.mhe__map{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border)}
.mhe__stage{flex:1;height:auto;min-height:0}
.mhe__stage .mm__canvas{cursor:crosshair}
.mhe__placing{font-size:12.5px;color:var(--text)}
.mhe__placing.is-idle{color:var(--muted)}
.mhe__pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:2px solid #fff;border-radius:var(--pill);background:var(--success);color:#fff;font-size:10px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
.mhe__pin.is-on{background:var(--danger);z-index:2;transform:translate(-50%,-50%) scale(1.15)}
.mhe__list{display:flex;flex-direction:column;min-height:0;padding:12px;gap:8px;background:var(--surface-2)}
.mhe__search{height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);font:inherit;font-size:13px}
.mhe__filters{display:flex;gap:6px}
.mhe__filters button{flex:1;height:30px;border:1px solid var(--border);border-radius:var(--pill);background:var(--surface);font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.mhe__filters button.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.mhe__list ul{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mhe__list li{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.mhe__list li.is-on{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 20%,transparent)}
.mhe__item{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.mhe__dot{width:10px;height:10px;flex:none;border-radius:50%;border:2px solid var(--border-strong)}
.mhe__dot.is-placed{border-color:var(--success);background:var(--success)}
.mhe__name{display:flex;flex-direction:column;min-width:0}
.mhe__name b{font-size:13px}
.mhe__name small{font-size:11px;color:var(--muted)}
.mhe__remove{width:30px;height:30px;margin-right:4px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.mhe__remove:hover{background:var(--danger-soft);color:var(--danger)}
.mhe__auto{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
@media(max-width:820px){ .mhe__body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 40%} .mhe__map{border-right:0;border-bottom:1px solid var(--border)} }

/* Jamaat Info page + widget buttons */
.ji-map{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.ji-map__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ji-map__hint{font-size:12px}
.jm-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-top:8px}
.jm-actions .button{width:100%;justify-content:center;text-decoration:none}

/* ================= My profile widget (W_MyProfile.razor) ================= */
.pfw{display:flex;flex-direction:column;padding:0;overflow:hidden}
.pfw__head{display:flex;align-items:center;gap:14px;padding:16px 16px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-soft) 85%,var(--surface)),var(--surface) 75%)}
.mumin-photo.pfw__photo{width:64px;height:64px;font-size:18px;box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--brand) 35%,transparent)}
.pfw__id{min-width:0;display:flex;flex-direction:column;gap:2px}
.pfw__eyebrow{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.pfw__id h2{margin:0;font-size:16px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pfw__meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pfw__pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pfw__pill{padding:2px 8px;border-radius:var(--pill);background:var(--surface-3);font-size:10.5px;font-weight:700;color:var(--text)}
.pfw__pill.is-hof{background:var(--brand);color:#fff}
.pfw__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;padding:12px 16px}
.pfw__facts>div{min-width:0}
.pfw__wide{grid-column:1 / -1}
.pfw__facts dt{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pfw__facts dd{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfw__facts dd a{text-decoration:none}
.pfw__who{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.pfw__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 16px 14px;border-top:1px solid var(--border)}
.pfw__family{font-size:12px;color:var(--muted)}

/* ---------- Mumin Thaali - Print stickers (ThaaliStickerDialog.razor) ---------- */
.stk-selcount{font-size:12.5px;font-weight:700;color:var(--brand);align-self:center}
.stk-check{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.stk-dialog{max-width:980px}
.stk-list{display:flex;flex-direction:column;gap:12px;margin-top:14px;max-height:min(66vh,640px);overflow:auto;padding-right:2px}
.stk-card{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.stk-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stk-card__head strong{font-size:14px}
.stk-card__fields{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted);font-weight:600}
.stk-card__fields label{display:flex;align-items:center;gap:6px}
.stk-card__fields input{width:68px;height:32px;padding:0 8px}
.stk-card__body{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:10px}
.stk-preview-wrap{padding:10px;border-radius:10px;background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,var(--surface) 6px 12px);border:1px dashed var(--border)}
.stk-preview{background:#fff;color:#000;box-shadow:0 1px 4px rgba(0,0,0,.25);overflow:hidden;box-sizing:border-box;zoom:1.6}
.stk-editor textarea{width:100%;font:12px/1.45 Consolas,"Cascadia Mono",monospace;padding:8px;border-radius:8px;resize:vertical;min-height:150px}
.stk-editor__foot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap}
.stk-edit-btn{align-self:center;justify-self:start}
@media(max-width:720px){.stk-card__body{grid-template-columns:1fr}.stk-preview{zoom:1.2}}

/* ---------- Header page search + Ctrl+K palette (PageSearch.razor) ---------- */
.page-search-btn{
  margin-left:auto;display:flex;align-items:center;gap:9px;height:36px;width:min(320px,32vw);padding:0 8px 0 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:13px;cursor:pointer;
  transition:border-color var(--fast),background var(--fast),color var(--fast)
}
.page-search-btn:hover{border-color:var(--brand);color:var(--text);background:var(--surface)}
.page-search-btn span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-search-btn~.top-actions{margin-left:14px}
.page-search-btn kbd,.ps-panel kbd{font:600 10.5px/1 var(--font,inherit);padding:4px 6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);box-shadow:0 1px 0 var(--border)}
.ps-backdrop{position:fixed;inset:0;z-index:300;background:rgba(10,18,30,.42);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;animation:ps-fade .12s ease}
.ps-panel{width:min(620px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;animation:ps-pop .14s ease}
.ps-input{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.ps-input input{flex:1;height:52px;border:0!important;outline:0;background:transparent;font-size:16px;color:var(--text);box-shadow:none!important;padding:0}
.ps-list{max-height:min(52vh,420px);overflow-y:auto;padding:6px}
.ps-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font-size:14px}
.ps-item.is-active{background:var(--brand-soft)}
.ps-item__icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--surface-2);color:var(--brand)}
.ps-item__icon svg{width:18px;height:18px}
.ps-item.is-active .ps-item__icon{background:var(--brand);color:#fff}
.ps-item__name{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-item__cat{font-size:11.5px;color:var(--muted);font-weight:600}
.ps-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:13.5px}
.ps-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.ps-foot span{display:flex;align-items:center;gap:4px}
@keyframes ps-fade{from{opacity:0}to{opacity:1}}
@keyframes ps-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ps-backdrop,.ps-panel{animation:none}}

/* login screen - build/server line of test builds of the mobile app (Login.razor) */
.login-env{display:block;margin:10px auto 0;border:0;background:none;color:var(--muted);font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-server{display:flex;gap:6px;margin-top:8px}.login-server input{flex:1;min-width:0}

/* controls only for touch screens (no mouse hover) - e.g. the seat map's Select switch */
.touch-only{display:none!important}
@media (hover:none) and (pointer:coarse){.touch-only{display:inline-flex!important}}
/* dashboard pull-to-refresh (Dashboard.razor + jmtPullRefresh) */
.ptr-indicator{height:0;overflow:visible;display:flex;justify-content:center;pointer-events:none}
.ptr-indicator .spinner{opacity:0;transform:translateY(calc(var(--ptr,0px) - 30px));transition:opacity .15s}
.ptr-indicator[style*="--ptr"] .spinner{opacity:.55;animation-play-state:paused}
.ptr-indicator.is-ready .spinner{opacity:1;animation-play-state:running}
.ptr-indicator.is-busy{height:34px}
.ptr-indicator.is-busy .spinner{opacity:1;transform:none;animation-play-state:running}

/* app-wide offline banner (AppShell, mobile app only) */
.offline-banner{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;border-radius:10px;
  background:color-mix(in srgb,#f59f00 14%,var(--surface));border:1px solid color-mix(in srgb,#f59f00 45%,var(--border));
  color:var(--text);font-size:13px;font-weight:600}
.offline-banner::before{content:"";width:9px;height:9px;border-radius:50%;background:#f59f00;flex:none}
/* public privacy policy page (Privacy.razor) */
.privacy-page{min-height:100vh;padding:28px 16px;background:var(--bg,var(--surface-2))}
.privacy-card{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 30px;line-height:1.6;color:var(--text)}
.privacy-card header{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.privacy-card header img{width:56px;height:56px;object-fit:contain}
.privacy-card h1{margin:0;font-size:24px}
.privacy-card header p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.privacy-card h2{font-size:16px;margin:22px 0 6px}
.privacy-card ul{padding-left:20px;margin:6px 0}
.privacy-card li{margin:4px 0}
.privacy-updated{margin-top:24px;color:var(--muted);font-size:12.5px}
/* top-bar burger: only the mobile app shows it (app-host.css); the website keeps its rail */
.topbar-burger{display:none}

/* phones: top-bar dropdowns (notifications, theme, profile) open as a full-width panel under the
   header instead of hanging off the right edge of the bell and running off screen */
@media(max-width:820px){
  .topbar .popover{position:fixed;left:8px;right:8px;top:calc(var(--topbar-h) + 6px);width:auto;
    min-width:0!important;max-height:calc(100dvh - var(--topbar-h) - 24px);overflow-y:auto;z-index:120}
}