/* =========================================================
   MAHALLI CORE FOUNDATION — PHASE 01
   Central theme tokens, UI primitives, branding, motion
========================================================= */

:root {
    --mahalli-font-family: "Cairo", Tahoma, Arial, sans-serif;
    --mahalli-font-base: 15px;
    --mahalli-radius-sm: 10px;
    --mahalli-radius: 14px;
    --mahalli-radius-lg: 18px;
    --mahalli-motion-fast: 160ms;
    --mahalli-motion-normal: 220ms;
    --mahalli-motion-slow: 280ms;
    --mahalli-ease: cubic-bezier(.2,.8,.2,1);
    --mahalli-shadow: 0 18px 50px rgba(0,0,0,.22);
    --mahalli-logo-light: url("../assets/branding/mahalli-logo.png");
    --mahalli-logo-dark: url("../assets/branding/mahalli-logo-transparent.png");
}

/* Official theme tokens */
html[data-mahalli-theme="graphite"],
html[data-mahalli-theme="classic"] {
    color-scheme: light;
    --background: #F3F9F6;
    --bg: #F3F9F6;
    --surface: #FFFFFF;
    --surface-2: #F0F7F3;
    --surface-soft: #F8FCFA;
    --elevated: #FFFFFF;
    --border: #DCE9E1;
    --border-soft: #EAF3EE;
    --text: #183A2C;
    --text-secondary: #496658;
    --text-muted: #647D70;
    --muted: #647D70;
    --primary: #07845D;
    --primary-dark: #066B4C;
    --primary-deep: #07543D;
    --primary-soft: #E2F4EB;
    --primary-soft-2: #EFF9F3;
    --accent: #07845D;
    --black: var(--primary);
    --surface2: var(--surface-2);
    --danger: #C63C4B;
    --warning: #A96D08;
    --success: #07845D;
    --mahalli-shadow: 0 18px 45px rgba(18,65,43,.08);
}







html[data-mahalli-core-theme="1"] {
    background: var(--background);
}

html[data-mahalli-core-theme="1"] body {
    background: var(--background) !important;
    color: var(--text) !important;
    font-family: var(--mahalli-font-family) !important;
    transition: background-color var(--mahalli-motion-normal) var(--mahalli-ease), color var(--mahalli-motion-normal) var(--mahalli-ease);
}

/* Apply theme safely to common application surfaces without changing page structure. */
html[data-mahalli-core-theme="1"] :is(
    .sidebar,.topbar,.mahalli-topbar-v2,.card,.panel,.section-card,.content-card,
    .summary-card,.stat-card,.table-card,.table-wrap,.toolbar,.filters-bar,.filter-bar,
    .products-panel,.cart-panel,.modal,.modal-content,.drawer,.sheet,.mobile-card,
    .mobile-more-sheet,.mobile-account-popover,.settings-card,.store-card,.employee-card,
    .receipt-preview,.dialog,.dropdown,.popover
) {
    border-color: var(--border) !important;
}

html[data-mahalli-theme="graphite"] :is(
    .sidebar,.topbar,.mahalli-topbar-v2,.card,.panel,.section-card,.content-card,
    .summary-card,.stat-card,.table-card,.table-wrap,.toolbar,.filters-bar,.filter-bar,
    .products-panel,.cart-panel,.modal,.modal-content,.drawer,.sheet,.mobile-card,
    .mobile-more-sheet,.mobile-account-popover,.settings-card,.store-card,.employee-card,
    .receipt-preview,.dialog,.dropdown,.popover
),
html[data-mahalli-theme="midnight-emerald"] :is(
    .sidebar,.topbar,.mahalli-topbar-v2,.card,.panel,.section-card,.content-card,
    .summary-card,.stat-card,.table-card,.table-wrap,.toolbar,.filters-bar,.filter-bar,
    .products-panel,.cart-panel,.modal,.modal-content,.drawer,.sheet,.mobile-card,
    .mobile-more-sheet,.mobile-account-popover,.settings-card,.store-card,.employee-card,
    .receipt-preview,.dialog,.dropdown,.popover
) {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

html[data-mahalli-core-theme="1"] :is(input,select,textarea,.form-control,.form-input,.form-select,.form-textarea,.search-input) {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html[data-mahalli-core-theme="1"] :is(input,textarea)::placeholder {
    color: var(--text-muted) !important;
}

html[data-mahalli-core-theme="1"] :is(h1,h2,h3,h4,h5,h6,strong,.stat-value,.page-title) {
    color: var(--text);
}

html[data-mahalli-core-theme="1"] :is(p,small,.muted,.subtitle,.hint,.description) {
    color: var(--text-muted);
}

html[data-mahalli-core-theme="1"] .sidebar-logo {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.mahalli-official-brand {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mahalli-official-brand img {
    width: min(154px, 86%);
    height: 64px;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: none !important;
}

html[data-mahalli-theme="graphite"] .mahalli-official-brand img,
html[data-mahalli-theme="mint-light"] .mahalli-official-brand img,
html[data-mahalli-theme="warm-sand"] .mahalli-official-brand img {
    content: url("../assets/branding/mahalli-logo.png");
}

html[data-mahalli-theme="midnight-emerald"] .mahalli-official-brand img {
    content: url("../assets/branding/mahalli-logo-transparent.png");
}

/* Shared motion */
html[data-mahalli-motion="off"] *,
html[data-mahalli-motion="off"] *::before,
html[data-mahalli-motion="off"] *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

html[data-mahalli-motion="reduced"] * {
    --mahalli-motion-fast: 90ms;
    --mahalli-motion-normal: 140ms;
    --mahalli-motion-slow: 180ms;
}

.mahalli-enter {
    animation: mahalli-core-enter var(--mahalli-motion-normal) var(--mahalli-ease) both;
}

@keyframes mahalli-core-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

@keyframes mahalli-core-pop {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Toast system */
#mahalliToastHost {
    position: fixed;
    z-index: 10050;
    left: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 28px));
    display: grid;
    gap: 9px;
    pointer-events: none;
}

.mahalli-toast {
    min-height: 50px;
    padding: 11px 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--mahalli-radius);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    box-shadow: var(--mahalli-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
    animation: mahalli-core-pop var(--mahalli-motion-normal) var(--mahalli-ease) both;
}

.mahalli-toast[data-type="success"] { border-inline-start: 3px solid var(--success); }
.mahalli-toast[data-type="warning"] { border-inline-start: 3px solid var(--warning); }
.mahalli-toast[data-type="error"] { border-inline-start: 3px solid var(--danger); }
.mahalli-toast[data-type="info"] { border-inline-start: 3px solid var(--primary); }
.mahalli-toast strong { display: block; font-size: 13px; }
.mahalli-toast p { margin: 2px 0 0; font-size: 12px; line-height: 1.65; color: var(--text-muted); }
.mahalli-toast button { margin-inline-start: auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }

/* Modal / confirm foundation */
.mahalli-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mahalli-motion-normal) var(--mahalli-ease), visibility var(--mahalli-motion-normal) var(--mahalli-ease);
}

.mahalli-modal-backdrop.open { opacity: 1; visibility: visible; }

.mahalli-modal-shell {
    width: min(520px, 100%);
    max-height: min(88dvh, 780px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--mahalli-radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--mahalli-shadow);
}

.mahalli-modal-backdrop.open .mahalli-modal-shell {
    animation: mahalli-core-pop var(--mahalli-motion-normal) var(--mahalli-ease) both;
}

.mahalli-modal-shell[data-size="sm"] { width: min(390px, 100%); }
.mahalli-modal-shell[data-size="lg"] { width: min(760px, 100%); }
.mahalli-modal-shell[data-size="xl"] { width: min(1020px, 100%); }

.mahalli-modal-head,.mahalli-modal-foot {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: var(--border);
}
.mahalli-modal-head { justify-content: space-between; border-bottom: 1px solid var(--border); }
.mahalli-modal-foot { justify-content: flex-start; border-top: 1px solid var(--border); }
.mahalli-modal-head h3 { margin: 0; font-size: 16px; }
.mahalli-modal-body { padding: 16px; line-height: 1.8; }
.mahalli-modal-close { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; }

.mahalli-btn {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--mahalli-motion-fast) var(--mahalli-ease), background-color var(--mahalli-motion-normal) var(--mahalli-ease), border-color var(--mahalli-motion-normal) var(--mahalli-ease);
}
.mahalli-btn:active { transform: scale(.98); }
.mahalli-btn.primary { background: var(--primary); border-color: var(--primary); color: #03110C; }
.mahalli-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.mahalli-btn.ghost { background: transparent; }

/* Locked feature primitive */
.mahalli-feature-locked {
    position: relative;
    opacity: .72;
    filter: saturate(.6);
}
.mahalli-feature-locked::after {
    content: "الميزة غير مفعلة";
    position: absolute;
    inset: 8px 8px auto auto;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
}

/* Print preview */
.mahalli-print-preview {
    padding: 18px;
    display: flex;
    justify-content: center;
    background: #DCE2DF;
    color: #111;
}
.mahalli-print-sheet {
    background: #fff;
    color: #111;
    box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.mahalli-print-sheet[data-paper="58mm"] { width: 58mm; padding: 4mm; }
.mahalli-print-sheet[data-paper="70mm"] { width: 70mm; max-width: 100%; padding: 0; margin-inline: auto; }
.mahalli-print-sheet[data-paper="80mm"] { width: 80mm; padding: 5mm; }
.mahalli-print-sheet[data-paper="a4"] { width: min(210mm, 100%); min-height: 297mm; padding: 14mm; }

@media (max-width: 900px) {
    :root { --mahalli-font-base: 16px; }
    #mahalliToastHost { left: 10px; right: 10px; bottom: calc(88px + env(safe-area-inset-bottom)); width: auto; }
    .mahalli-modal-backdrop { align-items: end; padding: 0; }
    .mahalli-modal-shell,.mahalli-modal-shell[data-size="sm"],.mahalli-modal-shell[data-size="lg"],.mahalli-modal-shell[data-size="xl"] {
        width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0;
    }
}

/* =========================================================
   MAHALLI UNIFIED APP DESIGN SYSTEM — 2026-09
   Icon-first, no decorative/AI imagery
========================================================= */

body[data-mahalli-page] {
    --page-accent: var(--primary, #0a9f6e);
    --page-accent-soft: color-mix(in srgb, var(--page-accent) 10%, transparent);
    --page-accent-border: color-mix(in srgb, var(--page-accent) 22%, var(--border));
    background:
        radial-gradient(circle at 80% -15%, color-mix(in srgb, var(--page-accent) 5%, transparent), transparent 30%),
        var(--background, #f4f8f6);
}

body[data-mahalli-page="dashboard"] { --page-accent: var(--primary); }
body[data-mahalli-page="cashier"] { --page-accent: var(--primary); }
body[data-mahalli-page="products"] { --page-accent: var(--primary); }
body[data-mahalli-page="inventory"] { --page-accent: var(--primary); }
body[data-mahalli-page="sales"] { --page-accent: var(--primary); }
body[data-mahalli-page="purchases"] { --page-accent: var(--primary); }
body[data-mahalli-page="suppliers"] { --page-accent: var(--primary); }
body[data-mahalli-page="customers"] { --page-accent: var(--primary); }
body[data-mahalli-page="debts"] { --page-accent: var(--primary); }
body[data-mahalli-page="employees"] { --page-accent: var(--primary); }
body[data-mahalli-page="shifts"] { --page-accent: var(--primary); }
body[data-mahalli-page="reports"] { --page-accent: var(--primary); }
body[data-mahalli-page="ai"] { --page-accent: var(--primary); }
body[data-mahalli-page="settings"] { --page-accent: var(--primary); }
body[data-mahalli-page="notifications"] { --page-accent: var(--primary); }

body[data-mahalli-page] .topbar,
body[data-mahalli-page] .notification-topbar,
body[data-mahalli-page] .ai-topbar {
    border-bottom: 1px solid var(--border-soft, #eef2f0) !important;
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 1px 0 rgba(22, 45, 36, .015);
}

body[data-mahalli-page] .sidebar {
    border-left: 1px solid var(--border-soft, #eef2f0) !important;
    background: color-mix(in srgb, var(--surface, #fff) 97%, var(--page-accent-soft)) !important;
}

body[data-mahalli-page] .sidebar a,
body[data-mahalli-page] .sidebar button,
body[data-mahalli-page] .nav-item,
body[data-mahalli-page] .sidebar-item {
    border-radius: 13px !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

body[data-mahalli-page] .sidebar a:hover,
body[data-mahalli-page] .nav-item:hover,
body[data-mahalli-page] .sidebar-item:hover {
    transform: translateX(-2px);
    background: var(--page-accent-soft) !important;
}

body[data-mahalli-page] .sidebar a.active,
body[data-mahalli-page] .nav-item.active,
body[data-mahalli-page] .sidebar-item.active,
body[data-mahalli-page] [aria-current="page"] {
    color: color-mix(in srgb, var(--page-accent) 92%, #111) !important;
    background: color-mix(in srgb, var(--page-accent) 11%, var(--surface, #fff)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 10%, transparent) !important;
}

body[data-mahalli-page] .page-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body[data-mahalli-page] .page-title > div:not(.mahalli-page-icon) {
    min-width: 0;
}

body[data-mahalli-page] .page-title h1,
body[data-mahalli-page] h1 {
    letter-spacing: -.025em;
}

body[data-mahalli-page] .page-title h1 {
    font-size: clamp(23px, 2vw, 30px) !important;
    font-weight: 900 !important;
    color: var(--text) !important;
}

body[data-mahalli-page] .page-title p {
    color: var(--text-muted) !important;
    line-height: 1.75 !important;
    font-size: 13px !important;
}

.mahalli-page-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--page-accent);
    background: color-mix(in srgb, var(--page-accent) 10%, var(--surface, #fff));
    border: 1px solid var(--page-accent-border);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--page-accent) 10%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mahalli-page-icon:hover {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--page-accent) 14%, transparent);
}

.mahalli-page-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
}

body[data-mahalli-page] :is(.card, .stat-card, .metric-card, .summary-card, .panel, .surface, .report-card, .quick-action-card, .chart-card, .table-card, .widget, .content-card) {
    border-color: var(--border-soft, #eaf0ed) !important;
    box-shadow: 0 8px 26px rgba(21, 47, 37, .045) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body[data-mahalli-page] :is(.stat-card, .metric-card, .quick-action-card, .report-card):hover {
    transform: translateY(-2px);
    border-color: var(--page-accent-border) !important;
    box-shadow: 0 14px 34px rgba(21, 47, 37, .07) !important;
}

body[data-mahalli-page] :is(.stat-icon, .metric-icon, .card-icon, .quick-action-icon, .summary-icon, .section-icon, .row-icon, .icon-box) {
    color: var(--page-accent) !important;
    background: var(--page-accent-soft) !important;
    border-color: var(--page-accent-border) !important;
}

body[data-mahalli-page] :is(button, .btn, .button, .action-button) {
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
}

body[data-mahalli-page] :is(button, .btn, .button, .action-button):not(:disabled):active {
    transform: scale(.975);
}

body[data-mahalli-page] :is(.btn-primary, .primary, .primary-button, button.primary, .action-primary) {
    background: var(--page-accent) !important;
    border-color: var(--page-accent) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px color-mix(in srgb, var(--page-accent) 18%, transparent) !important;
}

body[data-mahalli-page] :is(.btn-primary, .primary, .primary-button, button.primary, .action-primary):hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--page-accent) 24%, transparent) !important;
}

body[data-mahalli-page] :is(input, select, textarea) {
    border-radius: 12px !important;
    border-color: var(--border, #e3e9e6) !important;
    background: var(--surface-soft, #fafcfb) !important;
    color: var(--text) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body[data-mahalli-page] :is(input, select, textarea):focus {
    outline: none !important;
    border-color: color-mix(in srgb, var(--page-accent) 58%, var(--border)) !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent) 9%, transparent) !important;
}

body[data-mahalli-page] table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body[data-mahalli-page] thead th {
    background: color-mix(in srgb, var(--surface-soft, #fafcfb) 94%, var(--page-accent-soft)) !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body[data-mahalli-page] tbody tr {
    transition: background .15s ease, transform .15s ease !important;
}

body[data-mahalli-page] tbody tr:hover {
    background: color-mix(in srgb, var(--page-accent) 3.5%, var(--surface, #fff)) !important;
}

body[data-mahalli-page] :is(.modal, .modal-card, .modal-content, .dialog, .drawer, .sheet, .mahalli-modal-shell) {
    border-radius: 20px !important;
    border-color: var(--border-soft, #eef2f0) !important;
    box-shadow: 0 28px 80px rgba(18, 39, 31, .16) !important;
}

body[data-mahalli-page] :is(.badge, .chip, .tag, .status-badge) {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

body[data-mahalli-page] .mahalli-empty-state,
body[data-mahalli-page] :is(.empty-state, .empty, .no-data, .ai-empty) {
    border-radius: 20px !important;
}

.mahalli-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--page-accent);
    background: var(--page-accent-soft);
    border: 1px solid var(--page-accent-border);
}

.mahalli-empty-icon svg { width: 24px; height: 24px; }

.mahalli-design-reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: mahalliDesignIn .34s var(--mahalli-ease, ease) forwards;
    animation-delay: var(--mahalli-delay, 0ms);
}

@keyframes mahalliDesignIn {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce),
html[data-mahalli-motion="off"] {
    .mahalli-design-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
    .mahalli-page-icon,
    body[data-mahalli-page] * { transition-duration: .01ms !important; }
}

/* Page-specific density and hierarchy */
body[data-mahalli-page="dashboard"] :is(.stat-card, .metric-card) { min-height: 132px; }
body[data-mahalli-page="cashier"] :is(.pos-panel, .cart-panel, .checkout-panel) { border-radius: 18px !important; }
body[data-mahalli-page="products"] :is(.product-card, .product-row) { border-radius: 16px !important; }
body[data-mahalli-page="inventory"] :is(.inventory-card, .stock-card) { border-radius: 16px !important; }
body[data-mahalli-page="sales"] :is(.invoice-card, .sale-card) { border-radius: 16px !important; }
body[data-mahalli-page="purchases"] :is(.purchase-card, .invoice-card) { border-radius: 16px !important; }
body[data-mahalli-page="suppliers"] :is(.supplier-card, .profile-card) { border-radius: 18px !important; }
body[data-mahalli-page="customers"] :is(.customer-card, .profile-card) { border-radius: 18px !important; }
body[data-mahalli-page="debts"] :is(.debt-card, .statement-card) { border-radius: 18px !important; }
body[data-mahalli-page="employees"] :is(.employee-card, .employee-stat) { border-radius: 18px !important; }
body[data-mahalli-page="shifts"] :is(.shift-card, .cash-card) { border-radius: 18px !important; }
body[data-mahalli-page="reports"] :is(.report-card, .chart-card) { border-radius: 18px !important; }
body[data-mahalli-page="settings"] :is(.settings-card, .settings-section, .setting-card) { border-radius: 18px !important; }
body[data-mahalli-page="notifications"] :is(.notification-card, .notification-item) { border-radius: 16px !important; }

@media (max-width: 900px) {
    .mahalli-page-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
    body[data-mahalli-page] .page-title h1 { font-size: 23px !important; }
    body[data-mahalli-page] .page-title p { font-size: 12px !important; }
}


/* === Mobile global dialogs: top-sheet, not bottom-sheet === */
@media (max-width:900px){
  .mahalli-modal-backdrop{
    place-items:start center !important;
    align-items:start !important;
    padding:max(8px,env(safe-area-inset-top)) 8px 8px !important;
  }
  .mahalli-modal-shell,
  .mahalli-modal-shell[data-size="sm"],
  .mahalli-modal-shell[data-size="lg"],
  .mahalli-modal-shell[data-size="xl"]{
    width:min(620px,100%) !important;
    max-height:calc(88dvh - env(safe-area-inset-top)) !important;
    border:1px solid var(--border) !important;
    border-top:0 !important;
    border-radius:0 0 22px 22px !important;
    transform:translateY(-110%) !important;
    transition:transform var(--mahalli-motion-normal) var(--mahalli-ease) !important;
  }
  .mahalli-modal-backdrop.open .mahalli-modal-shell{
    animation:none !important;
    transform:translateY(0) !important;
  }
}

/* =========================================================
   PHASE 24 — PERFORMANCE PROFILES
   Cheap transitions, lower blur, and list virtualization hints.
========================================================= */
html[data-mahalli-performance="fast"]{
  --mahalli-motion-fast:.08s;
  --mahalli-motion-normal:.12s;
}
html[data-mahalli-performance="fast"] body,
html[data-mahalli-low-power="1"] body{
  scroll-behavior:auto!important;
}
html[data-mahalli-performance="fast"] :is(.mahalli-modal-backdrop,.computer-topbar,.computer-sidebar,.settings-nav,.native-sheet,.topbar,.sidebar),
html[data-mahalli-heavy-effects="reduced"] :is(.mahalli-modal-backdrop,.computer-topbar,.computer-sidebar,.settings-nav,.native-sheet){
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-mahalli-performance="fast"] :is(.stat-card,.metric-card,.summary-card,.panel,.surface,.product-card,.supplier-card,.customer-card,.debt-card,.employee-card,.shift-card,.notification-card){
  box-shadow:none!important;
}
html[data-mahalli-performance="fast"] :is(.mahalli-design-reveal,.reveal){
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
html[data-mahalli-performance="fast"] body[data-mahalli-page] *{
  transition-duration:.08s!important;
}
html[data-mahalli-low-power="1"] body[data-mahalli-page] *{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.06s!important;
}
/* Browser can skip paint/layout work for off-screen repeating rows. */
body[data-mahalli-page] :is(.product-card,.supplier-card,.customer-card,.debt-card,.employee-card,.shift-card,.notification-card,.sale-row,.invoice-row,.inventory-row){
  content-visibility:auto;
  contain-intrinsic-size:auto 84px;
}

/* =========================================================
   PHASE 87 — STORE-WIDE THEME + LOCALE CONSISTENCY
   One store appearance should color the desktop shell and every embedded page.
========================================================= */
html[data-mahalli-core-theme="1"] :is(
  .sidebar,.topbar,.mahalli-topbar-v2,.card,.panel,.section-card,.content-card,
  .summary-card,.stat-card,.table-card,.table-wrap,.toolbar,.filters-bar,.filter-bar,
  .products-panel,.cart-panel,.modal,.modal-content,.drawer,.sheet,.mobile-card,
  .mobile-more-sheet,.mobile-account-popover,.settings-card,.store-card,.employee-card,
  .receipt-preview,.dialog,.dropdown,.popover,.settings-sidebar,.settings-content,.settings-section
){background-color:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-mahalli-core-theme="1"] :is(.page,.page-content,.main-content,.content,.dashboard-content,.settings-page){background:var(--background)!important;color:var(--text)!important}

html[data-mahalli-theme] #computerShell,
html[data-mahalli-theme] #computerShell .computer-main,
html[data-mahalli-theme] #frameArea{background:var(--background)!important;color:var(--text)!important}
html[data-mahalli-theme] #computerSidebar,
html[data-mahalli-theme] #computerTopbar,
html[data-mahalli-theme] #computerShell :is(.sidebar-store-compact,.sidebar-account,.sidebar-support button,.topbar-menu,.topbar-search,.connection-pill,.topbar-icon,.topbar-profile,.account-menu,.computer-store-switch,.computer-store-menu){
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important
}
html[data-mahalli-theme] #computerShell :is(.route-copy span,.route-copy small,.user-copy small,.sidebar-store-compact small,.nav-group-label){color:var(--text-muted)!important}
html[data-mahalli-theme] #computerShell .nav-item{color:var(--text-secondary)!important}
html[data-mahalli-theme] #computerShell .nav-item:hover,
html[data-mahalli-theme] #computerShell .nav-item.active{background:var(--primary-soft)!important;color:var(--primary-dark)!important}
html[data-mahalli-theme] #computerShell .nav-item.active{box-shadow:inset -3px 0 0 var(--primary)!important}
html[data-mahalli-theme] #computerShell .frame-loading{background:color-mix(in srgb,var(--background) 90%,transparent)!important;color:var(--text)!important}
html[data-mahalli-theme] #computerShell .mahalli-loader-line{background:var(--border)!important}
html[data-mahalli-theme] #computerShell .mahalli-loader-line i{background:var(--primary)!important}

/* English layout follows the selected store language. */
html[data-mahalli-language="en"] body{direction:ltr}
html[data-mahalli-language="en"] #computerSidebar.computer-sidebar{left:0!important;right:auto!important;direction:ltr;border-left:0!important;border-right:1px solid var(--border)!important}
html[data-mahalli-language="en"] #computerShell .computer-main{left:var(--desktop-sidebar)!important;right:0!important;direction:ltr}
html[data-mahalli-language="en"] #computerShell.sidebar-collapsed .computer-main{left:var(--desktop-sidebar-collapsed)!important;right:0!important}
html[data-mahalli-language="en"] #computerShell :is(.nav-item,.user-copy,.topbar-profile div,.account-menu button,.search-results button,.computer-store-menu button){text-align:left!important;direction:ltr}
html[data-mahalli-language="en"] #computerShell .nav-item.active{box-shadow:inset 3px 0 0 var(--primary)!important}
html[data-mahalli-language="en"] #computerShell .nav-item b{margin-left:auto;margin-right:0}
html[data-mahalli-language="en"] #computerShell .topbar-account-wrap{direction:ltr}
html[data-mahalli-language="en"] #computerShell .topbar-account-menu{left:0;right:auto}
html[data-mahalli-language="en"] #computerShell .topbar-account-menu:before{left:22px;right:auto}
html[data-mahalli-language="en"] #computerShell .computer-store-menu{right:0;left:auto}
@media(max-width:1366px){html[data-mahalli-language="en"] #computerShell .computer-main{left:244px!important;right:0!important}html[data-mahalli-language="en"] #computerShell.sidebar-collapsed .computer-main{left:82px!important;right:0!important}}

/* =========================================================
   PHASE 87.2 — DESKTOP SHELL THEME HARDENING
   Keep topbar/sidebar on the exact store palette even when legacy shell CSS
   contains white !important fallbacks.
========================================================= */
html[data-mahalli-theme] #computerShell{
  --desktop-bg:var(--background);
  --desktop-surface:var(--surface);
  --desktop-soft:var(--surface-2);
  --desktop-text:var(--text);
  --desktop-muted:var(--text-muted);
  --desktop-line:var(--border);
  --desktop-green:var(--primary);
  --desktop-green-dark:var(--primary-dark);
  --desktop-green-soft:var(--primary-soft);
}
html[data-mahalli-theme] #computerSidebar.computer-sidebar,
html[data-mahalli-theme] #computerTopbar.computer-topbar{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-mahalli-theme] #computerShell :is(
  .sidebar-store-compact,.sidebar-support,.sidebar-bottom,.sidebar-account,
  .topbar-menu,.topbar-search,.topbar-search kbd,.connection-pill,.topbar-icon,.topbar-profile,
  .account-menu,.topbar-account-menu:before,.computer-store-switch,.computer-store-menu
){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-mahalli-theme] #computerShell .topbar-search{background:var(--surface-2)!important}
html[data-mahalli-theme] #computerShell .topbar-search input{color:var(--text)!important}
html[data-mahalli-theme] #computerShell .topbar-search input::placeholder{color:var(--text-muted)!important}
html[data-mahalli-theme] #computerShell :is(.nav-group-label,.route-copy small,.route-copy span,.user-copy small,.topbar-profile small,.sidebar-store-compact small){color:var(--text-muted)!important}
html[data-mahalli-theme] #computerShell .nav-item{color:var(--text-secondary)!important}
html[data-mahalli-theme] #computerShell .nav-item:hover,
html[data-mahalli-theme] #computerShell .nav-item.active{background:var(--primary-soft)!important;color:var(--primary-dark)!important}
html[data-mahalli-theme="midnight-emerald"] #computerShell .computer-brand img{filter:brightness(0) invert(1)}

/* =========================================================
   PHASE 90 — STORE THEME COHERENCE
   Keep legacy desktop surfaces on the same store palette.
   This section intentionally uses higher-specificity selectors because
   several legacy page styles still contain hard-coded light colors.
========================================================= */
html[data-mahalli-theme]{
  --soft-surface:var(--surface-2);
  --soft-border:var(--border-soft);
  --soft-green:var(--primary-soft);
  --very-soft-green:var(--primary-soft-2);
  --dash-bg:var(--background);
  --dash-card:var(--surface);
  --dash-line:var(--border);
  --dash-text:var(--text);
  --dash-ink:var(--text);
  --dash-muted:var(--text-muted);
  --dash-green:var(--primary);
  --dash-green-dark:var(--primary-dark);
  --dash-green-soft:var(--primary-soft);
  --dash-shadow:var(--mahalli-shadow);
  --mx-ink:var(--text);
  --mx-surface:var(--surface);
  --mx-soft:var(--surface-2);
  --mx-border:var(--border);
  --mx-accent:var(--primary);
}
html[data-mahalli-theme="midnight-emerald"],
html[data-mahalli-theme="midnight"]{
  --blue:#79A9FF;
  --blue-soft:rgba(92,151,255,.14);
  --purple:#B79CFF;
  --purple-soft:rgba(168,134,255,.14);
  --danger-soft:rgba(255,120,130,.12);
  --warning-soft:rgba(234,192,106,.12);
}

/* Dashboard */
html[data-mahalli-theme] .dashboard-page{background:var(--background)!important;color:var(--text)!important}
html[data-mahalli-theme] .dashboard-heading :is(h1,p){color:var(--text)!important}
html[data-mahalli-theme] .dashboard-heading p,
html[data-mahalli-theme] :is(.dashboard-live,.kpi-top span,.kpi-foot,.kpi-foot strong,.dash-card-head p,.chart-value,.chart-day,.payment-name,.payment-value,.pulse-list span,.recharge-summary-grid span,.recharge-summary-grid small,.recharge-operator-name small,.recharge-operator-row>div:not(:first-child) span){color:var(--text-muted)!important}
html[data-mahalli-theme] :is(.kpi-card:not(.kpi-primary),.dash-card,.dashboard-date-menu,.date-filter,.dashboard-recharge-panel){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-mahalli-theme] :is(.kpi-card:not(.kpi-primary),.dash-card,.dashboard-recharge-panel){box-shadow:0 14px 34px color-mix(in srgb,var(--text) 4%,transparent)!important}
html[data-mahalli-theme] :is(.kpi-card:not(.kpi-primary) .kpi-value strong,.dash-card-head h2,.pulse-list strong,.recharge-summary-grid strong,.recharge-operator-name span,.recharge-operator-row>div:not(:first-child) b,.recent-sales-card td,.money){color:var(--text)!important}
html[data-mahalli-theme] .dashboard-live{background:var(--primary-soft)!important;border-color:color-mix(in srgb,var(--primary) 24%,var(--border))!important;color:var(--primary-dark)!important}
html[data-mahalli-theme] .dashboard-date-menu button{color:var(--text)!important}
html[data-mahalli-theme] .dashboard-date-menu button:hover{background:var(--surface-2)!important}
html[data-mahalli-theme] .dash-card-head{border-color:var(--border-soft)!important}
html[data-mahalli-theme] :is(.quick-actions-row a,.recharge-summary-grid>div,.recharge-operator-row,.mx-pulse-score,.mx-insight){background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-mahalli-theme] .quick-actions-row a:hover{background:color-mix(in srgb,var(--primary) 9%,var(--surface-2))!important;color:var(--primary-dark)!important;border-color:color-mix(in srgb,var(--primary) 28%,var(--border))!important}
html[data-mahalli-theme] .payment-progress{background:var(--surface-2)!important}
html[data-mahalli-theme] .pulse-list>div{border-color:var(--border-soft)!important}
html[data-mahalli-theme] .recent-sales-card th{background:var(--surface-2)!important;color:var(--text-muted)!important;border-color:var(--border)!important}
html[data-mahalli-theme] .recent-sales-card td{border-color:var(--border-soft)!important}
html[data-mahalli-theme] .recent-sales-card tbody tr:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))!important}
html[data-mahalli-theme] .recharge-operator-row{background:var(--surface-2)!important}
html[data-mahalli-theme] .dashboard-empty{color:var(--text-muted)!important}

/* Desktop cashier */
html[data-mahalli-theme] .cashier-view{background:var(--background)!important;color:var(--text)!important}
html[data-mahalli-theme] .cashier-view :is(.cashier-tool-card,.products-area,.cart-panel,.cart-header,.cart-items,.cart-footer,.product-card,.cart-item,.product-size-slider,.product-visibility-button,.quick-product,.quick-empty,.size-control-row,.size-control-actions button,.keypad-key,.customer-select-box,.discount-box,.payment-section){
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-mahalli-theme] .cashier-view :is(.cart-items,.product-card,.cart-item,.product-size-slider,.product-visibility-button,.quick-product,.quick-empty,.size-control-row,.customer-select-box,.discount-box,.payment-section){background:var(--surface-2)!important}
html[data-mahalli-theme] .cashier-view :is(.product-card,.cart-item,.cashier-tool-card,.products-area,.cart-panel){box-shadow:0 10px 26px color-mix(in srgb,var(--text) 5%,transparent)!important}
html[data-mahalli-theme] .cashier-view :is(.side-card-head h3,.product-name,.cart-title h2,.cart-item-data strong,.summary-row strong,.size-control-row>span){color:var(--text)!important}
html[data-mahalli-theme] .cashier-view :is(.keypad-hint,.product-category,.cart-item-data>span,.empty-cart,.section-kicker){color:var(--text-muted)!important}
html[data-mahalli-theme] .cashier-view .product-icon.phase4-product-placeholder{background:var(--surface-2)!important;color:var(--primary)!important}
html[data-mahalli-theme] .cashier-view .product-add{background:var(--primary-soft)!important;color:var(--primary-dark)!important}
html[data-mahalli-theme] .cashier-view .cart-summary{background:color-mix(in srgb,var(--primary) 7%,var(--surface-2))!important;border-color:color-mix(in srgb,var(--primary) 24%,var(--border))!important;color:var(--text)!important}
html[data-mahalli-theme] .cashier-view .summary-row.total{border-color:color-mix(in srgb,var(--primary) 30%,var(--border))!important}
html[data-mahalli-theme] .cashier-view .keypad-key:hover{background:color-mix(in srgb,var(--primary) 7%,var(--surface-2))!important;border-color:color-mix(in srgb,var(--primary) 30%,var(--border))!important}
html[data-mahalli-theme] .cashier-view .keypad-key-action{background:var(--surface-2)!important;color:var(--primary-dark)!important}
html[data-mahalli-theme] .cashier-view .size-control-actions .size-reset{background:var(--primary-soft)!important;color:var(--primary-dark)!important;border-color:color-mix(in srgb,var(--primary) 28%,var(--border))!important}
html[data-mahalli-theme="midnight-emerald"] .cashier-view .quick-action:not(.action-primary),
html[data-mahalli-theme="midnight"] .cashier-view .quick-action:not(.action-primary){background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-mahalli-theme="midnight-emerald"] .cashier-view .quick-action.action-danger,
html[data-mahalli-theme="midnight"] .cashier-view .quick-action.action-danger{background:color-mix(in srgb,var(--danger) 11%,var(--surface))!important;color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 26%,var(--border))!important}
html[data-mahalli-theme="midnight-emerald"] .cashier-view .quick-action.action-warning,
html[data-mahalli-theme="midnight"] .cashier-view .quick-action.action-warning{background:color-mix(in srgb,var(--warning) 11%,var(--surface))!important;color:var(--warning)!important;border-color:color-mix(in srgb,var(--warning) 26%,var(--border))!important}
html[data-mahalli-theme="midnight-emerald"] .cashier-view :is(.quick-action.action-soft,.quick-action.action-success),
html[data-mahalli-theme="midnight"] .cashier-view :is(.quick-action.action-soft,.quick-action.action-success){background:color-mix(in srgb,var(--success) 10%,var(--surface))!important;color:var(--primary-dark)!important;border-color:color-mix(in srgb,var(--success) 24%,var(--border))!important}
html[data-mahalli-theme="midnight-emerald"] .cashier-view .quick-action.action-info,
html[data-mahalli-theme="midnight"] .cashier-view .quick-action.action-info{background:color-mix(in srgb,var(--blue) 10%,var(--surface))!important;color:var(--blue)!important;border-color:color-mix(in srgb,var(--blue) 24%,var(--border))!important}

/* Reports */
html[data-mahalli-theme] .page{background:var(--background)!important;color:var(--text)!important}
html[data-mahalli-theme] :is(.report-filter-bar,.stat-card,.panel,.report-mobile-row,.filter-control,.period-btn,.btn-secondary,.report-type-btn,.report-chip){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-mahalli-theme] :is(.report-rank,.inventory-box,.report-mobile-grid div,.cloud-report-table th){background:var(--surface-2)!important;border-color:var(--border-soft)!important;color:var(--text)!important}
html[data-mahalli-theme] :is(.page-title p,.filter-label,.stat-card .label,.stat-footer,.panel-title span,.legend-name,.report-row-info span,.report-row-value span,.inventory-box span,.inventory-box small,.collection-row span,.cloud-report-table th,.cloud-report-table td,.report-chip,.report-cloud-note){color:var(--text-muted)!important}
html[data-mahalli-theme] :is(.stat-card .value,.panel-title strong,.legend-value,.report-row-info strong,.report-row-value strong,.inventory-box strong,.collection-row strong,.cloud-report-table td strong){color:var(--text)!important}
html[data-mahalli-theme] :is(.panel-header,.payment-legend-row,.report-row,.collection-row,.cloud-report-table th,.cloud-report-table td){border-color:var(--border-soft)!important}
html[data-mahalli-theme] .period-btn.active{background:var(--primary-soft)!important;color:var(--primary-dark)!important;border-color:color-mix(in srgb,var(--primary) 28%,var(--border))!important}
html[data-mahalli-theme] .report-type-btn.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
html[data-mahalli-theme] .chart-body{background:transparent!important}
html[data-mahalli-theme] .table-wrap{background:var(--surface)!important}

/* Shared Phase 27 floating experience */
html[data-mahalli-theme] :is(.mx-actions-pop,.mx-palette,.mx-notify-panel,.mx-sale-success-card){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-mahalli-theme] :is(.mx-action,.mx-note,.mx-pulse-score,.mx-insight){background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-mahalli-theme] :is(.mx-action small,.mx-note-copy span,.mx-sale-success-card span,.mx-pulse-score span,.mx-insight small){color:var(--text-muted)!important}
html[data-mahalli-theme] .mx-palette-search{border-color:var(--border)!important}
html[data-mahalli-theme] .mx-palette-search input{color:var(--text)!important}
html[data-mahalli-theme] .mx-palette-search kbd{background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text-muted)!important}
html[data-mahalli-theme] .mx-command{color:var(--text)!important}
html[data-mahalli-theme] .mx-command:hover,
html[data-mahalli-theme] .mx-command.active{background:var(--surface-2)!important}
html[data-mahalli-theme] .mx-sync-pill{background:color-mix(in srgb,var(--surface) 94%,transparent)!important;border-color:var(--border)!important}

/* Weak devices: avoid rendering effects and offscreen card layout. */
html[data-mahalli-performance="fast"] *,html[data-mahalli-low-power="1"] *{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-mahalli-performance="fast"] :is(.product-card,.panel,.m-card,.m-insight-card,.cashier-hero,.metric-card){box-shadow:none!important}
html[data-mahalli-performance="fast"] :is(.product-card,.m-card,.m-insight-card){content-visibility:auto;contain-intrinsic-size:auto 180px}
html[data-mahalli-performance="balanced"] :is(.product-card,.m-card){content-visibility:auto;contain-intrinsic-size:auto 180px}
#desktopSupportButton{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}#desktopSupportButton svg{width:18px;height:18px}

/* Center dialogs in the current viewport, independent of page length. */
:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open{position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;padding:20px!important;box-sizing:border-box!important;display:grid!important;place-items:center!important;overflow:hidden!important;color:inherit;content-visibility:visible!important}
:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay)::backdrop{background:transparent}
:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open>:is(.mahalli-modal-shell,.m-modal-box,.modal,.modal-content,.modal-dialog){max-height:calc(100dvh - 40px)!important;margin:0!important;overflow:auto!important;content-visibility:visible!important;transform:none!important}
.mahalli-modal-shell{display:flex!important;flex-direction:column!important;overflow:hidden!important;max-height:calc(100dvh - 40px)!important}.mahalli-modal-body{overflow:auto!important;min-height:0!important}.mahalli-modal-head,.mahalli-modal-foot{flex-shrink:0!important}.m-modal-body{max-height:calc(100dvh - 210px)!important;overflow:auto!important}
@media(max-width:600px){:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open{padding:10px!important}:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open>*{max-height:calc(100dvh - 20px)!important}.mahalli-modal-shell{max-height:calc(100dvh - 20px)!important}}
:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}:is(.mahalli-modal-backdrop,.m-modal,.modal-overlay):popover-open>:is(.mahalli-modal-shell,.m-modal-box,.modal,.modal-content,.modal-dialog){animation:none!important;transition:none!important;opacity:1!important;visibility:visible!important}

/* Local content remains visible while cloud work runs in the background. */
.frame-loading,.mobile-frame-loading{display:none!important;visibility:hidden!important;pointer-events:none!important}
.mobile-frame-area.loading iframe{opacity:1!important;transform:none!important}
.mahalli-data-loading .kpi-card::after,.mahalli-data-loading .dash-card::after{display:none!important;animation:none!important}

.theme-grid,.theme-choice-grid,.fixed-theme-grid{grid-template-columns:minmax(0,1fr)!important}
.theme-card:disabled{opacity:1;cursor:default}

html[data-mahalli-core-theme="1"] .mahalli-btn.primary{color:#fff!important}

.cash-movement-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cash-movement-types label{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer}.cash-movement-types label:has(input:checked){background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark);font-weight:700}.cash-movement-types input{accent-color:var(--primary)}@media(max-width:550px){.cash-movement-types{grid-template-columns:1fr}}

.notification-side button[data-read]{width:auto!important;min-width:100px;padding:8px 12px;display:flex;gap:6px;align-items:center;justify-content:center}.notification-side button[data-read]:disabled{opacity:.65;cursor:default}