/* Material Modern design system — authoritative shared UI layer. */
:root {
    --md-primary: #4f46e5; --md-primary-hover: #4338ca; --md-primary-container: #e0e7ff;
    --md-secondary: #0f766e; --md-bg: #f8fafc; --md-surface: #fff; --md-surface-2: #f1f5f9;
    --md-text: #0f172a; --md-muted: #64748b; --md-border: #e2e8f0;
    --md-success: #15803d; --md-warning: #b45309; --md-error: #b91c1c;
    --md-shadow: 0 2px 10px rgba(15,23,42,.055); --md-focus: 0 0 0 3px rgba(79,70,229,.22);
    --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-disabled: #94a3b8;
    --text-on-light: #0f172a; --text-on-primary: #fff; --placeholder: #64748b;
    --surface-dark: #111827; --surface-variant-dark: #1e293b; --border-dark: #334155;
    --header-gradient-dark: linear-gradient(135deg, #1e293b 0%, #172033 55%, #111827 100%);
    --header-gradient-primary: linear-gradient(135deg, #312e81, #1e1b4b);
    --header-gradient-success: linear-gradient(135deg, #14532d, #052e16);
    --header-gradient-warning: linear-gradient(135deg, #78350f, #451a03);
    --header-gradient-info: linear-gradient(135deg, #0c4a6e, #082f49);
    --header-gradient-teal: linear-gradient(135deg, #134e4a, #042f2e);
}
:root[data-theme="dark"] {
    --md-primary: #a5b4fc; --md-primary-hover: #c7d2fe; --md-primary-container: #3730a3;
    --md-secondary: #5eead4; --md-bg: #0b1120; --md-surface: #111827; --md-surface-2: #1e293b;
    --md-text: #f8fafc; --md-muted: #94a3b8; --md-border: #334155;
    --md-success: #4ade80; --md-warning: #fbbf24; --md-error: #f87171; --md-shadow: none;
    --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-disabled: #64748b;
    --text-on-light: #0f172a; --text-on-primary: #fff; --placeholder: #94a3b8;
    --surface-dark: #111827; --surface-variant-dark: #1e293b; --border-dark: #334155;
}
html, body { overflow-x: hidden; background: var(--md-bg); color: var(--md-text); font-size: 14px; line-height: 1.6; }
body, button, input, select, textarea, .mud-typography { font-family: "IRANSansXFaNum", Tahoma, sans-serif !important; }
body, .app-shell, .main-shell { background: var(--md-bg); color: var(--md-text); }
button, a, input, select, textarea { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
:focus-visible { outline: 0; box-shadow: var(--md-focus) !important; }
.app-shell { min-height: 100dvh; }
.sidebar-shell { width: 264px; padding: 16px 12px; background: var(--md-surface); color: var(--md-text); border-inline-start: 1px solid var(--md-border); box-shadow: none; }
.brand-panel { gap: 12px; padding: 8px 8px 18px; margin: 0; }
.brand-badge { width: 42px; height: 42px; border-radius: 12px; background: var(--md-primary); }
.brand-title { color: var(--md-text); font-size: 1rem; font-weight: 700; }
.brand-subtitle, .eyebrow, .section-kicker, small { color: var(--md-muted); }
.sidebar-nav { gap: 4px; padding: 0; }
.nav-item { min-height: 52px; padding: 8px 12px; border: 0; border-radius: 12px; color: var(--md-muted); background: transparent; }
.nav-item:hover { color: var(--md-text); background: var(--md-surface-2); }
.nav-item.active { color: var(--md-primary); background: var(--md-primary-container); }
.nav-item span { font-weight: 600; }.nav-item small { font-size: .75rem; }
.sidebar-store-switcher, .sidebar-footer { border-color: var(--md-border); background: var(--md-surface-2); }
.store-switcher-trigger, .store-switcher-menu, .store-switcher-option { color: var(--md-text); border-color: var(--md-border); background: var(--md-surface); }
.store-switcher-option:hover, .store-switcher-option.selected { background: var(--md-primary-container); }
.store-switcher-mark, .store-option-mark { background: var(--md-primary); color: var(--md-surface); }
.main-shell { width: 100%; max-width: 1600px; padding: 0 24px 40px; }
.topbar { position: sticky; top: 0; z-index: 50; min-height: 64px; padding: 8px 0; background: color-mix(in srgb, var(--md-bg) 88%, transparent); border-color: var(--md-border); backdrop-filter: blur(14px); }
.topbar-title { margin-inline-end: auto; text-align: right; }.topbar-title strong { color: var(--md-text); }
.theme-toggle, .menu-button, .drawer-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--md-border); border-radius: 12px; color: var(--md-text); background: var(--md-surface); cursor: pointer; }
.theme-toggle:hover, .menu-button:hover { background: var(--md-surface-2); border-color: var(--md-primary); }
.menu-button { display: none; }.content-panel { margin: 0; padding-top: 24px; }
.section-header { margin-bottom: 20px; }.section-header h2 { margin: 4px 0 0; color: var(--md-text); font-size: clamp(1.5rem,2vw,1.75rem); }
.glass-card, .hero-card, .info-card, .panel-card, .stat-card, .notification-card, .auth-side-card, .dashboard-box {
    color: var(--md-text); background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 16px; box-shadow: var(--md-shadow);
}
.panel-card { padding: 24px; margin-bottom: 20px; }.panel-card h3 { color: var(--md-text); }
input, select, textarea, .search-input { min-height: 48px; color: var(--md-text); background: var(--md-surface); border: 1px solid var(--md-border); border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--md-primary); box-shadow: var(--md-focus); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; } label { color: var(--md-text); font-weight: 600; }
.primary-button, .secondary-button, .small-button, .pill-link { min-height: 44px; border-radius: 10px; font-weight: 600; }
.primary-button { color: #fff; background: #4f46e5; box-shadow: none; }.primary-button:hover { background: #4338ca; }
.secondary-button, .small-button, .pill-link { color: var(--md-text); background: var(--md-surface); border: 1px solid var(--md-border); }
.secondary-button:hover, .small-button:hover { color: var(--md-primary); background: var(--md-primary-container); border-color: var(--md-primary); }
button:disabled, input:disabled, select:disabled { color: var(--text-disabled); opacity: 1; cursor: not-allowed; background: var(--md-surface-2); }
.responsive-table { overflow-x: auto; border: 1px solid var(--md-border); border-radius: 12px; }
.responsive-table table { min-width: 680px; margin: 0; background: var(--md-surface); }
.responsive-table thead { position: sticky; top: 0; z-index: 2; background: var(--md-surface-2); }
.responsive-table th { color: var(--md-muted); background: var(--md-surface-2); }.responsive-table td { color: var(--md-text); border-color: var(--md-border); }
.responsive-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--md-surface-2) 38%, transparent); }
.badge { border-radius: 999px; }.badge.green { color: var(--md-success); background: color-mix(in srgb, var(--md-success) 12%, var(--md-surface)); }.badge.orange { color: var(--md-warning); }.badge.red { color: var(--md-error); }
.alert-box.success { color: var(--md-success); background: color-mix(in srgb, var(--md-success) 12%, var(--md-surface)); }.alert-box.error, .app-connection-error { color: var(--md-error); background: color-mix(in srgb, var(--md-error) 10%, var(--md-surface)); border-color: color-mix(in srgb, var(--md-error) 30%, var(--md-border)); }
.loading-state, .empty-state { color: var(--md-muted); background: var(--md-surface-2); border-radius: 12px; }

/* Dark-mode contrast bridge for legacy/scoped selectors. Keep light theme unchanged. */
:root[data-theme="dark"] body { --surface: var(--md-surface); --surface-card: var(--md-surface); }
:root[data-theme="dark"] :is(h1,h2,h3,h4,h5,h6,strong) { color: var(--text-primary); }
:root[data-theme="dark"] :is(p,small,.section-kicker,.eyebrow) { color: var(--text-secondary); }
:root[data-theme="dark"] :is(.panel-card,.stat-card,.dashboard-box,.notification-card,.info-card,.glass-card) { color: var(--text-primary); background-color: var(--md-surface); border-color: var(--md-border); }

/* Dashboard values and chart copy had higher-specificity fixed light-theme colors. */
:root[data-theme="dark"] .stat-grid .stat-card:not(.accent) strong,
:root[data-theme="dark"] .stat-grid .stat-card:not(.accent) > small,
:root[data-theme="dark"] .bar-row > span,
:root[data-theme="dark"] .bar-row > strong,
:root[data-theme="dark"] .customer-chart-content p,
:root[data-theme="dark"] .donut-chart strong { color: var(--text-primary); }
:root[data-theme="dark"] .donut-chart small,
:root[data-theme="dark"] .chart-heading small,
:root[data-theme="dark"] .recent-transaction-info small,
:root[data-theme="dark"] .list-row small { color: var(--text-secondary); }
:root[data-theme="dark"] .bar-track { background: var(--md-surface-2); }
:root[data-theme="dark"] .donut-chart { background: conic-gradient(var(--md-secondary) calc(var(--active-percent) * 1%), var(--md-border) 0); }
:root[data-theme="dark"] .donut-chart::before { background: var(--md-surface); }

/* Shared card/section headers: quiet semantic gradients in dark mode. */
:root[data-theme="dark"] :is(.dashboard-card-header,.stat-card-title,.table-toolbar,.transaction-entry-header) {
    color: var(--text-primary);
    background-color: var(--surface-variant-dark);
    background-image: var(--header-gradient-dark) !important;
    border-color: rgba(148,163,184,.18) !important;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}
:root[data-theme="dark"] :is(.dashboard-card-header,.stat-card-title,.table-toolbar,.transaction-entry-header) :is(h2,h3,h4,strong),
:root[data-theme="dark"] .stat-card-title > span { color: var(--text-primary); }
:root[data-theme="dark"] :is(.dashboard-card-header,.stat-card-title,.table-toolbar,.transaction-entry-header) :is(small,p,.section-kicker) { color: var(--text-secondary); }
:root[data-theme="dark"] :is(.header-sky,.header-blue) { background-image: var(--header-gradient-info) !important; }
:root[data-theme="dark"] :is(.header-teal,.stat-grid .balance-stat .stat-card-title) { background-image: var(--header-gradient-teal) !important; }
:root[data-theme="dark"] :is(.header-amber,.stat-grid .debt-stat .stat-card-title) { background-image: var(--header-gradient-warning) !important; }
:root[data-theme="dark"] :is(.header-indigo,.header-violet) { background-image: var(--header-gradient-primary) !important; }
:root[data-theme="dark"] :is(.stat-grid .payment-stat .stat-card-title) { background-image: var(--header-gradient-success) !important; }
:root[data-theme="dark"] .dashboard-card-header .view-all-link { color: var(--text-primary); background: rgba(15,23,42,.42); border-color: rgba(203,213,225,.28); }
:root[data-theme="dark"] .dashboard-header-icon { color: var(--text-on-primary); border-color: rgba(255,255,255,.18); box-shadow: none; }
:root[data-theme="dark"] .stat-grid .stat-card.accent,
:root[data-theme="dark"] .stat-grid .stat-card.accent :is(strong,small),
:root[data-theme="dark"] .stat-grid .stat-card.accent .stat-card-title,
:root[data-theme="dark"] .stat-grid .stat-card.accent .stat-card-title > span { color: var(--text-on-primary); }

/* Search, menus, customer details and list cards. */
:root[data-theme="dark"] :is(.product-search-wrap > input,.customer-search-input) { color: var(--text-primary); background: var(--md-surface-2); border-color: var(--md-border); }
:root[data-theme="dark"] :is(.product-search-dropdown,.customer-search-results,.selected-customer-panel,.inline-transaction-form) { color: var(--text-primary); background: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] :is(.quick-transaction-card,.filter-expander) { color: var(--text-primary); background: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] .filter-expander summary { color: var(--text-primary); background-image: var(--header-gradient-dark); border-bottom: 1px solid rgba(148,163,184,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
:root[data-theme="dark"] .transaction-date-display { color: var(--text-primary); background: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] .transaction-date-display:hover { background: var(--md-surface-2); border-color: var(--md-primary); }
:root[data-theme="dark"] .selected-customer-balance.debt { color: #fdba74; background: rgba(120,53,15,.38); border-color: rgba(251,146,60,.38); }
:root[data-theme="dark"] .selected-customer-balance.clear { color: #86efac; background: rgba(20,83,45,.38); border-color: rgba(74,222,128,.34); }
:root[data-theme="dark"] :is(.searchable-select-trigger,.searchable-select-menu,.searchable-select-option) { color: var(--text-primary); background-color: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] .searchable-select-option:hover { background-color: var(--md-surface-2); }
:root[data-theme="dark"] :is(.product-search-option,.customer-search-result,.favorite-customer-card,.recent-transaction-row,.list-row) { color: var(--text-primary); background: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] :is(.product-search-option,.customer-search-result,.favorite-customer-card):hover { background: var(--md-surface-2); border-color: var(--md-primary); }
:root[data-theme="dark"] :is(.product-search-state,.favorite-card-identity small,.favorite-card-balance small,.selected-product-heading small) { color: var(--text-secondary); }
:root[data-theme="dark"] :is(.favorite-compact-meta,.favorite-card-balance,.credit-package-divider) { border-color: var(--md-border); }
:root[data-theme="dark"] .product-search-clear { color: var(--text-secondary); background: var(--md-surface-2); }

/* Tables, overlays and MudBlazor portals inherit the active theme explicitly. */
:root[data-theme="dark"] :is(.responsive-table tr,.responsive-table td,.responsive-table table) { color: var(--text-primary); background-color: var(--md-surface); border-color: var(--md-border); }
:root[data-theme="dark"] :is(.mud-paper,.mud-dialog,.mud-popover,.mud-list,.mud-menu) { color: var(--text-primary) !important; background-color: var(--md-surface) !important; }
:root[data-theme="dark"] :is(.mud-typography,.mud-input,.mud-input-control,.mud-select-input,.mud-dialog-title,.mud-dialog-content) { color: var(--text-primary) !important; }
:root[data-theme="dark"] .mud-input-label { color: var(--text-secondary) !important; }
:root[data-theme="dark"] .mud-input-slot::placeholder { color: var(--placeholder) !important; opacity: 1 !important; }
:root[data-theme="dark"] .mud-snackbar-content { color: var(--text-on-primary); }

/* Semantic states preserve readable text instead of relying on opacity. */
:root[data-theme="dark"] :is(.badge.green,.alert-box.success) { color: #86efac; background: #143323; }
:root[data-theme="dark"] :is(.badge.orange,.text-warning) { color: #fcd34d; }
:root[data-theme="dark"] :is(.badge.red,.alert-box.error,.app-connection-error) { color: #fca5a5; background: #3b171b; }
:root[data-theme="dark"] .badge.gray { color: var(--text-secondary); background: var(--md-surface-2); }
:root[data-theme="dark"] :is(button,input,select,textarea):disabled { color: var(--text-disabled) !important; -webkit-text-fill-color: var(--text-disabled); }
@media (min-width: 1024px) { .app-shell { grid-template-columns: minmax(0,1fr) 264px; }.sidebar-shell { width: 264px; }.drawer-close, .drawer-backdrop { display: none; } }
@media (max-width: 1023px) {
    .menu-button { display: inline-flex; }.sidebar-shell { position: fixed; z-index: 1001; inset: 0 0 0 auto; width: min(88vw,320px); height: 100dvh; overflow-y: auto; transform: translateX(105%); box-shadow: -16px 0 40px rgba(15,23,42,.2); }
    .drawer-open .sidebar-shell { transform: translateX(0); }.drawer-open .drawer-backdrop { display: block; position: fixed; z-index: 1000; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2,6,23,.56); }
    .drawer-close { display: inline-flex; margin-inline-start: auto; }.main-shell { padding-inline: 20px; }
}
@media (max-width: 767px) { .main-shell { padding-inline: 16px; }.content-panel { padding-top: 16px; }.panel-card { padding: 18px; }.form-grid, .customer-form, .two-column-grid, .report-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .main-shell { padding: 0 12px 24px; }.topbar { min-height: 60px; }.topbar-title { display: grid; min-width: 0; }.topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar-title small, .theme-toggle-label, .menu-button > span:last-child { display: none; }
    .section-header, .table-toolbar { align-items: stretch; flex-direction: column; }.section-header .primary-button, .section-header .secondary-button, .table-toolbar > button { width: 100%; }
    .panel-card { padding: 16px; border-radius: 14px; }.toolbar-group { display: grid; grid-template-columns: 1fr; width: 100%; }
    .responsive-table table { min-width: 0; }.responsive-table table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; }.responsive-table thead { display: none; }.responsive-table { overflow: visible; border: 0; }.responsive-table tr { padding: 12px; margin-bottom: 10px; border: 1px solid var(--md-border); border-radius: 12px; background: var(--md-surface) !important; }.responsive-table td { padding: 7px 0; border: 0; }.action-cell { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Calm animated ambience for onboarding and authentication screens. */
:is(.landing-page,.login-scene,.store-selection-page) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--md-bg);
    background-image:
        radial-gradient(circle at 85% 12%, rgba(79,70,229,.15), transparent 32%),
        radial-gradient(circle at 12% 82%, rgba(15,118,110,.14), transparent 34%),
        linear-gradient(135deg, var(--md-bg), color-mix(in srgb, var(--md-primary-container) 20%, var(--md-bg)), var(--md-bg)) !important;
    background-size: 150% 150%, 145% 145%, 180% 180%;
    animation: ambient-canvas 8s ease-in-out infinite alternate;
}

:is(.landing-page,.login-scene,.store-selection-page)::before,
:is(.landing-page,.login-scene,.store-selection-page)::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(280px, 42vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
    opacity: .82;
    will-change: transform;
}

:is(.landing-page,.login-scene,.store-selection-page)::before {
    top: clamp(-250px,-18vw,-100px);
    right: clamp(-260px,-16vw,-90px);
    background: radial-gradient(circle, rgba(79,70,229,.3) 0%, rgba(79,70,229,.11) 44%, transparent 70%);
    animation: ambient-float-one 7s ease-in-out infinite alternate;
}

:is(.landing-page,.login-scene,.store-selection-page)::after {
    bottom: clamp(-280px,-20vw,-120px);
    left: clamp(-250px,-15vw,-80px);
    background: radial-gradient(circle, rgba(15,118,110,.28) 0%, rgba(15,118,110,.1) 44%, transparent 72%);
    animation: ambient-float-two 9s ease-in-out infinite alternate;
}

:is(.landing-page,.store-selection-page) > * { position: relative; z-index: 1; }
.login-scene > .login-card { position: relative; z-index: 2; }
.login-scene > .login-decoration { position: absolute; z-index: 1; }
.login-scene, .store-selection-page { min-height: 100vh; min-height: 100dvh; }
.login-scene.otp-scene::before { background: radial-gradient(circle, rgba(15,118,110,.2), rgba(15,118,110,.06) 44%, transparent 72%); }
.login-scene.otp-scene::after { background: radial-gradient(circle, rgba(79,70,229,.17), rgba(79,70,229,.05) 46%, transparent 72%); }

:root[data-theme="dark"] :is(.landing-page,.login-scene,.store-selection-page)::before { opacity: .88; background: radial-gradient(circle, rgba(99,102,241,.34), rgba(49,46,129,.13) 45%, transparent 72%); }
:root[data-theme="dark"] :is(.landing-page,.login-scene,.store-selection-page)::after { opacity: .84; background: radial-gradient(circle, rgba(20,184,166,.28), rgba(19,78,74,.12) 46%, transparent 72%); }

.boot-loader {
    background-image:
        radial-gradient(circle at 82% 15%, rgba(79,70,229,.16), transparent 32%),
        radial-gradient(circle at 12% 86%, rgba(15,118,110,.14), transparent 34%);
    background-size: 125% 125%;
    animation: boot-ambient 7s ease-in-out infinite alternate;
}

@keyframes ambient-float-one {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-13vw,9vh,0) scale(1.13); }
}

@keyframes ambient-float-two {
    from { transform: translate3d(0,0,0) scale(1.04); }
    to { transform: translate3d(12vw,-10vh,0) scale(.92); }
}

@keyframes ambient-canvas {
    from { background-position: 0% 0%, 100% 100%, 0% 50%; }
    to { background-position: 18% 12%, 82% 76%, 100% 50%; }
}

@keyframes boot-ambient {
    from { background-position: 0% 0%; }
    to { background-position: 18% 12%; }
}

/* Authentication layout: centered, resilient and theme-aware. */
.auth-page-shell { width: 100%; min-height: 100vh; min-height: 100dvh; background: var(--md-bg); }
.login-scene {
    display: grid !important;
    grid-template: minmax(0,1fr) / minmax(0,1fr);
    place-items: center !important;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px,4vh,40px) 16px;
    overflow-x: hidden;
    overflow-y: auto;
}
.login-card {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    width: min(100%,430px);
    margin: auto;
    padding: clamp(24px,4vw,38px);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--md-surface) 94%, transparent);
    border: 1px solid var(--md-border);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15,23,42,.12);
    backdrop-filter: blur(18px);
}
.login-heading { margin-bottom: 24px; }
.login-heading > span { color: var(--md-secondary); }
.login-heading h1 { color: var(--text-primary); }
.login-heading p, .login-security { color: var(--text-secondary); }
.login-field { gap: 8px; margin-bottom: 20px; }
.login-field > span { color: var(--text-primary); }
.login-field input { min-height: 52px; color: var(--text-primary); background: var(--md-surface); border-color: var(--md-border); }
.login-field input:hover { border-color: color-mix(in srgb, var(--md-primary) 55%, var(--md-border)); }
.login-field input:focus { border-color: var(--md-primary); box-shadow: var(--md-focus); }
.field-icon { color: var(--md-secondary); border-color: var(--md-border); }
.login-submit { min-height: 52px; border-radius: 12px; background: #4f46e5; box-shadow: 0 10px 24px rgba(79,70,229,.18); }
.login-submit:hover { background: #4338ca; }
.login-submit:disabled { color: var(--text-disabled) !important; background: var(--md-surface-2); box-shadow: none; }
.login-secondary-actions button { color: var(--md-primary); border-radius: 8px; }
.login-secondary-actions button:hover { background: var(--md-primary-container); }
.test-otp-box { color: var(--md-secondary); background: color-mix(in srgb, var(--md-secondary) 9%, var(--md-surface)); border-color: color-mix(in srgb, var(--md-secondary) 45%, transparent); }
.test-otp-box small { color: var(--text-secondary); }
.login-message.error { color: var(--md-error); background: color-mix(in srgb, var(--md-error) 10%, var(--md-surface)); }
.login-message.success { color: var(--md-success); background: color-mix(in srgb, var(--md-success) 10%, var(--md-surface)); }

:root[data-theme="dark"] .login-card { box-shadow: 0 24px 70px rgba(0,0,0,.34); }
:root[data-theme="dark"] .login-brand { background: linear-gradient(135deg,#4f46e5,#0f766e); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
:root[data-theme="dark"] .otp-input { color: var(--text-primary); }

@media (max-width: 520px) {
    .login-scene { padding: 16px 12px; }
    .login-card { padding: 26px 20px; border-radius: 20px; }
    .login-brand { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 15px; }
    .login-heading { margin-bottom: 22px; }
    .login-heading h1 { font-size: 1.55rem; }
    .login-heading p { font-size: .92rem; }
    .login-secondary-actions { gap: 8px; }
}

@media (max-height: 650px) and (min-width: 521px) {
    .login-scene { place-items: start center !important; padding-block: 20px; }
    .login-card { align-self: start; }
    .login-brand { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 14px; }
    .login-heading { margin-bottom: 18px; }
    .login-heading h1 { margin-block: 5px 7px; font-size: 1.55rem; }
    .login-security { margin-top: 16px; }
}

/* Application-wide refinement: one calm rhythm for every working screen. */
:root {
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-space-1: 8px;
    --ui-space-2: 16px;
    --ui-space-3: 24px;
    --ui-control-height: 48px;
    --ui-elevation-hover: 0 10px 28px rgba(15,23,42,.09);
}
:root[data-theme="dark"] { --ui-elevation-hover: 0 12px 30px rgba(0,0,0,.24); }

.content-panel { width: 100%; max-width: 1600px; margin-inline: auto; }
.content-panel > .section-header {
    min-height: 72px;
    margin-bottom: var(--ui-space-3);
    padding: 4px 2px 16px;
    border-bottom: 1px solid var(--md-border);
}
.section-header h2 { line-height: 1.45; letter-spacing: -.015em; }
.section-header .section-kicker { color: var(--md-primary); font-weight: 700; letter-spacing: 0; text-transform: none; }

.content-panel :is(.panel-card,.dashboard-box,.outbox-message-card,.outbox-status-card,.report-metric) {
    border-color: var(--md-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--md-shadow);
}
.content-panel .panel-card { padding: var(--ui-space-3); }
.content-panel :is(.panel-card,.dashboard-box) + :is(.panel-card,.dashboard-box) { margin-top: var(--ui-space-3); }

.form-panel > h3 {
    min-height: 58px;
    display: flex;
    align-items: center;
    margin: calc(var(--ui-space-3) * -1) calc(var(--ui-space-3) * -1) var(--ui-space-3) !important;
    padding: 12px var(--ui-space-3);
    color: var(--text-primary);
    background: linear-gradient(135deg,#f8fafc,#eef2ff);
    border-bottom: 1px solid var(--md-border);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    font-size: 1rem;
}
:root[data-theme="dark"] .form-panel > h3 {
    color: var(--text-primary);
    background: var(--header-gradient-dark);
    border-color: rgba(148,163,184,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.content-panel :is(.form-grid,.customer-form,.toolbar-group) { gap: var(--ui-space-2); }
.content-panel label { display: grid; align-content: start; gap: var(--ui-space-1); min-width: 0; }
.content-panel :is(input,select,textarea,.search-input) {
    width: 100%;
    min-height: var(--ui-control-height);
    padding-inline: 14px;
    border-color: var(--md-border);
    border-radius: var(--ui-radius-sm);
}
.content-panel textarea { min-height: 104px; padding-block: 12px; resize: vertical; }
.content-panel :is(input,select,textarea):hover:not(:disabled) { border-color: color-mix(in srgb,var(--md-primary) 48%,var(--md-border)); }
.content-panel :is(input,select,textarea):focus { border-color: var(--md-primary); box-shadow: var(--md-focus); }
.content-panel .toggle-label { display: flex; align-items: center; gap: 10px; min-height: var(--ui-control-height); }
.content-panel .toggle-label input { flex: 0 0 20px; width: 20px; min-height: 20px; accent-color: var(--md-primary); }

.content-panel :is(.primary-button,.secondary-button,.small-button,.pill-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: var(--ui-radius-sm);
    line-height: 1.4;
}
.content-panel .primary-button { min-height: var(--ui-control-height); background: #4f46e5; }
.content-panel .primary-button:hover:not(:disabled) { background: #4338ca; transform: translateY(-1px); }
.content-panel :is(.secondary-button,.small-button):hover:not(:disabled) { transform: translateY(-1px); }
.content-panel .small-button.danger { color: var(--md-error); background: color-mix(in srgb,var(--md-error) 7%,var(--md-surface)); border-color: color-mix(in srgb,var(--md-error) 25%,var(--md-border)); }
.content-panel .small-button.danger:hover { background: color-mix(in srgb,var(--md-error) 13%,var(--md-surface)); border-color: var(--md-error); }

.content-panel .table-toolbar {
    min-height: 58px;
    padding-bottom: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--md-border);
}
.content-panel .table-toolbar h3 { margin: 0; font-size: 1.05rem; }
.responsive-table { border-radius: var(--ui-radius-md); scrollbar-width: thin; scrollbar-color: var(--md-border) transparent; }
.responsive-table th { height: 52px; padding: 12px 16px; font-weight: 700; white-space: nowrap; }
.responsive-table td { min-height: 58px; padding: 13px 16px; vertical-align: middle; }
.responsive-table tbody tr { transition: background-color .16s ease; }
.responsive-table tbody tr:hover { background: color-mix(in srgb,var(--md-primary-container) 26%,transparent); }
.action-cell { gap: 8px; }

.badge,.status-chip { min-height: 28px; padding: 4px 10px; border: 1px solid transparent; font-size: .78rem; font-weight: 700; }
.empty-state,.loading-state {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: var(--ui-space-3);
    border: 1px dashed var(--md-border);
    border-radius: var(--ui-radius-md);
    text-align: center;
    line-height: 1.9;
}
.alert-box { margin: 0 0 var(--ui-space-2); border: 1px solid currentColor; border-color: color-mix(in srgb,currentColor 28%,transparent); border-radius: var(--ui-radius-md); line-height: 1.8; }
.pagination-bar { min-height: 56px; margin-top: var(--ui-space-2); padding-top: var(--ui-space-2); border-color: var(--md-border); }

.action-menu-list,.searchable-select-menu,.store-switcher-menu {
    color: var(--text-primary);
    background: var(--md-surface);
    border-color: var(--md-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-elevation-hover);
}
.action-menu-list button:hover { background: var(--md-surface-2); }
.persian-date-picker,.persian-time-picker { gap: var(--ui-space-1); }

.customer-modal-backdrop,.store-entry-backdrop { background: rgba(2,6,23,.58); backdrop-filter: blur(4px); }
.customer-modal,.store-entry-dialog,.mud-dialog {
    color: var(--text-primary);
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: 0 24px 70px rgba(2,6,23,.28);
}
.customer-modal-header,.store-entry-heading { padding-bottom: var(--ui-space-2); border-bottom: 1px solid var(--md-border); }
.modal-close-button { color: var(--text-secondary); background: var(--md-surface-2); border-radius: var(--ui-radius-sm); }

.store-selection-item {
    min-height: 68px;
    border-color: var(--md-border);
    border-radius: var(--ui-radius-md);
    color: var(--text-primary);
    background: var(--md-surface);
}
.store-selection-item:hover:not(:disabled) { border-color: var(--md-primary); background: var(--md-primary-container); transform: translateY(-1px); box-shadow: var(--ui-elevation-hover); }

@media (max-width: 767px) {
    .content-panel > .section-header { min-height: 0; margin-bottom: 16px; padding-bottom: 12px; }
    .content-panel .panel-card { padding: 18px; }
    .form-panel > h3 { margin: -18px -18px 18px !important; padding-inline: 18px; border-radius: 14px 14px 0 0; }
    .content-panel :is(.form-grid,.customer-form,.toolbar-group) { gap: 14px; }
    .content-panel :is(.primary-button,.secondary-button) { width: 100%; }
    .responsive-table tbody tr { padding: 14px; margin-bottom: 12px; border-radius: var(--ui-radius-md); }
    .pagination-actions { gap: 8px; }
}