/* SmartRefahiBot admin panel - component layer.
 *
 * Every value here resolves to a token from theme.css, which is generated from
 * tokens/*.json. No hex, no raw px, no raw timing. Dark mode is inherited: the
 * semantic tokens swap under [data-theme="dark"], so almost nothing below needs
 * a dark-specific rule.
 *
 * RTL: the document is dir="rtl", so this file uses logical properties
 * (inline-start/end, inline-size) rather than left/right/width wherever the
 * distinction matters.
 */

/* ---------------------------------------------------------------- base --- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    color-scheme: light dark;
}

/* The theme toggle sets data-theme explicitly, so tell the UA which scheme it is
   or native controls (checkboxes, scrollbars, the dir="ltr" phone fields) keep
   rendering for the opposite theme. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

body {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-feature-settings: "ss01";
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* One focus ring for the whole app. Keyboard users get a visible indicator on
   every control; pointer users do not see it on click. */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px; /* ds-allow-hardcode: WCAG 2.4.13 ring geometry, not a spacing step */
    border-radius: var(--radius-sm);
}

.icon {
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    flex: none;
}

/* Available to screen readers, invisible on screen. Needs a positioned ancestor
   or it inflates document scrollWidth from inside a horizontal scroller. */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- buttons --- */

.btn {
    inline-size: 100%;
    min-block-size: var(--size-control-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    font-family: inherit; /* ds-allow-hardcode: inherits --font-sans from body */
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: var(--transition-micro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn:hover { background: var(--color-button-primary-bg-hover); }
.btn:active { background: var(--color-button-primary-bg-active); }

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--color-button-disabled-bg);
    color: var(--color-button-disabled-text);
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading is not disabled: keep the control at full strength and let the label
   say what is happening. */
.btn[aria-busy="true"] {
    cursor: progress;
}

.btn-secondary {
    background: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
    border-color: var(--color-border-default);
}
.btn-secondary:hover { background: var(--color-button-secondary-bg-hover); }

.btn-danger {
    background: var(--color-button-destructive-bg);
    color: var(--color-button-destructive-text);
}
.btn-danger:hover { background: var(--color-button-destructive-bg-hover); }

.btn-success {
    background: var(--color-button-success-bg);
    color: var(--color-button-success-text);
}
.btn-success:hover { background: var(--color-button-success-bg-hover); }

.btn-sm {
    inline-size: auto;
    min-block-size: var(--size-control-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.icon-btn {
    background: none;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
    cursor: pointer;
    min-inline-size: var(--size-control-sm);
    min-block-size: var(--size-control-sm);
    padding: var(--space-2);
    border-radius: var(--radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-micro);
}
.icon-btn:hover { background: var(--color-surface-sunken); }

/* ---------------------------------------------------------------- forms --- */

.form-group {
    margin-block-end: var(--space-5);
    text-align: start;
}

.form-group label {
    display: block;
    margin-block-end: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.form-input,
.form-select {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--size-control-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-input);
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    font-family: inherit; /* ds-allow-hardcode: inherits --font-sans from body */
    font-size: var(--text-sm);
    transition: var(--transition-micro);
}

.form-input::placeholder { color: var(--color-input-placeholder); }
.form-input:hover,
.form-select:hover { border-color: var(--color-input-border-hover); }
.form-input:focus,
.form-select:focus { border-color: var(--color-input-border-focus); }

.form-input:disabled,
.form-select:disabled {
    background: var(--color-input-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.form-input[aria-invalid="true"] { border-color: var(--color-input-border-error); }

/* Native checkboxes keep the UA's black `buttontext` regardless of theme, which
   is invisible on a dark card. accent-color drives the checked fill; the explicit
   color is what a contrast gate actually measures on a control with no text. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-action-primary);
    color: var(--color-text-primary);
    inline-size: 1.125rem;
    block-size: 1.125rem;
    cursor: pointer;
    flex: none;
}

.search-box {
    display: flex;
    gap: var(--space-2);
    inline-size: 100%;
    max-inline-size: 28rem;
}

/* The datepicker is third-party CDN CSS; these are the minimum overrides that
   keep it inside the theme. */
.datepicker-plot-area {
    z-index: 999999 !important;
    font-family: var(--font-sans) !important;
    background: var(--color-surface-card) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-dropdown) !important;
    color: var(--color-text-primary) !important;
}
.datepicker-plot-area .navigator .btn,
.datepicker-plot-area .datepicker-day-view .table-days td span {
    color: var(--color-text-primary) !important;
}
.datepicker-plot-area .datepicker-day-view .table-days td span:hover {
    background: var(--color-interactive-selected-bg) !important;
}
.datepicker-plot-area .datepicker-day-view .table-days td.disabled span {
    color: var(--color-text-disabled) !important;
}

/* --------------------------------------------------------------- layout --- */

.app-container {
    display: flex;
    flex: 1;
    min-block-size: 100vh;
    inline-size: 100%;
}

.main-content {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.content-body {
    padding: var(--space-6);
    flex: 1;
    inline-size: 100%;
}

/* -------------------------------------------------------------- sidebar --- */

.sidebar {
    inline-size: 16rem;
    min-inline-size: 16rem;
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    transition: inline-size var(--duration-base) var(--ease-in-out),
                min-inline-size var(--duration-base) var(--ease-in-out);
    z-index: 100;
}

.sidebar.collapsed {
    inline-size: 4.5rem;
    min-inline-size: 4.5rem;
    padding-inline: var(--space-2);
}

.sidebar-brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-sidebar-border);
    margin-block-end: var(--space-4);
    color: var(--color-sidebar-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-brand-text { display: none; }

.nav-item {
    position: relative;
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-button);
    margin-block-end: var(--space-1);
    cursor: pointer;
    background: transparent;
    color: var(--color-sidebar-text);
    text-align: start;
    font-family: inherit; /* ds-allow-hardcode: inherits --font-sans from body */
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: var(--transition-micro);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding-inline: 0;
}
.sidebar.collapsed .nav-text { display: none; }

.nav-item:hover {
    background: var(--color-sidebar-item-hover-bg);
    color: var(--color-sidebar-text-strong);
}

.nav-item.active {
    background: var(--color-sidebar-item-active-bg);
    color: var(--color-sidebar-item-active-text);
    font-weight: var(--weight-semibold);
}

/* The accent rail carries the active state as shape, not colour alone. */
.nav-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: var(--space-2);
    inline-size: 3px; /* ds-allow-hardcode: hairline accent rail */
    border-radius: var(--radius-full);
    background: var(--color-sidebar-item-active-indicator);
}

.nav-item-danger { color: var(--color-sidebar-item-danger-text); }
.nav-item-danger:hover { color: var(--color-sidebar-item-danger-text); }

/* --------------------------------------------------------------- navbar --- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface-card);
    min-block-size: 4rem;
    border-block-end: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--space-6);
}

.navbar-right,
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* ------------------------------------------------------- cards and stats --- */

.card,
.stat-card,
.chart-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.card {
    padding: var(--space-6);
    margin-block-end: var(--space-6);
    inline-size: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.card-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-5);
    margin-block-end: var(--space-6);
}

.stat-card {
    padding: var(--space-5);
    transition: var(--transition-micro);
}

/* A border and shadow shift, not a lift. Translating a card on hover is a tell. */
.stat-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.stat-title {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-block-end: var(--space-2);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-block-end: var(--space-6);
}

.chart-card { padding: var(--space-5); }

@media (max-width: 1024px) {
    .charts-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- tables --- */

.table-responsive {
    inline-size: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-default);
}
.events-table td[data-label="عملیات"] { white-space: normal; }
.events-table .event-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.registration-identity {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-feedback-success-border);
    border-radius: var(--radius-md);
    background: var(--color-feedback-success-bg);
    color: var(--color-feedback-success-text);
}
.registration-identity span { color: var(--color-text-secondary); }

table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: start;
    font-size: var(--text-sm);
}

th,
td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border-default);
    white-space: nowrap;
    text-align: start;
}

tbody tr:last-child td { border-block-end: none; }
tbody tr:hover { background: var(--color-surface-sunken); }

th {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-weight: var(--weight-semibold);
    user-select: none;
}

th.sortable {
    cursor: pointer;
}

/* The sort affordance is an icon in the markup, coloured by state. */
th.sortable .sort-icon { opacity: var(--opacity-muted); }
th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--color-action-primary);
}

/* --------------------------------------------------------------- badges --- */

.badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-badge);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    display: inline-block;
    white-space: nowrap;
}

.badge-success { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.badge-danger  { background: var(--color-badge-error-bg);   color: var(--color-badge-error-text); }
.badge-warning { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.badge-info    { background: var(--color-badge-primary-bg); color: var(--color-badge-primary-text); }
.badge-neutral { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }

/* --------------------------------------------- login overlay and modals --- */

.login-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-surface-sunken);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.login-card {
    background: var(--color-surface-card);
    inline-size: 100%;
    max-inline-size: 26rem;
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-card-border);
    text-align: center;
}

.login-card h2 {
    margin-block-end: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.login-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-block-end: var(--space-8);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-surface-overlay);
    backdrop-filter: blur(var(--blur-sm));
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal-card {
    background: var(--color-surface-card);
    inline-size: 100%;
    max-inline-size: 38rem;
    padding: var(--space-6);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-card-border);
    max-block-size: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border-default);
    padding-block-end: var(--space-3);
}

.modal-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    min-inline-size: var(--size-control-sm);
    min-block-size: var(--size-control-sm);
    border-radius: var(--radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-micro);
}
.close-btn:hover {
    background: var(--color-button-ghost-bg-hover);
    color: var(--color-text-primary);
}

/* ------------------------------------------------ pagination and toasts --- */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.toast {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-start: var(--space-6);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    color: var(--color-text-on-action);
    z-index: 2000;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    display: none;
    box-shadow: var(--shadow-lg);
    max-inline-size: min(24rem, calc(100vw - var(--space-12)));
}

.toast-success { background: var(--color-feedback-success-icon); }
.toast-danger { background: var(--color-action-destructive); }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-surface-overlay);
    z-index: 99;
}

/* ------------------------------------------------------------- loading --- */

.global-progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px; /* ds-allow-hardcode: hairline progress bar */
    overflow: hidden;
    z-index: 99999;
    display: none;
}

/* A segment sliding along an inset, not a translated element: a transform here
   reports an out-of-viewport bounding box and reads as page overflow. */
.global-progress-bar::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 40%;
    background: var(--color-action-primary);
    animation: progressSweep var(--duration-slow) infinite var(--ease-in-out);
}

@keyframes progressSweep {
    from { inset-inline-start: -40%; }
    to   { inset-inline-start: 100%; }
}

.skeleton-row td {
    padding: var(--space-4);
    position: relative;
    overflow: hidden;
}

.skeleton-cell {
    block-size: 1rem;
    background: var(--color-border-default);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    inline-size: 80%;
    margin: 0 auto;
    /* Animating background-position rather than a transform keeps the shimmer
       inside its box: a translated pseudo-element reports an out-of-viewport
       bounding box and reads as page overflow. */
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-surface-raised) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer var(--duration-slow) infinite var(--ease-linear);
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.loading-spinner {
    display: inline-block;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    border: 3px solid var(--color-border-default);
    border-radius: var(--radius-full);
    border-top-color: var(--color-action-primary);
    animation: spin var(--duration-slow) linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 9999;
        inline-size: 16rem !important;
        min-inline-size: 16rem !important;
        box-shadow: var(--shadow-xl);
        transition: transform var(--duration-base) var(--ease-in-out),
                    visibility var(--duration-base) var(--ease-in-out);
        /* transform is not a logical property and does not flip with dir, so the
           off-screen direction is spelled out per direction rather than derived. */
        transform: translateX(-100%);
        visibility: hidden;
    }

    [dir="rtl"] .sidebar { transform: translateX(100%); }

    .sidebar.open,
    [dir="rtl"] .sidebar.open {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
        visibility: hidden;
        padding-inline: var(--space-4);
    }

    [dir="rtl"] .sidebar.collapsed { transform: translateX(100%); }

    .sidebar-backdrop.active { display: block; }

    th, td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }

    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-responsive tr {
        border: 1px solid var(--color-border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        margin-block-end: var(--space-3);
        background: var(--color-surface-card);
    }

    .table-responsive td {
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        white-space: normal;
        word-break: break-word;
        border-block-end: 1px dashed var(--color-border-default);
    }

    .table-responsive td:last-child {
        border-block-end: none;
    }

    .table-responsive td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--weight-semibold);
        color: var(--color-text-secondary);
        font-size: var(--text-xs);
        margin-inline-end: var(--space-2);
    }

    .content-body { padding: var(--space-4); }
}

/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important; /* ds-allow-hardcode: reduced-motion kill switch */
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; /* ds-allow-hardcode: reduced-motion kill switch */
        scroll-behavior: auto !important;
    }

    /* The spinner and progress bar carry meaning, so they keep moving -- just
       slowly enough not to trigger motion sensitivity. */
    .loading-spinner,
    .global-progress-bar::after {
        animation-duration: 2s !important; /* ds-allow-hardcode: deliberately slower than any token */
        animation-iteration-count: infinite !important;
    }
}

/* --- User chip (greeting) --------------------------------------------- */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1.5);
    padding: var(--space-1) var(--space-2.5);
    border-radius: var(--radius-full);
    background: var(--color-feedback-info-bg);
    color: var(--color-feedback-info-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}
.user-chip .icon {
    inline-size: var(--size-icon-sm);
    block-size: var(--size-icon-sm);
}

/* --- Public event tile ------------------------------------------------ */
.event-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
}
.event-tile .icon {
    inline-size: var(--size-icon-xl);
    block-size: var(--size-icon-xl);
    color: var(--color-feedback-info-icon);
}
.event-tile h4 {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

/* --- QR scanner result panel ------------------------------------------ */
.scan-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: var(--container-xs);
    margin-inline: auto;
    padding: var(--space-6);
    text-align: center;
    border: var(--border-width-medium) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
}
.scan-result h4 {
    margin: 0;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}
.scan-result p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
.scan-result .icon {
    inline-size: var(--size-icon-xl);
    block-size: var(--size-icon-xl);
}
.scan-result .btn { inline-size: 100%; margin-block-start: var(--space-2); }
.scan-result--valid   { border-color: var(--color-feedback-success-border); }
.scan-result--valid   .icon, .scan-result--valid   h4 { color: var(--color-feedback-success-text); }
.scan-result--pending { border-color: var(--color-feedback-warning-border); }
.scan-result--pending .icon, .scan-result--pending h4 { color: var(--color-feedback-warning-text); }
.scan-result--invalid { border-color: var(--color-feedback-error-border); }
.scan-result--invalid .icon, .scan-result--invalid h4 { color: var(--color-feedback-error-text); }

/* --- Events Grid Layout ----------------------------------------------- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-4);
}

.event-card-item {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.event-card-item:hover {
    box-shadow: var(--shadow-md);
}

.event-card-item--disabled {
    opacity: 0.75;
    background: var(--color-surface-sunken);
}

.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    border-block-end: 1px solid var(--color-border-default);
    padding-block-end: var(--space-3);
}

.event-card-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.event-card-id {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
}

.event-card-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    justify-content: flex-end;
}

.event-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.event-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-surface-sunken);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.event-card-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.event-card-stat-value {
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.event-card-stat-value--active {
    color: var(--color-feedback-success-text);
}

.event-card-schedule {
    grid-column: span 2;
    background: var(--color-surface-sunken);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.event-card-schedule .schedule-summary {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-block-start: 2px;
}

.event-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border-default);
}

.event-card-actions .btn {
    flex: 1;
    min-inline-size: fit-content;
    white-space: nowrap;
    justify-content: center;
}

/* --- Table empty row --------------------------------------------------- */
.table-empty {
    padding: var(--space-6);
    color: var(--color-text-secondary);
    text-align: center;
}

/* --- Stat value, feedback-toned --------------------------------------- */
.stat-value--success { color: var(--color-feedback-success-text); }
.stat-value--danger  { color: var(--color-feedback-error-text); }

/* --- Raw payload preview ---------------------------------------------- */
.payload-preview {
    direction: ltr;
    text-align: left;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    max-block-size: var(--container-xs);
    overflow: auto;
}

/* --- Scanner camera fallback ------------------------------------------ */
.scanner-fallback {
    padding: var(--space-8);
    color: var(--color-text-secondary);
    text-align: center;
}

/* --- Muted supporting text -------------------------------------------- */
.text-muted {
    color: var(--color-text-secondary);
}
.section-title {
    margin-block-end: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.field-label-sm {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.form-error {
    margin-block-end: var(--space-2);
    color: var(--color-feedback-error-text);
    font-size: var(--text-sm);
}
.empty-state {
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    text-align: center;
}
.stat-value--warning { color: var(--color-feedback-warning-text); }
.stat-value--info    { color: var(--color-feedback-info-text); }

/* --- Compact textarea -------------------------------------------------- */
.textarea-sm {
    min-block-size: var(--space-20);
    inline-size: 100%;
    min-inline-size: 0;
}
.registration-terms {
    margin-block-start: var(--space-2);
    max-block-size: var(--size-card-min);
    overflow: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    white-space: pre-wrap;
}
.form-check-label { display: flex; align-items: flex-start; gap: var(--space-2); }
.registration-otp-button { margin-block-start: var(--space-2); }
.public-reservations-panel { margin-block-start: var(--space-5); }
.public-identity-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.public-identity-row .form-input { flex: 1 1 12rem; }
.bale-contact-button { margin-block-start: var(--space-3); }
.public-reservations-list { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); }
.public-reservation-row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.public-reservation-info { display: grid; gap: var(--space-2); min-inline-size: 0; }
.public-reservation-actions,
.reservation-ticket-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.reservation-qr-panel { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.reservation-qr-code { display: inline-grid; min-inline-size: 12rem; min-block-size: 12rem; place-items: center; padding: var(--space-2); background: var(--color-surface-card); }
.reservation-qr-panel small { color: var(--color-text-secondary); }
@media (max-width: 42rem) {
    .events-table-responsive { overflow: visible; border: 0; }
    .events-table { display: block; inline-size: 100%; }
    .events-table thead { display: none; }
    .events-table tbody,
    .events-table tr,
    .events-table td { display: block; inline-size: 100%; }
    .events-table tr { margin-block-end: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-card); }
    .events-table td { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) 0; white-space: normal; overflow-wrap: anywhere; border-block-end: 1px dashed var(--color-border-default); }
    .events-table td::before { content: attr(data-label); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
    .events-table td[data-label="عملیات"] { display: grid; grid-template-columns: 1fr; padding-block-start: var(--space-3); border-block-end: 0; }
    .events-table td[data-label="عملیات"]::before { display: block; margin-block-end: var(--space-2); }
    .events-table .event-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2); }
    .events-table .event-actions .btn { inline-size: 100%; }
    .public-reservation-row { align-items: stretch; flex-direction: column; }
    .public-reservation-actions .btn { inline-size: 100%; }
}

.card-subtitle { margin-block-start: var(--space-1); color: var(--color-text-secondary); font-size: var(--text-sm); }
.event-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: var(--size-field-lg); }
.schedule-summary { line-height: var(--leading-snug); white-space: nowrap; }
.schedule-summary small { color: var(--color-text-secondary); }
.event-editor { display: grid; gap: var(--space-4); }
.event-editor-section { padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.event-editor-section h4 { margin-block-end: var(--space-4); font-size: var(--text-lg); }
.event-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.event-form-wide { grid-column: 1 / -1; }
.event-toggle-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.event-toggle-row label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.event-editor [hidden] { display: none; }

/* Form field builder rows */
.event-form-field-row { padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); margin-block-end: var(--space-3); background: var(--color-surface-page); }
.event-form-field-row .event-form-grid { grid-template-columns: 1fr 1fr 1fr auto auto; gap: var(--space-3); }
.event-form-field-row .btn-danger { padding: var(--space-1) var(--space-3); }
.form-input-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

@media (max-width: 42rem) {
    .event-form-grid { grid-template-columns: 1fr; }
    .event-form-wide { grid-column: auto; }
    .event-actions { min-inline-size: 0; }
    .event-form-field-row .event-form-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Chart canvas ------------------------------------------------------ */
.chart-canvas    { max-block-size: var(--size-chart-sm); }
.chart-canvas--md { max-block-size: var(--size-chart-md); }

/* --- Inline filter controls ------------------------------------------- */
.filter-control {
    inline-size: auto;
    min-inline-size: var(--size-field-xs);
    max-inline-size: var(--size-field-lg);
    padding: var(--space-2);
    font-size: var(--text-sm);
}
.filter-control--wide { min-inline-size: var(--size-field-sm); }
.filter-date {
    inline-size: var(--size-field-sm);
    min-inline-size: 0;
    padding: var(--space-1.5);
    font-size: var(--text-sm);
    cursor: pointer;
}
.filter-search {
    inline-size: var(--size-field-xl);
    min-inline-size: 0;
    max-inline-size: 100%;
    text-align: right;
}

/* --- Card grid --------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--size-card-min), 100%), 1fr));
    gap: var(--space-5);
}

/* --- Ticket modal ------------------------------------------------------ */
.modal-card--narrow { max-inline-size: var(--container-xs); }
.modal-card--ticket { max-inline-size: var(--container-xs); text-align: center; }
.ticket-card {
    margin-block-end: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--color-action-primary-active), var(--color-action-primary));
    color: var(--color-text-on-action);
}
.ticket-qr {
    display: inline-block;
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: #ffffff; /* ds-allow-hardcode: a QR needs a true-white quiet zone to stay scannable under any theme */
}
.ticket-code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--space-0.5);
}

/* --- QR scanner -------------------------------------------------------- */
.scanner-viewport {
    inline-size: 100%;
    max-inline-size: var(--container-xs);
    margin-inline: auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.scanner-manual-input {
    display: inline-block;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: var(--size-field-2xl);
    text-align: center;
}

/* --- Settings form ----------------------------------------------------- */
.settings-field { max-inline-size: var(--container-xs); margin-block-end: var(--space-6); }
.settings-submit { max-inline-size: var(--size-field-md); }
.checkbox-lg { inline-size: var(--size-icon-md); block-size: var(--size-icon-md); }

/* --- Compact stat value ------------------------------------------------ */
.stat-value--compact {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* --- Inline checkbox row ------------------------------------------------ */
.form-group--inline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
}
.form-group--inline label { margin: 0; font-size: var(--text-base); }
.section-heading { margin-block-end: var(--space-6); }