/* ============================================================================
   Project : RIC Fee Management | Web (Blazor) | V2.6
   File    : v26.css
   Purpose : Styles for the V2.6 modules. Built only on app-theme.css tokens,
             so dark mode and the Urdu (RTL) layout follow automatically.
             v26-*  shared building blocks (KPIs, panels, bars, chips)
             msg-*  WhatsApp / SMS
   ============================================================================ */

/* ---------------- Shared building blocks ---------------- */
.v26-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.v26-select { width: auto; min-width: 180px; max-width: 100%; padding-top: 10px; padding-bottom: 10px; }
.v26-search { margin-bottom: 0; flex: 1 1 220px; }
.v26-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.v26-filter-inline { margin-bottom: 0; }
.v26-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }
.v26-note { font-size: 12.5px; color: var(--color-text-secondary); margin: var(--space-sm) 0 0; line-height: 1.5; }

.v26-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.v26-kpis.is-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--space-md); }
.v26-kpi {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card);
    background: var(--color-surface); border: 1px solid var(--color-divider);
}
.v26-kpi > .material-symbols-rounded {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--status-info-bg); color: var(--status-info-fg); font-size: 22px;
}
.v26-kpi.is-warn > .material-symbols-rounded { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.v26-kpi.is-bad > .material-symbols-rounded { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.v26-kpi.is-good > .material-symbols-rounded { background: var(--status-success-bg); color: var(--status-success-fg); }
.v26-kpi-value { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.v26-kpi-label { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

.v26-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); align-items: start; }
.v26-split.is-even { grid-template-columns: 1fr 1fr; }
.v26-panel {
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-card);
    padding: var(--space-lg); margin-bottom: var(--space-md); min-width: 0;
}
.erp-tabs-body .v26-panel { background: transparent; }
.v26-panel-title { font-size: 14px; font-weight: 700; margin: 0 0 var(--space-md); color: var(--color-text-primary); }

/* Vertical bars (14-day style charts) */
.v26-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: var(--space-sm) 0; }
.v26-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.v26-bar-stack { flex: 1; width: 100%; max-width: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.v26-bar { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--color-primary-fill); min-height: 0; transition: height .3s ease; }
.v26-bar.is-bad { background: var(--color-error); opacity: .8; }
.v26-bar-label { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.v26-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--color-primary-fill); margin-inline-end: 6px; }
.v26-dot.is-bad { background: var(--color-error); }

/* Horizontal bars */
.v26-hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: var(--space-sm); margin-bottom: 10px; font-size: 13px; }
.v26-hbar-label { color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v26-hbar-track { height: 10px; border-radius: 99px; background: var(--status-neutral-bg); overflow: hidden; }
.v26-hbar-fill { display: block; height: 100%; border-radius: 99px; background: var(--color-primary-fill); }
.v26-hbar strong { font-variant-numeric: tabular-nums; }

.v26-chip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
    background: var(--status-info-bg); color: var(--status-info-fg); white-space: nowrap;
}
.v26-status { display: inline-flex; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.v26-status.is-sent, .v26-status.is-good { background: var(--status-success-bg); color: var(--status-success-fg); }
.v26-status.is-queued, .v26-status.is-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.v26-status.is-failed, .v26-status.is-bad { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.v26-status.is-skipped, .v26-status.is-muted { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.v26-status.is-warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }

.v26-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); font-size: 13px; color: var(--color-text-secondary); }

/* ---------------- WhatsApp / SMS ---------------- */
.msg-status {
    display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-card); margin-bottom: var(--space-md); border: 1px solid transparent;
}
.msg-status.is-on { background: var(--status-success-bg); border-color: rgba(0,100,0,.18); }
.msg-status.is-off { background: var(--status-warning-bg); border-color: rgba(217,119,6,.25); }
.msg-status-icon { font-size: 28px; }
.msg-status.is-on .msg-status-icon { color: var(--status-success-fg); }
.msg-status.is-off .msg-status-icon { color: var(--status-warning-fg); }
.msg-status-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-text-secondary); }
.msg-status-text strong { font-size: 14.5px; color: var(--color-text-primary); }

.msg-provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.msg-provider-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.msg-provider {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
    text-align: start; padding: 12px 14px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit;
    background: var(--color-surface); border: 1.5px solid var(--color-divider); transition: border-color .15s, background .15s;
}
.msg-provider .material-symbols-rounded { grid-row: 1 / span 2; font-size: 24px; color: var(--color-text-secondary); align-self: center; }
.msg-provider-name { font-weight: 700; font-size: 13.5px; }
.msg-provider-hint { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }
.msg-provider.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.msg-provider.is-on .material-symbols-rounded { color: var(--color-primary); }
.msg-provider:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.msg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); margin-top: var(--space-md); }
.msg-span-2 { grid-column: 1 / -1; }
.msg-form-grid textarea.erp-input { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.msg-help {
    display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary);
    background: var(--status-neutral-bg); padding: 10px 12px; border-radius: 12px; margin-top: var(--space-sm);
}
.msg-help .material-symbols-rounded { font-size: 18px; color: var(--color-primary); }
.msg-help code { background: var(--color-surface); padding: 1px 6px; border-radius: 6px; font-size: 12px; }

.msg-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-sm); }
.msg-event {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--color-divider); background: var(--color-surface); transition: border-color .15s, background .15s;
}
.msg-event input { margin-top: 3px; accent-color: var(--color-primary-fill); }
.msg-event .material-symbols-rounded { color: var(--color-text-secondary); font-size: 20px; }
.msg-event strong { display: block; font-size: 13px; }
.msg-event small { display: block; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }
.msg-event.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.msg-event.is-on .material-symbols-rounded { color: var(--color-primary); }

.msg-test-row { display: flex; gap: var(--space-sm); align-items: flex-start; flex-wrap: wrap; }
.msg-test-row .erp-field { flex: 1 1 220px; margin-bottom: 0; }
.msg-test-result { display: flex; gap: 8px; align-items: center; margin-top: var(--space-sm); font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.msg-test-result.is-sent { background: var(--status-success-bg); color: var(--status-success-fg); }
.msg-test-result.is-failed, .msg-test-result.is-skipped, .msg-test-result.is-queued { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.msg-quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }

.msg-log { display: flex; flex-direction: column; }
.msg-log-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); padding: 12px 4px; border-bottom: 1px solid var(--color-divider); }
.msg-log-row:last-child { border-bottom: 0; }
.msg-log-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.msg-log-icon .material-symbols-rounded { font-size: 19px; }
.msg-log-icon.is-sent { background: var(--status-success-bg); color: var(--status-success-fg); }
.msg-log-icon.is-failed { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.msg-log-icon.is-queued { background: var(--status-info-bg); color: var(--status-info-fg); }
.msg-log-main { min-width: 0; }
.msg-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.msg-log-student { color: var(--color-text-secondary); }
.msg-log-body { font-size: 13px; color: var(--color-text-primary); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-log-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 4px; }
.msg-log-error { font-size: 12px; color: var(--status-danger-fg); margin-top: 4px; }
.msg-log-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg-settings { max-width: 980px; }

@media (max-width: 900px) {
    .v26-split, .v26-split.is-even { grid-template-columns: 1fr; }
    .msg-provider-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .msg-form-grid { grid-template-columns: 1fr; }
    .msg-log-row { grid-template-columns: auto 1fr; }
    .msg-log-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
    .v26-kpi { padding: var(--space-md); }
    .v26-kpi-value { font-size: 19px; }
    .v26-select { min-width: 0; flex: 1 1 140px; }
}

/* ---------------- Switch row ---------------- */
.v26-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.v26-switch-title { font-weight: 700; font-size: 14px; color: var(--color-text-primary); }
.v26-switch-hint { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
.v26-switch {
    position: relative; flex: 0 0 auto; width: 48px; height: 28px; border-radius: 99px; border: 0; cursor: pointer; padding: 0;
    background: var(--color-border-disabled, #CBD5E1); transition: background .2s ease;
}
.v26-switch-knob {
    position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.v26-switch[aria-checked="true"] { background: var(--color-success); }
.v26-switch[aria-checked="true"] .v26-switch-knob { transform: translateX(20px); }
[dir="rtl"] .v26-switch[aria-checked="true"] .v26-switch-knob { transform: translateX(-20px); }
.v26-switch:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.v26-switch:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Parent <-> school messages ---------------- */
.pm-shell {
    display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; min-height: 560px; height: calc(100vh - 220px);
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-card); overflow: hidden;
}
.pm-list { display: flex; flex-direction: column; border-inline-end: 1px solid var(--color-divider); min-width: 0; min-height: 0; }
.pm-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); }
.pm-scope { display: inline-flex; background: var(--status-neutral-bg); border-radius: 99px; padding: 3px; }
.pm-scope button { border: 0; background: transparent; padding: 5px 12px; border-radius: 99px; font: inherit; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); cursor: pointer; }
.pm-scope button.is-on { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pm-list-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--space-md) var(--space-sm); }
.pm-list-tools .v26-search { flex: 1 1 100%; max-width: none; }
.pm-list-tools .v26-select { flex: 1 1 120px; min-width: 0; }
.pm-items { flex: 1; overflow-y: auto; }
.pm-item {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: start; padding: 12px var(--space-md);
    border: 0; border-top: 1px solid var(--color-divider); background: transparent; font: inherit; color: inherit; cursor: pointer;
}
.pm-item:hover { background: var(--status-neutral-bg); }
.pm-item.is-active { background: var(--status-info-bg); }
.pm-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-item-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pm-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item-top time { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; }
.pm-item-sub { font-size: 12px; color: var(--color-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item-preview { font-size: 12.5px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item.is-unread .pm-item-preview { color: var(--color-text-primary); font-weight: 600; }
.pm-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--color-success); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; align-self: center; }
.pm-closed-icon { font-size: 16px; color: var(--color-text-disabled); align-self: center; }
.pm-avatar {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--status-info-bg); color: var(--status-info-fg); font-weight: 800; font-size: 13px;
}
.pm-avatar.is-parent { background: var(--status-success-bg); color: var(--status-success-fg); }

.pm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--color-background); }
.pm-placeholder { flex: 1; display: grid; place-content: center; text-align: center; color: var(--color-text-secondary); gap: 6px; }
.pm-placeholder .material-symbols-rounded { font-size: 48px; color: var(--color-text-disabled); }
.pm-thread-head { display: flex; align-items: center; gap: var(--space-sm); padding: 12px var(--space-md); background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.pm-thread-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-thread-title strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-thread-title span { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-back { display: none; }
.pm-oversight { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 8px var(--space-md); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pm-oversight .material-symbols-rounded { font-size: 18px; }
.pm-messages { flex: 1; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.pm-day { text-align: center; margin: 8px 0; }
.pm-day span { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-divider); padding: 3px 10px; border-radius: 99px; }
.pm-msg { max-width: min(78%, 560px); align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 16px 16px 16px 4px; padding: 8px 12px; }
.pm-msg.is-mine { align-self: flex-end; background: var(--color-primary-fill); border-color: transparent; color: #fff; border-radius: 16px 16px 4px 16px; }
.pm-msg-sender { font-size: 11.5px; font-weight: 700; color: var(--color-primary); margin-bottom: 2px; }
.pm-msg-body { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 10.5px; opacity: .75; margin-top: 3px; }
.pm-tick { font-size: 15px; }
.pm-tick.is-seen { color: #7FDCFF; opacity: 1; }
.pm-compose { display: flex; gap: var(--space-sm); align-items: flex-end; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-top: 1px solid var(--color-divider); }
.pm-compose textarea {
    flex: 1; resize: none; max-height: 140px; min-height: 44px; border: 1.5px solid var(--color-divider); border-radius: 14px; padding: 10px 12px;
    font: inherit; font-size: 13.5px; background: var(--color-surface); color: var(--color-text-primary);
}
.pm-compose textarea:focus { outline: none; border-color: var(--color-primary); }
.pm-compose .erp-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.pm-closed-note { padding: 12px var(--space-md); font-size: 12.5px; color: var(--color-text-secondary); background: var(--color-surface); border-top: 1px solid var(--color-divider); text-align: center; }
.pm-contacts, .pm-student-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-sm); max-height: 300px; overflow-y: auto; }
.pm-contact {
    display: flex; gap: 10px; align-items: center; text-align: start; padding: 10px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--color-divider); background: var(--color-surface); font: inherit; color: inherit;
}
.pm-contact strong { display: block; font-size: 13px; }
.pm-contact small { display: block; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.35; }
.pm-contact.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.pm-contact:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 860px) {
    .pm-shell { grid-template-columns: 1fr; height: calc(100vh - 180px); min-height: 480px; }
    .pm-shell.has-open .pm-list { display: none; }
    .pm-shell:not(.has-open) .pm-thread { display: none; }
    .pm-list { border-inline-end: 0; }
    .pm-back { display: grid; }
    .pm-msg { max-width: 88%; }
}

/* ---------------- Public challan (QR) ---------------- */
.pc-page { min-height: 100vh; background: var(--color-background); padding: 24px 16px 40px; display: flex; justify-content: center; align-items: flex-start; }
.pc-card { width: 100%; max-width: 520px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
.pc-invalid { text-align: center; padding: 36px 24px; }
.pc-invalid h1 { font-size: 20px; margin: 8px 0; }
.pc-invalid p { color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; }
.pc-big-icon { font-size: 56px; color: var(--color-error); }
.pc-school { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; background: var(--gradient-brand, var(--color-primary-fill)); color: #fff; }
.pc-school-name { font-size: 18px; font-weight: 800; line-height: 1.25; }
.pc-school-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.pc-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.18); padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.pc-verified .material-symbols-rounded { font-size: 17px; }
.pc-status { display: flex; align-items: center; gap: 12px; margin: 16px 20px 6px; padding: 14px; border-radius: 14px; }
.pc-status > .material-symbols-rounded { font-size: 32px; }
.pc-status > div:not(.pc-amount) { flex: 1; display: flex; flex-direction: column; }
.pc-status strong { font-size: 16px; }
.pc-status span { font-size: 12.5px; opacity: .85; }
.pc-amount { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pc-status.is-paid { background: var(--status-success-bg); color: var(--status-success-fg); }
.pc-status.is-due { background: var(--status-info-bg); color: var(--status-info-fg); }
.pc-status.is-overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.pc-status.is-cancelled { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 14px 20px; }
.pc-grid div { min-width: 0; }
.pc-grid .pc-wide { grid-column: 1 / -1; }
.pc-grid dt { font-size: 11.5px; color: var(--color-text-secondary); }
.pc-grid dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pc-h2 { font-size: 13px; font-weight: 800; margin: 18px 20px 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); }
.pc-accounts { display: flex; flex-direction: column; gap: 8px; margin: 0 20px; }
.pc-account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 12px; }
.pc-account > .material-symbols-rounded { color: var(--color-primary); }
.pc-account > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-account small { font-size: 12px; color: var(--color-text-secondary); }
.pc-account code { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pc-note { display: flex; gap: 6px; align-items: center; margin: 12px 20px 0; font-size: 12.5px; color: var(--color-text-secondary); }
.pc-note .material-symbols-rounded { font-size: 18px; }
.pc-foot { margin-top: 18px; padding: 12px 20px; font-size: 11.5px; color: var(--color-text-secondary); border-top: 1px solid var(--color-divider); text-align: center; }

/* ---------------- Admissions CRM ---------------- */
.al-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.al-muted { font-size: 11.5px; color: var(--color-text-secondary); }
.al-due-text { color: var(--status-warning-fg); font-weight: 700; }
.al-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--space-sm); overflow-x: auto; padding-bottom: 8px; align-items: start; }
.al-col { background: var(--status-neutral-bg); border-radius: 14px; min-height: 120px; display: flex; flex-direction: column; }
.al-col header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); border-top: 3px solid var(--color-divider); border-radius: 14px 14px 0 0; }
.al-col-new header { border-top-color: var(--color-info); }
.al-col-contacted header, .al-col-visit header, .al-col-test header { border-top-color: var(--color-warning); }
.al-col-offered header, .al-col-admitted header { border-top-color: var(--color-success); }
.al-col-lost header { border-top-color: var(--color-text-disabled); }
.al-col-count { background: var(--color-surface); border-radius: 99px; padding: 1px 8px; font-size: 11.5px; }
.al-col-body { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; max-height: 560px; overflow-y: auto; }
.al-card {
    display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: var(--color-surface); border: 1px solid var(--color-divider); font: inherit; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.al-card:hover { border-color: var(--color-primary); }
.al-card.is-due { border-inline-start: 4px solid var(--color-warning); }
.al-card-top { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.al-card-top small { color: var(--color-text-secondary); font-size: 11px; white-space: nowrap; }
.al-card-sub { font-size: 12px; color: var(--color-text-secondary); }
.al-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; }
.al-row { cursor: pointer; }
.al-row:hover td { background: var(--status-neutral-bg); }
.v26-hbar-fill.al-stage-new { background: var(--color-info); }
.v26-hbar-fill.al-stage-admitted, .v26-hbar-fill.al-stage-offered { background: var(--color-success); }
.v26-hbar-fill.al-stage-lost { background: var(--color-text-disabled); }
.v26-hbar-fill.al-stage-contacted, .v26-hbar-fill.al-stage-visit, .v26-hbar-fill.al-stage-test { background: var(--color-warning); }
.al-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); }
.al-stage-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.al-actions { margin-top: var(--space-md); border-top: 1px solid var(--color-divider); padding-top: var(--space-md); }
.al-actions h4, .al-timeline h4 { font-size: 13px; font-weight: 800; margin: 0 0 8px; }
.al-log-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-sm); }
.al-timeline { border-inline-start: 1px solid var(--color-divider); padding-inline-start: var(--space-md); max-height: 520px; overflow-y: auto; }
.al-event { display: flex; gap: 10px; padding: 8px 0; }
.al-event > .material-symbols-rounded { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--status-info-bg); color: var(--status-info-fg); }
.al-event-title { font-size: 13px; font-weight: 700; }
.al-event-note { font-size: 12.5px; margin: 2px 0; overflow-wrap: anywhere; }
.al-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--status-neutral-bg); }
.al-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
@media (max-width: 800px) {
    .al-detail { grid-template-columns: 1fr; }
    .al-timeline { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--color-divider); padding-top: var(--space-md); }
}

/* ---------------- Public admission form ---------------- */
.pa-card { max-width: 680px; }
.pa-body { padding: 18px 20px 22px; }
.pa-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.pa-note { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 8px; }
.pa-closed { text-align: center; color: var(--color-text-secondary); padding: 20px 0; }
.pa-submit { width: 100%; justify-content: center; margin-top: var(--space-md); padding: 12px; font-size: 15px; }
.pa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pa-done { text-align: center; }
.pa-done > .material-symbols-rounded { font-size: 60px; color: var(--color-success); }
.pa-done h1 { font-size: 22px; margin: 6px 0; }
.pa-done p { color: var(--color-text-secondary); }
.pa-ref { display: inline-flex; flex-direction: column; gap: 2px; margin: 14px 0 18px; padding: 12px 26px; border-radius: 14px; background: var(--status-success-bg); }
.pa-ref small { font-size: 12px; color: var(--status-success-fg); }
.pa-ref strong { font-size: 26px; letter-spacing: .06em; color: var(--status-success-fg); }

/* ---------------- Live bus tracking ---------------- */
.bt-map { height: 320px; border-radius: 14px; overflow: hidden; background: var(--status-neutral-bg); border: 1px solid var(--color-divider); margin: var(--space-sm) 0; z-index: 0; }
.bt-map.is-big { height: calc(100vh - 330px); min-height: 420px; border: 0; border-radius: 0; margin: 0; }
.bt-map.is-picking, .bt-map.is-picking .leaflet-container { cursor: crosshair; outline: 3px dashed var(--color-primary); outline-offset: -3px; }
.v26-pin-wrap { background: none; border: 0; }
.v26-pin { width: 38px; height: 38px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.3); border: 2px solid #fff; }
.v26-pin .material-symbols-rounded { transform: rotate(45deg); font-size: 21px; color: #fff; }
.v26-pin-bus { background: #F59E0B; }
.v26-pin-stop { background: #16A34A; }
.v26-pin-me { background: #2563EB; }
.v26-pin-label { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #0A192F; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bt-start { max-width: 760px; }
.bt-types { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bt-type { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--color-divider); background: var(--color-surface); font: inherit; font-weight: 700; font-size: 13px; color: inherit; cursor: pointer; }
.bt-type.is-on { border-color: var(--color-primary); background: var(--status-info-bg); color: var(--color-primary); }
.bt-go { width: 100%; justify-content: center; margin-top: var(--space-lg); padding: 14px; font-size: 16px; }
.bt-live { max-width: 760px; border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-surface); border: 2px solid var(--color-success); }
.bt-live.is-bad { border-color: var(--color-warning); }
.bt-live-head { display: flex; align-items: center; gap: 12px; }
.bt-live-head strong { display: block; font-size: 16px; }
.bt-live-head span { font-size: 12.5px; color: var(--color-text-secondary); }
.bt-pulse { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: bt-pulse 1.6s infinite; display: inline-block; }
.bt-pulse.is-stale, .bt-live.is-bad .bt-pulse { background: var(--color-warning); animation: none; }
@keyframes bt-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .bt-pulse { animation: none; } }
.bt-gps-error { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--status-warning-bg); color: var(--status-warning-fg); font-size: 13px; font-weight: 600; }
.bt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: var(--space-md) 0 var(--space-sm); }
.bt-stats div { text-align: center; background: var(--status-neutral-bg); border-radius: 12px; padding: 10px 4px; }
.bt-stats span { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bt-stats small { font-size: 11px; color: var(--color-text-secondary); }
.bt-child { max-width: 860px; }
.bt-child-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bt-child-head strong { display: block; font-size: 15px; }
.bt-child-head span { font-size: 12.5px; color: var(--color-text-secondary); }
.bt-status { display: flex; align-items: center; gap: 10px; margin-top: var(--space-sm); padding: 10px 12px; border-radius: 12px; font-size: 13.5px; }
.bt-status.is-live { background: var(--status-success-bg); color: var(--status-success-fg); }
.bt-status.is-wait { background: var(--status-info-bg); color: var(--status-info-fg); }
.bt-status.is-idle { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.bt-ago { opacity: .8; font-size: 12px; }
.bt-stop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.bt-stop-row > .material-symbols-rounded { color: #16A34A; }
.bt-stop-text { font-weight: 600; flex: 1; min-width: 120px; }
.bt-trip-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px; border-radius: 12px; border: 1px solid var(--color-divider); background: var(--color-surface); margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit; }
.bt-trip-row.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.bt-trip-row.is-ended > .material-symbols-rounded { color: var(--color-text-secondary); }
.bt-trip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bt-trip-main small { font-size: 11.5px; color: var(--color-text-secondary); }
@media (max-width: 600px) {
    .bt-stats span { font-size: 18px; }
    .bt-map { height: 260px; }
}
.bt-child-head .erp-btn { white-space: nowrap; }

/* ================= [V2.6] AI assistant + early warning ================= */
.ai-spark { color: #7C3AED; }
.ai-btn-spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; }
.ai-warn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--status-warning-bg); color: var(--status-warning-fg); font-weight: 600; }
.ai-usage { margin: var(--space-md) 0; padding: var(--space-md); border-radius: 12px; background: var(--status-neutral-bg); }
.ai-usage-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
.ai-usage-track { display: block; height: 10px; }
.v26-hbar-fill.is-bad { background: var(--color-error); }
.ai-what { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: 8px; }
.ai-what li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.ai-what .material-symbols-rounded { color: #7C3AED; font-size: 20px; }
.ai-log { display: flex; flex-direction: column; gap: 6px; }
.ai-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-divider); }
.ai-log-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #EDE9FE; color: #6D28D9; }
.ai-log-icon.is-refused, .ai-log-icon.is-failed { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ai-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.ai-log-main span { color: var(--color-text-secondary); font-size: 12px; }
.ai-log-side { font-size: 12px; font-weight: 700; white-space: nowrap; }
.ai-limit-cell { display: flex; align-items: center; gap: 6px; }
.ai-limit-input { width: 90px; padding: 6px 8px; }
.ai-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }

/* Question paper editor panel */
.ai-qp { padding: 0; margin-bottom: var(--space-lg); border: 1.5px solid #DDD6FE; background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(37,99,235,.04)); overflow: hidden; }
.ai-qp-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px var(--space-lg); background: none; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.ai-qp-head .ai-spark { font-size: 26px; }
.ai-qp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-qp-title span { font-size: 12.5px; color: var(--color-text-secondary); }
.ai-qp-usage { font-size: 12px; font-weight: 600; color: #6D28D9; white-space: nowrap; }
.ai-qp-body { padding: 0 var(--space-lg) var(--space-lg); }
.ai-qp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ai-qp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
    .ai-qp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ai-qp-usage { display: none; }
}
@media (max-width: 460px) { .ai-qp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Result-card remarks */
.rs-print-row { gap: 8px; flex-wrap: wrap; }
.rr-filters .v26-select { min-width: 160px; }
.ai-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px var(--space-lg); border-radius: var(--radius-card); border: 1.5px solid #DDD6FE; background: linear-gradient(135deg, rgba(124,58,237,.07), rgba(37,99,235,.04)); margin-bottom: var(--space-md); }
.ai-banner .ai-spark { font-size: 28px; }
.ai-banner-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; font-size: 13px; }
.ai-banner-text span { color: var(--color-text-secondary); }
.ai-banner-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-banner-actions .v26-select { min-width: 110px; }
.rr-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-sm); }
.rr-summary strong { color: var(--color-text-primary); }
.rr-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.rr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.rr-card { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-divider); background: var(--color-surface); display: flex; flex-direction: column; gap: 8px; }
/* [V2.6] Opaque - a translucent tint let the page watermark show through locked cards. */
.rr-card.is-locked { background: var(--color-surface); border-style: dashed; }
.rr-card.is-locked .rr-text { background: var(--color-background); color: var(--color-text-secondary); }
.rr-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.rr-name { display: flex; flex-direction: column; min-width: 0; }
.rr-name span { font-size: 12px; color: var(--color-text-secondary); }
.rr-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rr-chips .material-symbols-rounded { font-size: 13px; margin-inline-end: 2px; }
.v26-chip.is-good { background: var(--status-success-bg); color: var(--status-success-fg); }
.v26-chip.is-bad { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.v26-chip.is-ai { background: #EDE9FE; color: #6D28D9; }
.rr-text { resize: vertical; min-height: 58px; font-size: 13.5px; line-height: 1.5; }
.rr-text[dir="rtl"] { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; line-height: 2.1; }
.rr-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 420px) { .rr-list { grid-template-columns: 1fr; } }

/* Early warning */
.ew-kpi { font: inherit; color: inherit; text-align: start; cursor: pointer; border: 1.5px solid transparent; }
.ew-kpi.is-selected { border-color: var(--color-primary); }
.ew-signals { margin-bottom: var(--space-md); }
.ew-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ew-card { padding: 12px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-divider); border-inline-start: 5px solid var(--color-warning); display: flex; flex-direction: column; gap: 8px; }
.ew-card.is-high { border-inline-start-color: var(--color-error); }
.ew-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ew-name { display: flex; flex-direction: column; min-width: 0; }
.ew-name span { font-size: 12px; color: var(--color-text-secondary); }
.ew-level { font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 99px; background: var(--status-warning-bg); color: var(--status-warning-fg); white-space: nowrap; }
.ew-card.is-high .ew-level { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ew-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ew-reasons li { display: flex; gap: 8px; align-items: flex-start; }
.ew-reasons .material-symbols-rounded { font-size: 18px; color: var(--color-text-secondary); }
.ew-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--color-divider); padding-top: 8px; }
.ew-guardian { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.ew-guardian .material-symbols-rounded { font-size: 17px; }
.ew-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ew-actions .erp-btn .material-symbols-rounded { font-size: 16px; }
@media (max-width: 420px) { .ew-list { grid-template-columns: 1fr; } }
html[data-theme="dark"] .ai-log-icon, html[data-theme="dark"] .v26-chip.is-ai { background: rgba(167,139,250,.18); color: #C4B5FD; }
html[data-theme="dark"] .ai-spark, html[data-theme="dark"] .ai-what .material-symbols-rounded, html[data-theme="dark"] .ai-qp-usage { color: #A78BFA; }
html[data-theme="dark"] .ai-qp, html[data-theme="dark"] .ai-banner { border-color: rgba(167,139,250,.35); background: rgba(124,58,237,.10); }