/* =========================================================
   MOYLI CRM v26
   MAIN DASHBOARD
   ========================================================= */

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

:root {
    --bg: #02180c;
    --bg-2: #042413;

    --sidebar: #042b16;
    --panel: #042714;
    --panel-2: #06321b;

    --border: #0e8e4a;
    --border-soft: rgba(26, 210, 112, 0.35);

    --blue: #2bea84;
    --blue-light: #4ded98;

    --red: #f01427;
    --red-dark: #9f0715;

    --green: #18cc83;
    --orange: #ff9a32;

    --text: #f7fcf9;
    --text-soft: #9ac3ad;
    --text-dim: #65927a;

    --sidebar-width: 250px;

    --radius: 15px;

    --shadow-blue:
        0 0 0 1px rgba(43, 234, 132, 0.08),
        0 0 22px rgba(17, 173, 90, 0.08);

    --shadow-red:
        0 0 18px rgba(240, 20, 39, 0.28);
}


/* =========================================================
   BODY
   ========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 60% 0%,
            rgba(16, 158, 82, 0.08),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Times New Roman,
        sans-serif;

    font-size: 14px;

    overflow-x: hidden;
}


/* =========================================================
   MAIN APPLICATION
   ========================================================= */

.app {
    width: 100%;
    min-height: calc(100vh / var(--ds-zoom, 1));

    display: flex;

    background:
        linear-gradient(
            135deg,
            #02160b 0%,
            #032111 55%,
            #02160b 100%
        );
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);

    height: calc(100vh / var(--ds-zoom, 1));

    position: sticky;
    top: 0;

    display: flex;
    flex-direction: column;

    padding: 22px 15px 18px;

    background:
        linear-gradient(
            180deg,
            #042a16 0%,
            #042513 50%,
            #031f10 100%
        );

    border-right: 1px solid rgba(30, 205, 112, 0.22);

    overflow-y: auto;

    z-index: 20;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 0;

    min-height: 60px;

    padding: 0 8px 17px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.brand-logo {
    width: 65px;
    height: 50px;

    object-fit: contain;
}

.brand-text {
    line-height: 1.05;
}

.brand-name {
    font-size: 30px;
    font-weight: 800;

    letter-spacing: 1px;
}

.brand-system {
    margin-top: 6px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 600;

    letter-spacing: 2px;
}


/* =========================================================
   SIDEBAR DATE / TIME
   ========================================================= */

.sidebar-date {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 8px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    line-height: 1.45;
}

.sidebar-time {
    color: #b9d9c8;

    font-size: 22px;
    font-weight: 300;
}


/* =========================================================
   SIDEBAR CONTROLS
   ========================================================= */

.sidebar-controls {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        46px
        46px;

    align-items: center;

    gap: 10px;

    padding: 0 5px 17px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.dashboard-language {
    min-width: 0;
}

.dashboard-language-button {
    width: 100%;
}
.icon-button {
    border: 1px solid var(--border-soft);

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            rgba(6, 57, 30, 0.95),
            rgba(4, 36, 19, 0.95)
        );

    cursor: pointer;
}


.icon-button {
    width: 46px;
    height: 46px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    position: relative;

    font-size: 21px;
}

.notification-count {
    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--red);

    color: white;

    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}


/* =========================================================
   MENU
   ========================================================= */

.main-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-top: 16px;
}

.menu-item {
    width: 100%;
    min-height: 47px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid transparent;

    border-radius: 12px;

    padding: 8px 12px;

    color: #d6ebe0;

    background: transparent;

    cursor: pointer;

    text-align: left;

    font-size: 14px;
    font-weight: 500;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.menu-item:hover {
    background: rgba(19, 155, 82, 0.14);

    border-color: rgba(22, 223, 116, 0.15);
}

.menu-item.active {
    background:
        linear-gradient(
            90deg,
            var(--moyli-primary) 0%,
            var(--moyli-primary) 100%
        );

    border-color: var(--moyli-primary);

    color: white;

    box-shadow: var(--shadow-red);
}

.menu-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(11, 79, 43, 0.96),
            rgba(6, 47, 25, 0.96)
        );

    border: 1px solid rgba(36, 200, 113, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(10, 104, 54, 0.08);

    color: #d7fbe8;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}

.menu-icon svg {
    width: 22px;
    height: 22px;

    display: block;

    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

.menu-item.active .menu-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.07)
        );

    border-color: rgba(255,255,255,.22);

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 18px rgba(255,255,255,.08);
}

.menu-item:hover .menu-icon {
    transform: translateY(-1px);

    border-color: rgba(53, 235, 138, 0.45);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 16px rgba(43, 234, 132, 0.16);
}

.menu-item:hover .menu-icon svg {
    transform: scale(1.04);
}


/* =========================================================
   USER
   ========================================================= */

.sidebar-user {
    margin-top: auto;

    min-height: 65px;

    padding: 10px;

    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid var(--border-soft);

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 65, 34, 0.72),
            rgba(5, 47, 25, 0.86)
        );
}

.user-avatar {
    width: 40px;
    height: 40px;

    position: relative;
    overflow: hidden;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #18693e,
            #0b4727
        );

    border: 1px solid #2ca866;

    font-weight: 800;
}

.user-info {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;
}

.user-info strong {
    font-size: var(--ds-fs-secondary);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info span {
    margin-top: 3px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}

.user-arrow {
    border: 0;
    background: transparent;
    color: white;

    font-size: 23px;

    cursor: pointer;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main {
    min-width: 0;

    flex: 1;

    padding: 18px 22px 26px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {
    min-height: 66px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.topbar h1 {
    font-size: 26px;
    font-weight: 700;
}

.topbar p {
    margin-top: 6px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


/* =========================================================
   DASHBOARD TOP
   ========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.02fr)
        minmax(210px, .95fr)
        minmax(250px, 1.05fr)
        minmax(220px, .95fr);

    gap: 14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.dashboard-card,
.chart-card,
.debt-card {
    border: 1px solid var(--border);

    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(4, 43, 22, 0.98),
            rgba(3, 33, 17, 0.98)
        );

    box-shadow: var(--shadow-blue);
}

.dashboard-card {
    min-height: 350px;

    padding: 13px;

    display: flex;
    flex-direction: column;
}

.card-header {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 10px;
}

.card-header h2 {
    font-size: 17px;
    font-weight: 650;
}

.card-tag {
    padding: 5px 10px;

    border: 1px solid #11a958;

    border-radius: 9px;

    color: #c5f9dd;

    background: rgba(14, 137, 71, 0.27);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


/* =========================================================
   PERIOD SWITCH
   ========================================================= */

.period-switch {
    display: flex;

    padding: 2px;

    border-radius: 8px;

    background: rgba(2, 20, 10, 0.8);
}

.period-switch button {
    min-width: 35px;
    height: 25px;

    padding: 0 8px;

    border: 0;

    border-radius: 6px;

    color: var(--text-soft);

    background: transparent;

    cursor: pointer;

    font-size: var(--ds-fs-secondary);
}

.period-switch button.active {
    color: white;

    background:
        linear-gradient(
            180deg,
            #2bea84,
            #11ad5a
        );

    box-shadow:
        0 0 12px rgba(44, 234, 133, 0.42);
}


/* =========================================================
   METRICS
   ========================================================= */

.metric-list {
    flex: 1;
}

.metric-row {
    min-height: 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom: 1px solid rgba(82, 180, 128, 0.17);

    color: #c7dfd2;

    font-size: var(--ds-fs-secondary);
}

.metric-row:last-child {
    border-bottom: 0;
}

.metric-row strong {
    text-align: right;

    color: #e7f6ee;

    font-size: var(--ds-fs-secondary);
}

.green {
    color: var(--green) !important;
}

.red {
    color: #ff3347 !important;
}

.blue {
    color: #31eb88 !important;
}

.orange {
    color: var(--orange) !important;
}


/* =========================================================
   RANKING / SERVICES
   ========================================================= */

.ranking-list,
.service-list {
    flex: 1;

    border: 1px solid rgba(24, 173, 94, 0.24);

    border-radius: 9px;

    overflow: hidden;
}

.ranking-list > div,
.service-list > div {
    min-height: 37px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 10px;

    border-bottom: 1px solid rgba(74, 179, 123, 0.17);

    font-size: var(--ds-fs-secondary);
}

.ranking-list > div:last-child,
.service-list > div:last-child {
    border-bottom: 0;
}

.ranking-list span {
    font-weight: 600;
}


/* =========================================================
   DETAILS BUTTON
   ========================================================= */

.details-button {
    width: 100%;
    height: 40px;

    margin-top: 11px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #0f984f;

    border-radius: 9px;

    color: #e8fcf1;

    background:
        linear-gradient(
            180deg,
            #073c20,
            #042b16
        );

    cursor: pointer;

    font-size: var(--ds-fs-secondary);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.details-button:hover {
    border-color: #2bea84;

    background: #084725;
}


/* =========================================================
   LOWER DASHBOARD
   ========================================================= */

.dashboard-lower {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 14px;

    margin-top: 14px;
}


/* =========================================================
   CHART
   ========================================================= */

.chart-card {
    min-height: 430px;

    padding: 13px;
}

.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 12px;
}

.chart-mode,
.chart-range {
    display: flex;

    padding: 2px;

    border: 1px solid rgba(21, 200, 105, 0.25);

    border-radius: 10px;

    background: #031e10;
}

.chart-mode button,
.chart-range button {
    min-width: 58px;
    height: 29px;

    border: 0;
    border-radius: 8px;

    color: var(--text-soft);

    background: transparent;

    cursor: pointer;

    font-size: var(--ds-fs-secondary);
}

.chart-mode button.active,
.chart-range button.active {
    color: white;

    background:
        linear-gradient(
            180deg,
            #28ea83,
            #11af5b
        );

    box-shadow:
        0 0 12px rgba(43, 234, 132, 0.35);
}

.chart-period {
    display: flex;
    align-items: center;

    border: 1px solid rgba(21, 200, 105, 0.28);

    border-radius: 9px;

    overflow: hidden;
}

.chart-period button {
    width: 38px;
    height: 31px;

    border: 0;

    color: white;
    background: transparent;

    cursor: pointer;
}

.chart-period span {
    min-width: 130px;

    text-align: center;

    color: #d7efe2;

    font-size: var(--ds-fs-secondary);
}

.chart-legend {
    min-height: 32px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}

.chart-area {
    height: 330px;

    margin-top: 5px;

    position: relative;

    border: 1px solid rgba(14, 141, 73, 0.18);

    border-radius: 10px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(21, 132, 73, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(21, 132, 73, 0.05) 1px,
            transparent 1px
        );

    background-size:
        100% 55px,
        65px 100%;
}

.chart-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: #517e66;

    font-size: var(--ds-fs-secondary);
}


/* =========================================================
   DEBT CARD
   ========================================================= */

.debt-card {
    min-height: 430px;

    padding: 13px;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   BUTTON EFFECTS
   ========================================================= */

button {
    font-family: inherit;
}

button:active {
    transform: scale(.985);
}

.icon-button:hover {
    border-color: var(--blue);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #02150b;
}

::-webkit-scrollbar-thumb {
    background: #126539;

    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #17a358;
}

/* =========================================================
   TOPBAR ACTIONS
   ========================================================= */

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-left: auto;
}

.support-button,
.home-button {
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 16px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            rgba(6, 57, 30, 0.95),
            rgba(3, 35, 18, 0.95)
        );

    font-family: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.support-button:hover {
    border-color: var(--blue);

    box-shadow:
        0 0 15px rgba(43, 234, 132, 0.18);
}

.home-button {
    border-color: rgba(17, 167, 87, 0.45);
}

.home-button:hover {
    border-color: var(--red);

    box-shadow:
        0 0 15px rgba(17, 167, 87, 0.22);
}

.action-icon {
    font-size: 18px;
}

.menu-svg {
    width: 22px;
    height: 22px;

    display: block;

    color: currentColor;

    flex-shrink: 0;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1250px) {

    :root {
        --sidebar-width: 225px;
    }

    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-lower {
        grid-template-columns: 1fr;
    }

    .debt-card {
        min-height: auto;
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .app {
        display: block;
    }

    .sidebar {
        width: 86%;
        max-width: 340px;

        position: fixed;

        left: 0;
        top: 0;

        transform: translateX(-100%);

        transition: transform .25s ease;

        box-shadow:
            16px 0 50px rgba(0,0,0,.5);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        width: 100%;

        padding:
            14px
            12px
            25px;
    }

    .topbar {
        align-items: center;
    }


    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        min-height: auto;
    }

    .dashboard-lower {
        grid-template-columns: 1fr;
    }

    .chart-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .chart-mode,
    .chart-range {
        width: 100%;
    }

    .chart-mode button,
    .chart-range button {
        flex: 1;
    }

    .chart-period {
        width: 100%;

        justify-content: space-between;
    }

    .chart-period span {
        flex: 1;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 520px) {

    .main {
        padding: 10px;
    }

    .topbar h1 {
        font-size: 22px;
    }

    .topbar p {
        display: none;
    }

    .dashboard-card,
    .chart-card,
    .debt-card {
        border-radius: 12px;
    }

    .chart-area {
        height: 270px;
    }

    .chart-legend {
        gap: 8px;
    }
	.topbar-actions {
    gap: 6px;
	}

	.support-button,
	.home-button {
 	   width: 44px;
 	   padding: 0;
	}

	.support-button span:last-child,
	.home-button span:last-child {
	    display: none;
	}

}


/* =========================================
   AUTH SCREEN
========================================= */

[hidden] {
    display: none !important;
}

.auth-screen {
    min-height: calc(100vh / var(--ds-zoom, 1));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background:
        radial-gradient(circle at top right, #125a34 0%, transparent 35%),
        #031a0e;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 40px;
    background: #072d19;
    border: 1px solid #167844;
    border-radius: 24px;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: -10px;
}

.auth-logo img {
    width: 110px;
    height: auto;
    display: block;
}

.auth-card h1 {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 32px;
}

.auth-subtitle {
    margin: 6px 0 30px;
    text-align: center;
    color: #7fb89a;
    font-size: 14px;
    letter-spacing: 4px;
}  

/* =========================================
   AUTH TABS
========================================= */

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 28px;
    padding: 4px;
    background: #032211;
    border: 1px solid #146138;
    border-radius: 12px;
}

.auth-tab {
    padding: 12px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #78b293;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.auth-tab.active {
    background: var(--moyli-primary);
    color: #ffffff;
}


/* =========================================
   AUTH FORM
========================================= */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-form label {
    margin-top: 8px;
    color: #b9e0cb;
    font-size: 14px;
    font-weight: 600;
}

.auth-form input {
    width: 100%;
    height: 48px;
    padding: 0 15px;

    background: #042513;
    border: 1px solid #196e41;
    border-radius: 10px;

    color: #ffffff;
    font-size: 15px;

    outline: none;
}

.auth-form input::placeholder {
    color: #649b7e;
}

.auth-form input:focus {
    border-color: var(--moyli-primary);
}


/* =========================================
   AUTH MAIN BUTTON
========================================= */

.auth-submit {
    width: 100%;
    height: 50px;

    margin-top: 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: var(--moyli-primary);
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.auth-submit:hover {
    background: #649b7e;
    border-color: #649b7e;
    color: #ffffff;
}

.moyli-login-field {
    display: flex;
    align-items: center;

    width: 100%;

    background: #042513;
    border: 1px solid #196e41;
    border-radius: 10px;

    overflow: hidden;
}

.moyli-login-field:focus-within {
    border-color: var(--moyli-primary);
}

.moyli-login-field input {
    flex: 1;

    height: 48px;
    padding: 0 15px;

    background: transparent;
    border: 0;

    color: #ffffff;
    font-size: 15px;

    outline: none;
}

.moyli-login-suffix {
    padding-right: 15px;

    color: #6fac8b;
    font-size: 15px;
    font-weight: 700;

    user-select: none;
}


/* Белый значок показа пароля в Edge */
.auth-form input[type="password"]::-ms-reveal {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}

.auth-message {
    min-height: 20px;
    margin-top: 4px;

    font-size: 14px;
    font-weight: 600;

    color: #ff5264;
}


.login-status {
    min-height: 20px;
    margin-top: 4px;

    color: #6fac8b;

    font-size: 14px;
    font-weight: 600;
}

.login-status.checking {
    color: #8bc5a6;
}

.login-status.available {
    color: #46d99a;
}

.login-status.taken {
    color: #ff5264;
}

.field-error {
    min-height: 18px;
    margin-top: -4px;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    color: #ff2b3f;
}


.recovery-title {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 800;
}

.recovery-text {
    margin: 0 0 18px;

    color: #7fbf9d;

    font-size: 14px;
    line-height: 1.5;
}


.auth-back-button {
    margin-top: 8px;

    border: 0;
    background: transparent;

    color: #78b996;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.auth-back-button:hover {
    color: #ffffff;
}

/* =========================================
   FORGOT PASSWORD LINK
========================================= */

.forgot-password-link {
    align-self: flex-end;

    width: auto;
    height: auto;

    margin: -2px 0 8px;
    padding: 0;

    background: transparent !important;
    border: none !important;

    color: #6fbd93;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    appearance: none;

    transition: 0.2s ease;
}

.forgot-password-link:hover {
    color: #ffffff;
}

.forgot-password-link:focus {
    outline: none;
}

/* =========================================
   COMPACT REGISTER FORM
========================================= */

#registerForm {
    gap: 0;
}

#registerForm label {
    margin: 14px 0 6px;
}

#registerForm input {
    margin: 0;
}


/* Ошибка не занимает место, если её нет */

#registerForm .field-error {
    min-height: 0;
    margin: 4px 0 0;
}

#registerForm .field-error:empty {
    display: none;
}


/* Статус проверки логина */

#registerForm .login-status {
    min-height: 0;
    margin: 4px 0 0;
}

#registerForm .login-status:empty {
    display: none;
}


/* Кнопка регистрации */

#registerForm .auth-submit {
    margin-top: 20px;
}

/* CONTACT CHECK STATUS */

.field-error.checking {
    color: #7fcca3;
}

.field-error.success,
.login-status.available {
    color: #46d99a !important;
}

/* =========================================
   EMAIL VERIFICATION
========================================= */

.verification-code-input {
    text-align: center;

    font-size: 26px !important;
    font-weight: 800;

    letter-spacing: 10px;

    font-variant-numeric: tabular-nums;
}

.verification-code-input::placeholder {
    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1px;
}

#verificationForm .auth-submit {
    margin-top: 12px;
}

#verificationForm .auth-back-button {
    width: 100%;

    margin-top: 8px;

    padding: 8px;

    background: transparent;
    border: none;

    color: #7fcca3;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

#verificationForm .auth-back-button:hover {
    color: #ffffff;
}

/* LOGIN MESSAGES */

.auth-message.error {
    color: #ff2b3f !important;
}

.auth-message.success {
    color: #46d99a !important;
}

/* =========================================
   SESSION LOADER
   ========================================= */

.session-loader {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    pointer-events: all;
}


.session-loader[hidden] {
    display: none;
}


.session-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    padding: 22px 28px;

    border-radius: 16px;

    background: #07331c;

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25);
}


.session-spinner {
    width: 36px;
    height: 36px;

    border: 4px solid rgba(255, 255, 255, 0.18);

    border-top-color: #ff1f3d;

    border-radius: 50%;

    animation:
        moyliSessionSpin 0.8s linear infinite;
}


.session-loader-text {
    font-size: 14px;
    font-weight: 600;

    color: #ffffff;
}


@keyframes moyliSessionSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================
   LANGUAGE SWITCHER
   ========================================= */

.language-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
}


.language-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 52px;
    height: 38px;

    padding: 0 8px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    background: transparent;

    color: #8cc4a6;

    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.language-option img {
    width: 20px;
    height: 14px;

    object-fit: cover;

    border-radius: 2px;
}


.language-option:hover {
    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;
}


.language-option.active {
    border-color: var(--moyli-primary);

    background: rgba(17, 167, 87, 0.08);

    color: #ffffff;
}

/* =========================================
   LOGOUT CONFIRMATION
   ========================================= */

.logout-confirm-overlay {
    position: fixed;
    inset: 0;

    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 17, 9, 0.72);

    backdrop-filter: blur(5px);
}


.logout-confirm-box {
    width: 100%;
    max-width: 390px;

    padding: 28px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #07311b,
            #042614
        );

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);
}


.logout-confirm-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(240, 20, 39, 0.12);

    color: var(--red);

    font-size: 26px;
    font-weight: 800;
}


.logout-confirm-box h2 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;
    font-weight: 800;
}


.logout-confirm-box p {
    margin: 10px 0 24px;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.5;
}


.logout-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.logout-cancel-button,
.logout-confirm-button {
    height: 44px;

    border-radius: 10px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.logout-cancel-button {
    border: 1px solid var(--border-soft);

    background: #06301a;

    color: #d7efe2;
}


.logout-cancel-button:hover {
    border-color: var(--blue);

    background: #083c20;
}


.logout-confirm-button {
    border: 1px solid var(--red);

    background: var(--red);

    color: #ffffff;
}


.logout-confirm-button:hover {
    background: #c91122;
}

.auth-language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: -12px 0 24px;
}

/* =========================================
   DASHBOARD LANGUAGE DROPDOWN
   ========================================= */

.dashboard-language {
    position: relative;
}


.dashboard-language-button {
    height: 46px;
    min-width: 92px;

    padding: 0 11px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid var(--border-soft);
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(6, 57, 30, 0.95),
            rgba(4, 36, 19, 0.95)
        );

    color: var(--text);

    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    cursor: pointer;
}


.dashboard-language-button:hover {
    border-color: var(--blue);
}


.dashboard-language-button img {
    width: 24px;
    height: 16px;

    object-fit: cover;

    border-radius: 2px;
}


.dashboard-language-arrow {
    margin-left: auto;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.dashboard-language-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;

    z-index: 100;

    width: 105px;

    padding: 5px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: #06301a;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);
}


.dashboard-language-menu .language-option {
    width: 100%;

    justify-content: flex-start;

    border: 0;

    min-width: 0;
}


.dashboard-language-menu .language-option.active {
    background: rgba(17, 167, 87, 0.12);
}

/* =========================================
   DESKTOP DASHBOARD - FIT TO SCREEN
   ========================================= */

@media (min-width: 801px) {

    .main {
        height: calc(100vh / var(--ds-zoom, 1));

        display: grid;

        grid-template-rows:
            56px
            minmax(0, 1.12fr)
            minmax(0, 0.88fr);

        gap: 10px;

        padding:
            10px
            16px
            12px;

        overflow: hidden;
    }


    /* TOPBAR */

    .topbar {
        height: 56px;
        min-height: 0;

        margin-bottom: 0;

        align-items: center;
    }


    /* TOP DASHBOARD */

    .dashboard-grid {
        height: 100%;
        min-height: 0;

        gap: 10px;
    }


    .dashboard-card {
        height: 100%;
        min-height: 0;

        padding: 10px;

        overflow: hidden;
    }


    .card-header {
        min-height: 30px;

        padding-bottom: 6px;
    }


    .metric-row {
        min-height: 28px;
    }


    .ranking-list > div,
    .service-list > div {
        min-height: 28px;
    }


    .details-button {
        height: 34px;

        margin-top: 7px;
    }


    /* LOWER DASHBOARD */

    .dashboard-lower {
        height: 100%;
        min-height: 0;

        margin-top: 0;

        gap: 10px;
    }


    .chart-card,
    .debt-card {
        height: 100%;
        min-height: 0;

        padding: 10px;

        overflow: hidden;
    }


    .chart-card {
        display: flex;
        flex-direction: column;
    }


    .chart-toolbar {
        flex: 0 0 auto;

        padding-bottom: 6px;
    }


    .chart-legend {
        min-height: 24px;

        flex: 0 0 auto;

        gap: 10px;
    }


    .chart-area {
        flex: 1;

        height: auto;
        min-height: 0;

        margin-top: 3px;
    }


    .debt-card .metric-row {
        min-height: 27px;
    }

}

/* =========================================
   DESKTOP SIDEBAR COLLAPSE
   ========================================= */

@media (min-width: 801px) {

    .sidebar {
        transition:
            width 0.25s ease,
            min-width 0.25s ease,
            padding 0.25s ease;
    }


    .app.sidebar-collapsed {
        --sidebar-width: 96px;
    }


    .app.sidebar-collapsed .sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }


    /* LOGO */

    .app.sidebar-collapsed .brand {
        justify-content: center;

        min-height: 96px;

        padding:
            10px
            0
            14px;
    }


    .app.sidebar-collapsed .brand-logo {
        width: 64px;
        height: 64px;
    }


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


    /* DATE */

    .app.sidebar-collapsed .sidebar-date {
        display: none;
    }


    /* TOP CONTROLS */

    .app.sidebar-collapsed .dashboard-language,
    .app.sidebar-collapsed .notification-button {
        display: none;
    }


    .app.sidebar-collapsed .sidebar-controls {
        display: flex;

        justify-content: center;

        padding:
            14px
            0
            14px;

        margin: 0;
    }


    /* MENU */

    .app.sidebar-collapsed .main-menu {
        align-items: center;
    }


    .app.sidebar-collapsed .menu-item {
        width: 52px;

        padding: 8px;

        justify-content: center;
    }


    /* v1.0.20: every label is hidden structurally (anything that is neither the icon nor the notification badge). The old
       "span[data-i18n]" selector missed labels without that attribute ("Avtomobil ma’lumotlari"), which then pushed the icon out of the 52 px column. */
    .app.sidebar-collapsed
    .menu-item > span:not(.menu-icon):not(.menu-notification-count) {
        display: none;
    }


    /* USER */

    .app.sidebar-collapsed .sidebar-user {
        justify-content: center;

        padding: 8px;
    }


    .app.sidebar-collapsed .user-info,
    .app.sidebar-collapsed .user-arrow {
        display: none;
    }

}

/* =========================================
   SIDEBAR CONTROL SVG
   ========================================= */

.control-svg {
    width: 23px;
    height: 23px;

    display: block;

    color: #dffced;

    transition:
        transform .18s ease,
        filter .18s ease,
        color .18s ease;
}


/* BELL */

.notification-button:hover .control-svg {
    color: #ffffff;

    transform:
        rotate(-7deg)
        scale(1.05);

    filter:
        drop-shadow(
            0 0 5px rgba(43, 234, 132, 0.55)
        );
}


/* MENU */

.menu-button:hover .control-svg {
    color: #ffffff;

    transform: scale(1.08);

    filter:
        drop-shadow(
            0 0 5px rgba(43, 234, 132, 0.55)
        );
}

/* =========================================
   TOPBAR ACTION SVG
   ========================================= */

.action-svg {
    width: 20px;
    height: 20px;

    display: block;

    flex: 0 0 20px;

    color: currentColor;

    transition:
        transform .18s ease,
        filter .18s ease;
}


.support-button:hover .action-svg,
.home-button:hover .action-svg {
    transform: translateY(-1px) scale(1.05);

    filter:
        drop-shadow(
            0 0 5px rgba(43, 234, 132, 0.45)
        );
}


.logout-button:hover .action-svg {
    transform: translateX(2px);

    filter:
        drop-shadow(
            0 0 5px rgba(240, 20, 39, .45)
        );
}

/* =========================================
   SIDEBAR USER CARD
   ========================================= */

.sidebar-user {
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.sidebar-user:hover {
    border-color: rgba(43, 234, 132, 0.55);

    background:
        linear-gradient(
            180deg,
            rgba(8, 72, 38, 0.9),
            rgba(5, 47, 25, 0.96)
        );

    box-shadow:
        0 0 18px rgba(43, 234, 132, 0.1);
}


.user-avatar {
    border-color: rgba(54, 230, 136, 0.65);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 14px rgba(43, 234, 132, 0.08);
}


.user-arrow {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #cff7e2;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.user-arrow-svg {
    width: 19px;
    height: 19px;

    display: block;
}


.user-arrow:hover {
    background: rgba(43, 234, 132, 0.1);

    color: #ffffff;

    transform: translateX(2px);
}

.profile-avatar-svg {
    width: 25px;
    height: 25px;

    display: block;

    color: #ffffff;
}


/* теперь вся карточка является button */

.sidebar-user {
    width: 100%;

    font: inherit;
    color: inherit;

    text-align: left;

    cursor: pointer;
}


.sidebar-user:active {
    transform: scale(.985);
}


.sidebar-user:focus-visible {
    outline: 2px solid rgba(43, 234, 132, 0.65);
    outline-offset: 2px;
}

.menu-item[data-page="notifications"] {
    position: relative;
}


.menu-notification-count {
    min-width: 22px;
    height: 22px;

    margin-left: auto;

    display: grid;
    place-items: center;

    padding: 0 6px;

    border-radius: 999px;

    background: var(--red);

    color: #ffffff;

    font-size: var(--ds-fs-secondary);
    font-weight: 800;

    box-shadow:
        0 0 12px rgba(17, 167, 87, 0.25);
}

@media (min-width: 801px) {

    .app.sidebar-collapsed
    .menu-item[data-page="notifications"]
    .menu-notification-count {

        position: absolute;

        top: -5px;
        right: -7px;

        margin: 0;

        min-width: 20px;
        height: 20px;

        padding: 0 5px;

        font-size: var(--ds-fs-secondary);
    }

}

.notifications-page {
    height: 100%;

    min-height: 0;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(4, 43, 22, 0.98),
            rgba(3, 33, 17, 0.98)
        );
}


.notifications-page-placeholder {
    width: 100%;
    height: 100%;

    min-height: 300px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 12px;

    color: var(--text-soft);
}


.notifications-page-placeholder h2 {
    color: #ffffff;

    font-size: 24px;
}


.notifications-page-icon {
    width: 38px;
    height: 38px;

    color: #dffced;
}

/* =========================================
   COLLAPSED SIDEBAR TOOLTIPS
   v1.0.19: moved to JS (.sidebar-tooltip in design-system.css). The old CSS-only
   ::after tooltip was position: fixed with top: auto, which browsers place at the
   item's UNSCROLLED position; once the sidebar was scrolled it landed off-screen.
   ========================================= */

/* =========================================
   PROFILE POPOVER
   ========================================= */

.profile-popover {
    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 98px;

    z-index: 300;

    padding: 8px;

    border: 1px solid var(--border-soft);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #07351c,
            #042614
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.42);
}


.profile-popover-header {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 9px 10px 12px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.profile-popover-header strong {
    font-size: 14px;
}


.profile-popover-header span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.profile-popover-item {
    width: 100%;
    height: 39px;

    margin-top: 4px;

    padding: 0 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #d9f5e6;

    text-align: left;

    cursor: pointer;
}


.profile-popover-item:hover {
    background:
        rgba(43, 234, 132, 0.1);

    color: #ffffff;
}


.profile-popover-item.danger {
    color: #ff5b69;
}


.profile-popover-item.danger:hover {
    background:
        rgba(240, 20, 39, .10);
}

/* =========================================
   USER PROFILE PAGE
   ========================================= */

.profile-page {
    height: 100%;
    min-height: 0;

    overflow-y: auto;
}


.profile-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.profile-page-header h1 {
    font-size: 26px;
}


.profile-page-header p {
    margin-top: 5px;

    color: var(--text-soft);
}


.profile-back-button {
    height: 42px;

    padding: 0 15px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: #06301a;

    color: #dffced;

    cursor: pointer;
}


.profile-layout {
    display: grid;

    grid-template-columns:
        280px
        minmax(0, 1fr);

    gap: 16px;
}


.profile-photo-card,
.profile-form-card {
    border: 1px solid var(--border);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 47, 25, 0.98),
            rgba(3, 33, 17, 0.98)
        );
}


.profile-photo-card {
    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.profile-large-avatar {
    width: 110px;
    height: 110px;

    overflow: hidden;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border: 1px solid #23b869;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #126639,
            #07351c
        );
}


.profile-large-avatar svg {
    width: 52px;
    height: 52px;

    color: #ffffff;
}

.profile-avatar-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


.profile-photo-card strong {
    font-size: 17px;
}


.profile-photo-card > span {
    margin-top: 5px;

    color: var(--text-soft);
}


.profile-photo-button {
    width: 100%;
    height: 42px;

    margin-top: 22px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: #06301a;

    color: #dffced;

    cursor: pointer;
}


.profile-form-card {
    padding: 24px;
}


.profile-form-card h2 {
    margin-bottom: 22px;

    font-size: 19px;
}


.profile-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.profile-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.profile-field span {
    color: #b9e0cb;

    font-size: 14px;
    font-weight: 600;
}


.profile-field input {
    height: 46px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    background: #042513;

    color: #ffffff;

    outline: none;
}


.profile-field input:focus {
    border-color: var(--blue);
}


.profile-field input[readonly] {
    color: var(--text-soft);

    cursor: default;
}


.profile-form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 26px;
}


.profile-password-button,
.profile-save-button {
    height: 44px;

    padding: 0 18px;

    border-radius: 10px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.profile-password-button {
    border: 1px solid var(--border-soft);

    background: #06301a;

    color: #dffced;
}


.profile-save-button {
    border: 1px solid var(--red);

    background: var(--red);

    color: #ffffff;
}


@media (max-width: 800px) {

    .profile-layout {
        grid-template-columns: 1fr;
    }


    .profile-form-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   MAIN APP PAGES
   ========================================= */

@media (min-width: 801px) {

    .profile-page,
    .notifications-page,
    .sales-page,
    .warehouse-page {
        grid-row: 2 / 4;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        overflow-y: auto;
    }

}

/* =========================================
   SUPPORT MODAL
   ========================================= */

.modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 200000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 17, 9, 0.78);

    backdrop-filter: blur(6px);
}


.support-modal {
    position: relative;

    width: 100%;
    max-width: 440px;

    padding: 30px;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #07351c,
            #042614
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .5),
        0 0 30px rgba(43, 234, 132, 0.08);
}


.modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;

    background: rgba(255,255,255,.03);

    color: var(--text-soft);

    font-size: 21px;

    cursor: pointer;
}


.modal-close:hover {
    border-color: var(--red);

    color: #ffffff;

    background: rgba(240, 20, 39, .10);
}


.support-modal-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border: 1px solid rgba(43, 234, 132, 0.35);
    border-radius: 14px;

    background:
        rgba(43, 234, 132, 0.08);

    color: #dffced;
}


.support-modal-icon .menu-svg {
    width: 26px;
    height: 26px;
}


.support-modal h2 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
}


.support-modal > p {
    margin: 10px 0 22px;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.6;
}


.support-contact {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 14px;

    margin-top: 9px;

    border: 1px solid rgba(26, 210, 112, 0.25);
    border-radius: 11px;

    background: rgba(3, 30, 16, 0.55);
}


.support-contact span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.support-contact strong {
    color: #ffffff;

    font-size: 14px;
}


.support-main-button {
    width: 100%;
    height: 46px;

    margin-top: 20px;

    border: 1px solid var(--red);
    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            var(--moyli-primary),
            var(--moyli-primary)
        );

    color: #ffffff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


.support-main-button:hover {
    box-shadow:
        0 0 18px rgba(17, 167, 87, 0.25);
}

/* =========================================
   PROFILE SAVE LOADING
   ========================================= */

.profile-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.profile-save-button.is-loading::before {
    content: "";

    width: 15px;
    height: 15px;

    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        profileSaveSpin .7s linear infinite;
}


.profile-save-button:disabled {
    cursor: wait;
    opacity: .8;
}


@keyframes profileSaveSpin {

    to {
        transform: rotate(360deg);
    }

}

/* =========================================
   PROFILE FIELD ACTION
   ========================================= */

.profile-field-action {
    align-self: flex-start;

    margin-top: 3px;
    padding: 0;

    border: 0;

    background: transparent;

    color: #6fe8a7;

    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 600;

    cursor: pointer;
}


.profile-field-action:hover {
    color: #ffffff;
}
.profile-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.profile-field-head label {
    color: #b9e0cb;

    font-size: 14px;
    font-weight: 600;
}


.profile-field-head .profile-field-action {
    margin: 0;
}

/* =========================================
   PROFILE EMAIL MODAL
   ========================================= */

.profile-email-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 200000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 17, 9, 0.78);

    backdrop-filter: blur(6px);
}


.profile-email-modal {
    position: relative;

    width: 100%;
    max-width: 430px;

    padding: 30px;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #07351c,
            #042614
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .5);
}


.profile-email-modal h2 {
    margin-bottom: 8px;

    font-size: 22px;
}


.profile-email-modal p {
    margin-bottom: 20px;

    color: var(--text-soft);

    line-height: 1.5;
}


.profile-email-modal label {
    display: block;

    margin-bottom: 7px;

    color: #b9e0cb;

    font-size: 14px;
    font-weight: 600;
}


.profile-email-modal input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    background: #042513;

    color: #ffffff;

    outline: none;
}


.profile-email-modal input:focus {
    border-color: var(--blue);
}


.profile-email-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;

    background: transparent;

    color: var(--text-soft);

    font-size: 21px;

    cursor: pointer;
}


.profile-email-send-button {
    width: 100%;
    height: 46px;

    margin-top: 12px;

    border: 1px solid var(--red);
    border-radius: 11px;

    background: var(--red);

    color: #ffffff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

/* =========================================
   LOGIN BUTTON LOADING
   ========================================= */

#loginSubmitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}


#loginSubmitButton.is-loading::before {
    content: "";

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    border: 2px solid
        rgba(255,255,255,.35);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        moyliLoginSpin .7s linear infinite;
}


#loginSubmitButton:disabled {
    cursor: wait;

    opacity: .82;
}


@keyframes moyliLoginSpin {

    to {
        transform: rotate(360deg);
    }
}

.profile-email-send-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.profile-email-send-button.is-loading::before {
    content: "";

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    border: 2px solid
        rgba(255,255,255,.35);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        profileSaveSpin .7s linear infinite;
}


.profile-email-send-button:disabled {
    cursor: wait;
    opacity: .82;
}

.profile-code-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 10px;
}


.profile-code-secondary-button {
    min-height: 42px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: #06301a;

    color: #dffced;

    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    cursor: pointer;
}


.profile-code-secondary-button:hover {
    border-color: var(--blue);

    background: #083c20;
}


.profile-code-secondary-button:disabled {
    opacity: .65;

    cursor: wait;
}

.auth-submit.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.auth-submit.is-loading::before {
    content: "";

    width: 14px;
    height: 14px;

    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;

    border-radius: 50%;

    animation: authButtonSpin 0.7s linear infinite;
}


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

.sidebar-avatar-image {
    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    min-width: 100%;
    min-height: 100%;

    max-width: none !important;
    max-height: none !important;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}

/* =========================================
   AVATAR CROP
   ========================================= */

.avatar-crop-modal {
    width: min(440px, calc((100vw / var(--ds-zoom, 1)) - 32px));

    padding: 28px;

    text-align: center;
}


.avatar-crop-modal h3 {
    margin: 0 0 8px;

    font-size: 22px;
    font-weight: 700;
}


.avatar-crop-description {
    margin: 0 0 22px;

    font-size: 14px;
    line-height: 1.5;

    opacity: 0.72;
}


/* =========================================
   CROP STAGE
   ========================================= */

.avatar-crop-stage {
    position: relative;

    width: 320px;
    height: 320px;

    max-width: 100%;

    margin: 0 auto 24px;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(4, 36, 19, 0.95);

    border:
        1px solid rgba(66, 236, 145, 0.75);

    cursor: grab;

    user-select: none;

    touch-action: none;
}


.avatar-crop-stage:active {
    cursor: grabbing;
}


.avatar-crop-image {
    position: absolute;

    top: 50%;
    left: 50%;

    width: auto;
    height: auto;

    max-width: none;
    max-height: none;

    transform:
        translate(-50%, -50%);

    transform-origin:
        center center;

    pointer-events: none;

    user-select: none;
}


/* =========================================
   ROUND AVATAR FRAME
   ========================================= */

.avatar-crop-frame {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 2px
        rgba(255, 255, 255, 0.16);
}


/* =========================================
   ZOOM
   ========================================= */

.avatar-crop-zoom {
    display: flex;

    align-items: center;

    gap: 14px;

    margin: 0 4px 24px;
}


.avatar-crop-zoom span {
    width: 24px;

    flex: 0 0 24px;

    font-size: 22px;

    opacity: 0.7;
}


.avatar-crop-zoom input[type="range"] {
    width: 100%;

    cursor: pointer;
}


/* =========================================
   ACTION BUTTONS
   ========================================= */

.avatar-crop-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.avatar-crop-actions button {
    min-height: 46px;

    border-radius: 12px;

    cursor: pointer;
}


.avatar-crop-actions
.profile-secondary-button {
    border:
        1px solid rgba(255, 255, 255, 0.16);

    background:
        rgba(255, 255, 255, 0.04);

    color: #ffffff;
}


.avatar-crop-actions
.profile-primary-button {
    border:
        1px solid rgba(66, 236, 145, 0.55);

    background:
        rgba(26, 204, 109, 0.22);

    color: #ffffff;

    font-weight: 700;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 520px) {

    .avatar-crop-modal {
        padding: 22px 18px;
    }


    .avatar-crop-stage {
        width: 270px;
        height: 270px;
    }


    .avatar-crop-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SAVDO PAGE
   ========================================= */

.sales-page {
    width: 100%;
}

.sales-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.sales-header__title h1 {
    color: var(--text);

    font-size: 30px;
    font-weight: 800;
}

.sales-header__title p {
    margin-top: 6px;

    color: var(--text-soft);

    font-size: 14px;
}

/* SAVDO TABS */

.sales-tabs {
    width: min(640px, 100%);

    margin: 26px auto 32px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border: 1px solid var(--border-soft);
    border-radius: 14px;

    background: var(--panel);

    overflow: hidden;
}

.sales-tab {
    height: 48px;

    border: 0;

    color: var(--text-soft);
    background: transparent;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.sales-tab:hover {
    color: var(--text);
}

.sales-tab.is-active {
    color: var(--text);

    background: rgba(23, 232, 121, 0.08);

    box-shadow:
        inset 0 0 0 1px var(--blue);
}

.sales-history-btn {
    height: 44px;

    padding: 0 18px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    color: var(--text);

    background: var(--panel);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.sales-history-btn:hover {
    border-color: var(--blue);
}

/* =========================================
   SAVDO — START OPTIONS
   ========================================= */

.sales-start {
    width: 100%;
    max-width: 920px;

    margin-top: 34px;
}

.sales-start__head {
    margin-bottom: 18px;
}

.sales-start__head h2 {
    margin: 0;

    color: var(--text);

    font-size: 22px;
    font-weight: 800;
}

.sales-start__head p {
    margin: 6px 0 0;

    color: var(--text-soft);

    font-size: 14px;
}

.sales-start__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.sales-start-card {
    min-height: 150px;

    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    text-align: left;

    border: 1px solid var(--border-soft);
    border-radius: 16px;

    background: var(--panel);

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}

.sales-start-card:hover {
    border-color: var(--blue);

    transform: translateY(-2px);
}

.sales-start-card__title {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.sales-start-card__text {
    margin-top: 8px;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .sales-start__options {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SAVDO — CAMERA CARD
   ========================================= */

.sales-camera-card {
    justify-content: flex-start;

    cursor: default;
}

.sales-camera-card:hover {
    border-color: var(--border-soft);

    transform: none;
}


.sales-card-head {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.sales-card-head h3 {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.sales-card-head p {
    margin: 7px 0 0;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.5;
}


.sales-camera-open-btn {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    color: var(--text);

    background: transparent;

    font-size: 20px;

    cursor: pointer;
}

.sales-camera-open-btn:hover {
    border-color: var(--blue);

    background: rgba(23, 232, 121, 0.08);
}


.sales-plate-field {
    width: 100%;
    height: 58px;

    margin-top: 22px;

    display: flex;
    align-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.08);

    overflow: hidden;
}

.sales-plate-prefix {
    min-width: 64px;
    height: 100%;

    display: grid;
    place-items: center;

    border-right: 1px solid var(--border-soft);

    color: var(--text-soft);

    font-size: 15px;
    font-weight: 700;
}

.sales-plate-prefix input {
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: inherit;

    text-align: center;

    font: inherit;
    font-weight: 700;
}

.sales-plate-field input {
    width: 100%;
    height: 100%;

    padding: 0 16px;

    border: 0;
    outline: 0;

    color: var(--text);
    background: transparent;

    font: inherit;
    font-size: 18px;
    font-weight: 700;

    text-transform: uppercase;
}

.sales-plate-field input::placeholder {
    color: var(--text-soft);

    opacity: 0.65;
}


.sales-find-open-btn {
    width: 100%;
    height: 50px;

    margin-top: 16px;

    border: 0;
    border-radius: 11px;

    color: #ffffff;

    background: var(--moyli-primary);

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.sales-find-open-btn:hover {
    filter: brightness(1.08);

    transform: translateY(-1px);
}


.sales-plate-example {
    margin-top: 12px;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}

/* =========================================
   SAVDO — CLIENT SEARCH CARD
   ========================================= */

.sales-client-card {
    justify-content: flex-start;

    cursor: default;
}

.sales-client-card:hover {
    border-color: var(--border-soft);

    transform: none;
}


.sales-client-search-field {
    width: 100%;
    height: 58px;

    margin-top: 22px;

    display: flex;
    align-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.08);

    overflow: hidden;
}


.sales-client-search-icon {
    width: 54px;
    height: 100%;

    flex: 0 0 54px;

    display: grid;
    place-items: center;

    color: var(--text-soft);

    font-size: 24px;
}


.sales-client-search-field input {
    width: 100%;
    height: 100%;

    padding: 0 14px 0 0;

    border: 0;
    outline: 0;

    color: var(--text);
    background: transparent;

    font: inherit;
    font-size: 14px;
}


.sales-client-search-field input::placeholder {
    color: var(--text-soft);

    opacity: 0.7;
}


.sales-client-actions {
    width: 100%;

    margin-top: 16px;

    display: grid;
    grid-template-columns: 1fr 1.35fr;

    gap: 12px;
}


.sales-client-search-btn,
.sales-client-add-btn {
    height: 50px;

    border-radius: 11px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}


.sales-client-search-btn {
    border: 1px solid var(--border-soft);

    background: #06301a;
}


.sales-client-search-btn:hover {
    border-color: var(--blue);

    background: #084123;
}


.sales-client-add-btn {
    border: 1px solid var(--moyli-primary);

    background: var(--moyli-primary);
}


.sales-client-add-btn:hover {
    background: var(--moyli-primary);

    transform: translateY(-1px);
}

/* =========================================
   SAVDO — SEARCH RESULTS
   ========================================= */

.sales-results {
    width: 100%;
    max-width: 920px;

    margin-top: 18px;

    border: 1px solid var(--border-soft);
    border-radius: 16px;

    background: var(--panel);

    overflow: hidden;
}


.sales-results__head {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 0 18px;

    border-bottom: 1px solid rgba(82, 180, 128, 0.16);
}


.sales-results__head h3 {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}


.sales-results__count {
    min-width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    padding: 0 8px;

    border: 1px solid var(--border-soft);
    border-radius: 999px;

    color: var(--text-soft);

    background: rgba(43, 234, 132, 0.06);

    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}


.sales-results__list {
    min-height: 120px;

    padding: 14px;
}


.sales-results-empty {
    min-height: 92px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px dashed rgba(26, 210, 112, 0.28);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.07);
}


.sales-results-empty__icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    color: var(--blue-light);

    font-size: 23px;
}


.sales-results-empty strong {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}


.sales-results-empty span {
    margin-left: 4px;

    color: var(--text-soft);

    font-size: 14px;
}

.sales-plate-message {
    min-height: 18px;

    margin-top: 9px;

    color: #ff5264;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.sales-plate-message.success {
    color: var(--green);
}

/* =========================================
   SAVDO — NEW CLIENT MODAL
   ========================================= */

.sales-client-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 200000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 17, 9, 0.78);

    backdrop-filter: blur(6px);
}


.sales-client-modal {
    position: relative;

    width: 100%;
    max-width: 650px;

    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 40px);

    padding: 28px;

    overflow-y: auto;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #07351c,
            #042614
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.5);
}


.sales-client-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;

    background: transparent;

    color: var(--text-soft);

    font-size: 21px;

    cursor: pointer;
}


.sales-client-modal-close:hover {
    border-color: var(--red);

    color: #ffffff;

    background: rgba(240, 20, 39, 0.10);
}


.sales-client-modal h2 {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 800;
}


.sales-client-modal-subtitle {
    margin: 7px 0 24px;

    color: var(--text-soft);

    font-size: 14px;
}


.sales-client-modal-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.sales-client-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.sales-client-field:first-child {
    grid-column: 1 / -1;
}


.sales-client-field span {
    color: #b9e0cb;

    font-size: 14px;
    font-weight: 600;
}


.sales-client-field input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    outline: none;

    background: #042513;

    color: #ffffff;

    font: inherit;
}


.sales-client-field input:focus {
    border-color: var(--blue);
}


.sales-client-modal-section {
    margin-top: 24px;
}


.sales-client-modal-section h3 {
    margin-bottom: 12px;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}


.sales-new-plate-row {
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 10px;
}


.sales-new-plate-row input {
    height: 48px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    outline: none;

    background: #042513;

    color: #ffffff;

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    text-transform: uppercase;
}


.sales-new-plate-row input:first-child {
    text-align: center;
}


.sales-new-plate-row input:focus {
    border-color: var(--blue);
}


.sales-client-modal-message {
    min-height: 20px;

    margin-top: 14px;

    color: #ff5264;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.sales-client-modal-message.success {
    color: var(--green);
}


.sales-client-modal-actions {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.sales-client-modal-actions button {
    height: 46px;

    border-radius: 10px;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


#salesClientModalCancel {
    border: 1px solid var(--border-soft);

    background: #06301a;

    color: #dffced;
}


#salesClientModalCancel:hover {
    border-color: var(--blue);
}


#salesClientSaveBtn {
    border: 1px solid var(--red);

    background: var(--red);

    color: #ffffff;
}


#salesClientSaveBtn:hover {
    background: var(--moyli-primary);
}


@media (max-width: 600px) {

    .sales-client-modal {
        padding: 24px 18px;
    }


    .sales-client-modal-grid {
        grid-template-columns: 1fr;
    }


    .sales-client-field:first-child {
        grid-column: auto;
    }


    .sales-client-modal-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   SAVDO — FOUND CLIENT
   ========================================= */

.sales-found-client {
    width: 100%;

    min-height: 90px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(190px, 0.7fr)
        52px;

    align-items: center;

    gap: 18px;

    padding: 16px 18px;

    border: 1px solid rgba(26, 210, 112, 0.28);
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.92),
            rgba(4, 36, 19, 0.92)
        );
}


.sales-found-client__main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


.sales-found-client__main strong {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}


.sales-found-client__main span {
    color: var(--text-soft);

    font-size: 14px;
}


.sales-found-client__vehicle {
    min-height: 52px;

    padding-left: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 6px;

    border-left: 1px solid rgba(82, 180, 128, 0.18);
}


.sales-found-client__vehicle span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.sales-found-client__vehicle strong {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}


.sales-found-client__open {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--blue);
    border-radius: 11px;

    background: rgba(43, 234, 132, 0.08);

    color: #ffffff;

    font-size: 28px;
    font-weight: 400;

    cursor: pointer;

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.sales-found-client__open:hover {
    background: rgba(43, 234, 132, 0.16);

    box-shadow:
        0 0 16px rgba(43, 234, 132, 0.18);

    transform: translateX(2px);
}


@media (max-width: 700px) {

    .sales-found-client {
        grid-template-columns:
            minmax(0, 1fr)
            46px;
    }


    .sales-found-client__vehicle {
        grid-column: 1 / -1;

        padding: 12px 0 0;

        border-left: 0;
        border-top: 1px solid rgba(82, 180, 128, 0.18);
    }


    .sales-found-client__open {
        grid-column: 2;
        grid-row: 1;
    }

}

/* =========================================
   SAVDO — WORKSPACE
   ========================================= */

.sales-workspace {
    width: 100%;
}


.sales-workspace__top {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 20px;
}


.sales-workspace__top h2 {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 800;
}


.sales-workspace__top p {
    margin: 5px 0 0;

    color: var(--text-soft);

    font-size: 14px;
}


.sales-workspace-back {
    height: 42px;

    padding: 0 15px;

    flex: 0 0 auto;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: #06301a;

    color: #dffced;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.sales-workspace-back:hover {
    border-color: var(--blue);

    background: #084123;
}


/* =========================================
   SELECTED CLIENT
   ========================================= */

.sales-selected-client {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(250px, 1.2fr)
        minmax(220px, 0.9fr)
        110px
        120px
        110px;

    gap: 0;

    border: 1px solid var(--border-soft);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.96),
            rgba(3, 35, 18, 0.96)
        );

    overflow: hidden;
}


.sales-selected-client__info,
.sales-selected-client__vehicle {
    min-height: 92px;

    padding: 18px 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;
}

.sales-selected-client__meta {
    min-height: 92px;

    padding: 18px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 6px;

    border-left:
        1px solid rgba(82, 180, 128, 0.18);
}


.sales-selected-client__meta span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.sales-selected-client__meta strong {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}


.sales-selected-client__vehicle {
    border-left:
        1px solid rgba(82, 180, 128, 0.18);
}


.sales-selected-client span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.sales-selected-client strong {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}


.sales-selected-client small {
    color: var(--text-soft);

    font-size: 14px;
}


/* =========================================
   SALE CONTENT PLACEHOLDER
   ========================================= */

.sales-workspace-placeholder {
    width: 100%;

    min-height: 190px;

    margin-top: 16px;

    padding: 22px;

    border: 1px solid var(--border-soft);
    border-radius: 15px;

    background: var(--panel);
}


.sales-workspace-placeholder h3 {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}


.sales-workspace-placeholder p {
    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.5;
}


@media (max-width: 700px) {

    .sales-workspace__top {
        align-items: flex-start;
    }


    .sales-selected-client {
        grid-template-columns: 1fr;
    }


    .sales-selected-client__vehicle {
        border-left: 0;

        border-top:
            1px solid rgba(82, 180, 128, 0.18);
    }

}

/* =========================================
   SAVDO — VEHICLE FORM
   ========================================= */

.sales-vehicle-form-grid {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* Поля автомобиля */

.sales-vehicle-form-grid
.sales-client-field {
    min-width: 0;
}


/* INPUT + SELECT одинакового вида */

.sales-vehicle-form-grid input,
.sales-vehicle-form-grid select {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    outline: none;

    background: #042513;

    color: #ffffff;

    font: inherit;
}


.sales-vehicle-form-grid input:focus,
.sales-vehicle-form-grid select:focus {
    border-color: var(--blue);
}


/* Placeholder */

.sales-vehicle-form-grid
input::placeholder {
    color: var(--text-soft);

    opacity: 0.7;
}


/* SELECT */

.sales-vehicle-form-grid select {
    cursor: pointer;

    color-scheme: dark;
}


.sales-vehicle-form-grid select option {
    background: #06301a;

    color: #ffffff;
}


/* Пробег — на всю ширину */

.sales-vehicle-form-grid
.sales-client-field:last-child {
    grid-column: 1 / -1;
}


/* MODAL немного шире */

.sales-client-modal {
    max-width: 760px;
}


/* MOBILE */

@media (max-width: 650px) {

    .sales-vehicle-form-grid {
        grid-template-columns: 1fr;
    }


    .sales-vehicle-form-grid
    .sales-client-field:last-child {
        grid-column: auto;
    }

}

/* =========================================
   SAVDO — SERVICES PANEL
   ========================================= */

.sales-workspace-grid {
    width: 100%;

    margin-top: 16px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 16px;
}


.sales-services-panel {
    width: 100%;

    border: 1px solid var(--border-soft);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.96),
            rgba(3, 35, 18, 0.96)
        );

    overflow: hidden;
}


/* HEADER */

.sales-section-head {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 16px 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.18);
}


.sales-section-head h3 {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}


.sales-section-head p {
    margin: 6px 0 0;

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


/* TABLE */

.sales-services-table {
    width: 100%;
}


.sales-services-table__head {
    min-height: 42px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        160px
        46px;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.14);

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.sales-services-list {
    min-height: 105px;

    padding: 0 18px;
}


.sales-services-empty {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-dim);

    font-size: 14px;
}


/* FOOTER */

.sales-services-footer {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 12px 18px;

    border-top:
        1px solid rgba(82, 180, 128, 0.16);
}


.sales-add-service-btn {
    height: 40px;

    padding: 0 15px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: #06301a;

    color: #dffced;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    cursor: pointer;
}


.sales-add-service-btn:hover {
    border-color: var(--blue);

    background: #084123;
}


.sales-services-total {
    display: flex;
    align-items: center;

    gap: 14px;
}


.sales-services-total span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.sales-services-total strong {
    color: var(--blue-light);

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}


/* MOBILE */

@media (max-width: 650px) {

    .sales-services-table__head {
        grid-template-columns:
            minmax(0, 1fr)
            110px
            34px;
    }


    .sales-services-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .sales-add-service-btn {
        width: 100%;
    }


    .sales-services-total {
        justify-content: space-between;
    }

}

/* =========================================
   SAVDO — ADD SERVICE MODAL
   ========================================= */

.sales-service-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 200000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 17, 9, 0.78);

    backdrop-filter: blur(6px);
}


.sales-service-modal {
    position: relative;

    width: 100%;
    max-width: 560px;

    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 40px);

    padding: 28px;

    overflow-y: auto;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #07351c,
            #042614
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.5);
}


/* CLOSE */

.sales-service-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;

    background: transparent;

    color: var(--text-soft);

    font-size: 21px;

    cursor: pointer;
}


.sales-service-modal-close:hover {
    border-color: var(--red);

    color: #ffffff;

    background: rgba(240, 20, 39, 0.10);
}


/* TITLE */

.sales-service-modal h2 {
    margin: 0;

    color: var(--text);

    font-size: 23px;
    font-weight: 800;
}


.sales-service-modal-subtitle {
    margin: 7px 0 24px;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.5;
}


/* EXISTING SERVICE */

.sales-service-modal-section {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        180px;

    gap: 14px;
}


.sales-service-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.sales-service-field span {
    color: #b9e0cb;

    font-size: 14px;
    font-weight: 600;
}


.sales-service-field input,
.sales-service-field select {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #196e41;
    border-radius: 10px;

    outline: none;

    background: #042513;

    color: #ffffff;

    font: inherit;
}


.sales-service-field input:focus,
.sales-service-field select:focus {
    border-color: var(--blue);
}


.sales-service-field select {
    cursor: pointer;

    color-scheme: dark;
}


.sales-service-field select option {
    background: #06301a;

    color: #ffffff;
}


/* CREATE NEW SERVICE */

.sales-create-service-toggle {
    width: 100%;
    height: 42px;

    margin-top: 18px;

    border: 1px dashed var(--border-soft);
    border-radius: 10px;

    background: rgba(43, 234, 132, 0.04);

    color: var(--blue-light);

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.sales-create-service-toggle:hover {
    border-color: var(--blue);

    background: rgba(43, 234, 132, 0.09);
}


.sales-create-service-form {
    margin-top: 14px;

    padding: 16px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        180px;

    gap: 14px;

    border: 1px solid rgba(26, 210, 112, 0.22);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.08);
}


/* MESSAGE */

.sales-service-modal-message {
    min-height: 20px;

    margin-top: 14px;

    color: #ff5264;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.sales-service-modal-message.success {
    color: var(--green);
}


/* ACTIONS */

.sales-service-modal-actions {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.sales-service-modal-actions button {
    height: 46px;

    border-radius: 10px;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


#salesServiceModalCancel {
    border: 1px solid var(--border-soft);

    background: #06301a;

    color: #dffced;
}


#salesServiceModalCancel:hover {
    border-color: var(--blue);
}


#salesServiceAddBtn {
    border: 1px solid var(--red);

    background: var(--red);

    color: #ffffff;
}


#salesServiceAddBtn:hover {
    background: var(--moyli-primary);
}


/* MOBILE */

@media (max-width: 600px) {

    .sales-service-modal {
        padding: 24px 18px;
    }


    .sales-service-modal-section,
    .sales-create-service-form {
        grid-template-columns: 1fr;
    }


    .sales-service-modal-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   SAVDO — SERVICE ROW
   ========================================= */

.sales-service-row {
    min-height: 52px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        160px
        46px;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.14);
}


.sales-service-row:last-child {
    border-bottom: 0;
}


.sales-service-row > span {
    min-width: 0;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.sales-service-row > strong {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    text-align: right;

    white-space: nowrap;
}


/* DELETE */

.sales-service-row > button {
    width: 32px;
    height: 32px;

    justify-self: end;

    display: grid;
    place-items: center;

    border: 1px solid rgba(240, 20, 39, 0.32);
    border-radius: 8px;

    background:
        rgba(240, 20, 39, 0.06);

    color: #ff4052;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}


.sales-service-row > button:hover {
    border-color: var(--red);

    background:
        rgba(240, 20, 39, 0.16);

    color: #ffffff;
}


/* MOBILE */

@media (max-width: 650px) {

    .sales-service-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            34px;
    }


    .sales-service-row > strong {
        font-size: var(--ds-fs-secondary);
    }


    .sales-service-row > button {
        width: 30px;
        height: 30px;
    }

}

/* =========================================
   SAVDO — PRODUCTS PANEL
   ========================================= */

.sales-products-panel {
    width: 100%;

    border: 1px solid var(--border-soft);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.96),
            rgba(3, 35, 18, 0.96)
        );

    overflow: hidden;
}


/* TABLE */

.sales-products-table {
    width: 100%;
}


.sales-products-table__head {
    min-height: 42px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        120px
        150px
        160px
        46px;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.14);

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.sales-products-table__head span:nth-child(2),
.sales-products-table__head span:nth-child(3),
.sales-products-table__head span:nth-child(4) {
    text-align: right;
}


/* LIST */

.sales-products-list {
    min-height: 115px;

    padding: 0 18px;
}


.sales-products-empty {
    min-height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-dim);

    font-size: 14px;
}


/* FOOTER */

.sales-products-footer {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 12px 18px;

    border-top:
        1px solid rgba(82, 180, 128, 0.16);
}


.sales-add-product-btn {
    height: 40px;

    padding: 0 15px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: #06301a;

    color: #dffced;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    cursor: pointer;
}


.sales-add-product-btn:hover {
    border-color: var(--blue);

    background: #084123;
}


.sales-products-total {
    display: flex;
    align-items: center;

    gap: 14px;
}


.sales-products-total span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
}


.sales-products-total strong {
    color: var(--blue-light);

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}


/* TABLET / PHONE */

@media (max-width: 850px) {

    .sales-products-table {
        overflow-x: auto;
    }


    .sales-products-table__head,
    .sales-products-list {
        min-width: 720px;
    }

}


@media (max-width: 650px) {

    .sales-products-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .sales-add-product-btn {
        width: 100%;
    }


    .sales-products-total {
        justify-content: space-between;
    }

}

/* =========================================
   OMBOR — PAGE
   ========================================= */

.warehouse-page {
    width: 100%;

    padding: 24px;

    min-width: 0;

    color: var(--text);
}


/* HEADER */

.warehouse-page__head {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.warehouse-page__title h1 {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 800;
}


.warehouse-page__title p {
    margin: 6px 0 0;

    color: var(--text-soft);

    font-size: 14px;
}


/* ADD PRODUCT */

.warehouse-add-product-btn {
    min-height: 44px;

    padding: 0 18px;

    border: 1px solid rgba(17, 167, 87, 0.55);
    border-radius: 10px;

    background: var(--red);

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}


.warehouse-add-product-btn:hover {
    transform: translateY(-1px);

    background: var(--moyli-primary);

    border-color: var(--moyli-primary);
}


/* TOOLBAR */

.warehouse-toolbar {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        180px
        170px
        210px;

    align-items: end;

    gap: 12px;

    padding: 14px;

    border: 1px solid var(--border-soft);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.96),
            rgba(3, 35, 18, 0.96)
        );
}


.warehouse-search {
    width: min(520px, 100%);

    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background: #042b16;
}


.warehouse-search:focus-within {
    border-color: var(--blue);
}


.warehouse-search__icon {
    flex: 0 0 auto;

    color: var(--text-soft);

    font-size: 19px;
}


.warehouse-search input {
    width: 100%;
    height: 42px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 14px;
}


.warehouse-search input::placeholder {
    color: var(--text-dim);
}


/* TABLET / PHONE */

@media (max-width: 650px) {

    .warehouse-page {
        padding: 16px;
    }


    .warehouse-page__head {
        align-items: stretch;
        flex-direction: column;
    }


    .warehouse-add-product-btn {
        width: 100%;
    }


    .warehouse-page__title h1 {
        font-size: 26px;
    }

}

/* OMBOR FILTERS */

.warehouse-filter {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.warehouse-filter > span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.warehouse-filter select {
    width: 100%;
    height: 44px;

    padding: 0 34px 0 12px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    outline: none;

    background: #042b16;

    color: var(--text);

    font-size: var(--ds-fs-secondary);
    font-weight: 600;

    cursor: pointer;
}


.warehouse-filter select:focus {
    border-color: var(--blue);
}


@media (max-width: 1050px) {

    .warehouse-toolbar {
        grid-template-columns:
            minmax(260px, 1fr)
            1fr
            1fr;
    }


    .warehouse-filter:last-child {
        grid-column: 1 / -1;
    }

}


@media (max-width: 650px) {

    .warehouse-toolbar {
        grid-template-columns: 1fr;
    }


    .warehouse-filter:last-child {
        grid-column: auto;
    }

}

/* =========================================
   OMBOR — SUMMARY CARDS
   ========================================= */

.warehouse-summary {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 16px;
}


.warehouse-summary-card {
    min-height: 118px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px solid rgba(56, 235, 140, 0.34);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 67, 35, 0.96),
            rgba(4, 41, 21, 0.96)
        );
}


.warehouse-summary-card__icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(56, 235, 140, 0.36);
    border-radius: 12px;

    background:
        rgba(56, 235, 140, 0.1);

    color: #5defa1;

    font-size: 23px;
    font-weight: 800;
}


.warehouse-summary-card__content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.warehouse-summary-card__content > span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.warehouse-summary-card__content > strong {
    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.1;

    white-space: nowrap;
}


.warehouse-summary-card__content > small {
    color: var(--text-dim);

    font-size: var(--ds-fs-secondary);

    line-height: 1.35;
}


/* WARNING */

.warehouse-summary-card.is-warning {
    border-color:
        rgba(245, 166, 35, 0.38);

    background:
        linear-gradient(
            135deg,
            rgba(55, 38, 10, 0.42),
            rgba(5, 43, 23, 0.96)
        );
}


.warehouse-summary-card.is-warning
.warehouse-summary-card__icon {
    border-color:
        rgba(245, 166, 35, 0.38);

    background:
        rgba(245, 166, 35, 0.10);

    color: #f5a623;
}


/* DANGER */

.warehouse-summary-card.is-danger {
    border-color:
        rgba(240, 20, 39, 0.40);

    background:
        linear-gradient(
            135deg,
            rgba(58, 12, 28, 0.45),
            rgba(5, 43, 23, 0.96)
        );
}


.warehouse-summary-card.is-danger
.warehouse-summary-card__icon {
    border-color:
        rgba(240, 20, 39, 0.40);

    background:
        rgba(240, 20, 39, 0.10);

    color: #ff4052;
}


/* SUCCESS */

.warehouse-summary-card.is-success {
    border-color:
        rgba(0, 194, 126, 0.38);

    background:
        linear-gradient(
            135deg,
            rgba(4, 58, 42, 0.40),
            rgba(5, 43, 23, 0.96)
        );
}


.warehouse-summary-card.is-success
.warehouse-summary-card__icon {
    border-color:
        rgba(0, 194, 126, 0.38);

    background:
        rgba(0, 194, 126, 0.10);

    color: #00d890;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .warehouse-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .warehouse-summary {
        grid-template-columns: 1fr;
    }


    .warehouse-summary-card {
        min-height: 100px;
    }

}

/* =========================================
   OMBOR — PRODUCTS TABLE
   ========================================= */

.warehouse-products-panel {
    width: 100%;

    margin-top: 16px;

    border: 1px solid var(--border-soft);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 26, 0.97),
            rgba(3, 35, 18, 0.97)
        );

    overflow: hidden;
}


/* HEADER */

.warehouse-products-head {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.16);
}


.warehouse-products-head h2 {
    margin: 0;

    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}


.warehouse-products-head p {
    margin: 5px 0 0;

    color: var(--text-dim);

    font-size: var(--ds-fs-secondary);
}


.warehouse-products-count {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);

    white-space: nowrap;
}


.warehouse-products-count strong {
    color: var(--blue-light);

    font-size: 14px;
    font-weight: 800;
}


/* TABLE */

.warehouse-products-table {
    width: 100%;
}


.warehouse-products-table__head {
    min-width: 1120px;
    min-height: 48px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        135px
        150px
        145px
        135px
        135px
        110px
        120px;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.14);

    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.warehouse-products-table__head span:nth-child(4),
.warehouse-products-table__head span:nth-child(5),
.warehouse-products-table__head span:nth-child(6) {
    text-align: right;
}


.warehouse-products-table__head span:nth-child(7),
.warehouse-products-table__head span:nth-child(8) {
    text-align: center;
}


/* PRODUCTS LIST */

.warehouse-products-list {
    min-width: 1120px;
    min-height: 160px;
}


.warehouse-products-empty {
    min-height: 160px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    color: var(--text-dim);
}


.warehouse-products-empty strong {
    color: var(--text-soft);

    font-size: 14px;
    font-weight: 700;
}


.warehouse-products-empty span {
    font-size: var(--ds-fs-secondary);
}


/* HORIZONTAL SCROLL */

@media (max-width: 1350px) {

    .warehouse-products-table {
        overflow-x: auto;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .warehouse-products-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

}

/* =========================================
   OMBOR — PRODUCT MODAL
   ========================================= */

.warehouse-product-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(2, 16, 9, 0.78);

    backdrop-filter:
        blur(8px);
}


.warehouse-product-modal {
    position: relative;

    width: min(760px, 100%);

    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 40px);

    overflow-y: auto;

    padding: 28px;

    border: 1px solid var(--border-soft);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(6, 56, 29, 0.99),
            rgba(3, 35, 18, 0.99)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.46);
}


/* CLOSE */

.warehouse-product-modal-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    background:
        rgba(7, 51, 28, 0.82);

    color: var(--text-soft);

    font-size: 23px;

    cursor: pointer;
}


.warehouse-product-modal-close:hover {
    border-color: var(--blue);

    color: #ffffff;
}


/* HEADER */

.warehouse-product-modal__head {
    padding-right: 56px;

    margin-bottom: 24px;
}


.warehouse-product-modal__head h2 {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}


.warehouse-product-modal__head p {
    margin: 7px 0 0;

    color: var(--text-soft);

    font-size: 14px;
}


/* FORM */

.warehouse-product-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.warehouse-product-field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


.warehouse-product-field > span {
    color: var(--text-soft);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.warehouse-product-field input,
.warehouse-product-field select {
    width: 100%;
    height: 48px;

    padding: 0 14px;

    border: 1px solid var(--border-soft);
    border-radius: 10px;

    outline: none;

    background: #042b16;

    color: var(--text);

    font: inherit;
    font-size: 14px;
}


.warehouse-product-field input:focus,
.warehouse-product-field select:focus {
    border-color: var(--blue);
}


.warehouse-product-field input::placeholder {
    color: var(--text-dim);
}


/* MESSAGE */

.warehouse-product-modal-message {
    min-height: 22px;

    margin-top: 14px;

    color: #ff4052;

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


.warehouse-product-modal-message.success {
    color: #00d890;
}


/* ACTIONS */

.warehouse-product-modal-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    margin-top: 10px;
}


.warehouse-product-modal-actions button {
    height: 48px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}


#warehouseProductModalCancel {
    border: 1px solid var(--border-soft);

    background: #06301a;

    color: var(--text);
}


#warehouseProductModalCancel:hover {
    border-color: var(--blue);
}


#warehouseProductSaveBtn {
    border: 1px solid rgba(17, 167, 87, 0.58);

    background: var(--red);

    color: #ffffff;
}


#warehouseProductSaveBtn:hover {
    background: var(--moyli-primary);
}


/* MOBILE */

@media (max-width: 650px) {

    .warehouse-product-modal {
        padding: 22px 16px;
    }


    .warehouse-product-form-grid {
        grid-template-columns: 1fr;
    }


    .warehouse-product-modal-actions {
        grid-template-columns: 1fr;
    }


    .warehouse-product-modal__head h2 {
        font-size: 24px;
    }

}

/* =========================================
   OMBOR — PRODUCT ROW
   ========================================= */

.warehouse-product-row {
    min-width: 1120px;
    min-height: 58px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        135px
        150px
        145px
        135px
        135px
        110px
        120px;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(82, 180, 128, 0.12);

    color: var(--text);

    font-size: var(--ds-fs-secondary);
}


.warehouse-product-row:last-child {
    border-bottom: 0;
}


/* PRODUCT NAME */

.warehouse-product-name {
    min-width: 0;
}


.warehouse-product-name strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}


/* STOCK */

.warehouse-product-stock {
    text-align: right;

    font-weight: 700;

    white-space: nowrap;
}


/* MONEY */

.warehouse-money {
    text-align: right;

    white-space: nowrap;

    color: var(--text-soft);
}


/* STATUS */

.warehouse-stock-status {
    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 82px;
    height: 28px;

    padding: 0 10px;

    border-radius: 8px;

    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}


.warehouse-stock-status.is-ok {
    border: 1px solid rgba(0, 194, 126, 0.30);

    background:
        rgba(0, 194, 126, 0.10);

    color: #00d890;
}


.warehouse-stock-status.is-low {
    border: 1px solid rgba(245, 166, 35, 0.32);

    background:
        rgba(245, 166, 35, 0.10);

    color: #f5a623;
}


.warehouse-stock-status.is-out {
    border: 1px solid rgba(240, 20, 39, 0.34);

    background:
        rgba(240, 20, 39, 0.10);

    color: #ff4052;
}


/* ACTIONS */

.warehouse-product-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}


.warehouse-product-actions button {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    background: #06301a;

    color: var(--text-soft);

    cursor: pointer;

    font-size: 14px;
}


.warehouse-product-actions button:hover {
    border-color: var(--blue);

    color: #ffffff;

    background: #084123;
}

/* =========================================
   OMBOR — PRODUCT DETAILS
   ========================================= */

.warehouse-product-details-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 6px;
}


.warehouse-product-detail {
    min-width: 0;

    padding: 14px;

    border: 1px solid var(--border-soft);
    border-radius: 11px;

    background:
        rgba(4, 43, 22, 0.72);
}


.warehouse-product-detail > span {
    display: block;

    margin-bottom: 7px;

    color: var(--text-dim);

    font-size: var(--ds-fs-secondary);
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.warehouse-product-detail > strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.35;
}


/* STATUS */

#warehouseDetailStatus {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 82px;

    min-height: 28px;

    padding: 0 10px;

    border-radius: 8px;
}


#warehouseDetailStatus.is-ok {
    border: 1px solid rgba(0, 194, 126, 0.30);

    background:
        rgba(0, 194, 126, 0.10);

    color: #00d890;
}


#warehouseDetailStatus.is-low {
    border: 1px solid rgba(245, 166, 35, 0.32);

    background:
        rgba(245, 166, 35, 0.10);

    color: #f5a623;
}


#warehouseDetailStatus.is-out {
    border: 1px solid rgba(240, 20, 39, 0.34);

    background:
        rgba(240, 20, 39, 0.10);

    color: #ff4052;
}


/* CLOSE BUTTON */

#warehouseProductDetailsCloseBtn {
    grid-column: 1 / -1;

    border: 1px solid var(--border-soft);

    background: #06301a;

    color: var(--text);
}


#warehouseProductDetailsCloseBtn:hover {
    border-color: var(--blue);

    background: #084123;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .warehouse-product-details-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 520px) {

    .warehouse-product-details-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   OMBOR — COMPLETE MODULE EXTENSIONS
   ========================================= */

.warehouse-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.warehouse-secondary-action {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #06301a;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.warehouse-secondary-action:hover {
    border-color: var(--blue);
    color: #fff;
    background: #084123;
}

.warehouse-insights {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
}

.warehouse-insights__head h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.warehouse-insights__head p {
    margin: 5px 0 0;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.warehouse-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.warehouse-insight-item {
    padding: 14px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 11px;
    background: rgba(4, 43, 22, 0.7);
}

.warehouse-insight-item span,
.warehouse-insight-item small {
    display: block;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.warehouse-insight-item strong {
    display: block;
    margin: 6px 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.warehouse-category-report {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(82, 180, 128, 0.14);
}

.warehouse-category-report__title {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    margin-bottom: 8px;
}

.warehouse-category-report__list {
    display: grid;
    gap: 6px;
}

.warehouse-category-report__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(4, 43, 22, 0.55);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.warehouse-category-report__row strong {
    color: var(--text);
}

.warehouse-muted {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.warehouse-products-table__head,
.warehouse-product-row {
    min-width: 1280px;
    grid-template-columns:
        minmax(220px, 1.5fr)
        135px
        150px
        145px
        135px
        135px
        110px
        220px;
}

.warehouse-products-list {
    min-width: 1280px;
}

.warehouse-product-actions {
    gap: 5px;
}

.warehouse-product-actions button {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.warehouse-product-actions button[data-warehouse-action="archive"] {
    border-color: rgba(240,20,39,.25);
    color: #ff6674;
}

.warehouse-products-pagination {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid rgba(82, 180, 128, 0.14);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.warehouse-products-pagination__meta {
    margin-right: auto;
}

.warehouse-page-size {
    display: flex;
    align-items: center;
    gap: 7px;
}

.warehouse-page-size select,
.warehouse-history-toolbar select,
.warehouse-history-toolbar input {
    height: 36px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #042b16;
    color: var(--text);
    padding: 0 10px;
    outline: none;
}

.warehouse-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.warehouse-pagination-buttons button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text);
    cursor: pointer;
}

.warehouse-pagination-buttons button:disabled {
    opacity: .4;
    cursor: default;
}

.warehouse-detail-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.warehouse-detail-actions button {
    min-height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.warehouse-detail-actions button:hover {
    border-color: var(--blue);
    background: #084123;
}

.warehouse-product-field--full {
    grid-column: 1 / -1;
}

.warehouse-movement-product {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: rgba(4, 43, 22, 0.7);
}

.warehouse-movement-product span,
.warehouse-movement-product small {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.warehouse-movement-product strong {
    color: var(--text);
    font-size: 15px;
}

#warehouseMovementCancel,
#warehouseHistoryCloseBtn,
#warehouseDeactivateCancel {
    border: 1px solid var(--border-soft);
    background: #06301a;
    color: var(--text);
}

#warehouseMovementSave,
#warehouseDeactivateConfirm {
    border: 1px solid rgba(17, 167, 87, 0.55);
    background: var(--red);
    color: #fff;
}

.warehouse-history-modal {
    width: min(980px, 100%);
}

.warehouse-history-toolbar {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.warehouse-history-list {
    max-height: 52vh;
    overflow-y: auto;
    display: grid;
    gap: 6px;
}

.warehouse-history-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 120px 90px 170px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 9px;
    background: rgba(4, 43, 22, 0.62);
}

.warehouse-history-row__main {
    min-width: 0;
}

.warehouse-history-row__main strong,
.warehouse-history-row__main span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.warehouse-history-row__main strong {
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.warehouse-history-row__main span,
.warehouse-history-date {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.warehouse-history-type {
    justify-self: start;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.warehouse-history-type.is-in,
.warehouse-history-quantity.is-in {
    color: #00d890;
}

.warehouse-history-type.is-in {
    background: rgba(0,194,126,.1);
}

.warehouse-history-type.is-out,
.warehouse-history-quantity.is-out {
    color: #ff6674;
}

.warehouse-history-type.is-out {
    background: rgba(240,20,39,.1);
}

.warehouse-history-quantity {
    font-size: var(--ds-fs-secondary);
}

.warehouse-confirm-modal {
    width: min(480px, 100%);
}

.warehouse-confirm-product {
    padding: 14px;
    border: 1px solid rgba(240,20,39,.25);
    border-radius: 10px;
    background: rgba(240,20,39,.06);
    color: var(--text);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .warehouse-insights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .warehouse-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .warehouse-header-actions button {
        flex: 1 1 140px;
    }

    .warehouse-detail-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .warehouse-history-toolbar,
    .warehouse-history-row {
        grid-template-columns: 1fr;
    }

    .warehouse-history-row {
        align-items: start;
    }
}

@media (max-width: 650px) {
    .warehouse-insights-grid {
        grid-template-columns: 1fr;
    }

    .warehouse-products-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .warehouse-products-pagination__meta {
        margin-right: 0;
    }

    .warehouse-pagination-buttons {
        justify-content: space-between;
    }
}

/* =========================================
   SAVDO — PRODUCT ROW
   ========================================= */

.sales-product-row {
    min-width: 720px;
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 110px 140px 150px 42px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.12);
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.sales-product-row:last-child {
    border-bottom: 0;
}

.sales-product-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.sales-product-row__qty,
.sales-product-row__price,
.sales-product-row__total {
    text-align: right;
    white-space: nowrap;
}

.sales-product-row > button {
    width: 30px;
    height: 30px;
    justify-self: end;
    border: 1px solid rgba(240,20,39,.3);
    border-radius: 8px;
    background: rgba(240,20,39,.07);
    color: #ff6674;
    cursor: pointer;
}

.warehouse-archive-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 140px 150px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 9px;
    background: rgba(4, 43, 22, 0.62);
}

.warehouse-archive-stock {
    color: var(--text-soft);
    text-align: right;
    white-space: nowrap;
}

.warehouse-restore-btn {
    min-height: 34px;
    border: 1px solid rgba(0,194,126,.28);
    border-radius: 8px;
    background: rgba(0,194,126,.08);
    color: #00d890;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 700px) {
    .warehouse-archive-row {
        grid-template-columns: 1fr;
    }

    .warehouse-archive-stock {
        text-align: left;
    }
}

/* =========================================
   OMBOR — UX CLEANUP
   Frequent actions stay visible.
   Administrative / dangerous actions live one level deeper.
   ========================================= */

.warehouse-action-menu {
    position: relative;
    flex: 0 0 auto;
}

.warehouse-action-menu > summary {
    list-style: none;
    user-select: none;
}

.warehouse-action-menu > summary::-webkit-details-marker {
    display: none;
}

.warehouse-action-menu > summary.warehouse-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}

.warehouse-more-summary {
    width: 44px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.warehouse-action-menu[open] > summary.warehouse-secondary-action,
.warehouse-action-menu > summary.warehouse-secondary-action:hover {
    border-color: var(--blue);
    color: #fff;
    background: #084123;
}

.warehouse-action-menu__panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: #06301a;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

.warehouse-action-menu__panel--right {
    right: 0;
    left: auto;
}

.warehouse-action-menu__panel button {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    text-align: left;
    font-size: var(--ds-fs-secondary);
    font-weight: 750;
    cursor: pointer;
}

.warehouse-action-menu__panel button:hover {
    background: rgba(38, 224, 125, 0.12);
    color: #fff;
}

.warehouse-action-menu__panel button.is-danger {
    color: #ff6674;
}

.warehouse-action-menu__panel button.is-danger:hover {
    background: rgba(240, 20, 39, .10);
    color: #ff7a87;
}

/* One clear action in each product row: open the product card. */
.warehouse-products-table__head,
.warehouse-product-row {
    min-width: 1180px;
    grid-template-columns:
        minmax(220px, 1.5fr)
        135px
        150px
        145px
        135px
        135px
        110px
        110px;
}

.warehouse-products-list {
    min-width: 1180px;
}

.warehouse-product-actions {
    justify-content: center;
}

.warehouse-product-actions .warehouse-view-btn {
    width: auto;
    min-width: 88px;
    height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-color: rgba(38, 224, 125, 0.28);
    color: #dffced;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.warehouse-product-actions .warehouse-view-btn:hover {
    border-color: var(--blue);
    background: rgba(38, 224, 125, 0.14);
}

/* Product card: stock operations are the main working actions. */
.warehouse-detail-work-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.warehouse-detail-primary-btn {
    min-height: 46px;
    border-radius: 10px;
    font-size: var(--ds-fs-secondary);
    font-weight: 850;
    cursor: pointer;
}

.warehouse-detail-primary-btn.is-in {
    border: 1px solid rgba(0, 194, 126, .30);
    background: rgba(0, 194, 126, .09);
    color: #23dfa0;
}

.warehouse-detail-primary-btn.is-in:hover {
    background: rgba(0, 194, 126, .15);
}

.warehouse-detail-primary-btn.is-out {
    border: 1px solid rgba(245, 166, 35, .30);
    background: rgba(245, 166, 35, .08);
    color: #f7b845;
}

.warehouse-detail-primary-btn.is-out:hover {
    background: rgba(245, 166, 35, .14);
}

/* Less frequent management actions are visually secondary. */
.warehouse-detail-management {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(82, 180, 128, 0.14);
}

.warehouse-detail-management__label {
    display: block;
    margin-bottom: 9px;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.warehouse-detail-management__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.warehouse-detail-management__actions > button,
.warehouse-detail-more-summary {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.warehouse-detail-management__actions > button:hover,
.warehouse-detail-more-summary:hover,
.warehouse-detail-more-menu[open] > .warehouse-detail-more-summary {
    border-color: var(--blue);
    background: #084123;
    color: #fff;
}

.warehouse-detail-more-summary {
    width: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    list-style: none;
    font-size: 18px;
    line-height: 1;
}

.warehouse-detail-more-summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 800px) {
    .warehouse-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        width: 100%;
    }

    .warehouse-history-main-btn,
    .warehouse-export-menu {
        width: 100%;
    }

    .warehouse-export-menu > summary {
        width: 100%;
    }

    .warehouse-add-product-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .warehouse-detail-management__actions {
        justify-content: stretch;
    }

    .warehouse-detail-management__actions > button {
        flex: 1 1 145px;
    }
}

@media (max-width: 520px) {
    .warehouse-header-actions {
        grid-template-columns: 1fr auto;
    }

    .warehouse-history-main-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .warehouse-export-menu {
        width: 100%;
    }

    .warehouse-detail-work-actions {
        grid-template-columns: 1fr;
    }

    .warehouse-action-menu__panel {
        min-width: 175px;
    }
}

/* =========================================
   OMBOR — PRODUCT PHOTOS + POLISHED EXPORT
   ========================================= */

.warehouse-export-menu > summary::after {
    content: none !important;
}

.warehouse-export-doc-icon {
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 15px;
}

.warehouse-export-doc-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Product thumbnail in the main warehouse table. */
.warehouse-product-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.warehouse-product-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(82, 180, 128, 0.2);
    border-radius: 10px;
    background: #f4faf7;
}

.warehouse-product-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.warehouse-product-name__copy {
    min-width: 0;
    display: block;
}

.warehouse-product-name__copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.warehouse-product-name__copy small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    font-weight: 650;
}

/* Add/Edit product photo editor. */
.warehouse-product-image-field {
    grid-column: 1 / -1;
}

.warehouse-product-image-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.warehouse-product-image-editor {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 12px;
    background: rgba(4, 43, 22, 0.55);
}

.warehouse-product-image-picker {
    width: 142px;
    height: 142px;
    flex: 0 0 142px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px dashed rgba(92, 222, 153, 0.42);
    border-radius: 12px;
    background: #f4faf7;
    cursor: pointer;
}

.warehouse-product-image-picker:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(38, 224, 125, 0.08);
}

.warehouse-product-image-picker img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.warehouse-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px;
    color: #366e50;
    text-align: center;
}

.warehouse-product-image-placeholder::before {
    content: "▧";
    font-size: 28px;
    line-height: 1;
    color: #519d74;
}

.warehouse-product-image-placeholder strong {
    font-size: var(--ds-fs-secondary);
    font-weight: 850;
}

.warehouse-product-image-placeholder small {
    max-width: 110px;
    color: #6d9e84;
    font-size: var(--ds-fs-secondary);
    line-height: 1.35;
}

.warehouse-product-image-controls {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.warehouse-product-image-controls button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.warehouse-product-image-controls button:hover {
    border-color: var(--blue);
    background: #084123;
    color: #fff;
}

.warehouse-product-image-controls button.is-danger {
    border-color: rgba(240, 20, 39, .24);
    color: #ff6b78;
}

.warehouse-product-image-controls button.is-danger:hover {
    border-color: rgba(240, 20, 39, .42);
    background: rgba(240, 20, 39, .09);
    color: #ff7d89;
}

.warehouse-product-image-controls > small {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    line-height: 1.45;
}

/* Product photo in the detail card. */
.warehouse-detail-photo-card {
    width: 158px;
    height: 158px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 2px 0 16px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 13px;
    background: #f4faf7;
}

.warehouse-detail-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.warehouse-detail-photo-fallback {
    color: #5f9076;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

@media (max-width: 620px) {
    .warehouse-product-image-editor {
        align-items: stretch;
        flex-direction: column;
    }

    .warehouse-product-image-picker {
        width: 100%;
        height: 190px;
        flex-basis: 190px;
    }

    .warehouse-product-image-controls {
        width: 100%;
    }

    .warehouse-product-image-controls button {
        width: 100%;
    }

    .warehouse-detail-photo-card {
        width: 132px;
        height: 132px;
    }
}

/* =========================================
   OMBOR — QUIET HEADER / CONTEXTUAL ACTIONS
   Primary action stays in the page header.
   Secondary actions live next to filters.
   Archive lives with the product list.
   ========================================= */

.warehouse-toolbar {
    grid-template-columns:
        minmax(320px, 1fr)
        180px
        170px
        210px
        auto;
}

.warehouse-toolbar-actions {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    align-self: end;
    white-space: nowrap;
}

.warehouse-toolbar-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 9px;
    background: rgba(6, 48, 26, 0.36);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.warehouse-toolbar-action:hover,
.warehouse-toolbar-export-menu[open] > .warehouse-toolbar-action {
    color: #fff;
    border-color: rgba(38, 224, 125, 0.42);
    background: rgba(38, 224, 125, 0.1);
}

.warehouse-toolbar-action__icon {
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 15px;
}

.warehouse-toolbar-action__icon svg,
.warehouse-archive-link__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.warehouse-toolbar-export-menu > summary {
    list-style: none;
}

.warehouse-toolbar-export-menu > summary::-webkit-details-marker {
    display: none;
}

.warehouse-toolbar-export-menu .warehouse-action-menu__panel {
    top: calc(100% + 7px);
    min-width: 180px;
}

.warehouse-products-head__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.warehouse-archive-link {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    font-weight: 750;
    cursor: pointer;
    transition: color .16s ease;
}

.warehouse-archive-link:hover {
    color: var(--blue-light);
}

.warehouse-archive-link__icon {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 14px;
}

@media (max-width: 1280px) {
    .warehouse-toolbar {
        grid-template-columns:
            minmax(300px, 1fr)
            1fr
            1fr
            1fr;
    }

    .warehouse-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 860px) {
    .warehouse-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .warehouse-search {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }

    .warehouse-toolbar-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .warehouse-toolbar {
        grid-template-columns: 1fr;
    }

    .warehouse-search,
    .warehouse-toolbar-actions {
        grid-column: auto;
    }

    .warehouse-toolbar-actions {
        justify-content: flex-start;
    }

    .warehouse-toolbar-action {
        flex: 1 1 auto;
    }

    .warehouse-toolbar-export-menu {
        flex: 1 1 auto;
    }

    .warehouse-toolbar-export-menu > summary {
        width: 100%;
    }

    .warehouse-products-head {
        align-items: flex-start;
    }

    .warehouse-products-head__right {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================
   SAVDO V2 — FAST POS WORKFLOW
   ========================================= */

@media (min-width: 1180px) {
    .sales-workspace-grid {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        align-items: start;
    }
}

.sales-services-panel,
.sales-products-panel,
.sales-checkout {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

/* Product picker */
#salesProductModal .sales-service-modal {
    width: min(880px, calc((100vw / var(--ds-zoom, 1)) - 32px));
    max-width: 880px;
}

.sales-product-picker {
    margin: 16px 0 14px;
}

.sales-product-picker-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    outline: none;
    background: #042513;
    color: var(--text);
    font: inherit;
}

.sales-product-picker-search input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43, 234, 132, 0.08);
}

.sales-product-quick-list {
    max-height: 286px;
    margin-top: 10px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 2px;
}

.sales-product-quick-item {
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(82, 180, 128, 0.2);
    border-radius: 10px;
    background: rgba(4, 43, 22, 0.72);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.sales-product-quick-item:hover:not(:disabled),
.sales-product-quick-item.is-selected {
    border-color: rgba(43, 234, 132, 0.58);
    background: rgba(43, 234, 132, 0.09);
    transform: translateY(-1px);
}

.sales-product-quick-item:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.sales-product-quick-item img {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    object-fit: cover;
    background: rgba(255,255,255,.03);
}

.sales-product-quick-item__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-product-quick-item__text strong,
.sales-product-quick-item__text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-product-quick-item__text strong {
    font-size: var(--ds-fs-secondary);
    color: var(--text);
}

.sales-product-quick-item__text small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-product-quick-item > b {
    white-space: nowrap;
    color: #e2fcee;
    font-size: var(--ds-fs-secondary);
}

.sales-product-quick-empty {
    grid-column: 1 / -1;
    min-height: 66px;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-product-preview {
    margin-top: 10px;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 194, 126, .22);
    border-radius: 10px;
    background: rgba(0, 194, 126, .06);
}

.sales-product-preview img {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 9px;
}

.sales-product-preview > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-product-preview strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 14px;
}

.sales-product-preview span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-qty-stepper {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 6px;
}

.sales-qty-stepper button,
.sales-qty-stepper input {
    height: 44px;
}

.sales-qty-stepper button {
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
}

.sales-qty-stepper button:hover {
    border-color: var(--blue);
    background: #084123;
}

/* Fast cart rows */
.sales-product-row--fast {
    min-width: 760px;
    grid-template-columns: minmax(260px, 1.25fr) 126px 130px 140px 38px;
    min-height: 68px;
    padding: 6px 0;
}

.sales-product-row__product {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sales-product-row__product img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255,255,255,.03);
}

.sales-product-row__product > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sales-product-row__product strong,
.sales-product-row__product small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-product-row__product strong {
    font-size: var(--ds-fs-secondary);
    color: var(--text);
}

.sales-product-row__product small {
    font-size: var(--ds-fs-secondary);
    color: var(--text-soft);
}

.sales-cart-qty {
    display: grid;
    grid-template-columns: 30px minmax(38px, 1fr) 30px;
    align-items: center;
    gap: 4px;
}

.sales-cart-qty button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: #06301a;
    color: #fff;
    cursor: pointer;
}

.sales-cart-qty button:hover {
    border-color: var(--blue);
}

.sales-cart-qty strong {
    text-align: center;
    font-size: var(--ds-fs-secondary);
}

.sales-cart-remove {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    justify-self: end;
}

/* Checkout */
.sales-checkout {
    width: 100%;
    margin-top: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.98), rgba(3, 35, 18, 0.98));
    overflow: hidden;
}

.sales-checkout__head {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.18);
}

.sales-checkout__head h3,
.sales-checkout-card h4 {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.sales-checkout__head h3 { font-size: 16px; }
.sales-checkout__head p { margin: 6px 0 0; color: var(--text-soft); font-size: var(--ds-fs-secondary); }

.sales-checkout__grand-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.sales-checkout__grand-total span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-checkout__grand-total strong {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.sales-checkout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 0;
}

.sales-checkout-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 12px;
    background: rgba(3, 35, 18, 0.64);
}

.sales-checkout-card h4 {
    margin-bottom: 12px;
    font-size: 14px;
}

.sales-checkout-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-checkout-row strong { color: var(--text); font-size: var(--ds-fs-secondary); }
.sales-checkout-row.is-discount strong { color: #f5a623; }
.sales-checkout-row.is-total { min-height: 48px; border-bottom: 0; margin-top: 4px; }
.sales-checkout-row.is-total span { color: var(--text); font-weight: 800; }
.sales-checkout-row.is-total strong { font-size: 18px; }

.sales-discount-controls,
.sales-next-service-grid,
.sales-payment-mixed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 6px;
}

.sales-next-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-next-service-grid label:last-child {
    grid-column: 1 / -1;
}

.sales-discount-controls label,
.sales-next-service-grid label,
.sales-payment-mixed label,
.sales-note-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sales-discount-controls span,
.sales-next-service-grid span,
.sales-payment-mixed span,
.sales-note-field > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}

.sales-discount-controls input,
.sales-discount-controls select,
.sales-next-service-grid input,
.sales-payment-mixed input,
.sales-note-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    outline: none;
    background: #042513;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
}

.sales-note-field textarea {
    min-height: 58px;
    padding: 10px 12px;
    resize: vertical;
}

.sales-discount-controls input:focus,
.sales-discount-controls select:focus,
.sales-next-service-grid input:focus,
.sales-payment-mixed input:focus,
.sales-note-field textarea:focus {
    border-color: var(--blue);
}

.sales-payment-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sales-payment-methods button {
    min-height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.sales-payment-methods button:hover,
.sales-payment-methods button.is-active {
    border-color: rgba(43, 234, 132, 0.6);
    background: rgba(43, 234, 132, 0.12);
    color: #fff;
}

.sales-payment-selected,
.sales-next-service-preview,
.sales-payment-balance {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(82, 180, 128, 0.07);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-payment-mixed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-payment-balance {
    grid-column: 1 / -1;
    margin-top: 0;
}

.sales-payment-balance.is-ok { color: #00d890; background: rgba(0,194,126,.08); }
.sales-payment-balance.is-error { color: #ffad4d; background: rgba(245,166,35,.08); }

.sales-note-field {
    margin: 14px 16px 0;
}

.sales-checkout-message {
    min-height: 22px;
    margin: 10px 16px 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-checkout-message.is-error { color: #ff6674; }
.sales-checkout-message.is-success { color: #00d890; }

.sales-finish-btn {
    width: calc(100% - 32px);
    min-height: 52px;
    margin: 8px 16px 16px;
    border: 1px solid rgba(17, 167, 87, 0.7);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--moyli-primary), var(--moyli-primary));
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(17, 167, 87, 0.16);
}

.sales-finish-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.sales-finish-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
    box-shadow: none;
}

/* Sales history */
.sales-history-panel {
    width: 100%;
    margin-top: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--panel);
    overflow: hidden;
}

.sales-history-head {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.18);
}

.sales-history-head h2 { margin: 0; color: var(--text); font-size: 18px; }
.sales-history-head p { margin: 5px 0 0; color: var(--text-soft); font-size: var(--ds-fs-secondary); }

.sales-history-search-wrap {
    display: flex;
    gap: 8px;
}

.sales-history-search-wrap input {
    width: min(340px, 40vw);
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #042513;
    color: var(--text);
    outline: none;
}

.sales-history-search-wrap button {
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.sales-history-list {
    padding: 10px;
}

.sales-history-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: 120px minmax(180px, 1fr) minmax(150px, .8fr) 110px 150px;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.12);
}

.sales-history-row:last-child { border-bottom: 0; }
.sales-history-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sales-history-row strong { color: var(--text); font-size: var(--ds-fs-secondary); }
.sales-history-row span { color: var(--text-soft); font-size: var(--ds-fs-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-history-total { text-align: right; font-size: 14px !important; }
.sales-history-payment span { display: inline-flex; width: fit-content; padding: 5px 8px; border: 1px solid rgba(43, 234, 132, 0.22); border-radius: 7px; background: rgba(43, 234, 132, 0.07); color: #d2fae5; }
.sales-history-empty { min-height: 130px; display: grid; place-items: center; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-history-empty.is-error { color: #ff6674; }

/* Success modal */
.sales-success-modal {
    width: min(460px, calc((100vw / var(--ds-zoom, 1)) - 32px));
    padding: 30px 26px 24px;
    border: 1px solid rgba(82, 180, 128, 0.28);
    border-radius: 18px;
    background: linear-gradient(180deg, #07351c, #042513);
    box-shadow: 0 26px 70px rgba(0,0,0,.46);
    text-align: center;
}

.sales-success-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 194, 126, .12);
    border: 1px solid rgba(0, 194, 126, .34);
    color: #00d890;
    font-size: 28px;
    font-weight: 900;
}

.sales-success-modal h2 { margin: 0; color: #fff; font-size: 20px; }
.sales-success-modal p { margin: 8px 0 0; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-success-total { display: block; margin-top: 18px; color: #fff; font-size: 28px; }
.sales-success-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 22px; }
.sales-success-actions button { min-height: 44px; border: 1px solid var(--border-soft); border-radius: 10px; background: #06301a; color: #fff; font-weight: 800; cursor: pointer; }
.sales-success-actions button.is-primary { border-color: rgba(17, 167, 87, 0.58); background: var(--moyli-primary); }

@media (max-width: 1100px) {
    .sales-checkout-grid { grid-template-columns: 1fr 1fr; }
    .sales-checkout-card:last-child { grid-column: 1 / -1; }
    .sales-history-row { grid-template-columns: 100px minmax(160px, 1fr) minmax(130px, .8fr) 120px; }
    .sales-history-payment { display: none !important; }
}

@media (max-width: 760px) {
    .sales-product-quick-list { grid-template-columns: 1fr; }
    .sales-checkout__head { align-items: flex-start; }
    .sales-checkout__grand-total { align-items: flex-start; }
    .sales-checkout-grid { grid-template-columns: 1fr; }
    .sales-checkout-card:last-child { grid-column: auto; }
    .sales-payment-mixed { grid-template-columns: 1fr; }
    .sales-payment-balance { grid-column: auto; }
    .sales-history-head { align-items: stretch; flex-direction: column; }
    .sales-history-search-wrap { width: 100%; }
    .sales-history-search-wrap input { width: 100%; }
    .sales-history-row { grid-template-columns: 1fr auto; }
    .sales-history-client, .sales-history-vehicle { grid-column: 1; }
    .sales-history-date { grid-column: 2; grid-row: 1; text-align: right; }
    .sales-history-total { grid-column: 2; grid-row: 2; }
}

/* =========================================
   SAVDO V2.1 — COMPACT POS LAYOUT
   ========================================= */

.sales-tabs {
    width: min(360px, 100%);
    margin: 12px auto 20px;
    border-radius: 11px;
}

.sales-tab {
    height: 42px;
    font-size: 14px;
}

.sales-page.is-sale-open .sales-tabs {
    display: none;
}

.sales-page.is-sale-open .sales-header {
    margin-bottom: 10px;
}

.sales-workspace__top {
    gap: 12px;
    margin-bottom: 12px;
}

.sales-workspace__top h2 {
    font-size: 19px;
}

.sales-workspace__top p {
    margin-top: 3px;
    font-size: var(--ds-fs-secondary);
}

.sales-workspace-back {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: var(--ds-fs-secondary);
}

.sales-selected-client {
    grid-template-columns:
        minmax(220px, 1.15fr)
        minmax(210px, 1fr)
        92px
        100px
        92px;
    border-radius: 12px;
}

.sales-selected-client__info,
.sales-selected-client__vehicle,
.sales-selected-client__meta {
    min-height: 68px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.sales-selected-client__info,
.sales-selected-client__vehicle {
    padding-left: 15px;
    padding-right: 15px;
}

.sales-selected-client__meta {
    padding-left: 11px;
    padding-right: 11px;
}

.sales-selected-client span,
.sales-selected-client__meta span {
    font-size: var(--ds-fs-secondary);
}

.sales-selected-client strong {
    font-size: 14px;
}

.sales-selected-client__meta strong {
    font-size: var(--ds-fs-secondary);
}

.sales-selected-client small {
    font-size: var(--ds-fs-secondary);
}

.sales-pos-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}

.sales-pos-main {
    min-width: 0;
}

.sales-pos-main .sales-workspace-grid {
    margin-top: 0;
    gap: 12px;
}

.sales-section-head {
    min-height: 56px;
    padding: 11px 14px;
}

.sales-section-head h3 {
    font-size: 14px;
}

.sales-section-head p {
    margin-top: 4px;
    font-size: var(--ds-fs-secondary);
}

.sales-services-list,
.sales-services-empty,
.sales-products-list,
.sales-products-empty {
    min-height: 84px;
}

.sales-services-list,
.sales-products-list {
    padding-left: 14px;
    padding-right: 14px;
}

.sales-services-footer,
.sales-products-footer {
    min-height: 52px;
    padding: 8px 14px;
}

.sales-add-service-btn,
.sales-add-product-btn {
    height: 36px;
    padding: 0 12px;
    font-size: var(--ds-fs-secondary);
}

.sales-services-total span,
.sales-products-total span {
    font-size: var(--ds-fs-secondary);
}

.sales-services-total strong,
.sales-products-total strong {
    font-size: 14px;
}

.sales-checkout {
    margin-top: 0;
    position: sticky;
    top: 8px;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.sales-checkout__head {
    min-height: 64px;
    padding: 12px 14px;
}

.sales-checkout__head h3 {
    font-size: 14px;
}

.sales-checkout__head p {
    margin-top: 3px;
    font-size: var(--ds-fs-secondary);
}

.sales-checkout__grand-total strong {
    font-size: 20px;
}

.sales-checkout-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 14px;
}

.sales-checkout-card {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 0;
    background: transparent;
}

.sales-checkout-card:last-child {
    border-bottom: 0;
}

.sales-checkout-card h4 {
    margin-bottom: 8px;
    font-size: var(--ds-fs-secondary);
    color: #e2fcee;
}

.sales-checkout-row {
    min-height: 28px;
    font-size: var(--ds-fs-secondary);
}

.sales-checkout-row strong {
    font-size: var(--ds-fs-secondary);
}

.sales-checkout-row.is-total {
    min-height: 38px;
}

.sales-checkout-row.is-total strong {
    font-size: 16px;
}

.sales-discount-controls,
.sales-next-service-grid,
.sales-payment-mixed {
    gap: 6px;
    margin: 7px 0 4px;
}

.sales-discount-controls input,
.sales-discount-controls select,
.sales-next-service-grid input,
.sales-payment-mixed input {
    min-height: 34px;
    height: 34px;
    font-size: var(--ds-fs-secondary);
}

.sales-payment-methods {
    gap: 6px;
}

.sales-payment-methods button {
    min-height: 36px;
    border-radius: 8px;
    font-size: var(--ds-fs-secondary);
}

.sales-payment-selected,
.sales-next-service-preview,
.sales-payment-balance {
    margin-top: 7px;
    padding: 7px 9px;
    font-size: var(--ds-fs-secondary);
}

.sales-note-field {
    margin: 8px 14px 0;
}

.sales-note-field textarea {
    min-height: 44px;
    max-height: 88px;
    padding: 8px 10px;
    font-size: var(--ds-fs-secondary);
}

.sales-checkout-message {
    min-height: 18px;
    margin: 7px 14px 0;
    font-size: var(--ds-fs-secondary);
}

.sales-finish-btn {
    width: calc(100% - 28px);
    min-height: 46px;
    margin: 6px 14px 14px;
    border-radius: 9px;
    font-size: var(--ds-fs-secondary);
}

.sales-history-client-link {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 5px 8px;
    margin: -5px -8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sales-history-client-link:hover:not(:disabled) {
    border-color: rgba(43, 234, 132, 0.34);
    background: rgba(43, 234, 132, 0.07);
}

.sales-history-client-link strong,
.sales-history-client-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-history-client-link strong {
    color: #ecfdf4;
}

.sales-history-client-link:hover strong {
    color: #8bf3bc;
}

@media (max-width: 1450px) {
    .sales-pos-layout {
        grid-template-columns: 1fr;
    }

    .sales-checkout {
        position: static;
    }

    .sales-checkout-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 12px 14px 0;
    }

    .sales-checkout-card {
        padding: 12px;
        border: 1px solid rgba(82, 180, 128, 0.14);
        border-radius: 10px;
        background: rgba(3, 35, 18, 0.5);
    }
}

@media (max-width: 980px) {
    .sales-selected-client {
        grid-template-columns: 1fr 1fr;
    }

    .sales-selected-client__meta {
        border-top: 1px solid rgba(82, 180, 128, 0.14);
    }

    .sales-checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MIJOZLAR — CLIENT CARD
   ========================================= */

.clients-page {
    width: 100%;
    min-width: 0;
    color: var(--text);
}

.clients-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.clients-page__head h1 {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 800;
}

.clients-page__head p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.clients-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.clients-search-field {
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #042513;
}

.clients-search-field span {
    color: var(--text-soft);
    font-size: 18px;
}

.clients-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
}

.clients-refresh-btn,
.client-card-back,
.client-card-new-sale {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: #ebfdf3;
    font-weight: 800;
    cursor: pointer;
}

.clients-refresh-btn:hover,
.client-card-back:hover {
    border-color: var(--blue);
    background: #084123;
}

.client-card-new-sale {
    border-color: rgba(17, 167, 87, 0.56);
    background: var(--moyli-primary);
}

.clients-list-panel,
.client-card-section {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
    overflow: hidden;
}

.clients-list-head,
.client-card-section__head {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.16);
}

.clients-list-head h2,
.client-card-section__head h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.clients-list-head p,
.client-card-section__head p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.clients-list-head > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}

.clients-list {
    padding: 8px;
}

.client-list-row {
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: 40px minmax(180px, 1.1fr) minmax(180px, .9fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-bottom-color: rgba(82, 180, 128, 0.1);
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.client-list-row:last-child {
    border-bottom-color: transparent;
}

.client-list-row:hover {
    border-color: rgba(43, 234, 132, 0.28);
    background: rgba(43, 234, 132, 0.055);
}

.client-list-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(43, 234, 132, 0.28);
    border-radius: 10px;
    background: rgba(43, 234, 132, 0.08);
    color: #98f5c3;
    font-size: 14px;
    font-weight: 900;
}

.client-list-identity,
.client-list-vehicle {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-list-identity strong,
.client-list-vehicle strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.client-list-identity small,
.client-list-vehicle small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.client-list-open {
    color: #76f2b0;
    font-size: 22px;
    text-align: center;
}

.clients-empty {
    min-height: 100px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.clients-empty.is-error {
    color: #ff6674;
}

.client-card__top {
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
}

.client-card__identity {
    min-width: 0;
}

.client-card__identity > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.client-card__identity h2 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 19px;
}

.client-card__identity p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.client-card-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.client-card-stats article {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: rgba(4, 43, 22, 0.72);
}

.client-card-stats span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.client-card-stats strong {
    color: #fff;
    font-size: 17px;
}

.client-card-grid {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
    gap: 12px;
    align-items: start;
}

.client-vehicles-list,
.client-history-list {
    padding: 8px;
}

.client-vehicle-card {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.11);
}

.client-vehicle-card:last-child {
    border-bottom: 0;
}

.client-vehicle-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.client-vehicle-card__top strong {
    color: #fff;
    font-size: 14px;
}

.client-vehicle-card__top span,
.client-vehicle-card__meta {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.client-vehicle-card__meta {
    margin-top: 6px;
}

.client-history-row {
    min-height: 60px;
    display: grid;
    grid-template-columns: 96px minmax(140px, 1fr) minmax(170px, 1fr) 120px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}

.client-history-row:last-child {
    border-bottom: 0;
}

.client-history-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.client-history-row strong {
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.client-history-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.client-history-total {
    text-align: right;
    color: #fff !important;
    font-size: 14px !important;
}

@media (min-width: 801px) {
    .clients-page {
        grid-row: 2 / 4;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

@media (max-width: 980px) {
    .client-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .clients-page__head h1 {
        font-size: 24px;
    }

    .clients-toolbar {
        grid-template-columns: 1fr;
    }

    .client-list-row {
        grid-template-columns: 36px minmax(0, 1fr) 22px;
    }

    .client-list-vehicle {
        grid-column: 2;
    }

    .client-list-open {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .client-card__top {
        grid-template-columns: auto 1fr;
    }

    .client-card-new-sale {
        grid-column: 1 / -1;
        width: 100%;
    }

    .client-card-stats {
        grid-template-columns: 1fr 1fr;
    }

    .client-history-row {
        grid-template-columns: 1fr auto;
    }

    .client-history-composition {
        grid-column: 1;
    }

    .client-history-total {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* =========================================
   SAVDO V2.2 — BALANCED WORKSPACE + HISTORY CHEVRON
   ========================================= */

/* On a normal desktop the checkout returns below the two work panels.
   This keeps the screen dense and removes the large unused column. */
@media (min-width: 1200px) {
    .sales-page.is-sale-open .sales-pos-layout {
        display: block;
        margin-top: 12px;
    }

    .sales-page.is-sale-open .sales-pos-main {
        width: 100%;
    }

    .sales-page.is-sale-open .sales-pos-main .sales-workspace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px;
    }

    .sales-page.is-sale-open .sales-checkout {
        position: static;
        width: 100%;
        margin-top: 12px;
        border-radius: 13px;
        box-shadow: none;
    }

    .sales-page.is-sale-open .sales-checkout__head {
        min-height: 56px;
        padding: 10px 14px;
    }

    .sales-page.is-sale-open .sales-checkout-grid {
        display: grid;
        grid-template-columns: 1fr .92fr 1.12fr;
        gap: 10px;
        padding: 10px 14px 0;
    }

    .sales-page.is-sale-open .sales-checkout-card,
    .sales-page.is-sale-open .sales-checkout-card:last-child {
        padding: 10px 12px;
        border: 1px solid rgba(82, 180, 128, 0.14);
        border-radius: 10px;
        background: rgba(3, 35, 18, 0.5);
    }

    .sales-page.is-sale-open .sales-checkout-card h4 {
        margin-bottom: 7px;
    }

    .sales-page.is-sale-open .sales-checkout-row {
        min-height: 25px;
    }

    .sales-page.is-sale-open .sales-payment-methods button {
        min-height: 33px;
    }

    .sales-page.is-sale-open .sales-discount-controls input,
    .sales-page.is-sale-open .sales-discount-controls select,
    .sales-page.is-sale-open .sales-next-service-grid input,
    .sales-page.is-sale-open .sales-payment-mixed input {
        min-height: 32px;
        height: 32px;
    }

    .sales-page.is-sale-open .sales-note-field {
        margin-top: 9px;
    }

    .sales-page.is-sale-open .sales-note-field textarea {
        min-height: 38px;
        max-height: 64px;
    }

    .sales-page.is-sale-open .sales-finish-btn {
        min-height: 42px;
        margin-top: 4px;
    }
}

/* Sales history: a clear right-side affordance for opening the client card. */
.sales-history-row {
    grid-template-columns: 120px minmax(180px, 1fr) minmax(150px, .8fr) 110px 150px 38px;
}

.sales-history-open-client {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    justify-self: end;
    padding: 0;
    border: 1px solid rgba(82, 180, 128, 0.2);
    border-radius: 9px;
    background: rgba(6, 48, 26, 0.72);
    color: #9bf1c3;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.sales-history-open-client svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-history-open-client:hover:not(:disabled) {
    border-color: rgba(43, 234, 132, 0.5);
    background: rgba(43, 234, 132, 0.12);
    color: #ffffff;
    transform: translateX(2px);
}

.sales-history-open-client:disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 1100px) {
    .sales-history-row {
        grid-template-columns: 100px minmax(160px, 1fr) minmax(130px, .8fr) 120px 38px;
    }

    .sales-history-payment {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .sales-history-row {
        grid-template-columns: minmax(0, 1fr) auto 36px;
        gap: 8px;
    }

    .sales-history-client,
    .sales-history-vehicle {
        grid-column: 1;
    }

    .sales-history-date {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .sales-history-total {
        grid-column: 2;
        grid-row: 2;
    }

    .sales-history-open-client {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* =========================================
   SAVDO V2.3 — REFERENCE-DRIVEN UX
   ========================================= */

/* Full-width customer identification */
.sales-page:not(.is-sale-open) .sales-start,
.sales-page:not(.is-sale-open) .sales-results {
    max-width: none;
}

.sales-page:not(.is-sale-open) .sales-start {
    margin-top: 18px;
}

.sales-page:not(.is-sale-open) .sales-start__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sales-page:not(.is-sale-open) .sales-start-card {
    min-height: 260px;
    padding: 26px;
    border-radius: 15px;
}

.sales-page:not(.is-sale-open) .sales-card-head h3 {
    font-size: 19px;
}

.sales-page:not(.is-sale-open) .sales-card-head p {
    max-width: 560px;
    font-size: 14px;
}

.sales-camera-open-btn svg,
.sales-client-search-icon svg,
.sales-find-open-btn svg,
.sales-client-search-btn svg,
.sales-client-add-btn svg,
.sales-tab svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-camera-open-btn svg {
    width: 23px;
    height: 23px;
}

.sales-client-search-icon svg {
    width: 20px;
    height: 20px;
}

.sales-find-open-btn,
.sales-client-search-btn,
.sales-client-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.sales-find-open-btn svg,
.sales-client-search-btn svg,
.sales-client-add-btn svg {
    width: 18px;
    height: 18px;
}

/* Professional 3-tab navigation */
.sales-tabs {
    width: min(760px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.sales-tab svg {
    width: 18px;
    height: 18px;
}

/* Payment methods with icons */
.sales-payment-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sales-payment-methods button {
    min-height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border-radius: 10px;
    text-align: left;
}

.sales-payment-methods button svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-payment-methods button span {
    min-width: 0;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.sales-payment-methods button[data-sale-payment="debt"].is-active {
    border-color: rgba(245, 166, 35, .72);
    background: linear-gradient(135deg, rgba(245, 166, 35, .22), rgba(91, 51, 0, .12));
    color: #ffc05a;
    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .18);
}

.sales-payment-methods button[data-sale-payment="cash"].is-active,
.sales-payment-methods button[data-sale-payment="card"].is-active,
.sales-payment-methods button[data-sale-payment="transfer"].is-active,
.sales-payment-methods button[data-sale-payment="account"].is-active,
.sales-payment-methods button[data-sale-payment="mixed"].is-active {
    border-color: rgba(17, 167, 87, 0.72);
    background: linear-gradient(135deg, rgba(17, 167, 87, 0.82), rgba(17, 167, 87, 0.72));
    color: #fff;
    box-shadow: 0 7px 20px rgba(17, 167, 87, 0.12);
}

.sales-payment-mixed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-payment-balance {
    grid-column: 1 / -1;
}

/* Technical mileage card */
.sales-card-title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sales-card-title-with-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #94f4c1;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-technical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.sales-technical-grid label {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 160px);
    align-items: center;
    gap: 10px;
}

.sales-technical-grid label > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    line-height: 1.35;
}

.sales-technical-grid input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    outline: 0;
    background: #042513;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
}

.sales-next-service-preview.is-warning {
    border-color: rgba(245, 166, 35, .32);
    background: rgba(245, 166, 35, .08);
    color: #ffc05a;
}

/* Client card as a right drawer */
.client-card-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3400;
    background: rgba(1, 15, 8, 0.16);
    backdrop-filter: blur(1px);
}

.client-card {
    position: fixed;
    z-index: 3410;
    top: 18px;
    right: 18px;
    bottom: 18px;
    width: min(410px, calc((100vw / var(--ds-zoom, 1)) - 36px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(38, 188, 108, 0.44);
    border-radius: 15px;
    background: linear-gradient(180deg, #062d18 0%, #031f10 100%);
    box-shadow: -22px 0 60px rgba(0, 0, 0, .28);
    transform: translateX(18px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

body.client-card-open .client-card {
    transform: translateX(0);
    opacity: 1;
}

.client-card__top {
    position: relative;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    margin-bottom: 0;
    padding: 10px 42px 12px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.client-card__avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(105, 240, 168, 0.48);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(105, 240, 168, 0.32), rgba(25, 121, 70, 0.18));
    color: #81f3b6;
}

.client-card__avatar svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
    stroke: none;
}

.client-card-back {
    position: absolute;
    top: 2px;
    right: 0;
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 400;
}

.client-card-new-sale {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
}

.client-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.client-card-stats article {
    min-height: 66px;
    padding: 10px 11px;
}

.client-card-stats article.is-debt strong {
    color: #ecfdf4;
}

.client-card-stats article.is-debt.has-debt strong {
    color: #ff5265;
}

.client-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.client-card-section {
    border-radius: 11px;
}

.client-card-section__head {
    min-height: 54px;
    padding: 10px 12px;
}

.client-history-row {
    grid-template-columns: 80px minmax(110px, 1fr) minmax(120px, 1fr) 90px;
    gap: 7px;
}

/* Sales analytics */
.sales-analytics-panel {
    width: 100%;
}

.sales-analytics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.sales-analytics-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
}

.sales-analytics-head p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-analytics-head button {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.sales-analytics-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sales-analytics-metrics article {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(5, 46, 24, 0.96), rgba(3, 35, 18, 0.96));
}

.sales-analytics-metrics span,
.sales-analytics-metrics small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-analytics-metrics strong {
    color: #39eb8c;
    font-size: 20px;
    line-height: 1.15;
}

.sales-analytics-metrics article:first-child strong {
    color: #21d49a;
}

.sales-analytics-metrics article.is-debt strong {
    color: #ff5c6c;
}

.sales-analytics-chart-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(5, 46, 24, 0.96), rgba(3, 35, 18, 0.96));
}

.sales-analytics-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.sales-analytics-chart-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.sales-analytics-chart-head p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-analytics-chart-head > strong {
    color: #70f1ac;
    font-size: 14px;
}

.sales-monthly-chart {
    height: 250px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 7px;
    padding: 8px 0 0;
}

.sales-month-col {
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: 22px 1fr 22px;
    align-items: end;
    gap: 4px;
    text-align: center;
}

.sales-month-col > strong {
    overflow: hidden;
    color: #84f3b8;
    font-size: var(--ds-fs-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-month-track {
    width: 74%;
    height: 100%;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    border-radius: 7px 7px 3px 3px;
    background: rgba(43, 234, 132, 0.06);
    overflow: hidden;
}

.sales-month-track i {
    width: 100%;
    min-height: 2px;
    display: block;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, #35eb8a, #11a958);
}

.sales-month-col > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

@media (max-width: 1180px) {
    .sales-analytics-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sales-page:not(.is-sale-open) .sales-start__options {
        grid-template-columns: 1fr;
    }

    .sales-page:not(.is-sale-open) .sales-start-card {
        min-height: 230px;
    }

    .sales-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sales-tab {
        gap: 5px;
        font-size: var(--ds-fs-secondary);
    }

    .sales-tab svg {
        width: 15px;
        height: 15px;
    }

    .sales-payment-methods {
        grid-template-columns: 1fr 1fr;
    }

    .sales-technical-grid label {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .sales-analytics-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .sales-monthly-chart {
        overflow-x: auto;
        grid-template-columns: repeat(12, minmax(48px, 1fr));
    }

    .client-card {
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: calc((100vw / var(--ds-zoom, 1)) - 16px);
    }
}

.client-card-new-sale {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    box-shadow: 0 -10px 24px rgba(3, 31, 16, 0.74);
}

.client-card-new-sale svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-history-payment.is-debt span,
.sales-history-payment.is-debt small {
    color: #ff6b79;
}

.sales-found-client__debt {
    width: fit-content;
    margin-top: 2px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 82, 101, .26);
    border-radius: 999px;
    background: rgba(255, 82, 101, .08);
    color: #ff6b79;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

/* =========================================
   SAVDO V3.1 — FAST HISTORY / ANALYTICS / RECEIPT / SMS
   ========================================= */

.sales-sms-toggle {
    margin-top: 9px;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 9px;
    background: rgba(5, 49, 26, 0.64);
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    cursor: pointer;
}
.sales-sms-toggle input { width: 16px; height: 16px; accent-color: #2bea84; }
.sales-sms-toggle span { line-height: 1.35; }

/* Receipt confirmation before committing the sale */
.sales-confirm-modal {
    width: min(720px, calc((100vw / var(--ds-zoom, 1)) - 28px));
    max-height: min(840px, calc(calc(100vh / var(--ds-zoom, 1)) - 28px));
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(42, 191, 112, 0.42);
    border-radius: 16px;
    background: linear-gradient(180deg, #07311b 0%, #031f10 100%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}
.sales-confirm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}
.sales-confirm-head span { color: #75f1af; font-size: var(--ds-fs-secondary); font-weight: 900; letter-spacing: .12em; }
.sales-confirm-head h2 { margin: 4px 0 0; color: #fff; font-size: 24px; }
.sales-confirm-head button {
    width: 36px; height: 36px; border: 1px solid var(--border-soft); border-radius: 9px;
    background: #06301a; color: #dffced; font-size: 22px; cursor: pointer;
}
.sales-confirm-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.sales-confirm-meta > div {
    min-width: 0; padding: 12px; border: 1px solid rgba(82, 180, 128, 0.15); border-radius: 10px; background: rgba(4, 43, 22, 0.76);
}
.sales-confirm-meta span, .sales-confirm-meta small { display: block; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-confirm-meta strong { display: block; margin: 5px 0 3px; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sales-confirm-lines { margin-top: 14px; border: 1px solid rgba(82, 180, 128, 0.15); border-radius: 11px; overflow: hidden; }
.sales-confirm-line {
    min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) 150px 130px; align-items: center; gap: 10px;
    padding: 9px 12px; border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}
.sales-confirm-line:last-child { border-bottom: 0; }
.sales-confirm-line > div { min-width: 0; }
.sales-confirm-line > div span { display: block; color: #5ae89c; font-size: var(--ds-fs-secondary); font-weight: 800; text-transform: uppercase; }
.sales-confirm-line > div strong { display: block; margin-top: 3px; overflow: hidden; color: var(--text); font-size: var(--ds-fs-secondary); text-overflow: ellipsis; white-space: nowrap; }
.sales-confirm-line > span { color: var(--text-soft); font-size: var(--ds-fs-secondary); text-align: right; }
.sales-confirm-line > strong { color: #fff; font-size: var(--ds-fs-secondary); text-align: right; }
.sales-confirm-totals { margin: 14px 0 0 auto; width: min(100%, 380px); }
.sales-confirm-totals > div { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(82, 180, 128, 0.08); color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-confirm-totals > div strong { color: #fff; font-size: var(--ds-fs-secondary); }
.sales-confirm-totals > div.is-debt strong { color: #ff5d70; }
.sales-confirm-totals > div.is-total { min-height: 48px; margin-top: 5px; border: 0; font-weight: 900; }
.sales-confirm-totals > div.is-total span { color: #fff; font-size: var(--ds-fs-secondary); }
.sales-confirm-totals > div.is-total strong { color: #fff; font-size: 22px; }
.sales-confirm-technical { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(106, 240, 169, 0.2); border-radius: 9px; background: rgba(49, 142, 92, 0.09); color: #b6f8d5; font-size: var(--ds-fs-secondary); line-height: 1.5; }
.sales-confirm-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 14px; }
.sales-confirm-actions button { min-height: 46px; border: 1px solid var(--border-soft); border-radius: 10px; background: #06301a; color: #fff; font-weight: 900; cursor: pointer; }
.sales-confirm-actions button.is-primary { border-color: rgba(17, 167, 87, 0.62); background: linear-gradient(135deg, var(--moyli-primary), var(--moyli-primary)); }
.sales-confirm-actions button:disabled { opacity: .58; cursor: wait; }
.sales-confirm-message { min-height: 18px; margin-top: 8px; color: #ff6677; font-size: var(--ds-fs-secondary); text-align: center; }

/* Sales history filters + fixed customer pane */
.sales-history-head { align-items: flex-end; }
.sales-history-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sales-history-tools > label, .sales-analytics-tools > label { display: grid; gap: 4px; }
.sales-history-tools > label span, .sales-analytics-tools > label span { color: var(--text-soft); font-size: var(--ds-fs-secondary); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sales-history-tools input[type="date"], .sales-analytics-tools input[type="date"] {
    height: 38px; min-width: 138px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #042b16; color: var(--text); font: inherit; font-size: var(--ds-fs-secondary);
}
.sales-history-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(310px, .78fr); gap: 12px; align-items: start; }
.sales-history-main { min-width: 0; border: 1px solid rgba(82, 180, 128, 0.13); border-radius: 12px; overflow: hidden; background: rgba(3, 35, 18, 0.42); }
.sales-history-list { min-width: 0; }
.sales-history-row {
    grid-template-columns: 92px minmax(150px,1fr) minmax(125px,.9fr) 95px 120px 34px !important;
    min-height: 62px;
    padding: 0 12px;
    gap: 8px;
    cursor: default;
    transition: background .14s ease, box-shadow .14s ease;
}
.sales-history-row.is-selected { background: rgba(43, 234, 132, 0.08); box-shadow: inset 3px 0 0 #2bea84; }
.sales-history-client { cursor: pointer; }
.sales-history-client:hover strong { color: #73f1ae; }

.sales-history-client-pane {
    position: sticky;
    top: 10px;
    min-height: 520px;
    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 126px);
    overflow-y: auto;
    padding: 13px;
    border: 1px solid rgba(42, 191, 112, 0.34);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(6, 45, 24, 0.98), rgba(3, 31, 16, 0.98));
}
.sales-history-client-empty { min-height: 470px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 22px; text-align: center; color: var(--text-soft); }
.sales-history-client-empty__icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(43, 234, 132, 0.3); border-radius: 12px; color: #67f0a7; font-size: 26px; }
.sales-history-client-empty strong { color: #fff; font-size: 14px; }
.sales-history-client-empty p { max-width: 240px; margin: 0; font-size: var(--ds-fs-secondary); line-height: 1.5; }
.sales-history-client-content { display: grid; gap: 10px; }
.sales-history-client-head { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid rgba(82, 180, 128, 0.1); }
.sales-history-client-avatar { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(105, 240, 168, 0.44); border-radius: 50%; background: rgba(67, 217, 137, 0.14); color: #84f3b8; }
.sales-history-client-avatar svg { width: 26px; height: 26px; fill: currentColor; }
.sales-history-client-head > div > span { color: var(--text-soft); font-size: var(--ds-fs-secondary); font-weight: 900; letter-spacing: .08em; }
.sales-history-client-head h3 { margin: 3px 0 2px; color: #fff; font-size: 16px; }
.sales-history-client-head p { margin: 0; color: var(--text-soft); font-size: var(--ds-fs-secondary); overflow-wrap: anywhere; }
.sales-history-client-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.sales-history-client-stats article { min-height: 62px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 9px; border: 1px solid rgba(82, 180, 128, 0.14); border-radius: 9px; background: rgba(4, 43, 22, 0.66); }
.sales-history-client-stats span { color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-history-client-stats strong { color: #fff; font-size: var(--ds-fs-secondary); }
.sales-history-client-stats .is-debt strong { color: #fff; }
.sales-history-client-stats .is-debt strong.has-debt { color: #ff5c6c; }
.sales-history-client-section { border: 1px solid rgba(82, 180, 128, 0.14); border-radius: 10px; overflow: hidden; background: rgba(4, 43, 22, 0.55); }
.sales-history-client-section__head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border-bottom: 1px solid rgba(82, 180, 128, 0.1); }
.sales-history-client-section__head h4 { margin: 0; color: #fff; font-size: var(--ds-fs-secondary); }
.sales-history-client-section__head span { color: #80f2b5; font-size: var(--ds-fs-secondary); }
.sales-history-client-vehicles { display: grid; gap: 6px; padding: 8px; }
.sales-history-client-vehicle { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,1fr); gap: 4px 8px; padding: 7px 8px; border-radius: 7px; background: rgba(6, 56, 29, 0.72); }
.sales-history-client-vehicle strong { color: #fff; font-size: var(--ds-fs-secondary); }
.sales-history-client-vehicle span { color: var(--text); font-size: var(--ds-fs-secondary); }
.sales-history-client-vehicle small { grid-column: 1 / -1; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-history-client-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sales-history-client-mini-list { padding: 5px 8px 8px; }
.sales-history-client-mini-list > div { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom: 1px solid rgba(82, 180, 128, 0.07); }
.sales-history-client-mini-list > div:last-child { border-bottom: 0; }
.sales-history-client-mini-list strong { min-width: 0; overflow: hidden; color: var(--text); font-size: var(--ds-fs-secondary); text-overflow: ellipsis; white-space: nowrap; }
.sales-history-client-mini-list span { flex: 0 0 auto; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-history-client-mini-empty { padding: 12px 4px; color: var(--text-soft); font-size: var(--ds-fs-secondary); text-align: center; }
.sales-history-client-sale-btn { position: sticky; bottom: 0; min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; background: linear-gradient(135deg,var(--moyli-primary),var(--moyli-primary)); color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 -8px 20px rgba(3, 31, 16, 0.72); }
.sales-history-client-sale-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sales-history-client-sale-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Interactive analytics */
.sales-analytics-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sales-analytics-metrics article { cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.sales-analytics-metrics article:hover, .sales-analytics-metrics article:focus-visible { transform: translateY(-2px); border-color: rgba(43, 234, 132, 0.38); outline: none; }
.sales-analytics-metrics article.is-active { border-color: rgba(43, 234, 132, 0.65); background: linear-gradient(180deg, rgba(9, 84, 44, 0.96), rgba(5, 46, 24, 0.96)); box-shadow: inset 0 0 0 1px rgba(43, 234, 132, 0.1); }
.sales-chart-nav { display: flex; align-items: center; gap: 8px; }
.sales-chart-nav button { width: 34px; height: 34px; border: 1px solid var(--border-soft); border-radius: 8px; background: #06301a; color: #dcfceb; font-size: 21px; cursor: pointer; }
.sales-chart-nav strong { min-width: 170px; color: #70f1ac; font-size: var(--ds-fs-secondary); text-align: center; }
.sales-daily-chart-viewport { width: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(43, 234, 132, 0.3) transparent; }
.sales-daily-chart { width: max-content; min-width: 100%; height: 258px; display: flex; align-items: stretch; gap: 8px; padding: 8px 2px 0; }
.sales-day-col { width: 62px; min-width: 62px; height: 100%; display: grid; grid-template-rows: 22px 1fr 22px 16px; align-items: end; gap: 3px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.sales-day-col:hover, .sales-day-col.is-active { background: rgba(43, 234, 132, 0.06); }
.sales-day-col > strong { overflow: hidden; color: #84f3b8; font-size: var(--ds-fs-secondary); text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sales-day-track { width: 74%; height: 100%; justify-self: center; display: flex; align-items: flex-end; border-radius: 7px 7px 3px 3px; background: rgba(43, 234, 132, 0.06); overflow: hidden; }
.sales-day-track i { width: 100%; min-height: 2px; display: block; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#40ec90,#11b05b); }
.sales-day-col.is-active .sales-day-track { box-shadow: 0 0 0 1px rgba(104, 240, 167, 0.72), 0 0 18px rgba(43, 234, 132, 0.16); }
.sales-day-col > span { color: #9bd3b5; font-size: var(--ds-fs-secondary); text-align: center; }
.sales-day-col > small { min-height: 12px; color: #5dac82; font-size: var(--ds-fs-secondary); text-align: center; }
.sales-analytics-detail { margin-top: 12px; border: 1px solid rgba(82, 180, 128, 0.16); border-radius: 12px; background: rgba(3, 35, 18, 0.55); overflow: hidden; }
.sales-analytics-detail__head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border-bottom: 1px solid rgba(82, 180, 128, 0.1); }
.sales-analytics-detail__head h3 { margin: 0; color: #fff; font-size: 14px; }
.sales-analytics-detail__head p { margin: 4px 0 0; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.sales-analytics-detail__head > strong { color: #73f1ae; font-size: 15px; }
.sales-analytics-detail-list { min-height: 72px; }
.sales-analytics-detail-row { width: 100%; min-height: 56px; display: grid; grid-template-columns: 100px minmax(150px,1fr) minmax(130px,.8fr) 130px 26px; align-items: center; gap: 10px; padding: 7px 12px; border: 0; border-bottom: 1px solid rgba(82, 180, 128, 0.08); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.sales-analytics-detail-row:last-child { border-bottom: 0; }
.sales-analytics-detail-row:hover { background: rgba(43, 234, 132, 0.05); }
.sales-analytics-detail-row > span:not(.sales-analytics-detail-arrow) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sales-analytics-detail-row strong { color: #fff; font-size: var(--ds-fs-secondary); }
.sales-analytics-detail-row small { color: var(--text-soft); font-size: var(--ds-fs-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-analytics-detail-row > strong { color: #73f1ae; text-align: right; }
.sales-analytics-detail-arrow { color: #7af2b2; font-size: 20px; text-align: right; }

/* Richer client card */
.client-card { width: min(450px, calc((100vw / var(--ds-zoom, 1)) - 36px)); }
.client-card-stats--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.client-card-stats--compact article { min-width: 0; min-height: 72px; padding: 9px 7px; }
.client-card-stats--compact span { font-size: var(--ds-fs-secondary); }
.client-card-stats--compact strong { font-size: var(--ds-fs-secondary); overflow-wrap: anywhere; }
.client-card-section-count { color: #76f2b0; font-size: var(--ds-fs-secondary); }
.client-card-recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.client-card-mini-list { padding: 5px 8px 8px; }
.client-card-mini-row { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-bottom: 1px solid rgba(82, 180, 128, 0.07); }
.client-card-mini-row:last-child { border-bottom: 0; }
.client-card-mini-row strong { min-width: 0; overflow: hidden; color: var(--text); font-size: var(--ds-fs-secondary); text-overflow: ellipsis; white-space: nowrap; }
.client-card-mini-row span { color: var(--text-soft); font-size: var(--ds-fs-secondary); white-space: nowrap; }
.client-card .client-history-row { grid-template-columns: 70px minmax(96px,1fr) minmax(110px,1fr) 78px; }
.client-card .client-history-list { max-height: 240px; overflow-y: auto; }

@media (max-width: 1180px) {
    .sales-history-layout { grid-template-columns: 1fr; }
    .sales-history-client-pane { position: relative; top: auto; min-height: 0; max-height: none; }
    .sales-history-client-empty { min-height: 180px; }
}

@media (max-width: 760px) {
    .sales-confirm-meta { grid-template-columns: 1fr; }
    .sales-confirm-line { grid-template-columns: minmax(0,1fr) 100px; }
    .sales-confirm-line > strong { grid-column: 2; }
    .sales-history-tools, .sales-analytics-tools { width: 100%; justify-content: stretch; }
    .sales-history-tools > label, .sales-analytics-tools > label { flex: 1 1 130px; }
    .sales-history-tools input[type="date"], .sales-analytics-tools input[type="date"] { width: 100%; min-width: 0; }
    .sales-history-search-wrap { width: 100%; }
    .sales-history-client-split, .client-card-recent-grid { grid-template-columns: 1fr; }
    .sales-analytics-detail-row { grid-template-columns: minmax(0,1fr) auto 24px; }
    .sales-analytics-detail-row > span:nth-child(3) { display: none; }
    .client-card-stats--compact { grid-template-columns: 1fr 1fr; }
}
.sales-success-actions--single { grid-template-columns: 1fr; }


/* =========================================
   SAVDO V3.2 — PROFESSIONAL TITLES + AUTO SERVICE DATE
   ========================================= */

.sales-heading-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 11px;
    margin: 0;
    letter-spacing: -0.025em;
}

.sales-heading-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid rgba(55, 235, 139, 0.42);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(23, 232, 121, 0.16), rgba(5, 50, 26, 0.86));
    color: #72f1ad;
    box-shadow: inset 0 0 18px rgba(23, 232, 121, 0.06);
}

.sales-heading-icon svg,
.sales-section-title__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-heading-with-icon--compact .sales-heading-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
}

.sales-heading-with-icon--compact .sales-heading-icon svg {
    width: 17px;
    height: 17px;
}

.sales-header__title > p {
    margin-left: 49px;
}

.sales-workspace-title-block > p {
    margin-left: 43px !important;
}

.sales-section-head {
    position: relative;
    background: linear-gradient(90deg, rgba(23, 232, 121, 0.055), rgba(23, 232, 121, 0) 58%);
}

.sales-section-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3cec8e, #13c064);
    box-shadow: 0 0 14px rgba(60, 236, 142, 0.24);
}

.sales-section-title {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    letter-spacing: .025em !important;
}

.sales-section-title__icon {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 27px;
    border: 1px solid rgba(69, 237, 147, 0.24);
    border-radius: 8px;
    background: rgba(19, 158, 84, 0.12);
    color: #74f1ae;
}

.sales-section-title__icon svg {
    width: 15px;
    height: 15px;
}

.sales-checkout__head {
    position: relative;
    background: linear-gradient(90deg, rgba(23, 232, 121, 0.055), rgba(23, 232, 121, 0) 55%);
}

.sales-checkout__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #3cec8e, #13c064);
}

.sales-section-title--checkout {
    font-size: 14px !important;
}

.sales-analytics-head > div:first-child {
    position: relative;
    padding-left: 0;
}

.sales-heading-with-icon--analytics .sales-heading-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.sales-analytics-head > div:first-child > p {
    margin-left: 45px;
}

.sales-auto-label {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-left: 5px;
    padding: 0 6px;
    border: 1px solid rgba(0, 194, 126, .26);
    border-radius: 999px;
    background: rgba(0, 194, 126, .08);
    color: #43d9a2;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    letter-spacing: .05em;
    vertical-align: middle;
}

#salesNextServiceDate.is-auto-calculated {
    border-color: rgba(0, 194, 126, .44);
    background: linear-gradient(180deg, rgba(0, 194, 126, .055), #042513);
    box-shadow: inset 0 0 0 1px rgba(0, 194, 126, .05);
}

.sales-next-service-preview.is-calculated {
    border-color: rgba(0, 194, 126, .26);
    background: rgba(0, 194, 126, .065);
    color: #9fe5cc;
}

.sales-product-quick-item img,
.sales-product-row__product img,
#salesProductPreviewImage {
    object-fit: contain;
    background: linear-gradient(145deg, rgba(10, 73, 39, 0.86), rgba(4, 38, 20, 0.96));
}

@media (max-width: 760px) {
    .sales-header__title > p,
    .sales-workspace-title-block > p,
    .sales-analytics-head > div:first-child > p {
        margin-left: 0 !important;
    }

    .sales-heading-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}


/* =========================================
   SAVDO V3.3 - DATE / CART / RECEIPT FIX
   ========================================= */

/* The finish action remains clickable so validation is always visible. */
.sales-finish-btn.is-not-ready {
    opacity: .66;
}

.sales-finish-btn.is-not-ready:hover {
    filter: brightness(1.03);
}

/* Always surface the receipt modal above the working page. */
#salesConfirmModal:not([hidden]) {
    display: flex !important;
    z-index: 300000 !important;
}

/* Keep product prices and totals inside the panel on wide desktop layouts. */
.sales-products-table,
.sales-products-list,
.sales-product-row--fast {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.sales-products-table__head,
.sales-product-row--fast {
    grid-template-columns:
        minmax(220px, 1.55fr)
        minmax(118px, .62fr)
        minmax(118px, .60fr)
        minmax(128px, .68fr)
        38px !important;
    column-gap: 14px;
}

.sales-products-list {
    overflow-x: hidden;
    padding-right: 16px !important;
}

.sales-product-row__price,
.sales-product-row__total {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    white-space: nowrap;
}

.sales-product-row__total {
    padding-right: 2px;
}

.sales-cart-remove {
    justify-self: end;
}

@media (max-width: 980px) {
    .sales-products-table {
        overflow-x: auto;
    }

    .sales-products-table__head,
    .sales-product-row--fast {
        min-width: 760px !important;
    }

    .sales-products-list {
        min-width: 760px !important;
        overflow-x: visible;
    }
}


/* =========================================
   SAVDO V3.4 - MIJOZLAR SPLIT CARD + NAV FIX
   ========================================= */

/* Desktop Mijozlar: keep the client list visible and reserve a stable right
   column for the selected client's card instead of covering the whole page. */
@media (min-width: 1180px) {
    body.client-card-list-open #clientCardBackdrop {
        display: none !important;
    }

    body.client-card-list-open #clientsPage {
        padding-right: 438px;
        transition: padding-right .18s ease;
    }

    body.client-card-list-open #clientsPage .clients-browse {
        min-width: 0;
    }

    body.client-card-list-open #clientCardPanel {
        top: 92px;
        right: 18px;
        bottom: 18px;
        width: 410px;
        max-width: 410px;
        border-color: rgba(38, 188, 108, 0.48);
        box-shadow: -14px 0 38px rgba(0, 0, 0, .20);
    }

    body.client-card-list-open #clientCardPanel .client-card-history-section {
        min-height: 0;
    }
}

/* Selected row remains visually anchored to the card shown on the right. */
.client-list-row.is-selected {
    border-color: rgba(43, 234, 132, 0.45);
    background: rgba(43, 234, 132, 0.075);
    box-shadow: inset 3px 0 0 rgba(43, 234, 132, 0.88);
}

/* On medium / mobile screens the same card remains a regular drawer. */
@media (max-width: 1179px) {
    body.client-card-list-open #clientsPage {
        padding-right: 0;
    }
}


/* =========================================
   SAVDO V3.5 - FINISH BUTTON HARD FIX
   ========================================= */
#salesFinishBtn {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    user-select: none;
}

#salesConfirmModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
}

#salesConfirmModal:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =========================================
   SAVDO V3.8 - FIXED CLIENT CARD + SAFE NUMBERS
   ========================================= */

/* Keep the client card truly anchored on the right in Mijozlar and reserve
   enough real width for money values instead of clipping them. */
@media (min-width: 1180px) {
    body.client-card-list-open #clientsPage {
        padding-right: 500px !important;
    }

    body.client-card-list-open #clientCardPanel {
        position: fixed !important;
        top: 84px !important;
        right: 18px !important;
        bottom: 18px !important;
        width: 470px !important;
        max-width: 470px !important;
        min-width: 470px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: none !important;
    }

    body.client-card-list-open #clientCardPanel[hidden] {
        display: none !important;
    }

    body.client-card-list-open #clientCardPanel:not([hidden]) {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* The totals at the top must never be cut by the compact four-column grid. */
    body.client-card-list-open #clientCardPanel .client-card-stats--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.client-card-list-open #clientCardPanel .client-card-stats--compact article {
        min-width: 0 !important;
        padding: 9px 7px !important;
    }

    body.client-card-list-open #clientCardPanel .client-card-stats--compact strong {
        max-width: 100%;
        font-size: var(--ds-fs-secondary) !important;
        line-height: 1.25;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        text-overflow: clip !important;
    }

    /* History inside the narrow right card: two compact lines instead of four
       rigid columns. The amount gets its own protected column. */
    body.client-card-list-open #clientCardPanel .client-history-row {
        width: 100%;
        min-width: 0 !important;
        grid-template-columns: 74px minmax(0, 1fr) max-content !important;
        grid-template-rows: auto auto;
        column-gap: 9px !important;
        row-gap: 3px !important;
        padding: 9px 10px !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.client-card-list-open #clientCardPanel .client-history-date {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    body.client-card-list-open #clientCardPanel .client-history-vehicle {
        grid-column: 2;
        grid-row: 1;
    }

    body.client-card-list-open #clientCardPanel .client-history-composition {
        grid-column: 2;
        grid-row: 2;
    }

    body.client-card-list-open #clientCardPanel .client-history-total {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        min-width: 92px;
        max-width: 118px;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: var(--ds-fs-secondary) !important;
    }

    body.client-card-list-open #clientCardPanel .client-history-row strong,
    body.client-card-list-open #clientCardPanel .client-history-row span {
        min-width: 0;
    }

    body.client-card-list-open #clientCardPanel .client-history-composition strong,
    body.client-card-list-open #clientCardPanel .client-history-composition span,
    body.client-card-list-open #clientCardPanel .client-history-vehicle strong,
    body.client-card-list-open #clientCardPanel .client-history-vehicle span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.client-card-list-open #clientCardPanel .client-history-list {
        width: 100%;
        max-height: 260px;
        overflow-x: hidden !important;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    /* The bottom action remains visible while only card content scrolls. */
    body.client-card-list-open #clientCardPanel .client-card-new-sale {
        position: sticky !important;
        bottom: 0 !important;
        flex: 0 0 auto;
    }
}

@media (max-width: 1179px) {
    body.client-card-list-open #clientCardPanel {
        min-width: 0 !important;
    }
}

/* =========================================
   SAVDO V3.9 - MIJOZLAR PERMANENT RIGHT PANE
   ========================================= */
@media (min-width: 1180px) {
    /* Mijozlar always keeps a dedicated client-card column on the right. */
    body.client-card-list-open #clientsPage {
        padding-right: 500px !important;
    }

    body.client-card-list-open #clientCardBackdrop {
        display: none !important;
    }

    body.client-card-list-open #clientCardPanel {
        position: fixed !important;
        top: 84px !important;
        right: 18px !important;
        bottom: 18px !important;
        width: 470px !important;
        min-width: 470px !important;
        max-width: 470px !important;
        display: flex !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1150 !important;
    }

    /* A fixed work pane does not need a drawer-style close button. */
    body.client-card-list-open #clientCardBackBtn {
        display: none !important;
    }

    /* Calm placeholder until an operator chooses a client. */
    body.client-card-list-open #clientCardPanel.is-placeholder {
        min-height: 0;
    }

    body.client-card-list-open #clientCardPanel.is-placeholder .client-card-stats,
    body.client-card-list-open #clientCardPanel.is-placeholder .client-card-section,
    body.client-card-list-open #clientCardPanel.is-placeholder .client-card-recent-grid,
    body.client-card-list-open #clientCardPanel.is-placeholder .client-card-new-sale {
        display: none !important;
    }

    body.client-card-list-open #clientCardPanel.is-placeholder::after {
        content: "Mijoz kartasini ko‘rish uchun chap tomondagi ro‘yxatdan mijozni tanlang";
        display: grid;
        place-items: center;
        min-height: 180px;
        margin: 8px 18px 18px;
        padding: 24px;
        border: 1px dashed rgba(82, 180, 128, 0.3);
        border-radius: 14px;
        color: var(--text-soft);
        text-align: center;
        font-size: var(--ds-fs-secondary);
        line-height: 1.55;
        background: rgba(5, 50, 26, 0.32);
    }

    /* Keep the left list readable instead of stretching into the reserved pane. */
    body.client-card-list-open #clientsPage .clients-browse,
    body.client-card-list-open #clientsPage .clients-list-panel,
    body.client-card-list-open #clientsPage .clients-toolbar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* =========================================
   SAVDO v4 — SALE DETAIL + SAFE CANCEL
   ========================================= */

body.sales-detail-modal-open {
    overflow: hidden;
}

.sales-detail-modal {
    width: min(920px, calc((100vw / var(--ds-zoom, 1)) - 34px));
    max-height: min(880px, calc(calc(100vh / var(--ds-zoom, 1)) - 34px));
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(47, 224, 130, 0.36);
    border-radius: 16px;
    background: linear-gradient(180deg, #07351c 0%, #042513 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
    color: var(--text);
}

.sales-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 2px 13px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}

.sales-detail-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #71f1ad;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
    letter-spacing: .09em;
}

.sales-detail-head h2 {
    margin: 0;
    color: #fff;
    font-size: 23px;
    line-height: 1.15;
}

.sales-detail-head p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #06301a;
    color: #dffced;
    font-size: 24px;
    cursor: pointer;
}

.sales-detail-close:hover {
    border-color: rgba(103, 240, 167, 0.55);
    background: #084123;
}

.sales-detail-statusbar {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 2px 8px;
}

.sales-detail-statusbar > strong {
    color: #fff;
    font-size: 24px;
    white-space: nowrap;
}

.sales-detail-status {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
}

.sales-detail-status.is-completed {
    border: 1px solid rgba(0, 194, 126, .30);
    background: rgba(0, 194, 126, .10);
    color: #00d890;
}

.sales-detail-status.is-cancelled {
    border: 1px solid rgba(240, 20, 39, .34);
    background: rgba(240, 20, 39, .10);
    color: #ff6475;
}

.sales-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}

.sales-detail-meta article {
    min-width: 0;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(82, 180, 128, 0.15);
    border-radius: 10px;
    background: rgba(4, 37, 19, 0.72);
}

.sales-detail-meta span,
.sales-detail-meta small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-meta strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.sales-detail-card {
    min-width: 0;
    border: 1px solid rgba(82, 180, 128, 0.15);
    border-radius: 11px;
    background: rgba(4, 37, 19, 0.6);
    overflow: hidden;
}

.sales-detail-card__head {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}

.sales-detail-card__head h3 {
    margin: 0;
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.sales-detail-card__head > strong {
    color: #74f1ae;
    font-size: var(--ds-fs-secondary);
    white-space: nowrap;
}

.sales-detail-lines {
    padding: 4px 10px 7px;
}

.sales-detail-line {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.07);
}

.sales-detail-line:last-child {
    border-bottom: 0;
}

.sales-detail-line > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sales-detail-line strong {
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.sales-detail-line > div > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-detail-line span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-line > strong {
    white-space: nowrap;
}

.sales-detail-empty,
.sales-detail-loading {
    min-height: 60px;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-grid--bottom {
    grid-template-columns: 1.05fr .95fr;
}

.sales-detail-totals,
.sales-detail-payments {
    padding: 6px 11px 9px;
}

.sales-detail-totals > div,
.sales-detail-payments > div {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.07);
}

.sales-detail-totals > div:last-child,
.sales-detail-payments > div:last-child {
    border-bottom: 0;
}

.sales-detail-totals span,
.sales-detail-payments span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-totals strong,
.sales-detail-payments strong {
    color: #fff;
    font-size: var(--ds-fs-secondary);
    white-space: nowrap;
}

.sales-detail-totals .is-total {
    margin-top: 3px;
    border-top: 1px solid rgba(115, 241, 174, 0.18);
}

.sales-detail-totals .is-total span,
.sales-detail-totals .is-total strong {
    color: #73f1ae;
    font-weight: 900;
}

.sales-detail-totals .is-discount strong {
    color: #f6b83c;
}

.sales-detail-totals .is-debt strong,
.sales-detail-payments .is-debt strong {
    color: #ff6475;
}

.sales-detail-technical {
    margin-top: 10px;
}

.sales-detail-technical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 5px 11px 8px;
}

.sales-detail-technical-grid > div {
    min-width: 0;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 5px 9px;
    border-right: 1px solid rgba(82, 180, 128, 0.07);
    border-bottom: 1px solid rgba(82, 180, 128, 0.07);
}

.sales-detail-technical-grid > div:nth-child(3n) {
    border-right: 0;
}

.sales-detail-technical-grid span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.sales-detail-technical-grid strong {
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.sales-detail-note {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(82, 180, 128, 0.15);
    border-radius: 10px;
    background: rgba(4, 37, 19, 0.6);
}

.sales-detail-note > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    text-transform: uppercase;
}

.sales-detail-note p {
    margin: 5px 0 0;
    color: var(--text);
    font-size: var(--ds-fs-secondary);
    line-height: 1.55;
    white-space: pre-line;
}

.sales-detail-message {
    min-height: 18px;
    margin-top: 9px;
    padding: 0 2px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    line-height: 1.45;
    text-align: center;
}

.sales-detail-message.is-warning {
    color: #ffc45e;
}

.sales-detail-message.is-error,
.sales-detail-message.is-cancelled {
    color: #ff6475;
}

.sales-detail-actions {
    position: sticky;
    bottom: -18px;
    z-index: 3;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 10px;
    margin: 12px -18px -18px;
    padding: 12px 18px 18px;
    border-top: 1px solid rgba(82, 180, 128, 0.14);
    background: linear-gradient(180deg, rgba(4, 37, 19, 0.92), #042513 38%);
}

.sales-detail-actions button {
    min-height: 46px;
    border-radius: 10px;
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
    cursor: pointer;
}

.sales-detail-secondary {
    border: 1px solid var(--border-soft);
    background: #06301a;
    color: #fff;
}

.sales-detail-danger {
    border: 1px solid rgba(240, 20, 39, .48);
    background: rgba(240, 20, 39, .10);
    color: #ff7381;
}

.sales-detail-danger:hover,
.sales-detail-danger.is-armed {
    background: linear-gradient(135deg, var(--moyli-danger), #bd0c20);
    color: #fff;
}

.sales-detail-danger:disabled {
    opacity: .55;
    cursor: wait;
}

.sales-history-row {
    cursor: pointer;
}

.sales-history-row:hover {
    background: rgba(43, 234, 132, 0.045);
}

.sales-history-row.is-cancelled {
    opacity: .58;
}

.sales-history-row.is-cancelled .sales-history-total {
    text-decoration: line-through;
    color: #ff7886;
}

.sales-history-row.is-cancelled .sales-history-payment > span {
    color: #ff7886;
}

.client-history-row[role="button"] {
    cursor: pointer;
    transition: background .14s ease, transform .14s ease;
}

.client-history-row[role="button"]:hover,
.client-history-row[role="button"]:focus-visible {
    background: rgba(43, 234, 132, 0.05);
    outline: none;
}

@media (max-width: 820px) {
    .sales-detail-meta,
    .sales-detail-grid,
    .sales-detail-grid--bottom {
        grid-template-columns: 1fr;
    }

    .sales-detail-technical-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sales-detail-technical-grid > div,
    .sales-detail-technical-grid > div:nth-child(3n) {
        border-right: 0;
    }
}

@media (max-width: 520px) {
    .sales-detail-modal {
        width: calc((100vw / var(--ds-zoom, 1)) - 16px);
        max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 16px);
        padding: 14px;
        border-radius: 13px;
    }

    .sales-detail-head h2 {
        font-size: 19px;
    }

    .sales-detail-statusbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .sales-detail-statusbar > strong {
        font-size: 20px;
    }

    .sales-detail-technical-grid {
        grid-template-columns: 1fr;
    }

    .sales-detail-actions {
        grid-template-columns: 1fr;
        margin: 12px -14px -14px;
        padding: 10px 14px 14px;
    }
}

/* =========================================================
   V4.2 — APP SHELL / SIDEBAR CLEANUP
   ========================================================= */

/* Module pages already render their own H1. The global header now only
   appears on Dashboard/Profile and acts as a quiet context header. */
.topbar:not([hidden]) {
    min-height: 0;
    margin-bottom: 16px;
    padding: 15px 18px;
    align-items: center;
    border: 1px solid rgba(53, 235, 138, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(7, 65, 34, 0.76), rgba(4, 37, 19, 0.58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.topbar:not([hidden]) h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
}

.topbar:not([hidden]) p {
    margin-top: 5px;
}

/* The primary navigation owns Home now. */
.main-menu {
    margin-top: 14px;
}

.sidebar-support {
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(53, 235, 138, 0.18);
    border-radius: 12px;
    background: rgba(6, 57, 30, 0.52);
    color: #bdecd3;
    font-family: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: .16s ease;
}

.sidebar-support:hover {
    color: #fff;
    border-color: rgba(53, 235, 138, 0.42);
    background: rgba(10, 87, 46, 0.72);
}

.sidebar-support__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(43, 234, 132, 0.08);
    color: #8ef4be;
}

.sidebar-support__icon .menu-svg {
    width: 18px;
    height: 18px;
}

.sidebar-user {
    margin-top: 8px;
}

.app.sidebar-collapsed .sidebar-support {
    width: 52px;
    justify-content: center;
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
}

.app.sidebar-collapsed .sidebar-support > span:last-child {
    display: none;
}

.profile-logout-button {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(240, 20, 39, .38);
    border-radius: 10px;
    background: rgba(240, 20, 39, .07);
    color: #ff7b88;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.profile-logout-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-logout-button:hover {
    background: rgba(240, 20, 39, .15);
    border-color: rgba(240, 20, 39, .62);
    color: #fff;
}

/* =========================================================
   V4.2 — FAST CLIENT RESULT / CLIENT CARD
   ========================================================= */

.sales-found-client {
    grid-template-columns: minmax(330px, 1.45fr) minmax(210px, .72fr) 58px;
    gap: 18px;
    align-items: center;
}

.sales-found-client__main > strong {
    font-size: 17px;
    line-height: 1.15;
}

.sales-found-client__main > span {
    margin-top: 6px;
    font-size: 14px;
    color: #9acdb2;
}

.sales-found-client__meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sales-found-client__chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 999px;
    background: rgba(5, 47, 25, 0.72);
    color: #a9d9bf;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    white-space: nowrap;
}

.sales-found-client__chip.is-debt {
    color: #ff6b79;
    border-color: rgba(240, 20, 39, .26);
    background: rgba(240, 20, 39, .07);
}

.sales-found-client__chip.is-next {
    color: #63dcb0;
    border-color: rgba(0, 194, 126, .24);
    background: rgba(0, 194, 126, .07);
}

.sales-found-client__vehicle > span {
    font-size: var(--ds-fs-secondary);
}

.sales-found-client__vehicle > strong {
    margin-top: 5px;
    font-size: 17px;
}

.client-card-stats--compact article span {
    font-size: var(--ds-fs-secondary);
}

.client-card-stats--compact article strong {
    font-size: 14px;
    line-height: 1.25;
}

.client-card-service-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.client-card-service-summary article {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 11px;
    background: rgba(5, 47, 25, 0.64);
}

.client-card-service-summary span,
.client-card-service-summary small {
    display: block;
    color: var(--text-soft);
}

.client-card-service-summary span {
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.client-card-service-summary strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.client-card-service-summary small {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ds-fs-secondary);
}

.client-card-history-section {
    min-height: 260px;
}

.client-history-row {
    grid-template-columns: minmax(82px, .72fr) minmax(110px, 1fr) minmax(125px, 1.05fr) minmax(105px, .9fr);
    gap: 10px;
}

.client-history-date strong,
.client-history-vehicle strong,
.client-history-composition strong,
.client-history-total {
    font-size: var(--ds-fs-secondary);
}

.client-history-date span,
.client-history-vehicle span,
.client-history-composition span {
    font-size: var(--ds-fs-secondary);
}

@media (max-width: 1200px) {
    .sales-found-client {
        grid-template-columns: minmax(280px, 1fr) minmax(190px, .72fr) 54px;
    }
}

@media (max-width: 800px) {
    .sales-found-client {
        grid-template-columns: 1fr 48px;
    }

    .sales-found-client__vehicle {
        grid-column: 1;
    }

    .sales-found-client__open {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .client-card-service-summary {
        grid-template-columns: 1fr;
    }
}

.sales-history-client-service-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.sales-history-client-service-summary article {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 10px;
    background: rgba(5, 47, 25, 0.62);
}

.sales-history-client-service-summary span,
.sales-history-client-service-summary small {
    display: block;
    color: var(--text-soft);
}

.sales-history-client-service-summary span {
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    text-transform: uppercase;
}

.sales-history-client-service-summary strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.sales-history-client-service-summary small {
    margin-top: 4px;
    font-size: var(--ds-fs-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   V4.3 — DENSE TOP AREA / LEGIBILITY / PROFILE SESSION
   ========================================================= */

/* Active sale starts immediately at the top of the working area. */
.sales-page.is-sale-open .sales-header {
    display: none !important;
}

.sales-page.is-sale-open {
    margin-top: -6px;
}

.sales-page.is-sale-open .sales-workspace__top {
    min-height: 58px;
    margin: 0 0 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(53, 235, 138, 0.2);
    border-radius: 13px;
    background:
        linear-gradient(100deg, rgba(8, 76, 40, 0.82), rgba(4, 37, 19, 0.56) 72%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.sales-page.is-sale-open .sales-workspace-title-block {
    min-width: 0;
}

.sales-page.is-sale-open .sales-workspace__top h2 {
    font-size: 20px;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.sales-page.is-sale-open .sales-workspace__top p {
    margin-top: 3px !important;
    margin-left: 0 !important;
    font-size: var(--ds-fs-secondary);
    line-height: 1.25;
}

.sales-page.is-sale-open .sales-workspace-back {
    height: 38px;
    padding: 0 13px;
    font-size: var(--ds-fs-secondary);
}

/* Make secondary labels readable on a desktop operator screen. */
.sales-selected-client span,
.sales-selected-client__meta span {
    font-size: var(--ds-fs-secondary) !important;
    line-height: 1.25;
}

.sales-selected-client strong {
    font-size: 15.5px !important;
    line-height: 1.2;
}

.sales-selected-client__meta strong {
    font-size: 14.5px !important;
}

.sales-selected-client small {
    font-size: var(--ds-fs-secondary) !important;
}

.sales-section-head h3,
.sales-checkout__head h3 {
    font-size: 14px !important;
    letter-spacing: .01em;
}

.sales-section-head p,
.sales-checkout__head p {
    font-size: var(--ds-fs-secondary) !important;
    line-height: 1.3;
}

.sales-services-table__head,
.sales-products-table__head {
    font-size: var(--ds-fs-secondary) !important;
}

.sales-service-row,
.sales-product-row--fast {
    font-size: var(--ds-fs-secondary);
}

.sales-services-total span,
.sales-products-total span,
.sales-checkout-row,
.sales-discount-controls span,
.sales-next-service-grid span,
.sales-technical-grid label > span {
    font-size: var(--ds-fs-secondary) !important;
}

.sales-services-total strong,
.sales-products-total strong,
.sales-checkout-row strong {
    font-size: 14px !important;
}

.sales-checkout-card h4 {
    font-size: var(--ds-fs-secondary) !important;
}

.sales-payment-methods button,
.sales-add-service-btn,
.sales-add-product-btn {
    font-size: var(--ds-fs-secondary) !important;
}

.sales-discount-controls input,
.sales-discount-controls select,
.sales-next-service-grid input,
.sales-technical-grid input,
.sales-note-field textarea {
    font-size: var(--ds-fs-secondary) !important;
}

/* Profile: logout is a separate session action, not a peer of Save. */
.profile-session-row {
    margin-top: 22px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(82, 180, 128, 0.16);
}

.profile-session-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-session-copy strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.profile-session-copy span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    line-height: 1.35;
}

.profile-session-row .profile-logout-button {
    flex: 0 0 auto;
    min-width: 128px;
}

@media (max-width: 760px) {
    .sales-page.is-sale-open {
        margin-top: 0;
    }

    .sales-page.is-sale-open .sales-workspace__top {
        align-items: flex-start;
        padding: 10px;
    }

    .profile-session-row {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-session-row .profile-logout-button {
        width: 100%;
    }
}

/* =========================================================
   V4.4 — DASHBOARD VISUAL SYSTEM FOR ALL MODULES
   The Dashboard is the visual reference: compact top context bar,
   dense spacing, readable typography, and consistent cards.
   ========================================================= */

@media (min-width: 901px) {
    /* Keep every module aligned to the same desktop canvas as Dashboard. */
    .main {
        padding: 10px 14px 16px !important;
    }

    .sales-page,
    .clients-page,
    .warehouse-page,
    .notifications-page,
    .profile-page {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    .warehouse-page {
        padding: 0 !important;
    }

    /* One header language everywhere: same shell as Dashboard topbar. */
    .sales-header,
    .clients-page__head,
    .warehouse-page__head {
        width: 100%;
        min-height: 62px;
        margin: 0 0 10px !important;
        padding: 11px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        border: 1px solid rgba(53, 235, 138, 0.18);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(7, 65, 34, 0.76), rgba(4, 37, 19, 0.58));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }

    /* Do not leave the active sale floating below an empty top band. */
    .sales-page.is-sale-open {
        margin-top: 0 !important;
    }

    .sales-page.is-sale-open .sales-header {
        display: flex !important;
    }

    .sales-header__title h1,
    .clients-page__head h1,
    .warehouse-page__title h1 {
        margin: 0 !important;
        font-size: 22px !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        letter-spacing: -.015em;
        color: var(--text);
    }

    .sales-header__title p,
    .clients-page__head p,
    .warehouse-page__title p {
        margin: 4px 0 0 !important;
        font-size: var(--ds-fs-secondary) !important;
        line-height: 1.3 !important;
        color: var(--text-soft);
    }

    .sales-heading-with-icon {
        gap: 9px !important;
    }

    .sales-heading-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }

    /* Compact tabs like Dashboard period controls, not a second hero banner. */
    .sales-tabs {
        width: min(760px, 100%) !important;
        margin: 8px auto 12px !important;
        border-radius: 11px !important;
    }

    .sales-tab {
        height: 40px !important;
        font-size: var(--ds-fs-secondary) !important;
    }

    .sales-tab svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Main sale selection starts immediately under the header. */
    .sales-start__head {
        margin-bottom: 10px !important;
    }

    .sales-start__head h2,
    .sales-history-head h2,
    .sales-analytics-head h2 {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .sales-start__head p,
    .sales-history-head p,
    .sales-analytics-head p {
        margin-top: 4px !important;
        font-size: var(--ds-fs-secondary) !important;
    }

    .sales-start__options {
        gap: 10px !important;
    }

    .sales-start-card {
        border-radius: 12px !important;
    }

    /* Active-sale context bar follows the same compact card geometry. */
    .sales-page.is-sale-open .sales-workspace__top {
        min-height: 54px !important;
        margin: 0 0 9px !important;
        padding: 8px 11px !important;
        border-radius: 11px !important;
    }

    .sales-page.is-sale-open .sales-workspace__top h2 {
        font-size: 17px !important;
    }

    .sales-page.is-sale-open .sales-workspace__top p {
        font-size: var(--ds-fs-secondary) !important;
    }

    /* Client browser: same dense visual rhythm as Dashboard cards. */
    .clients-toolbar {
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    .clients-search-field,
    .clients-refresh-btn {
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 9px !important;
    }

    .clients-search-field input,
    .clients-refresh-btn {
        font-size: var(--ds-fs-secondary) !important;
    }

    .clients-list-panel {
        border-radius: 12px !important;
    }

    .clients-list-head {
        min-height: 54px !important;
        padding: 10px 13px !important;
    }

    .clients-list-head h2 {
        font-size: 14.5px !important;
    }

    .clients-list-head p,
    .clients-list-head > span {
        font-size: var(--ds-fs-secondary) !important;
    }

    .client-list-row,
    .clients-list-row {
        min-height: 54px !important;
    }

    /* Right permanent customer card stays dense and readable. */
    .client-card {
        border-radius: 12px !important;
    }

    .client-card__top {
        padding-top: 12px !important;
    }

    .client-card__identity h2 {
        font-size: 18px !important;
    }

    .client-card__identity p,
    .client-card__identity > span {
        font-size: var(--ds-fs-secondary) !important;
    }

    .client-card-stats article span,
    .client-card-section__head p,
    .client-history-date span,
    .client-history-vehicle span,
    .client-history-composition span {
        font-size: var(--ds-fs-secondary) !important;
    }

    .client-card-stats article strong,
    .client-history-date strong,
    .client-history-vehicle strong,
    .client-history-composition strong,
    .client-history-total {
        font-size: var(--ds-fs-secondary) !important;
    }

    /* Warehouse header uses the same context bar; keep action on the right. */
    .warehouse-add-product-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 9px !important;
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-toolbar {
        margin-top: 0 !important;
        padding: 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .warehouse-search,
    .warehouse-filter select {
        min-height: 38px !important;
        height: 38px !important;
    }

    .warehouse-filter > span,
    .warehouse-products-table__head,
    .warehouse-product-row,
    .warehouse-muted {
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-summary {
        margin-top: 10px !important;
        gap: 9px !important;
    }

    .warehouse-summary-card {
        min-height: 92px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .warehouse-summary-card__content > span {
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-summary-card__content > strong {
        font-size: 18px !important;
    }

    .warehouse-summary-card__content > small {
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-insights {
        margin-top: 10px !important;
        padding: 13px !important;
        border-radius: 12px !important;
    }

    .warehouse-insights__head h2 {
        font-size: 14.5px !important;
    }

    .warehouse-insights__head p {
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-insights-grid {
        margin-top: 9px !important;
        gap: 8px !important;
    }

    .warehouse-insight-item {
        padding: 10px !important;
        border-radius: 9px !important;
    }

    .warehouse-insight-item strong {
        margin: 4px 0 !important;
        font-size: 14.5px !important;
    }

    .warehouse-insight-item span,
    .warehouse-insight-item small {
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-category-report {
        margin-top: 9px !important;
        padding-top: 9px !important;
    }

    .warehouse-category-report__list {
        gap: 4px !important;
    }

    .warehouse-category-report__row {
        min-height: 30px !important;
        padding: 0 9px !important;
        font-size: var(--ds-fs-secondary) !important;
    }

    .warehouse-products-panel {
        margin-top: 10px !important;
        border-radius: 12px !important;
    }

    .warehouse-products-head {
        min-height: 54px !important;
        padding: 10px 13px !important;
    }

    .warehouse-products-head h2 {
        font-size: 14.5px !important;
    }

    .warehouse-products-head p,
    .warehouse-products-count {
        font-size: var(--ds-fs-secondary) !important;
    }

    /* Notifications and profile also use the same compact card language. */
    .notifications-page {
        border-radius: 12px !important;
    }

    .notifications-page-placeholder {
        min-height: 220px !important;
    }

    .notifications-page-placeholder h2 {
        font-size: 18px !important;
    }

    .notifications-page-placeholder p {
        font-size: var(--ds-fs-secondary) !important;
    }

    .profile-layout,
    .profile-photo-card,
    .profile-form-card {
        border-radius: 12px !important;
    }

    /* Minimum readable operator typography across dense modules. */
    .sales-page button,
    .clients-page button,
    .warehouse-page button,
    .profile-page button {
        font-family: inherit;
    }
}

@media (max-width: 900px) {
    .main {
        padding: 12px !important;
    }

    .warehouse-page {
        padding: 0 !important;
    }

    .sales-header,
    .clients-page__head,
    .warehouse-page__head {
        margin-bottom: 10px !important;
        padding: 11px 12px !important;
        border: 1px solid rgba(53, 235, 138, 0.18);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(7, 65, 34, 0.76), rgba(4, 37, 19, 0.58));
    }
}

/* =========================================================
   MOYLI — UNIFIED PAGE SHELL / TOPBAR
   One geometry for Dashboard, Savdo, Mijozlar, Ombor,
   Notifications and Profile. This replaces temporary fixes.
   ========================================================= */

:root {
    --moyli-page-topbar-height: 56px;
    --moyli-page-topbar-radius: 11px;
    --moyli-page-topbar-gap: 10px;
}

/* Never allow a styled rule to revive an element hidden by the app. */
[hidden] {
    display: none !important;
}

/* Shared visual language for every visible page header. */
:is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #notificationsPage .notifications-page__head
) {
    width: 100% !important;
    height: var(--moyli-page-topbar-height) !important;
    min-height: var(--moyli-page-topbar-height) !important;
    max-height: var(--moyli-page-topbar-height) !important;
    margin: 0 0 var(--moyli-page-topbar-gap) !important;
    padding: 7px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--moyli-page-topbar-radius) !important;
    background: linear-gradient(
        180deg,
        rgba(6, 57, 30, 0.98),
        rgba(5, 45, 24, 0.98)
    ) !important;
}

:is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #notificationsPage .notifications-page__head
) h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text) !important;
    font-size: 18px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
}

:is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #notificationsPage .notifications-page__head
) p {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    color: var(--text-soft) !important;
    font-size: var(--ds-fs-secondary) !important;
    line-height: 1.35 !important;   /* was 14px for a 14.5px subtitle: the line was shorter than its letters */
    font-weight: 500 !important;
}

:is(
    .topbar-left,
    .sales-header__title,
    .clients-page__title,
    .warehouse-page__title,
    .notifications-page__title
) {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
}

:is(
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #notificationsPage .notifications-page__head
) :is(.page-title-icon, .sales-header__icon, .sales-heading-icon) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
}

/* Module pages own the full working canvas; dashboard rows must not reserve space. */
@media (min-width: 801px) {
    .main:has(#salesPage:not([hidden])),
    .main:has(#clientsPage:not([hidden])),
    .main:has(#warehousePage:not([hidden])),
    .main:has(#notificationsPage:not([hidden])) {
        grid-template-rows: minmax(0, 1fr) !important;
    }

    :is(
        #salesPage,
        #clientsPage,
        #warehousePage,
        #notificationsPage
    ):not([hidden]) {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Profile uses the shared global topbar and its content sits directly below it. */
    .main:has(#profilePage:not([hidden])) {
        grid-template-rows:
            var(--moyli-page-topbar-height)
            minmax(0, 1fr) !important;
    }

    .main:has(#profilePage:not([hidden])) > .topbar:not([hidden]) {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        margin: 0 0 var(--moyli-page-topbar-gap) !important;
    }

    #profilePage:not([hidden]) {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}

/* The profile title is supplied by the shared global topbar. */
#profilePage .profile-page-header {
    display: none !important;
}

/* Keep the client card pinned on wide screens without duplicating its layout rules. */
@media (min-width: 1180px) {
    body.client-card-list-open #clientCardPanel {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        height: auto !important;
        max-height: none !important;
        margin-top: 0 !important;
        overflow-y: auto !important;
    }
}

/* =========================================================
   KASSA V5.1
   ========================================================= */

#cashPage[hidden],
#cashOperationModal[hidden] {
    display: none !important;
}

.main:has(#cashPage:not([hidden])) {
    grid-template-rows: minmax(0, 1fr) !important;
}

#cashPage:not([hidden]) {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cash-page {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    color: var(--text);
}

.cash-page__head {
    width: 100%;
    height: var(--moyli-page-topbar-height, 56px);
    min-height: var(--moyli-page-topbar-height, 56px);
    max-height: var(--moyli-page-topbar-height, 56px);
    margin: 0 0 var(--moyli-page-topbar-gap, 10px);
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--moyli-page-topbar-radius, 11px);
    background: linear-gradient(180deg, rgba(6, 57, 30, 0.98), rgba(5, 45, 24, 0.98));
    box-sizing: border-box;
}

.cash-page__title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cash-page__title h1 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 20px;
    font-weight: 800;
}

.cash-page__title p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    line-height: 14px;
    font-weight: 500;
}

.cash-primary-btn,
.cash-refresh-btn,
.cash-modal-actions button {
    height: 38px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    padding: 0 14px;
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    color: var(--text);
    background: #06301a;
    cursor: pointer;
}

.cash-primary-btn,
.cash-modal-actions .is-primary {
    border-color: rgba(17, 167, 87, 0.72);
    background: linear-gradient(90deg,var(--moyli-primary),var(--moyli-primary));
    color: #fff;
}

.cash-toolbar {
    display: grid;
    grid-template-columns: 150px 150px 180px 175px minmax(220px, 1fr) auto;
    gap: 9px;
    align-items: end;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: rgba(4, 43, 22, 0.96);
}

.cash-filter,
.cash-search {
    min-width: 0;
}

.cash-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cash-filter > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.cash-filter input,
.cash-filter select,
.cash-search input,
.cash-form-grid input,
.cash-form-grid select,
.cash-form-grid textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    background: #042b16;
    outline: 0;
    font: inherit;
    font-size: var(--ds-fs-secondary);
}

.cash-filter input,
.cash-filter select,
.cash-search input,
.cash-form-grid input,
.cash-form-grid select {
    height: 38px;
    padding: 0 11px;
}

.cash-form-grid textarea {
    min-height: 84px;
    padding: 10px 11px;
    resize: vertical;
}

.cash-filter input:focus,
.cash-filter select:focus,
.cash-search input:focus,
.cash-form-grid input:focus,
.cash-form-grid select:focus,
.cash-form-grid textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(43, 234, 132, 0.08);
}

.cash-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #042b16;
    color: var(--text-soft);
}

.cash-search input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.cash-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.cash-summary-card {
    min-height: 100px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: linear-gradient(180deg,rgba(5, 52, 27, 0.98),rgba(3, 34, 17, 0.98));
}

.cash-summary-card > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.cash-summary-card > strong {
    color: #fff;
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
}

.cash-summary-card > small {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.cash-summary-card.is-income { border-color: rgba(24,204,131,.34); }
.cash-summary-card.is-expense { border-color: rgba(255,154,50,.34); }
.cash-summary-card.is-debt { border-color: rgba(240,20,39,.38); }

.cash-summary-card.is-income strong { color: var(--green); }
.cash-summary-card.is-expense strong { color: var(--orange); }
.cash-summary-card.is-debt strong { color: #ff4052; }
.cash-summary-card.is-cash strong { color: var(--blue-light); }

.cash-channels,
.cash-movements-panel {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(4, 43, 22, 0.96);
}

.cash-channels {
    margin-bottom: 10px;
    padding: 12px;
}

.cash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cash-section-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
}

.cash-section-head p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.cash-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.cash-channel-grid article {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 9px;
    background: rgba(4, 35, 18, 0.86);
}

.cash-channel-grid span {
    display: block;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.cash-channel-grid strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}

.cash-movements-panel {
    overflow: hidden;
}

.cash-movements-head {
    min-height: 58px;
    margin: 0;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.16);
}

.cash-movements-count {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.cash-movements-count strong {
    color: var(--blue-light);
}

.cash-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

/* Row width == sum of column minimums (+gaps, padding) so the last "Amal"
   column can never hang outside its row. Wider containers stretch via fr. */
.cash-table-head,
.cash-movement-row {
    min-width: 1170px;
    display: grid;
    grid-template-columns: 118px 140px minmax(170px,1.3fr) 125px 135px 135px minmax(150px,1fr) 96px;
    gap: 10px;
    align-items: center;
    padding: 0 13px;
}

/* The action column stays visible while the table scrolls sideways. */
.cash-table-head > :last-child,
.cash-movement-row > :last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cash-sticky-bg, #052f18);
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .35);
}

.cash-table-head {
    min-height: 40px;
    color: var(--text-soft);
    background: rgba(5, 53, 27, 0.72);
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.cash-movement-row {
    min-height: 56px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.11);
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.cash-movement-row:last-child { border-bottom: 0; }

.cash-movement-row .muted {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.cash-movement-type {
    font-weight: 800;
}

.cash-movement-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(43, 234, 132, 0.24);
    border-radius: 8px;
    color: #d3fbe6;
    background: rgba(43, 234, 132, 0.08);
    white-space: nowrap;
}

.cash-in {
    color: var(--green);
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.cash-out {
    color: #ff6c79;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.cash-note {
    color: var(--text-soft);
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.cash-movement-row > div { min-width: 0; overflow-wrap: anywhere; }
.cash-movement-row > .cash-in,
.cash-movement-row > .cash-out { overflow-wrap: normal; }

.cash-empty {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text-soft);
}

.cash-empty strong { color: var(--text); }
.cash-empty span { font-size: var(--ds-fs-secondary); }

.cash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(1, 15, 8, 0.76);
    backdrop-filter: blur(5px);
}

.cash-modal {
    width: min(720px, calc((100vw / var(--ds-zoom, 1)) - 36px));
    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 36px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(47, 224, 130, 0.38);
    border-radius: 15px;
    background: linear-gradient(180deg,#07351c,#042513);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.cash-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.cash-modal__head h2 {
    margin: 0;
    color: #fff;
    font-size: 21px;
}

.cash-modal__head p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.cash-modal__head > button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    background: #06301a;
    cursor: pointer;
    font-size: 21px;
}

.cash-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cash-form-grid label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cash-form-grid label > span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.cash-form-note {
    grid-column: 1 / -1;
}

.cash-modal-message {
    min-height: 20px;
    margin-top: 10px;
    color: #ff6c79;
    font-size: var(--ds-fs-secondary);
}

.cash-modal-message.success {
    color: var(--green);
}

.cash-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 4px;
}

@media (max-width: 1350px) {
    .cash-toolbar {
        grid-template-columns: repeat(4, minmax(140px, 1fr));
    }

    .cash-search {
        grid-column: 1 / span 3;
    }

    .cash-refresh-btn {
        grid-column: 4;
    }
}

@media (max-width: 900px) {
    .cash-page {
        overflow-y: visible;
    }

    .cash-toolbar,
    .cash-summary,
    .cash-channel-grid,
    .cash-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cash-search,
    .cash-refresh-btn,
    .cash-form-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .cash-page__head {
        height: auto;
        max-height: none;
        min-height: 56px;
    }

    .cash-toolbar,
    .cash-summary,
    .cash-channel-grid,
    .cash-form-grid {
        grid-template-columns: 1fr;
    }

    .cash-search,
    .cash-refresh-btn,
    .cash-form-note {
        grid-column: 1;
    }

    .cash-primary-btn {
        padding: 0 10px;
    }
}

/* =========================================================
   HISOBOTLAR / REPORTS V6.1
   ========================================================= */

#reportsPage[hidden],
#reportsDetailDrawer[hidden],
#reportsDetailBackdrop[hidden] {
    display: none !important;
}

.reports-page {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: var(--text);
}

.reports-page__head {
    width: 100%;
    min-height: 56px;
    margin: 0 0 10px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(6, 57, 30, 0.98), rgba(5, 45, 24, 0.98));
}

.reports-page__title h1,
.reports-section-head h2 {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.reports-page__title h1 { font-size: 18px; line-height: 20px; }
.reports-page__title p,
.reports-section-head p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    line-height: 1.35;
}

.reports-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-secondary-btn,
.reports-primary-btn,
.reports-quick-range button {
    min-height: 38px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.reports-secondary-btn { padding: 0 15px; }
.reports-primary-btn {
    padding: 0 18px;
    border-color: rgba(17, 167, 87, 0.55);
    background: var(--moyli-primary);
    color: #fff;
}

.reports-toolbar {
    display: grid;
    grid-template-columns: 170px 170px minmax(310px, 1fr) 120px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: rgba(5, 45, 24, 0.84);
}

.reports-filter {
    display: grid;
    gap: 6px;
}

.reports-filter span {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    text-transform: uppercase;
}

.reports-filter input,
.reports-search-wrap input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #042d17;
    color: var(--text);
    padding: 0 11px;
    outline: none;
}

.reports-filter input:focus,
.reports-search-wrap input:focus {
    border-color: #30ea87;
}

.reports-quick-range {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 6px;
}

.reports-quick-range button.active,
.reports-quick-range button:hover,
.reports-secondary-btn:hover {
    border-color: #2bea84;
    background: #084725;
    color: #fff;
}

.reports-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.reports-kpi {
    min-width: 0;
    min-height: 100px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(6, 57, 30, 0.96), rgba(5, 45, 24, 0.96));
    color: var(--text);
    cursor: pointer;
}

.reports-kpi:hover { transform: translateY(-1px); border-color: #2bea84; }
.reports-kpi span { color: var(--text-soft); font-size: var(--ds-fs-secondary); font-weight: 700; }
.reports-kpi strong { font-size: 19px; line-height: 1.15; font-weight: 900; }
.reports-kpi small { color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.reports-kpi.is-primary strong { color: #3dec8f; }
.reports-kpi.is-success strong { color: #00d890; }
.reports-kpi.is-danger strong { color: #ff4052; }
.reports-kpi.is-warning strong { color: #f5a623; }

.reports-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, .8fr);
    gap: 10px;
    margin-bottom: 10px;
}

.reports-rank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.reports-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: rgba(5, 45, 24, 0.9);
}

.reports-section-head {
    min-height: 58px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}

.reports-section-head h2 { font-size: 15px; }
.reports-section-head > strong { color: #3dec8f; font-size: var(--ds-fs-secondary); }

.reports-chart {
    height: 250px;
    padding: 14px 12px 10px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    box-sizing: border-box;
    background-image:
        linear-gradient(rgba(65, 155, 107, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 155, 107, 0.05) 1px, transparent 1px);
    background-size: 100% 52px, 64px 100%;
}

.reports-chart-day {
    flex: 1 0 34px;
    min-width: 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}

.reports-chart-day__value {
    font-size: var(--ds-fs-secondary);
    white-space: nowrap;
    color: #6ff1ac;
}

.reports-chart-day__bar {
    width: 70%;
    min-height: 3px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, #3dec8f, #12b15c);
    box-shadow: 0 0 15px rgba(48, 234, 135, 0.18);
}

.reports-chart-day:hover .reports-chart-day__bar { filter: brightness(1.2); }
.reports-chart-day__label { font-size: var(--ds-fs-secondary); white-space: nowrap; }

.reports-payment-list,
.reports-ranking-list {
    padding: 8px 12px 12px;
}

.reports-payment-row,
.reports-ranking-row {
    min-height: 44px;
    display: grid;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.11);
}

.reports-payment-row {
    grid-template-columns: 110px minmax(80px, 1fr) auto;
}

.reports-ranking-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
}

.reports-payment-row:last-child,
.reports-ranking-row:last-child { border-bottom: 0; }
.reports-payment-row span,
.reports-ranking-row span { color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.reports-payment-row strong,
.reports-ranking-row strong { font-size: var(--ds-fs-secondary); white-space: nowrap; }
.reports-ranking-row b { color: #3dec8f; font-size: var(--ds-fs-secondary); }
.reports-ranking-row__name { min-width: 0; }
.reports-ranking-row__name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reports-sales-panel { margin-bottom: 16px; }
.reports-sales-head { align-items: center; }
.reports-search-wrap {
    width: min(420px, 48vw);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
.reports-search-wrap strong { min-width: 26px; color: #3dec8f; text-align: right; }

.reports-table-wrap { overflow-x: auto; }
.reports-table-head,
.reports-table-row {
    min-width: 980px;
    display: grid;
    grid-template-columns: 130px minmax(250px, 1.35fr) 125px 125px 115px 115px 135px;
    gap: 10px;
    align-items: center;
    padding: 0 14px;
}
.reports-table-head {
    min-height: 40px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}
.reports-table-row {
    min-height: 58px;
    font-size: var(--ds-fs-secondary);
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}
.reports-table-row:last-child { border-bottom: 0; }
.reports-table-row strong { font-size: var(--ds-fs-secondary); }
.reports-table-row small { display: block; margin-top: 2px; color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.reports-table-money { text-align: right; white-space: nowrap; }
.reports-table-money.is-danger { color: #ff4052; }
.reports-table-money.is-warning { color: #f5a623; }
.reports-empty { padding: 32px 14px; text-align: center; color: var(--text-soft); }

.reports-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3290;
    background: rgba(2, 16, 9, 0.58);
    backdrop-filter: blur(2px);
}
.reports-detail-drawer {
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3300;
    width: min(520px, calc((100vw / var(--ds-zoom, 1)) - 28px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #158b4c;
    border-radius: 16px;
    background: #042d17;
    box-shadow: -20px 0 50px rgba(0,0,0,.32);
}
.reports-detail-head {
    min-height: 70px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.16);
}
.reports-detail-head span { color: #3dec8f; font-size: var(--ds-fs-secondary); font-weight: 900; letter-spacing: .12em; }
.reports-detail-head h2 { margin: 3px 0 0; font-size: 20px; }
.reports-detail-head button {
    width: 36px; height: 36px; border-radius: 9px;
    border: 1px solid var(--border-soft); background: #06301a; color: #fff;
    font-size: 22px; cursor: pointer;
}
.reports-detail-summary {
    padding: 12px 16px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}
.reports-detail-list { padding: 0 16px 16px; overflow-y: auto; }
.reports-detail-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.11);
}
.reports-detail-row strong { font-size: var(--ds-fs-secondary); }
.reports-detail-row small { color: var(--text-soft); font-size: var(--ds-fs-secondary); }
.reports-detail-row > b { white-space: nowrap; font-size: var(--ds-fs-secondary); }

@media (max-width: 1250px) {
    .reports-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reports-rank-grid { grid-template-columns: 1fr; }
    .reports-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .reports-toolbar { grid-template-columns: 1fr 1fr; }
    .reports-quick-range { grid-column: 1 / -1; }
    .reports-primary-btn { grid-column: 1 / -1; }
    .reports-summary-grid { grid-template-columns: 1fr; }
    .reports-page__head { align-items: flex-start; }
    .reports-search-wrap { width: 100%; }
}

@media print {
    body.reports-print-mode .sidebar,
    body.reports-print-mode .topbar,
    body.reports-print-mode .reports-toolbar,
    body.reports-print-mode .reports-head-actions,
    body.reports-print-mode .reports-detail-backdrop,
    body.reports-print-mode .reports-detail-drawer {
        display: none !important;
    }
    body.reports-print-mode .mainApp,
    body.reports-print-mode .main,
    body.reports-print-mode #reportsPage {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        color: #111 !important;
    }
    body.reports-print-mode #reportsPage * {
        color: #111 !important;
        box-shadow: none !important;
    }
    body.reports-print-mode .reports-panel,
    body.reports-print-mode .reports-kpi,
    body.reports-print-mode .reports-page__head {
        background: #fff !important;
        border-color: #aaa !important;
    }
}

/* REPORTS — use the same single-row module canvas as Kassa */
.main:has(#reportsPage:not([hidden])) {
    grid-template-rows: minmax(0, 1fr) !important;
}

#reportsPage:not([hidden]) {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* =========================================================
   DASHBOARD V6.2 — TODAY / CONTROL CENTER
   Main page = what is happening now + what needs attention.
   Deep analysis stays in Hisobotlar.
   ========================================================= */

.dashboard-grid.dashboard-v62 {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-v62__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-v62-kpi {
    min-width: 0;
    min-height: 108px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(26, 210, 112, 0.32);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-blue);
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.dashboard-v62-kpi:hover {
    border-color: rgba(43, 234, 132, 0.62);
    background: linear-gradient(180deg, rgba(7, 62, 33, 0.98), rgba(4, 38, 20, 0.98));
    transform: translateY(-1px);
}

.dashboard-v62-kpi__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(43, 234, 132, 0.3);
    border-radius: 12px;
    background: rgba(43, 234, 132, 0.09);
    color: #76f1af;
}

.dashboard-v62-kpi__icon.is-green {
    border-color: rgba(0, 194, 126, .30);
    background: rgba(0, 194, 126, .08);
    color: #27dda1;
}

.dashboard-v62-kpi__icon.is-danger {
    border-color: rgba(240, 20, 39, .30);
    background: rgba(240, 20, 39, .08);
    color: #ff5c6d;
}

.dashboard-v62-kpi__icon.is-violet {
    border-color: rgba(126, 242, 180, 0.3);
    background: rgba(126, 242, 180, 0.08);
    color: #96f5c2;
}

.dashboard-v62-kpi__icon svg,
.dashboard-v62-actions__buttons svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-v62-kpi__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-v62-kpi__copy small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
}

.dashboard-v62-kpi__copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.dashboard-v62-kpi__copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    font-style: normal;
    font-weight: 650;
}

.dashboard-v62__control-row {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    gap: 10px;
}

.dashboard-v62-actions,
.dashboard-v62-payments,
.dashboard-v62-panel {
    min-width: 0;
    border: 1px solid rgba(26, 210, 112, 0.28);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
    box-shadow: var(--shadow-blue);
}

.dashboard-v62-actions,
.dashboard-v62-payments {
    padding: 12px;
}

.dashboard-v62-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.dashboard-v62-section-title strong {
    color: #fff;
    font-size: 14px;
}

.dashboard-v62-section-title span {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-actions__buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-v62-actions__buttons button {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 10px;
    background: rgba(4, 43, 22, 0.64);
    color: #dffced;
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.dashboard-v62-actions__buttons button:hover {
    border-color: rgba(43, 234, 132, 0.48);
    background: rgba(43, 234, 132, 0.1);
    color: #fff;
}

.dashboard-v62-actions__buttons button:first-child {
    border-color: rgba(17, 167, 87, 0.36);
    background: rgba(17, 167, 87, 0.08);
    color: #ff7b88;
}

.dashboard-v62-payments__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-v62-payments__grid > div {
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 9px;
    background: rgba(4, 43, 22, 0.58);
}

.dashboard-v62-payments__grid span {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-payments__grid strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.dashboard-lower.dashboard-v62-lower {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    grid-template-rows: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 10px;
    margin-top: 0;
}

.dashboard-v62-panel {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-v62-panel__head {
    min-height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}

.dashboard-v62-panel__head h2 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.dashboard-v62-panel__head p {
    margin: 3px 0 0;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-panel__head button {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(82, 180, 128, 0.18);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 750;
    cursor: pointer;
}

.dashboard-v62-panel__head button:hover {
    border-color: var(--blue);
    color: #fff;
}

.dashboard-v62-badge {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border: 1px solid rgba(245, 166, 35, .28);
    border-radius: 999px;
    background: rgba(245, 166, 35, .08);
    color: #ffc05a;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
}

.dashboard-v62-chart {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    align-items: end;
    gap: 6px;
    padding: 10px 12px 8px;
    overflow-x: auto;
}

.dashboard-v62-chart__day {
    min-width: 44px;
    height: 100%;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 3px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.dashboard-v62-chart__day:hover {
    background: rgba(43, 234, 132, 0.06);
}

.dashboard-v62-chart__value {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 750;
    white-space: nowrap;
}

.dashboard-v62-chart__bar-wrap {
    width: min(34px, 76%);
    height: 64px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 6px 6px 3px 3px;
    background: rgba(43, 234, 132, 0.05);
}

.dashboard-v62-chart__bar {
    width: 100%;
    min-height: 2px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #46ed94, #13c164);
    box-shadow: 0 0 12px rgba(43, 234, 132, 0.14);
}

.dashboard-v62-chart__label {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    white-space: nowrap;
}

.dashboard-v62-attention__list,
.dashboard-v62-recent__list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
}

.dashboard-v62-attention-item {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.dashboard-v62-attention-item:hover {
    border-color: rgba(43, 234, 132, 0.2);
    background: rgba(43, 234, 132, 0.05);
}

.dashboard-v62-attention-item__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(245, 166, 35, .08);
    color: #ffc05a;
    font-size: 14px;
    font-weight: 900;
}

.dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon {
    background: rgba(240, 20, 39, .08);
    color: #ff6674;
}

.dashboard-v62-attention-item__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-v62-attention-item__copy strong,
.dashboard-v62-attention-item__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-v62-attention-item__copy strong {
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-attention-item__copy span,
.dashboard-v62-attention-item > em {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    font-style: normal;
}

.dashboard-v62-recent {
    grid-column: 1 / -1;
}

.dashboard-v62-recent__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
}

.dashboard-v62-operation {
    min-width: 0;
    min-height: 45px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid rgba(82, 180, 128, 0.1);
    border-radius: 9px;
    background: rgba(4, 43, 22, 0.44);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.dashboard-v62-operation:hover {
    border-color: rgba(43, 234, 132, 0.26);
    background: rgba(43, 234, 132, 0.05);
}

.dashboard-v62-operation__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(0, 194, 126, .08);
    color: #24dca0;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
}

.dashboard-v62-operation.is-out .dashboard-v62-operation__icon {
    background: rgba(240, 20, 39, .08);
    color: #ff6674;
}

.dashboard-v62-operation__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-v62-operation__copy strong,
.dashboard-v62-operation__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-v62-operation__copy strong {
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-operation__copy span {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-operation__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.dashboard-v62-operation__amount strong {
    color: #24dca0;
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-operation.is-out .dashboard-v62-operation__amount strong {
    color: #ff6674;
}

.dashboard-v62-operation__amount span {
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
}

.dashboard-v62-empty {
    min-height: 54px;
    display: grid;
    place-items: center;
    padding: 10px;
    color: var(--text-dim);
    font-size: var(--ds-fs-secondary);
    text-align: center;
}

@media (max-width: 1250px) {
    .dashboard-v62__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-v62__control-row {
        grid-template-columns: 1fr;
    }

    .dashboard-v62-actions__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .dashboard-grid.dashboard-v62,
    .dashboard-lower.dashboard-v62-lower {
        height: auto;
    }

    .dashboard-v62__kpis,
    .dashboard-v62__control-row,
    .dashboard-lower.dashboard-v62-lower,
    .dashboard-v62-recent__list {
        grid-template-columns: 1fr;
    }

    .dashboard-lower.dashboard-v62-lower {
        grid-template-rows: auto;
    }

    .dashboard-v62-recent {
        grid-column: auto;
    }

    .dashboard-v62-chart {
        min-height: 180px;
    }
}

@media (max-width: 520px) {
    .dashboard-v62-actions__buttons,
    .dashboard-v62-payments__grid {
        grid-template-columns: 1fr;
    }

    .dashboard-v62-kpi {
        min-height: 92px;
    }
}


/* =========================================================
   DASHBOARD V6.2 — FINAL HEIGHT BALANCE
   Compact control row. The dashboard is taller than one viewport (7-day chart),
   so its rows take natural content height and the workspace scrolls; a fixed
   viewport-height grid squeezed the chart card to ~0 and let the bars spill
   over the panels below.
   ========================================================= */

@media (min-width: 801px) {
    .main:has(.dashboard-v62:not([hidden])) {
        height: auto;
        min-height: calc(100vh / var(--ds-zoom, 1));
        grid-template-rows: 56px auto auto !important;
        align-content: start;
        overflow: visible;
    }

    .dashboard-grid.dashboard-v62 {
        height: auto !important;
        min-height: 0 !important;
    }

    .dashboard-v62__control-row {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .dashboard-v62-actions,
    .dashboard-v62-payments {
        height: auto !important;
        min-height: 124px !important;
        overflow: visible !important;
    }

    .dashboard-v62-payments__grid > div {
        min-height: 39px !important;
        overflow: visible !important;
    }

    .dashboard-lower.dashboard-v62-lower {
        height: auto !important;
        min-height: 0 !important;
        grid-template-rows: auto auto !important;
        gap: 14px !important;
    }
}

/* =========================================================
   BILDIRISHNOMALAR / SMS CENTER V7.1
   ========================================================= */

.notifications-v71 {
    color: var(--text);
}

.notifications-v71__head-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.notifications-v71__refresh,
.notifications-v71__secondary {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #06301a;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.notifications-v71__refresh {
    border-color: rgba(17, 167, 87, 0.52);
    background: rgba(17, 167, 87, 0.1);
}

.notifications-v71__refresh:hover,
.notifications-v71__secondary:hover {
    border-color: var(--blue);
}

.notifications-v71__provider {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 7px 12px;
    border: 1px solid rgba(82, 180, 128, 0.16);
    border-radius: 11px;
    background: rgba(4, 43, 22, 0.72);
}

.notifications-v71__provider-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #f5a623;
    box-shadow: 0 0 10px rgba(245, 166, 35, .35);
}

.notifications-v71__provider.is-connected .notifications-v71__provider-dot {
    background: #00d890;
    box-shadow: 0 0 10px rgba(0, 216, 144, .35);
}

.notifications-v71__provider.is-offline .notifications-v71__provider-dot {
    background: #ff4052;
    box-shadow: 0 0 10px rgba(255, 64, 82, .35);
}

.notifications-v71__provider > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notifications-v71__provider strong {
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__provider small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}

.notifications-v71__summary-card {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(43, 234, 132, 0.28);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(7, 67, 35, 0.88), rgba(4, 41, 21, 0.88));
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.notifications-v71__summary-card:hover {
    border-color: rgba(43, 234, 132, 0.6);
}

.notifications-v71__summary-card > span,
.notifications-v71__summary-card > small {
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__summary-card > strong {
    color: #fff;
    font-size: 21px;
    line-height: 1;
}

.notifications-v71__summary-card.is-success {
    border-color: rgba(0, 194, 126, .26);
}

.notifications-v71__summary-card.is-danger {
    border-color: rgba(240, 20, 39, .30);
}

.notifications-v71__summary-card.is-warning {
    border-color: rgba(245, 166, 35, .30);
}

.notifications-v71__toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 180px 190px;
    gap: 8px;
    margin-bottom: 8px;
}

.notifications-v71__search {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: #042513;
}

.notifications-v71__search > span {
    color: var(--text-soft);
    font-size: 18px;
}

.notifications-v71__search input,
.notifications-v71__toolbar select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    outline: 0;
    background: #042513;
    color: var(--text);
    font: inherit;
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__search input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.notifications-v71__toolbar select {
    padding: 0 10px;
}

.notifications-v71__message {
    min-height: 18px;
    margin: 0 2px 6px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__message.is-error {
    color: #ff6674;
}

.notifications-v71__message.is-success {
    color: #00d890;
}

.notifications-v71__workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 10px;
}

.notifications-v71__panel {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(5, 50, 26, 0.96), rgba(3, 35, 18, 0.96));
    overflow: hidden;
}

.notifications-v71__panel-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.14);
}

.notifications-v71__panel-head h2 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.notifications-v71__panel-head p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__panel-head > strong {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: #d3fbe6;
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__list,
.notifications-v71__reminder-list {
    min-height: 130px;
    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 390px);
    overflow-y: auto;
    padding: 7px;
}

.notifications-v71__row {
    min-height: 78px;
    display: grid;
    grid-template-columns: 38px minmax(170px, .75fr) minmax(240px, 1.35fr) 116px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}

.notifications-v71__row:last-child {
    border-bottom: 0;
}

.notifications-v71__status-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(43, 234, 132, 0.24);
    border-radius: 9px;
    background: rgba(43, 234, 132, 0.07);
    color: #98f5c3;
    font-size: 14px;
    font-weight: 900;
}

.notifications-v71__row.is-sent .notifications-v71__status-icon {
    border-color: rgba(0, 194, 126, .28);
    background: rgba(0, 194, 126, .08);
    color: #00d890;
}

.notifications-v71__row.is-failed .notifications-v71__status-icon {
    border-color: rgba(240, 20, 39, .30);
    background: rgba(240, 20, 39, .08);
    color: #ff6674;
}

.notifications-v71__identity,
.notifications-v71__copy,
.notifications-v71__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notifications-v71__identity strong,
.notifications-v71__copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__identity span,
.notifications-v71__copy span,
.notifications-v71__meta span,
.notifications-v71__meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__kind {
    width: fit-content;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(43, 234, 132, 0.07);
    color: #9bf1c3 !important;
}

.notifications-v71__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.notifications-v71__actions button {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.notifications-v71__actions button:hover {
    border-color: var(--blue);
    color: #fff;
}

.notifications-v71__actions button.is-primary {
    border-color: rgba(17, 167, 87, 0.42);
    background: rgba(17, 167, 87, 0.1);
    color: #ff7a87;
}

.notifications-v71__reminder-row {
    min-height: 70px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(82, 180, 128, 0.1);
}

.notifications-v71__reminder-row:last-child {
    border-bottom: 0;
}

.notifications-v71__reminder-date {
    width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245, 166, 35, .28);
    border-radius: 9px;
    background: rgba(245, 166, 35, .07);
    color: #ffc05a;
}

.notifications-v71__reminder-date strong {
    font-size: 14px;
    line-height: 1;
}

.notifications-v71__reminder-date span {
    margin-top: 3px;
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__reminder-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notifications-v71__reminder-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__reminder-copy span,
.notifications-v71__reminder-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
}

.notifications-v71__empty {
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 16px;
    color: var(--text-soft);
    font-size: var(--ds-fs-secondary);
    text-align: center;
}

@media (min-width: 801px) {
    .notifications-v71 {
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    .notifications-v71__workspace {
        flex: 1;
    }

    .notifications-v71__panel {
        display: flex;
        flex-direction: column;
    }

    .notifications-v71__list,
    .notifications-v71__reminder-list {
        flex: 1;
        max-height: none;
    }
}

@media (max-width: 1000px) {
    .notifications-v71__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notifications-v71__workspace {
        grid-template-columns: 1fr;
    }

    .notifications-v71__list,
    .notifications-v71__reminder-list {
        max-height: none;
    }

    .notifications-v71__row {
        grid-template-columns: 36px minmax(150px, .8fr) minmax(220px, 1.2fr) auto;
    }

    .notifications-v71__meta {
        display: none;
    }
}

@media (max-width: 700px) {
    .notifications-page__head {
        height: auto !important;
        max-height: none !important;
        min-height: 56px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .notifications-v71__head-actions {
        width: 100%;
    }

    .notifications-v71__head-actions button {
        flex: 1;
    }

    .notifications-v71__summary {
        grid-template-columns: 1fr 1fr;
    }

    .notifications-v71__toolbar {
        grid-template-columns: 1fr;
    }

    .notifications-v71__row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: start;
    }

    .notifications-v71__copy {
        grid-column: 2 / -1;
    }

    .notifications-v71__actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

/* =========================================================
   SOZLAMALAR V9.0 — SMS / REMINDERS / APPEARANCE
   ========================================================= */

.moyli-background-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #02160b;
}
.moyli-background-layer > img,
.moyli-background-layer > video {
    position: absolute;
    inset: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    filter: blur(var(--moyli-bg-blur, 0px));
}
.moyli-background-layer > span {
    position: absolute;
    inset: 0;
    background: rgba(1, 7, 16, var(--moyli-bg-dim, .65));
}
body > .auth-screen,
body > .app {
    position: relative;
    z-index: 1;
}
body.moyli-theme-photo .app,
body.moyli-theme-video .app {
    background: transparent !important;
}
body.moyli-theme-photo .main,
body.moyli-theme-video .main {
    background: linear-gradient(135deg, rgba(2, 22, 11, 0.56), rgba(3, 33, 17, 0.46)) !important;
}
body.moyli-theme-photo .sidebar,
body.moyli-theme-video .sidebar {
    backdrop-filter: blur(18px);
    background: rgba(2, 21, 11, 0.88) !important;
}
body.moyli-theme-light .moyli-background-layer {
    background: #eaf5ef;
}
body.moyli-theme-light .app {
    background: linear-gradient(135deg, #eef8f3, #e4f4eb 58%, #edf7f2) !important;
}
body.moyli-theme-light .main {
    color: #103823;
}
body.moyli-theme-light .topbar h1,
body.moyli-theme-light .topbar p {
    color: #103823;
}
body.moyli-theme-light .settings-v90__card,
body.moyli-theme-light .settings-v90__provider,
body.moyli-theme-light .settings-v90__actions {
    background: rgba(255,255,255,.93) !important;
    border-color: rgba(42, 135, 85, 0.18) !important;
    box-shadow: 0 18px 42px rgba(30, 83, 55, 0.08) !important;
}
body.moyli-theme-light .settings-v90__card h2,
body.moyli-theme-light .settings-v90__toggle-row strong,
body.moyli-theme-light .settings-v90__field-title strong,
body.moyli-theme-light .settings-v90__templates summary,
body.moyli-theme-light .settings-v90__range-row strong,
body.moyli-theme-light .settings-v90__head h1 {
    color: #103823 !important;
}
body.moyli-theme-light .settings-v90__card p,
body.moyli-theme-light .settings-v90__toggle-row small,
body.moyli-theme-light .settings-v90__field-title small,
body.moyli-theme-light .settings-v90__range-row small,
body.moyli-theme-light .settings-v90__head p,
body.moyli-theme-light .settings-v90__hint {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light .settings-v90__toggle-row,
body.moyli-theme-light .settings-v90__field-block,
body.moyli-theme-light .settings-v90__templates,
body.moyli-theme-light .settings-v90__range-row,
body.moyli-theme-light .settings-v90__appearance-preview {
    background: #f7fcf9 !important;
    border-color: rgba(42, 135, 85, 0.13) !important;
}

.settings-page.settings-v90 {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    color: #f7fefa;
}
.settings-v90__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.settings-v90__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #5aefa0;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    letter-spacing: .16em;
}
.settings-v90__head h1 {
    margin: 0;
    font-size: clamp(27px, 2.4vw, 38px);
    line-height: 1.05;
}
.settings-v90__head p {
    margin: 7px 0 0;
    color: #91bda6;
    font-size: 14px;
}
.settings-v90__save-state {
    min-width: 190px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    color: #a9d2bc;
    font-size: var(--ds-fs-secondary);
}
.settings-v90__save-state > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #33d17a;
    box-shadow: 0 0 0 5px rgba(51,209,122,.08);
}
.settings-v90__save-state.is-dirty > span { background: #ffb33d; box-shadow: 0 0 0 5px rgba(255,179,61,.09); }
.settings-v90__save-state.is-error > span { background: #ff4057; box-shadow: 0 0 0 5px rgba(255,64,87,.09); }

.settings-v90__provider {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 13px 17px;
    border: 1px solid rgba(39, 234, 130, 0.24);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 56, 29, 0.92), rgba(4, 36, 19, 0.96));
}
.settings-v90__provider-dot {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 50%;
    background: #ffb33d;
    box-shadow: 0 0 0 6px rgba(255,179,61,.08);
}
.settings-v90__provider.is-online .settings-v90__provider-dot { background: #33d17a; box-shadow: 0 0 0 6px rgba(51,209,122,.08); }
.settings-v90__provider.is-offline .settings-v90__provider-dot { background: #ff4057; box-shadow: 0 0 0 6px rgba(255,64,87,.08); }
.settings-v90__provider strong { display: block; color: #ecfdf4; font-size: 14px; }
.settings-v90__provider small { display: block; margin-top: 4px; color: #79ab90; font-size: var(--ds-fs-secondary); }

.settings-v90__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr);
    gap: 16px;
    align-items: start;
}
.settings-v90__card {
    min-width: 0;
    border: 1px solid rgba(39, 221, 124, 0.18);
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(150deg, rgba(5, 52, 27, 0.96), rgba(3, 33, 17, 0.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.settings-v90__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(92, 188, 137, 0.13);
}
.settings-v90__card-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(70, 237, 148, 0.28);
    border-radius: 12px;
    background: rgba(21, 211, 110, 0.1);
}
.settings-v90__card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #54ee9c;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.settings-v90__card-head h2 { margin: 0; font-size: 18px; }
.settings-v90__card-head p { margin: 5px 0 0; color: #7eae94; font-size: var(--ds-fs-secondary); }

.settings-v90__toggles { display: grid; gap: 9px; margin-top: 15px; }
.settings-v90__toggle-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 44px;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(80, 181, 127, 0.13);
    border-radius: 12px;
    background: rgba(4, 43, 22, 0.72);
    cursor: pointer;
}
.settings-v90__toggle-row > div { min-width: 0; }
.settings-v90__toggle-row strong { display: block; color: #effdf6; font-size: 14px; }
.settings-v90__toggle-row small { display: block; margin-top: 4px; color: #78a98f; font-size: var(--ds-fs-secondary); line-height: 1.35; }
.settings-v90__toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.settings-v90__switch {
    width: 42px;
    height: 23px;
    justify-self: end;
    position: relative;
    border-radius: 999px;
    background: #244b36;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    transition: .2s ease;
}
.settings-v90__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #8bb39e;
    transition: .2s ease;
}
.settings-v90__toggle-row input:checked + .settings-v90__switch { background: rgba(36, 233, 128, 0.86); }
.settings-v90__toggle-row input:checked + .settings-v90__switch::after { left: 22px; background: white; }

.settings-v90__field-block,
.settings-v90__templates,
.settings-v90__range-row,
.settings-v90__appearance-preview {
    margin-top: 12px;
    border: 1px solid rgba(80, 181, 127, 0.13);
    border-radius: 12px;
    background: rgba(4, 43, 22, 0.58);
}
.settings-v90__field-block { padding: 14px; }
.settings-v90__field-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.settings-v90__field-title strong { display: block; font-size: var(--ds-fs-secondary); }
.settings-v90__field-title small { display: block; margin-top: 3px; color: #76a68c; font-size: var(--ds-fs-secondary); }
.settings-v90__field-title > span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 8px;
    color: #59ef9f;
    background: rgba(47, 234, 134, 0.09);
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}
.settings-v90__offsets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.settings-v90__offsets label { cursor: pointer; }
.settings-v90__offsets input { position: absolute; opacity: 0; }
.settings-v90__offsets span {
    display: block;
    padding: 8px 11px;
    border: 1px solid rgba(103, 189, 143, 0.17);
    border-radius: 9px;
    color: #95c0a9;
    background: rgba(2, 25, 13, 0.54);
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
    transition: .18s ease;
}
.settings-v90__offsets input:checked + span {
    color: #ecfdf4;
    border-color: rgba(78, 238, 153, 0.52);
    background: rgba(21, 217, 112, 0.23);
}
.settings-v90__hint { margin: 10px 0 0; color: #619378; font-size: var(--ds-fs-secondary); line-height: 1.45; }

.settings-v90__templates { padding: 0 14px 13px; }
.settings-v90__templates summary {
    padding: 13px 0;
    color: #d8f5e6;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}
.settings-v90__templates label { display: block; margin-top: 9px; }
.settings-v90__templates label > span { display: block; margin-bottom: 6px; color: #80af96; font-size: var(--ds-fs-secondary); font-weight: 700; }
.settings-v90__templates textarea {
    width: 100%;
    resize: vertical;
    min-height: 78px;
    border: 1px solid rgba(85, 185, 132, 0.2);
    border-radius: 10px;
    padding: 10px 11px;
    color: #ecfdf4;
    background: rgba(2, 22, 11, 0.7);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    line-height: 1.5;
    outline: none;
}
.settings-v90__templates textarea:focus { border-color: rgba(73, 237, 150, 0.62); box-shadow: 0 0 0 3px rgba(73, 237, 150, 0.07); }
.settings-v90__templates > small { display: block; margin-top: 9px; color: #5f9176; font-size: var(--ds-fs-secondary); line-height: 1.45; }

.settings-v90__theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    margin-top: 15px;
}
.settings-v90__theme-grid button {
    min-width: 0;
    border: 1px solid rgba(86, 186, 133, 0.15);
    border-radius: 11px;
    padding: 8px;
    color: #dcf8e9;
    background: rgba(3, 35, 18, 0.72);
    text-align: left;
    cursor: pointer;
}
.settings-v90__theme-grid button.is-active { border-color: rgba(75, 237, 151, 0.64); box-shadow: inset 0 0 0 1px rgba(75, 237, 151, 0.18); }
.settings-v90__theme-grid strong { display: block; margin-top: 6px; font-size: var(--ds-fs-secondary); }
.settings-v90__theme-grid small { display: block; margin-top: 2px; color: #6e9f85; font-size: var(--ds-fs-secondary); }
.settings-v90__theme-preview {
    display: block;
    height: 42px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.settings-v90__theme-preview.is-dark { background: linear-gradient(135deg,#021209,#074122); }
.settings-v90__theme-preview.is-light { background: linear-gradient(135deg,#f8fdfa,#cfe6da); }
.settings-v90__theme-preview.is-photo { background: linear-gradient(135deg,rgba(2, 25, 13, 0.3),rgba(2, 25, 13, 0.55)), linear-gradient(45deg,#295a40,#83594d 50%,#235038); }
.settings-v90__theme-preview.is-video { background: radial-gradient(circle at 65% 35%,#3ea66f 0 13%,transparent 14%), linear-gradient(135deg,#133b26,#66394a); }

.settings-v90__upload {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    padding: 11px 12px;
    border: 1px dashed rgba(69, 237, 147, 0.32);
    border-radius: 11px;
    background: rgba(15, 137, 72, 0.06);
}
.settings-v90__upload[hidden] { display: none !important; }
.settings-v90__upload button,
.settings-v90__ghost,
.settings-v90__secondary,
.settings-v90__primary {
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}
.settings-v90__upload button { padding: 9px 12px; color: white; background: #15d56f; }
.settings-v90__upload strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-fs-secondary); }
.settings-v90__upload small { display: block; margin-top: 3px; color: #71a187; font-size: var(--ds-fs-secondary); }

.settings-v90__range-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 145px 44px;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
}
.settings-v90__range-row label strong { display: block; font-size: var(--ds-fs-secondary); }
.settings-v90__range-row label small { display: block; margin-top: 3px; color: #719f86; font-size: var(--ds-fs-secondary); }
.settings-v90__range-row input[type="range"] { width: 100%; accent-color: #2bea84; }
.settings-v90__range-row b { color: #5aefa0; font-size: var(--ds-fs-secondary); text-align: right; }
.settings-v90__appearance-preview {
    height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 78% 22%, rgba(43, 234, 132, 0.17), transparent 28%), linear-gradient(135deg,#03160c,#072c18) !important;
}
.settings-v90__appearance-preview > div { position: absolute; left: 12px; top: 11px; display: flex; gap: 5px; }
.settings-v90__appearance-preview > div span { width: 7px; height: 7px; border-radius: 50%; background: #387554; }
.settings-v90__appearance-preview strong { font-size: 25px; letter-spacing: .05em; }
.settings-v90__appearance-preview small { margin-top: 2px; color: #73a188; font-size: var(--ds-fs-secondary); }
.settings-v90__ghost { width: 100%; margin-top: 11px; padding: 10px; color: #98c5ad; border: 1px solid rgba(93, 184, 135, 0.18); background: rgba(3, 28, 15, 0.52); }

.settings-v90__message {
    min-height: 18px;
    margin: 10px 3px 0;
    color: #8eb9a2;
    font-size: var(--ds-fs-secondary);
}
.settings-v90__message.is-success { color: #47d68b; }
.settings-v90__message.is-error { color: #ff6174; }
.settings-v90__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 2px;
    padding: 12px 0 0;
}
.settings-v90__secondary { padding: 10px 14px; color: #8fbca4; border: 1px solid rgba(91, 188, 136, 0.18); background: rgba(4, 41, 21, 0.7); }
.settings-v90__primary { min-width: 170px; padding: 11px 16px; color: #fff; background: var(--moyli-primary); box-shadow: 0 8px 22px rgba(20, 204, 106, 0.18); }
.settings-v90__primary:disabled,
.settings-v90__secondary:disabled { opacity: .5; cursor: default; }

.main:has(#settingsPage:not([hidden])) {
    padding-top: 22px;
}

@media (max-width: 1180px) {
    .settings-v90__grid { grid-template-columns: 1fr; }
    .settings-v90__card--appearance { order: 2; }
}
@media (max-width: 760px) {
    .settings-v90__head { align-items: flex-start; flex-direction: column; }
    .settings-v90__save-state { justify-content: flex-start; }
    .settings-v90__theme-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .settings-v90__range-row { grid-template-columns: 1fr; }
    .settings-v90__range-row b { text-align: left; }
    .settings-v90__field-title { align-items: flex-start; flex-direction: column; }
    .settings-v90__actions { align-items: stretch; flex-direction: column-reverse; }
    .settings-v90__primary, .settings-v90__secondary { width: 100%; }
}


/* =========================================================
   V9.0.1 — LIGHT THEME POLISH FOR SETTINGS
   Fixes: full-shell light theme consistency + cleaner settings composition.
   ========================================================= */

.settings-v90__actions {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(50, 205, 122, 0.14);
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(5, 52, 27, 0.96), rgba(3, 33, 17, 0.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.moyli-theme-light {
    color: #103823;
}

body.moyli-theme-light .main {
    background: transparent !important;
    color: #103823;
}

body.moyli-theme-light .sidebar {
    background: linear-gradient(180deg, #f8fdfa 0%, #eef7f2 52%, #e7f4ed 100%) !important;
    border-right-color: rgba(58, 148, 100, 0.14) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.55);
}

body.moyli-theme-light .brand {
    border-bottom-color: rgba(49, 141, 92, 0.1) !important;
}

body.moyli-theme-light .brand-name,
body.moyli-theme-light .brand-text,
body.moyli-theme-light .sidebar-time,
body.moyli-theme-light .topbar h1,
body.moyli-theme-light .topbar p {
    color: #103823 !important;
}

body.moyli-theme-light .brand-system,
body.moyli-theme-light .sidebar-date {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .sidebar-controls {
    border-bottom-color: rgba(49, 141, 92, 0.1) !important;
}

body.moyli-theme-light .icon-button,
body.moyli-theme-light .dashboard-language-button {
    color: #205d3c !important;
    border-color: rgba(67, 162, 111, 0.16) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238, 249, 243, 0.96)) !important;
    box-shadow: 0 10px 24px rgba(25, 82, 52, 0.08), inset 0 1px 0 rgba(255,255,255,.82);
}

body.moyli-theme-light .icon-button:hover,
body.moyli-theme-light .dashboard-language-button:hover {
    border-color: rgba(41, 215, 122, 0.28) !important;
    box-shadow: 0 12px 28px rgba(25, 82, 52, 0.1), inset 0 1px 0 rgba(255,255,255,.9);
}

body.moyli-theme-light .main-menu {
    border-top-color: transparent;
}

body.moyli-theme-light .menu-item {
    color: #22573b !important;
}

body.moyli-theme-light .menu-item:hover {
    background: rgba(62, 216, 134, 0.08) !important;
    border-color: rgba(54, 188, 117, 0.14) !important;
}

body.moyli-theme-light .menu-icon {
    color: var(--ds-success-text) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(234, 247, 240, 0.95)) !important;
    border-color: rgba(63, 168, 112, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(35, 93, 62, 0.08);
}

body.moyli-theme-light .menu-item.active {
    color: #fff !important;
    border-color: var(--moyli-primary) !important;
    box-shadow: 0 16px 30px rgba(17, 167, 87, 0.18) !important;
}

body.moyli-theme-light .menu-item.active .menu-icon {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(255,255,255,.08) !important;
}

body.moyli-theme-light .sidebar-support,
body.moyli-theme-light .sidebar-user {
    color: #22573b !important;
    border-color: rgba(62, 162, 109, 0.15) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(236, 247, 241, 0.95)) !important;
    box-shadow: 0 12px 26px rgba(28, 82, 53, 0.08), inset 0 1px 0 rgba(255,255,255,.82);
}

body.moyli-theme-light .sidebar-support:hover {
    color: #103823 !important;
    border-color: rgba(41, 215, 122, 0.26) !important;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241, 250, 245, 0.98)) !important;
}

body.moyli-theme-light .sidebar-support__icon {
    color: var(--ds-success-text) !important;
    background: rgba(31, 223, 121, 0.1) !important;
}

body.moyli-theme-light .user-avatar {
    border-color: rgba(48, 192, 115, 0.28) !important;
    background: linear-gradient(135deg, #e2fcee, #b8f2d3) !important;
}

body.moyli-theme-light .user-info strong,
body.moyli-theme-light .user-arrow {
    color: #103823 !important;
}

body.moyli-theme-light .user-info span {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__save-state {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__provider strong {
    color: #103823 !important;
}

body.moyli-theme-light .settings-v90__provider small {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__theme-grid button,
body.moyli-theme-light .settings-v90__upload,
body.moyli-theme-light .settings-v90__ghost,
body.moyli-theme-light .settings-v90__secondary {
    color: #174a2f !important;
    border-color: rgba(56, 155, 102, 0.14) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241, 250, 245, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

body.moyli-theme-light .settings-v90__theme-grid button.is-active {
    border-color: rgba(38, 219, 122, 0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(38, 219, 122, 0.18), 0 10px 22px rgba(42, 118, 77, 0.09) !important;
}

body.moyli-theme-light .settings-v90__theme-grid small,
body.moyli-theme-light .settings-v90__upload small,
body.moyli-theme-light .settings-v90__templates label > span {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__upload button {
    color: #fff !important;
    background: var(--moyli-primary) !important;
}

body.moyli-theme-light .settings-v90__upload strong {
    color: #144b2e !important;
}

body.moyli-theme-light .settings-v90__offsets span {
    color: var(--ds-text-muted) !important;
    border-color: rgba(56, 155, 102, 0.14) !important;
    background: rgba(255,255,255,.82) !important;
}

body.moyli-theme-light .settings-v90__offsets input:checked + span {
    color: #137742 !important;
    border-color: rgba(38, 219, 122, 0.32) !important;
    background: rgba(43, 234, 132, 0.12) !important;
}

body.moyli-theme-light .settings-v90__templates textarea {
    color: #103823 !important;
    border-color: rgba(56, 155, 102, 0.16) !important;
    background: rgba(255,255,255,.95) !important;
}

body.moyli-theme-light .settings-v90__range-row b {
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .settings-v90__appearance-preview {
    color: #103823 !important;
    border-color: rgba(56, 155, 102, 0.14) !important;
    background: radial-gradient(circle at 82% 20%, rgba(59, 214, 131, 0.22), transparent 30%), linear-gradient(145deg, #ffffff, #eef8f3 58%, #e3f4eb) !important;
}

body.moyli-theme-light .settings-v90__appearance-preview > div span {
    background: #8cb9a1 !important;
}

body.moyli-theme-light .settings-v90__appearance-preview small {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__actions {
    border-color: rgba(56, 155, 102, 0.14) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240, 250, 245, 0.97)) !important;
    box-shadow: 0 18px 36px rgba(35, 93, 62, 0.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.moyli-theme-light .settings-v90__secondary {
    box-shadow: none !important;
}

body.moyli-theme-light .settings-v90__message {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .settings-v90__message.is-success {
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .settings-v90__message.is-error {
    color: var(--ds-danger-text) !important;
}

/* =========================================================
   V9.0.2 — PROFESSIONAL LIGHT WORKSPACE
   The light theme now affects the real working canvas, not only the sidebar/settings.
   ========================================================= */

body.moyli-theme-light {
    --bg: #edf7f2;
    --bg-2: #e7f4ed;
    --sidebar: #f5fbf8;
    --panel: #ffffff;
    --panel-2: #f5fbf8;
    --border: #8ed2ae;
    --border-soft: rgba(55, 145, 97, 0.16);
    --text: #144029;
    --text-soft: #66917a;
    --text-dim: #8aad9a;
    --shadow-blue: 0 10px 28px rgba(30, 88, 57, 0.07), inset 0 1px 0 rgba(255,255,255,.86);
}

body.moyli-theme-light .app {
    background:
        radial-gradient(circle at 72% 0%, rgba(62, 224, 138, 0.08), transparent 30%),
        linear-gradient(135deg, #edf7f2 0%, #e9f5ef 55%, #f2f9f5 100%) !important;
}

body.moyli-theme-light .main {
    background: transparent !important;
}

body.moyli-theme-light .topbar:not([hidden]) {
    border-color: rgba(58, 148, 100, 0.14) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247, 252, 249, 0.96)) !important;
    box-shadow: 0 10px 26px rgba(32, 87, 58, 0.06), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.moyli-theme-light .topbar:not([hidden]) h1 {
    color: #134229 !important;
}

body.moyli-theme-light .topbar:not([hidden]) p {
    color: var(--ds-text-muted) !important;
}

/* Dashboard cards */
body.moyli-theme-light .dashboard-v62-kpi,
body.moyli-theme-light .dashboard-v62-actions,
body.moyli-theme-light .dashboard-v62-payments,
body.moyli-theme-light .dashboard-v62-panel {
    border-color: rgba(55, 145, 97, 0.14) !important;
    background: linear-gradient(180deg, #ffffff, #f8fdfa) !important;
    box-shadow: 0 10px 28px rgba(30, 88, 57, 0.07), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

body.moyli-theme-light .dashboard-v62-kpi:hover {
    border-color: rgba(43, 234, 132, 0.3) !important;
    background: linear-gradient(180deg, #ffffff, #f3fcf7) !important;
    box-shadow: 0 14px 32px rgba(30, 88, 57, 0.09), inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__copy small,
body.moyli-theme-light .dashboard-v62-chart__value {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__copy strong,
body.moyli-theme-light .dashboard-v62-section-title strong,
body.moyli-theme-light .dashboard-v62-panel__head h2,
body.moyli-theme-light .dashboard-v62-payments__grid strong,
body.moyli-theme-light .dashboard-v62-attention-item__copy strong,
body.moyli-theme-light .dashboard-v62-operation__copy strong {
    color: #144029 !important;
}

body.moyli-theme-light .dashboard-v62-kpi__copy em,
body.moyli-theme-light .dashboard-v62-section-title span,
body.moyli-theme-light .dashboard-v62-panel__head p,
body.moyli-theme-light .dashboard-v62-payments__grid span,
body.moyli-theme-light .dashboard-v62-chart__label,
body.moyli-theme-light .dashboard-v62-attention-item__copy span,
body.moyli-theme-light .dashboard-v62-attention-item > em,
body.moyli-theme-light .dashboard-v62-operation__copy span,
body.moyli-theme-light .dashboard-v62-operation__amount span,
body.moyli-theme-light .dashboard-v62-empty {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__icon {
    border-color: rgba(43, 234, 132, 0.18) !important;
    background: rgba(43, 234, 132, 0.08) !important;
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__icon.is-green {
    border-color: rgba(0,166,110,.18) !important;
    background: rgba(0,166,110,.08) !important;
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__icon.is-danger {
    border-color: rgba(224,45,65,.18) !important;
    background: rgba(224,45,65,.07) !important;
    color: var(--ds-danger-text) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__icon.is-violet {
    border-color: rgba(88, 205, 143, 0.18) !important;
    background: rgba(88, 205, 143, 0.07) !important;
    color: var(--ds-success-text) !important;
}

/* Quick actions */
body.moyli-theme-light .dashboard-v62-actions__buttons button {
    border-color: rgba(55, 145, 97, 0.13) !important;
    background: linear-gradient(180deg, #fbfefc, #f1f9f5) !important;
    color: #275d40 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

body.moyli-theme-light .dashboard-v62-actions__buttons button:hover {
    border-color: rgba(43, 234, 132, 0.28) !important;
    background: #f0fdf6 !important;
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .dashboard-v62-actions__buttons button:first-child {
    border-color: rgba(17, 167, 87, 0.24) !important;
    background: rgba(17, 167, 87, 0.06) !important;
    color: var(--ds-danger-text) !important;
}

/* Payments and rows */
body.moyli-theme-light .dashboard-v62-payments__grid > div,
body.moyli-theme-light .dashboard-v62-operation {
    border-color: rgba(55, 145, 97, 0.11) !important;
    background: rgba(244, 251, 247, 0.88) !important;
}

body.moyli-theme-light .dashboard-v62-operation:hover,
body.moyli-theme-light .dashboard-v62-attention-item:hover {
    border-color: rgba(43, 234, 132, 0.18) !important;
    background: rgba(43, 234, 132, 0.045) !important;
}

body.moyli-theme-light .dashboard-v62-panel__head {
    border-bottom-color: rgba(55, 145, 97, 0.1) !important;
}

body.moyli-theme-light .dashboard-v62-panel__head button {
    border-color: rgba(55, 145, 97, 0.13) !important;
    background: #f1f9f5 !important;
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .dashboard-v62-panel__head button:hover {
    border-color: rgba(43, 234, 132, 0.26) !important;
    color: var(--ds-success-text) !important;
    background: #effdf6 !important;
}

/* Chart track must belong to the light composition too. */
body.moyli-theme-light .dashboard-v62-chart__day:hover {
    background: rgba(43, 234, 132, 0.045) !important;
}

body.moyli-theme-light .dashboard-v62-chart__bar-wrap {
    background: #eaf8f1 !important;
}

body.moyli-theme-light .dashboard-v62-chart__bar {
    background: linear-gradient(180deg, #54ee9c, #15d66f) !important;
    box-shadow: 0 5px 12px rgba(43, 234, 132, 0.15) !important;
}

/* Alerts and recent-operation icons keep their semantic colors, but no dark islands. */
body.moyli-theme-light .dashboard-v62-attention-item__icon {
    background: rgba(229,157,28,.09) !important;
    color: var(--ds-warning-text) !important;
}

body.moyli-theme-light .dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon {
    background: rgba(224,45,65,.08) !important;
    color: var(--ds-danger-text) !important;
}

body.moyli-theme-light .dashboard-v62-operation__icon {
    background: rgba(0,166,110,.08) !important;
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .dashboard-v62-operation.is-out .dashboard-v62-operation__icon {
    background: rgba(224,45,65,.08) !important;
    color: var(--ds-danger-text) !important;
}

body.moyli-theme-light .dashboard-v62-operation__amount strong {
    color: var(--ds-success-text) !important;
}

body.moyli-theme-light .dashboard-v62-operation.is-out .dashboard-v62-operation__amount strong {
    color: var(--ds-danger-text) !important;
}

/* Keep the red MOYLI accent deliberate in light mode. */
body.moyli-theme-light .dashboard-v62-badge {
    border-color: rgba(213,139,8,.22) !important;
    background: rgba(229,157,28,.08) !important;
    color: var(--ds-warning-text) !important;
}


/* =========================================================
   V9.0.4 — TYPOGRAPHY SETTINGS + NOTIFICATIONS FRAME CLEANUP
   ========================================================= */
body {
    font-family: var(--moyli-font-family, Inter, "Segoe UI", Arial, sans-serif) !important;
}
.settings-v90__typography {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(80, 181, 127, 0.13);
    border-radius: 12px;
    background: rgba(4, 43, 22, 0.58);
}
.settings-v90__typography-control { min-width: 0; }
.settings-v90__typography-control > label { display: block; margin-bottom: 8px; }
.settings-v90__typography-control > label strong { display: block; color: #effdf6; font-size: var(--ds-fs-secondary); }
.settings-v90__typography-control > label small { display: block; margin-top: 3px; color: #719f86; font-size: var(--ds-fs-secondary); }
.settings-v90__typography-control select {
    width: 100%; height: 36px; padding: 0 10px;
    border: 1px solid rgba(85, 185, 132, 0.2); border-radius: 9px; outline: 0;
    color: #ecfdf4; background: rgba(2, 22, 11, 0.7); font: inherit; font-size: var(--ds-fs-secondary);
}
.settings-v90__font-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.settings-v90__font-sizes button {
    min-height: 36px; padding: 0 8px; border: 1px solid rgba(85, 185, 132, 0.18); border-radius: 9px;
    color: #8fbca4; background: rgba(2, 25, 13, 0.54); font: inherit; font-size: var(--ds-fs-secondary); font-weight: 800;
    cursor: pointer; transition: .18s ease;
}
.settings-v90__font-sizes button:hover { color: #ddf8ea; border-color: rgba(78, 238, 153, 0.34); }
.settings-v90__font-sizes button.is-active {
    color: #ecfdf4; border-color: rgba(78, 238, 153, 0.52); background: rgba(21, 217, 112, 0.23);
    box-shadow: inset 0 0 0 1px rgba(78, 238, 153, 0.08);
}
.settings-v90__type-preview {
    grid-column: 1 / -1; min-height: 62px; display: flex; flex-direction: column; justify-content: center;
    padding: 10px 12px; border: 1px solid rgba(72, 199, 131, 0.14); border-radius: 10px;
    background: linear-gradient(135deg, rgba(4, 35, 18, 0.78), rgba(6, 56, 29, 0.64));
}
.settings-v90__type-preview strong { color: #ecfdf4; font-size: 14px; line-height: 1.2; }
.settings-v90__type-preview small { margin-top: 5px; color: #71a187; font-size: var(--ds-fs-secondary); }
.settings-v90__type-preview.is-small strong { font-size: var(--ds-fs-secondary) !important; }
.settings-v90__type-preview.is-small small { font-size: var(--ds-fs-secondary) !important; }
.settings-v90__type-preview.is-normal strong { font-size: 14px !important; }
.settings-v90__type-preview.is-normal small { font-size: var(--ds-fs-secondary) !important; }
.settings-v90__type-preview.is-large strong { font-size: 15.4px !important; }
.settings-v90__type-preview.is-large small { font-size: var(--ds-fs-secondary) !important; }
/* Notifications: remove only the one large frame around the whole page. */
#notificationsPage.notifications-page {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.notifications-v71__workspace { gap: 10px !important; }
@media (max-width: 760px) {
    .settings-v90__typography { grid-template-columns: 1fr; }
    .settings-v90__type-preview { grid-column: auto; }
    .notifications-v71__workspace { gap: 10px !important; }
}


/* =========================================================
   V9.0.5 — FONT CATALOG + FULL-HEIGHT 7-DAY CHART
   ========================================================= */

/* More font choices make the selector taller and easier to browse. */
.settings-v90__typography-control select {
    min-height: 38px !important;
}
.settings-v90__typography-control select optgroup {
    font-weight: 800;
}
.settings-v90__typography-control select option {
    font-weight: 500;
}

/* Use the entire available chart height instead of a fixed 64px track. */
.dashboard-v62-chart {
    align-items: stretch !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.dashboard-v62-chart__day {
    height: 100% !important;
    min-height: 120px !important;
    display: grid !important;
    grid-template-rows: 18px minmax(0, 1fr) 18px !important;
    align-items: end !important;
    justify-content: stretch !important;
    gap: 5px !important;
    padding: 4px 3px !important;
}
.dashboard-v62-chart__value {
    align-self: center !important;
    text-align: center !important;
}
.dashboard-v62-chart__bar-wrap {
    width: min(38px, 76%) !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
}
.dashboard-v62-chart__bar {
    min-height: 4px !important;
}
.dashboard-v62-chart__bar.is-zero {
    height: 2px !important;
    min-height: 2px !important;
}
.dashboard-v62-chart__label {
    align-self: center !important;
    text-align: center !important;
}

@media (max-width: 800px) {
    .dashboard-v62-chart__day {
        min-height: 150px !important;
    }
}


/* =========================================================
   KASSA V5.2 — EDIT MANUAL OPERATIONS
   ========================================================= */
.cash-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cash-row-edit {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(58, 235, 141, 0.28);
    border-radius: 9px;
    color: #99f5c4;
    background: rgba(43, 234, 132, 0.08);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.cash-row-edit:hover {
    color: #fff;
    border-color: rgba(78, 238, 153, 0.58);
    background: rgba(43, 234, 132, 0.18);
    transform: translateY(-1px);
}

.cash-row-edit svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cash-row-locked {
    color: #528067;
    font-size: 15px;
    line-height: 1;
    user-select: none;
}


/* =========================================================
   KASSA V5.4 — DELETE CASH / SALE PAYMENT ROWS
   ========================================================= */
.cash-row-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cash-row-delete {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 72, 91, .30);
    border-radius: 9px;
    color: #ff7180;
    background: rgba(255, 38, 62, .08);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.cash-row-delete:hover {
    color: #fff;
    border-color: rgba(255, 84, 103, .62);
    background: rgba(255, 38, 62, .22);
    transform: translateY(-1px);
}

.cash-row-delete svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cash-delete-modal {
    width: min(560px, calc((100vw / var(--ds-zoom, 1)) - 36px));
}

.cash-delete-warning {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(255, 68, 86, .25);
    border-radius: 12px;
    background: rgba(111, 8, 23, .16);
}

.cash-delete-warning__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 72, 91, .34);
    border-radius: 12px;
    color: #ff6677;
    background: rgba(255, 38, 62, .10);
    font-size: 22px;
    font-weight: 900;
}

.cash-delete-warning strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
}

.cash-delete-warning p {
    margin: 5px 0 0;
    color: #91baa4;
    font-size: var(--ds-fs-secondary);
    line-height: 1.5;
}

.cash-modal-actions .is-danger {
    border-color: rgba(255, 49, 66, .74);
    color: #fff;
    background: linear-gradient(90deg, #c9091b, var(--moyli-danger));
}

.cash-modal-actions .is-danger:hover {
    filter: brightness(1.06);
}

.cash-modal-actions .is-danger:disabled {
    opacity: .58;
    cursor: default;
}

/* =========================================================
   V9.0.9 — GLOBAL ARCHIVE
   All deleted/archived business records are stored separately.
   ========================================================= */
.archive-page.archive-v99 {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    color: #f6fefa;
}

.archive-v99__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.archive-v99__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #5aefa0;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    letter-spacing: .16em;
}

.archive-v99__head h1 {
    margin: 0;
    font-size: clamp(27px, 2.4vw, 38px);
    line-height: 1.05;
}

.archive-v99__head p {
    margin: 7px 0 0;
    color: #8cbaa1;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__count {
    min-width: 92px;
    padding: 10px 14px;
    border: 1px solid rgba(45, 232, 132, 0.18);
    border-radius: 12px;
    background: rgba(4, 37, 19, 0.76);
    text-align: right;
}

.archive-v99__count span {
    display: block;
    color: #70a086;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__count strong {
    display: block;
    margin-top: 2px;
    color: #5aefa0;
    font-size: 20px;
}

.archive-v99__notice {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    padding: 13px 16px;
    border: 1px solid rgba(43, 190, 126, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(5, 53, 27, 0.42), rgba(4, 36, 19, 0.72));
}

.archive-v99__notice-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(54, 211, 144, .30);
    border-radius: 10px;
    color: #46db97;
    background: rgba(54, 211, 144, .08);
    font-size: 18px;
    font-weight: 900;
}

.archive-v99__notice strong {
    display: block;
    color: #eafaf3;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__notice small {
    display: block;
    margin-top: 3px;
    color: #78a88e;
    font-size: var(--ds-fs-secondary);
    line-height: 1.4;
}

.archive-v99__toolbar {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 170px 160px auto;
    gap: 9px;
    margin-bottom: 12px;
}

.archive-v99__search {
    height: 42px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    border: 1px solid rgba(49, 208, 123, 0.2);
    border-radius: 11px;
    background: rgba(4, 37, 19, 0.8);
}

.archive-v99__search > span {
    color: #6ea889;
    text-align: center;
    font-size: 19px;
}

.archive-v99__search input,
.archive-v99__toolbar select {
    min-width: 0;
    width: 100%;
    height: 42px;
    border: 1px solid rgba(49, 208, 123, 0.2);
    border-radius: 11px;
    padding: 0 12px;
    color: #dcf6e8;
    background: rgba(4, 37, 19, 0.8);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    outline: none;
}

.archive-v99__search input {
    height: 40px;
    border: 0;
    padding-left: 0;
    background: transparent;
}

.archive-v99__search input:focus,
.archive-v99__toolbar select:focus {
    border-color: rgba(81, 238, 154, 0.52);
}

.archive-v99__refresh {
    min-width: 92px;
    border: 1px solid rgba(17, 167, 87, 0.35);
    border-radius: 11px;
    padding: 0 15px;
    color: #fff;
    background: rgba(10, 102, 53, 0.22);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.archive-v99__refresh:hover {
    border-color: rgba(17, 167, 87, 0.62);
    background: rgba(13, 130, 68, 0.3);
}

.archive-v99__refresh:disabled { opacity: .55; cursor: default; }

.archive-v99__message {
    min-height: 17px;
    margin: 0 3px 7px;
    color: #7eac93;
    font-size: var(--ds-fs-secondary);
}
.archive-v99__message.is-error { color: #ff6677; }
.archive-v99__message.is-success { color: #47d68b; }

.archive-v99__panel {
    overflow: hidden;
    border: 1px solid rgba(38, 221, 123, 0.22);
    border-radius: 15px;
    background: linear-gradient(150deg, rgba(5, 52, 27, 0.96), rgba(3, 33, 17, 0.98));
}

.archive-v99__table-head,
.archive-v99__row {
    display: grid;
    grid-template-columns: 165px 130px minmax(260px,1fr) 130px 90px;
    align-items: center;
    gap: 14px;
}

.archive-v99__table-head {
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(88, 179, 130, 0.13);
    color: #7fad94;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.archive-v99__row {
    min-height: 66px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(88, 179, 130, 0.09);
}

.archive-v99__row:last-child { border-bottom: 0; }
.archive-v99__row:hover { background: rgba(17, 132, 71, 0.08); }

.archive-v99__date {
    color: #9dc1ae;
    font-size: var(--ds-fs-secondary);
    font-weight: 650;
}

.archive-v99__module {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(63, 236, 144, 0.22);
    border-radius: 8px;
    color: #88f3ba;
    background: rgba(30, 204, 111, 0.09);
    font-size: var(--ds-fs-secondary);
}

.archive-v99__record {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.archive-v99__record strong {
    overflow: hidden;
    color: #effdf6;
    font-size: var(--ds-fs-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-v99__record small {
    margin-top: 4px;
    color: #70a086;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__action {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
}

.archive-v99__action.is-delete {
    color: #ff7180;
    border: 1px solid rgba(255, 64, 86, .22);
    background: rgba(255, 38, 62, .08);
}

.archive-v99__action.is-archive {
    color: #f2bc5a;
    border: 1px solid rgba(242, 188, 90, .22);
    background: rgba(242, 188, 90, .07);
}

.archive-v99__detail-btn {
    border: 1px solid rgba(61, 235, 142, 0.22);
    border-radius: 8px;
    padding: 7px 10px;
    color: #9df3c5;
    background: rgba(11, 94, 50, 0.38);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.archive-v99__detail-btn:hover {
    color: #fff;
    border-color: rgba(61, 235, 142, 0.45);
    background: rgba(14, 122, 64, 0.52);
}

.archive-v99__empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    color: #68977e;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(1, 14, 7, 0.74);
    backdrop-filter: blur(8px);
}

.archive-v99__modal-overlay[hidden] { display: none !important; }

.archive-v99__modal {
    width: min(760px, calc((100vw / var(--ds-zoom, 1)) - 36px));
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(57, 235, 140, 0.25);
    border-radius: 16px;
    background: linear-gradient(155deg, #07301a, #031f10 78%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.archive-v99__modal > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(81, 180, 127, 0.15);
}

.archive-v99__modal > header span {
    color: #59ef9f;
    font-size: var(--ds-fs-secondary);
    font-weight: 900;
    letter-spacing: .14em;
}

.archive-v99__modal h2 {
    margin: 5px 0 0;
    font-size: 20px;
}

.archive-v99__modal p {
    margin: 5px 0 0;
    color: #78a68d;
    font-size: var(--ds-fs-secondary);
}

.archive-v99__modal > header button {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(80, 185, 129, 0.18);
    border-radius: 10px;
    color: #a9d0bb;
    background: rgba(6, 58, 30, 0.66);
    font-size: 22px;
    cursor: pointer;
}

.archive-v99__detail-grid {
    min-height: 180px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    padding: 16px 20px;
}

.archive-v99__detail-item {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(71, 178, 121, 0.13);
    border-radius: 10px;
    background: rgba(4, 37, 19, 0.56);
}

.archive-v99__detail-item small {
    display: block;
    color: #6d9e84;
    font-size: var(--ds-fs-secondary);
    text-transform: capitalize;
}

.archive-v99__detail-item strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: #e9fcf2;
    font-size: var(--ds-fs-secondary);
    line-height: 1.4;
}

.archive-v99__modal > footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(81, 180, 127, 0.12);
}

.archive-v99__modal > footer button {
    min-width: 110px;
    border: 1px solid rgba(65, 235, 144, 0.24);
    border-radius: 9px;
    padding: 9px 14px;
    color: #ddf8ea;
    background: rgba(12, 109, 57, 0.45);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
}

.main:has(#archivePage:not([hidden])) {
    padding-top: 22px;
}

@media (max-width: 1050px) {
    .archive-v99__toolbar { grid-template-columns: 1fr 1fr; }
    .archive-v99__search { grid-column: 1 / -1; }
    .archive-v99__table-head,
    .archive-v99__row { grid-template-columns: 140px 105px minmax(180px,1fr) 110px 82px; gap: 8px; }
}

@media (max-width: 760px) {
    .archive-v99__head { align-items: flex-start; flex-direction: column; }
    .archive-v99__count { text-align: left; }
    .archive-v99__toolbar { grid-template-columns: 1fr; }
    .archive-v99__search { grid-column: auto; }
    .archive-v99__panel { overflow-x: auto; }
    .archive-v99__table-head,
    .archive-v99__row { min-width: 760px; }
    .archive-v99__detail-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   V10.2 — CLIENT PLACEHOLDER I18N
   CSS-generated text must follow the selected language.
   ========================================================= */
html[lang="ru"] body.client-card-list-open #clientCardPanel.is-placeholder::after {
    content: "Чтобы открыть карточку клиента, выберите клиента из списка слева" !important;
}
html[lang="en"] body.client-card-list-open #clientCardPanel.is-placeholder::after {
    content: "Select a client from the list on the left to open the client card" !important;
}
html[lang="uz"] body.client-card-list-open #clientCardPanel.is-placeholder::after {
    content: "Mijoz kartasini ko‘rish uchun chap tomondagi ro‘yxatdan mijozni tanlang" !important;
}


/* =========================================================
   V1.0.1 — MOBILE NAVIGATION TRIGGER
   The desktop hamburger lives inside the drawer, so mobile
   needs an external trigger that remains visible when closed.
   ========================================================= */
.mobile-menu-button {
    display: none;
}

@media (max-width: 800px) {
    .sidebar {
        z-index: 60 !important;
    }

    .main {
        padding-top: 72px !important;
    }

    .mobile-menu-button {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        z-index: 40;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(53, 235, 138, 0.34);
        border-radius: 14px;
        color: #eafdf3;
        background: linear-gradient(180deg, rgba(7, 70, 36, 0.98), rgba(4, 41, 21, 0.98));
        box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .mobile-menu-button:active {
        transform: scale(.96);
    }

    .mobile-menu-button .control-svg {
        width: 24px;
        height: 24px;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(1, 12, 6, 0.64);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sidebar.open {
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate;
        transform: translateX(0) translateZ(0);
    }

    .sidebar.open ~ .main .mobile-menu-button {
        opacity: 0;
        pointer-events: none;
    }
}


/* =========================================================
   V1.0.3 — MOBILE DRAWER INTERACTION / SCROLL FIX
   Overlay stays below the drawer, drawer remains clickable,
   and Android uses the visible viewport height (dvh).
   ========================================================= */
@media (max-width: 800px) {
    body.mobile-nav-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .sidebar {
        top: 0 !important;
        bottom: 0 !important;
        height: calc(100vh / var(--ds-zoom, 1)) !important;
        height: calc(100vh / var(--ds-zoom, 1)) !important;
        max-height: calc(100vh / var(--ds-zoom, 1)) !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        pointer-events: auto !important;
        z-index: 60 !important;
    }

    .sidebar.open {
        pointer-events: auto !important;
    }

    .sidebar-overlay {
        z-index: 50 !important;
        pointer-events: auto !important;
        background: rgba(1, 12, 6, 0.56) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sidebar .main-menu,
    .sidebar .sidebar-support,
    .sidebar .sidebar-user,
    .sidebar button,
    .sidebar a,
    .sidebar input,
    .sidebar select {
        pointer-events: auto !important;
    }

    .sidebar .main-menu {
        flex: 0 0 auto !important;
    }

    .sidebar .sidebar-support {
        flex: 0 0 auto !important;
        margin-top: 14px !important;
    }

    .sidebar .sidebar-user {
        flex: 0 0 auto !important;
        margin-top: 8px !important;
        margin-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    }
}


/* =========================================================
   V1.0.4 — MOBILE CLIENTS TAP / INVISIBLE DRAWER FIX
   The fixed client card must never intercept taps while closed.
   ========================================================= */
.client-card {
    pointer-events: none;
}
body.client-card-open .client-card {
    pointer-events: auto;
}

@media (max-width: 1179px) {
    body.client-card-list-open:not(.client-card-open) #clientCardPanel {
        display: none !important;
        pointer-events: none !important;
    }

    #clientCardPanel {
        max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 24px);
        top: max(12px, env(safe-area-inset-top)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   V1.0.8 — PROFESSIONAL LIGHT THEME
   Full workspace treatment: light surfaces, readable contrast,
   restrained borders/shadows, MOYLI red preserved for actions.
   Dark/photo/video themes are untouched.
   ========================================================= */

body.moyli-theme-light {
    --moyli-light-canvas: #f3f9f6;
    --moyli-light-surface: #ffffff;
    --moyli-light-surface-soft: #f8fcfa;
    --moyli-light-surface-tint: #f2f9f5;
    --moyli-light-border: #d9eae1;
    --moyli-light-border-strong: #c8dfd3;
    --moyli-light-text: #173b28;
    --moyli-light-muted: #638a75;
    --moyli-light-faint: #87a695;
    --moyli-light-shadow: 0 8px 24px rgba(25, 72, 47, 0.055);

    --bg: var(--moyli-light-canvas);
    --bg-2: #edf6f1;
    --sidebar: #f8fcfa;
    --panel: var(--moyli-light-surface);
    --panel-2: var(--moyli-light-surface-soft);
    --border: #9bcfb3;
    --border-soft: rgba(68, 124, 94, 0.16);
    --text: var(--moyli-light-text);
    --text-soft: var(--moyli-light-muted);
    --text-dim: var(--moyli-light-faint);
    --shadow-blue: var(--moyli-light-shadow);

    background: var(--moyli-light-canvas) !important;
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light .moyli-background-layer {
    background: var(--moyli-light-canvas) !important;
}

body.moyli-theme-light .app {
    background:
        radial-gradient(circle at 82% 0%, rgba(55, 193, 119, 0.055), transparent 30%),
        linear-gradient(180deg, #f6faf8 0%, #f1f8f4 100%) !important;
}

body.moyli-theme-light .main {
    background: transparent !important;
    color: var(--moyli-light-text) !important;
}

/* Page headers */
body.moyli-theme-light :is(
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) {
    border: 1px solid var(--moyli-light-border) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--moyli-light-shadow) !important;
}

body.moyli-theme-light :is(
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) :is(h1, h2, h3, strong) {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light :is(
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) :is(p, small) {
    color: var(--moyli-light-muted) !important;
}

/* Primary light surfaces across working modules */
body.moyli-theme-light :is(
    #warehousePage .warehouse-toolbar,
    #warehousePage .warehouse-products-panel,
    #warehousePage .warehouse-insights,
    #warehousePage .warehouse-category-report,
    #salesPage .sales-start,
    #salesPage .sales-start-card,
    #salesPage .sales-camera-card,
    #salesPage .sales-client-card,
    #salesPage .sales-results,
    #salesPage .sales-workspace,
    #salesPage .sales-selected-client,
    #salesPage .sales-services-panel,
    #salesPage .sales-products-panel,
    #salesPage .sales-checkout,
    #salesPage .sales-checkout-card,
    #salesPage .sales-history-panel,
    #salesPage .sales-history-main,
    #salesPage .sales-history-client-pane,
    #salesPage .sales-analytics-panel,
    #salesPage .sales-analytics-chart-card,
    #salesPage .sales-analytics-detail,
    #clientsPage .clients-toolbar,
    #clientsPage .clients-list-panel,
    #cashPage .cash-toolbar,
    #cashPage .cash-movements-panel,
    #cashPage .cash-channels,
    #reportsPage .reports-toolbar,
    #reportsPage .reports-panel,
    #notificationsPage .notifications-v71__provider,
    #notificationsPage .notifications-v71__toolbar,
    #notificationsPage .notifications-v71__panel,
    #archivePage .archive-v99__notice,
    #archivePage .archive-v99__toolbar,
    #archivePage .archive-v99__panel,
    #profilePage .profile-form-card,
    #profilePage .profile-photo-card
) {
    border-color: var(--moyli-light-border) !important;
    background: var(--moyli-light-surface) !important;
    box-shadow: var(--moyli-light-shadow) !important;
}

/* Soft nested surfaces */
body.moyli-theme-light :is(
    #warehousePage .warehouse-insight-item,
    #salesPage .sales-service-modal-section,
    #salesPage .sales-create-service-form,
    #salesPage .sales-payment-card,
    #salesPage .sales-payment-selected,
    #salesPage .sales-payment-mixed,
    #salesPage .sales-next-service-preview,
    #salesPage .sales-product-picker,
    #salesPage .sales-product-preview,
    #salesPage .sales-history-client-section,
    #salesPage .sales-detail-card,
    #cashPage .cash-channel-grid article,
    #reportsPage .reports-detail-summary,
    #notificationsPage .notifications-v71__reminders,
    #profilePage .profile-session-row,
    #settingsPage .settings-v90__typography,
    #settingsPage .settings-v90__type-preview
) {
    border-color: var(--moyli-light-border) !important;
    background: var(--moyli-light-surface-soft) !important;
    box-shadow: none !important;
}

/* Warehouse */
body.moyli-theme-light #warehousePage .warehouse-toolbar {
    background: #ffffff !important;
}

body.moyli-theme-light #warehousePage .warehouse-search,
body.moyli-theme-light #warehousePage .warehouse-filter select,
body.moyli-theme-light #warehousePage .warehouse-page-size select,
body.moyli-theme-light #warehousePage .warehouse-history-toolbar select,
body.moyli-theme-light #warehousePage .warehouse-history-toolbar input {
    color: var(--moyli-light-text) !important;
    border-color: var(--moyli-light-border) !important;
    background: var(--moyli-light-surface-soft) !important;
}

body.moyli-theme-light #warehousePage .warehouse-search input {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #warehousePage .warehouse-search input::placeholder {
    color: var(--moyli-light-faint) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card {
    border-color: var(--moyli-light-border) !important;
    background: #ffffff !important;
    box-shadow: var(--moyli-light-shadow) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card.is-warning {
    border-color: #ecd49b !important;
    background: linear-gradient(135deg, #fffaf0, #ffffff 72%) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card.is-danger {
    border-color: #efbcc4 !important;
    background: linear-gradient(135deg, #fff6f7, #ffffff 72%) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card.is-success {
    border-color: #a9dfcf !important;
    background: linear-gradient(135deg, #f2fbf8, #ffffff 72%) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card__content > span,
body.moyli-theme-light #warehousePage .warehouse-products-count,
body.moyli-theme-light #warehousePage .warehouse-products-table__head,
body.moyli-theme-light #warehousePage .warehouse-muted,
body.moyli-theme-light #warehousePage .warehouse-product-name__copy small {
    color: var(--moyli-light-muted) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card__content > strong,
body.moyli-theme-light #warehousePage .warehouse-products-head h2,
body.moyli-theme-light #warehousePage .warehouse-product-name__copy strong,
body.moyli-theme-light #warehousePage .warehouse-product-row :is(strong, .warehouse-money, .warehouse-product-stock) {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #warehousePage .warehouse-summary-card__content > small,
body.moyli-theme-light #warehousePage .warehouse-products-head p {
    color: var(--moyli-light-faint) !important;
}

body.moyli-theme-light #warehousePage .warehouse-products-table__head {
    background: #f6fbf8 !important;
    border-bottom-color: var(--moyli-light-border) !important;
}

body.moyli-theme-light #warehousePage .warehouse-product-row {
    border-bottom-color: #e7f2ec !important;
    background: #ffffff !important;
}

body.moyli-theme-light #warehousePage .warehouse-product-row:hover {
    background: #f7fcf9 !important;
}

body.moyli-theme-light #warehousePage .warehouse-product-thumb,
body.moyli-theme-light #warehousePage .warehouse-product-actions button,
body.moyli-theme-light #warehousePage .warehouse-secondary-action,
body.moyli-theme-light #warehousePage .warehouse-toolbar-action,
body.moyli-theme-light #warehousePage .warehouse-pagination-buttons button {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
    color: #356b4e !important;
}

body.moyli-theme-light #warehousePage .warehouse-product-actions button:hover,
body.moyli-theme-light #warehousePage .warehouse-secondary-action:hover,
body.moyli-theme-light #warehousePage .warehouse-toolbar-action:hover,
body.moyli-theme-light #warehousePage .warehouse-pagination-buttons button:hover:not(:disabled) {
    border-color: #addfc4 !important;
    background: #eefcf5 !important;
    color: var(--ds-success-text) !important;
}

/* Inputs and selects on all operational pages */
body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(input, select, textarea) {
    border-color: var(--moyli-light-border) !important;
    background: #ffffff !important;
    color: var(--moyli-light-text) !important;
    box-shadow: none !important;
}

body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(input, textarea)::placeholder {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(input, select, textarea):focus {
    border-color: #78d2a2 !important;
    box-shadow: 0 0 0 3px rgba(35, 184, 105, 0.09) !important;
}

/* Sales */
body.moyli-theme-light #salesPage :is(
    .sales-tabs,
    .sales-client-search-field,
    .sales-plate-field,
    .sales-workspace-placeholder,
    .sales-product-picker-search,
    .sales-history-search-wrap
) {
    border-color: var(--moyli-light-border) !important;
    background: var(--moyli-light-surface-soft) !important;
}

body.moyli-theme-light #salesPage :is(
    .sales-start-card__title,
    .sales-card-head h3,
    .sales-results__head h3,
    .sales-workspace__top h2,
    .sales-section-head h3,
    .sales-selected-client strong,
    .sales-services-total strong,
    .sales-products-total strong,
    .sales-checkout__grand-total strong
) {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #salesPage :is(
    .sales-start-card__text,
    .sales-card-head p,
    .sales-workspace__top p,
    .sales-section-head p,
    .sales-selected-client span,
    .sales-selected-client small,
    .sales-services-table__head,
    .sales-products-table__head
) {
    color: var(--moyli-light-muted) !important;
}

body.moyli-theme-light #salesPage :is(.sales-service-row, .sales-product-row) {
    border-bottom-color: #e7f2ec !important;
    background: #ffffff !important;
}

body.moyli-theme-light #salesPage :is(.sales-service-row, .sales-product-row):hover {
    background: #f8fcfa !important;
}

body.moyli-theme-light #salesPage .sales-product-quick-item {
    border-color: var(--moyli-light-border) !important;
    background: #ffffff !important;
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #salesPage .sales-product-quick-item:hover,
body.moyli-theme-light #salesPage .sales-product-quick-item.is-selected {
    background: #eefcf5 !important;
    border-color: #9edfbc !important;
}

/* Clients */
body.moyli-theme-light #clientsPage .clients-search-field {
    border-color: var(--moyli-light-border) !important;
    background: var(--moyli-light-surface-soft) !important;
}

body.moyli-theme-light #clientsPage .clients-list-head {
    color: var(--moyli-light-muted) !important;
    background: #f6fbf8 !important;
    border-color: var(--moyli-light-border) !important;
}

body.moyli-theme-light #clientsPage .clients-list {
    background: #ffffff !important;
}

/* Cash */
body.moyli-theme-light #cashPage .cash-summary-card,
body.moyli-theme-light #notificationsPage .notifications-v71__summary-card,
body.moyli-theme-light #reportsPage .reports-kpi {
    border-color: var(--moyli-light-border) !important;
    background: #ffffff !important;
    box-shadow: var(--moyli-light-shadow) !important;
}

body.moyli-theme-light #cashPage .cash-table-head,
body.moyli-theme-light #reportsPage .reports-table-head,
body.moyli-theme-light #archivePage .archive-v99__table-head {
    color: var(--moyli-light-muted) !important;
    background: #f6fbf8 !important;
    border-bottom-color: var(--moyli-light-border) !important;
}

body.moyli-theme-light #cashPage .cash-movement-row,
body.moyli-theme-light #reportsPage .reports-table-row,
body.moyli-theme-light #archivePage .archive-v99__row,
body.moyli-theme-light #notificationsPage .notifications-v71__row,
body.moyli-theme-light #notificationsPage .notifications-v71__reminder-row {
    border-bottom-color: #e7f2ec !important;
    background: #ffffff !important;
}

body.moyli-theme-light #cashPage .cash-movement-row:hover,
body.moyli-theme-light #reportsPage .reports-table-row:hover,
body.moyli-theme-light #archivePage .archive-v99__row:hover,
body.moyli-theme-light #notificationsPage .notifications-v71__row:hover {
    background: #f8fcfa !important;
}

/* Reports */
body.moyli-theme-light #reportsPage .reports-chart {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
}

body.moyli-theme-light #reportsPage .reports-chart-day__bar {
    background: linear-gradient(180deg, #43e890, var(--moyli-primary)) !important;
    box-shadow: 0 4px 10px rgba(34, 180, 102, 0.15) !important;
}

body.moyli-theme-light #reportsPage .reports-ranking-row,
body.moyli-theme-light #reportsPage .reports-payment-row {
    border-bottom-color: #e7f2ec !important;
}

/* Notifications */
body.moyli-theme-light #notificationsPage .notifications-v71__provider,
body.moyli-theme-light #notificationsPage .notifications-v71__panel {
    box-shadow: var(--moyli-light-shadow) !important;
}

body.moyli-theme-light #notificationsPage .notifications-v71__search,
body.moyli-theme-light #notificationsPage .notifications-v71__toolbar select {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
}

body.moyli-theme-light #notificationsPage :is(
    .notifications-v71__panel-head h2,
    .notifications-v71__copy strong,
    .notifications-v71__reminder-copy strong
) {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #notificationsPage :is(
    .notifications-v71__panel-head p,
    .notifications-v71__meta small,
    .notifications-v71__reminder-copy small
) {
    color: var(--moyli-light-muted) !important;
}

/* Archive */
body.moyli-theme-light #archivePage .archive-v99__notice {
    background: #f8fcfa !important;
}

body.moyli-theme-light #archivePage .archive-v99__search,
body.moyli-theme-light #archivePage .archive-v99__toolbar select,
body.moyli-theme-light #archivePage .archive-v99__refresh,
body.moyli-theme-light #archivePage .archive-v99__detail-btn {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
    color: #356b4e !important;
}

body.moyli-theme-light #archivePage .archive-v99__record strong {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #archivePage .archive-v99__record small,
body.moyli-theme-light #archivePage .archive-v99__date {
    color: var(--moyli-light-muted) !important;
}

/* Profile */
body.moyli-theme-light #profilePage .profile-field input[readonly] {
    background: #f4faf7 !important;
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light #profilePage .profile-large-avatar,
body.moyli-theme-light #profilePage .profile-secondary-button,
body.moyli-theme-light #profilePage .profile-password-button,
body.moyli-theme-light #profilePage .profile-field-action {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
    color: #356b4e !important;
}

/* Settings missing dark islands */
body.moyli-theme-light #settingsPage .settings-v90__typography-control > label strong,
body.moyli-theme-light #settingsPage .settings-v90__type-preview strong {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light #settingsPage .settings-v90__typography-control > label small,
body.moyli-theme-light #settingsPage .settings-v90__type-preview small {
    color: var(--moyli-light-muted) !important;
}

body.moyli-theme-light #settingsPage .settings-v90__font-sizes button {
    color: var(--ds-text-muted) !important;
    border-color: var(--moyli-light-border) !important;
    background: #ffffff !important;
}

body.moyli-theme-light #settingsPage .settings-v90__font-sizes button.is-active {
    color: var(--ds-accent-strong) !important;
    border-color: #9edfbc !important;
    background: #edfcf4 !important;
}

/* All application modals become clean light dialogs. */
body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) {
    color: var(--moyli-light-text) !important;
    border-color: var(--moyli-light-border-strong) !important;
    background: #ffffff !important;
    box-shadow: 0 26px 70px rgba(24, 61, 41, 0.2) !important;
}

body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) :is(h1, h2, h3, strong) {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) :is(p, small, label, span) {
    color: var(--moyli-light-muted);
}

body.moyli-theme-light .archive-v99__detail-item {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
}

body.moyli-theme-light .archive-v99__detail-item strong {
    color: var(--moyli-light-text) !important;
}

body.moyli-theme-light .archive-v99__detail-item small {
    color: var(--moyli-light-muted) !important;
}

/* Secondary buttons: quiet and professional. */
body.moyli-theme-light :is(
    #warehouseProductModalCancel,
    #warehouseMovementCancel,
    #warehouseHistoryCloseBtn,
    .sales-client-modal-actions button:first-child,
    .sales-service-modal-actions button:first-child,
    .sales-detail-secondary,
    .cash-modal-actions button:not(.is-primary):not(.is-danger),
    .reports-secondary-btn,
    .notifications-v71__secondary,
    .archive-v99__refresh
) {
    border-color: var(--moyli-light-border) !important;
    background: #f8fcfa !important;
    color: #356b4e !important;
}

body.moyli-theme-light :is(
    #warehouseProductModalCancel,
    #warehouseMovementCancel,
    #warehouseHistoryCloseBtn,
    .sales-client-modal-actions button:first-child,
    .sales-service-modal-actions button:first-child,
    .sales-detail-secondary,
    .cash-modal-actions button:not(.is-primary):not(.is-danger),
    .reports-secondary-btn,
    .notifications-v71__secondary,
    .archive-v99__refresh
):hover {
    border-color: #addfc4 !important;
    background: #eefaf4 !important;
    color: var(--ds-success-text) !important;
}

/* Keep overlays dark enough to focus attention on the light dialog. */
body.moyli-theme-light :is(
    .warehouse-product-modal-overlay,
    .sales-client-modal-overlay,
    .sales-service-modal-overlay,
    .cash-modal-overlay,
    .archive-v99__modal-overlay,
    .profile-email-modal-overlay,
    .reports-detail-backdrop
) {
    background: rgba(18, 43, 30, 0.45) !important;
    backdrop-filter: blur(5px);
}

/* Mobile trigger must also belong to the light shell. */
@media (max-width: 800px) {
    body.moyli-theme-light .mobile-menu-button {
        color: #245f40 !important;
        border-color: var(--moyli-light-border) !important;
        background: #ffffff !important;
        box-shadow: var(--moyli-light-shadow) !important;
    }
}

/* =========================================================
   V1.0.9 — LIGHT THEME / APPROVED PREVIEW MATCH
   Visual target: airy premium SaaS workspace from the approved
   Light Theme preview. Dark / Photo / Video are intentionally untouched.
   ========================================================= */

body.moyli-theme-light {
    --moyli-preview-canvas: #eef8f3;
    --moyli-preview-sidebar: #f8fefb;
    --moyli-preview-surface: #ffffff;
    --moyli-preview-surface-2: #f7fcf9;
    --moyli-preview-surface-3: #f2fbf6;
    --moyli-preview-border: #dcefe5;
    --moyli-preview-border-strong: #cbe7d8;
    --moyli-preview-text: #103f26;
    --moyli-preview-muted: #6f9681;
    --moyli-preview-faint: #94b3a2;
    --moyli-preview-blue: #2bea84;
    --moyli-preview-blue-deep: #0f974e;
    --moyli-preview-red: #ff1f35;
    --moyli-preview-green: #10c989;
    --moyli-preview-yellow: #f2a90d;
    --moyli-preview-danger: #ff4052;
    --moyli-preview-radius: 13px;
    --moyli-preview-shadow: 0 7px 22px rgba(29, 76, 51, 0.065);
    --moyli-preview-shadow-hover: 0 12px 28px rgba(29, 76, 51, 0.1);

    --bg: var(--moyli-preview-canvas);
    --bg-2: #e9f6ef;
    --sidebar: var(--moyli-preview-sidebar);
    --panel: var(--moyli-preview-surface);
    --panel-2: var(--moyli-preview-surface-2);
    --border: #9ed1b6;
    --border-soft: rgba(72, 137, 102, 0.16);
    --text: var(--moyli-preview-text);
    --text-soft: var(--moyli-preview-muted);
    --text-dim: var(--moyli-preview-faint);
    --shadow-blue: var(--moyli-preview-shadow);

    background: var(--moyli-preview-canvas) !important;
    color: var(--moyli-preview-text) !important;
}

/* v1.0.20.1: the Light-only block that forced Inter (with !important) on body / button / input / select / textarea lived here and made the
   chosen font family work in Dark only. The family is now ONE theme-independent rule (design-system.css, "TYPOGRAPHY SYSTEM"). */

body.moyli-theme-light .moyli-background-layer,
body.moyli-theme-light .app {
    background:
        radial-gradient(circle at 78% -8%, rgba(70, 225, 142, 0.08), transparent 28%),
        linear-gradient(180deg, #f2faf6 0%, var(--moyli-preview-canvas) 100%) !important;
}

body.moyli-theme-light .main {
    background: transparent !important;
    color: var(--moyli-preview-text) !important;
}

/* ---------- Sidebar: clean white shell from the approved preview ---------- */
body.moyli-theme-light .sidebar {
    background: linear-gradient(180deg, #fbfffd 0%, #f5fcf8 100%) !important;
    border-right: 1px solid #d6ece0 !important;
    box-shadow: 8px 0 28px rgba(35, 94, 63, 0.045) !important;
}

body.moyli-theme-light .brand {
    border-bottom-color: #e4f3eb !important;
}

body.moyli-theme-light .brand-name,
body.moyli-theme-light .sidebar-time,
body.moyli-theme-light .sidebar-user strong {
    color: #0f4126 !important;
}

body.moyli-theme-light .brand-system,
body.moyli-theme-light .sidebar-date,
body.moyli-theme-light .sidebar-user span {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light :is(
    .dashboard-language-button,
    .sidebar-notification-button,
    .sidebar-menu-button,
    .sidebar-support,
    .sidebar-user
) {
    border-color: #dbefe4 !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #245f40 !important;
    box-shadow: 0 4px 14px rgba(29, 76, 51, 0.045) !important;
}

body.moyli-theme-light .main-menu {
    gap: 5px !important;
}

body.moyli-theme-light .menu-item {
    color: #295c41 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.moyli-theme-light .menu-item:hover {
    color: #175f39 !important;
    border-color: #def3e8 !important;
    background: #edfaf3 !important;
}

body.moyli-theme-light .menu-item.active {
    color: #ffffff !important;
    border-color: var(--moyli-primary) !important;
    background: linear-gradient(135deg, var(--moyli-primary) 0%, var(--moyli-primary) 100%) !important;
    box-shadow: 0 9px 22px rgba(17, 167, 87, 0.2) !important;
}

body.moyli-theme-light .menu-icon,
body.moyli-theme-light .sidebar-support__icon {
    color: var(--ds-success-text) !important;
    border-color: #d7f0e3 !important;
    background: linear-gradient(180deg, #ffffff 0%, #eefbf4 100%) !important;
    box-shadow: 0 3px 10px rgba(27, 108, 65, 0.045) !important;
}

body.moyli-theme-light .menu-item.active .menu-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.moyli-theme-light .dashboard-language-menu {
    border-color: var(--moyli-preview-border) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(28, 73, 49, 0.16) !important;
}

body.moyli-theme-light .dashboard-language-menu .language-option {
    color: #295c41 !important;
}

body.moyli-theme-light .dashboard-language-menu .language-option:hover,
body.moyli-theme-light .dashboard-language-menu .language-option.active {
    background: #edfcf4 !important;
    color: var(--ds-success-text) !important;
}

/* ---------- Universal page headers ---------- */
body.moyli-theme-light :is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) {
    border: 1px solid var(--moyli-preview-border) !important;
    border-radius: var(--moyli-preview-radius) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: var(--moyli-preview-shadow) !important;
}

body.moyli-theme-light :is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) :is(h1,h2,h3,strong) {
    color: var(--moyli-preview-text) !important;
}

body.moyli-theme-light :is(
    .topbar:not([hidden]),
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head,
    #notificationsPage .notifications-page__head,
    #archivePage .archive-v99__head,
    #profilePage .profile-page-header
) :is(p,small,span:not(.badge):not(.notification-badge)) {
    color: var(--moyli-preview-muted) !important;
}

/* ---------- Shared cards / surfaces ---------- */
body.moyli-theme-light :is(
    .dashboard-v62-kpi,
    .dashboard-v62-actions,
    .dashboard-v62-payments,
    .dashboard-v62-panel,
    #salesPage .sales-start-card,
    #salesPage .sales-results,
    #salesPage .sales-workspace,
    #salesPage .sales-selected-client,
    #salesPage .sales-services-panel,
    #salesPage .sales-products-panel,
    #salesPage .sales-checkout,
    #salesPage .sales-checkout-card,
    #salesPage .sales-history-main,
    #salesPage .sales-history-client-pane,
    #salesPage .sales-analytics-chart-card,
    #salesPage .sales-analytics-detail,
    #clientsPage .clients-toolbar,
    #clientsPage .clients-list-panel,
    #warehousePage .warehouse-toolbar,
    #warehousePage .warehouse-summary-card,
    #warehousePage .warehouse-insights,
    #warehousePage .warehouse-products-panel,
    #cashPage .cash-toolbar,
    #cashPage .cash-summary-card,
    #cashPage .cash-channels,
    #cashPage .cash-movements-panel,
    #reportsPage .reports-toolbar,
    #reportsPage .reports-kpi,
    #reportsPage .reports-panel,
    #notificationsPage .notifications-v71__provider,
    #notificationsPage .notifications-v71__toolbar,
    #notificationsPage .notifications-v71__panel,
    #archivePage .archive-v99__notice,
    #archivePage .archive-v99__toolbar,
    #archivePage .archive-v99__panel,
    #profilePage .profile-form-card,
    #profilePage .profile-photo-card,
    #settingsPage .settings-v90__panel
) {
    border-color: var(--moyli-preview-border) !important;
    background: var(--moyli-preview-surface) !important;
    box-shadow: var(--moyli-preview-shadow) !important;
}

body.moyli-theme-light :is(
    .dashboard-v62-kpi,
    #reportsPage .reports-kpi,
    #warehousePage .warehouse-summary-card
):hover {
    transform: translateY(-1px) !important;
    border-color: #bfe7d2 !important;
    box-shadow: var(--moyli-preview-shadow-hover) !important;
}

/* ---------- Dashboard ---------- */
body.moyli-theme-light .dashboard-v62-kpi {
    background: #ffffff !important;
}

body.moyli-theme-light .dashboard-v62-kpi__copy small,
body.moyli-theme-light .dashboard-v62-section-title span,
body.moyli-theme-light .dashboard-v62-panel__head p,
body.moyli-theme-light .dashboard-v62-payments__grid span,
body.moyli-theme-light .dashboard-v62-chart__label,
body.moyli-theme-light .dashboard-v62-operation__copy span,
body.moyli-theme-light .dashboard-v62-attention-item__copy span,
body.moyli-theme-light .dashboard-v62-empty {
    color: var(--moyli-preview-muted) !important;
}

body.moyli-theme-light .dashboard-v62-kpi__copy strong,
body.moyli-theme-light .dashboard-v62-section-title strong,
body.moyli-theme-light .dashboard-v62-panel__head h2,
body.moyli-theme-light .dashboard-v62-payments__grid strong,
body.moyli-theme-light .dashboard-v62-operation__copy strong,
body.moyli-theme-light .dashboard-v62-attention-item__copy strong {
    color: var(--moyli-preview-text) !important;
}

body.moyli-theme-light .dashboard-v62-kpi:nth-child(1) .dashboard-v62-kpi__copy strong { color: var(--ds-success-text) !important; }
body.moyli-theme-light .dashboard-v62-kpi:nth-child(2) .dashboard-v62-kpi__copy strong { color: var(--ds-accent-strong) !important; }
body.moyli-theme-light .dashboard-v62-kpi:nth-child(3) .dashboard-v62-kpi__copy strong { color: var(--ds-danger-text) !important; }
body.moyli-theme-light .dashboard-v62-kpi:nth-child(4) .dashboard-v62-kpi__copy strong { color: var(--ds-success-text) !important; }

body.moyli-theme-light .dashboard-v62-kpi__icon {
    color: var(--ds-success-text) !important;
    border-color: #d9fbe9 !important;
    background: #f0fdf6 !important;
}
body.moyli-theme-light .dashboard-v62-kpi__icon.is-green { color: var(--ds-success-text) !important; border-color: #cff2e5 !important; background: #ecfbf6 !important; }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-danger { color: var(--ds-danger-text) !important; border-color: #ffd5da !important; background: #fff1f3 !important; }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-violet { color: var(--ds-success-text) !important; border-color: #dafae9 !important; background: #f2fef8 !important; }

body.moyli-theme-light .dashboard-v62-actions__buttons button,
body.moyli-theme-light .dashboard-v62-panel__head button {
    color: #356c4f !important;
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
    box-shadow: none !important;
}
body.moyli-theme-light .dashboard-v62-actions__buttons button:hover,
body.moyli-theme-light .dashboard-v62-panel__head button:hover {
    color: var(--ds-success-text) !important;
    border-color: #b8e8ce !important;
    background: #eefdf5 !important;
}
body.moyli-theme-light .dashboard-v62-actions__buttons button:first-child {
    color: #ffffff !important;
    border-color: var(--moyli-primary) !important;
    background: linear-gradient(135deg,var(--moyli-primary),var(--moyli-primary)) !important;
    box-shadow: 0 7px 16px rgba(17, 167, 87, 0.16) !important;
}

body.moyli-theme-light .dashboard-v62-payments__grid > div,
body.moyli-theme-light .dashboard-v62-operation,
body.moyli-theme-light .dashboard-v62-attention-item {
    border-color: #e3f4eb !important;
    background: #f8fdfa !important;
}

body.moyli-theme-light .dashboard-v62-chart {
    background-image:
        linear-gradient(rgba(101, 163, 130, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 163, 130, 0.055) 1px, transparent 1px) !important;
}
body.moyli-theme-light .dashboard-v62-chart__bar-wrap { background: #eaf8f1 !important; }
body.moyli-theme-light .dashboard-v62-chart__bar {
    background: linear-gradient(180deg,#58ee9e 0%,#2bea84 100%) !important;
    box-shadow: 0 4px 11px rgba(43, 234, 132, 0.18) !important;
}

/* ---------- Buttons: preview language ---------- */
body.moyli-theme-light :is(
    #warehousePage .warehouse-add-product-btn,
    #cashPage .cash-primary-btn,
    #reportsPage .reports-primary-btn,
    #notificationsPage .notifications-v71__refresh,
    .sales-finish-btn,
    .client-card-new-sale
) {
    color: #ffffff !important;
    border-color: var(--moyli-primary) !important;
    background: linear-gradient(135deg,var(--moyli-primary) 0%,var(--moyli-primary) 100%) !important;
    box-shadow: 0 8px 18px rgba(17, 167, 87, 0.17) !important;
}

body.moyli-theme-light :is(
    #warehousePage .warehouse-add-product-btn,
    #cashPage .cash-primary-btn,
    #reportsPage .reports-primary-btn,
    #notificationsPage .notifications-v71__refresh,
    .sales-finish-btn,
    .client-card-new-sale
):hover {
    filter: brightness(.98);
    transform: translateY(-1px);
}

body.moyli-theme-light :is(
    #reportsPage .reports-secondary-btn,
    #warehousePage .warehouse-toolbar-action,
    #warehousePage .warehouse-secondary-action,
    #clientsPage .clients-refresh-btn,
    #notificationsPage .notifications-v71__secondary,
    #archivePage .archive-v99__refresh
) {
    color: #356a4e !important;
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
    box-shadow: none !important;
}

/* ---------- Form controls ---------- */
body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(input,select,textarea) {
    color: var(--moyli-preview-text) !important;
    border-color: var(--moyli-preview-border) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 1px rgba(31, 78, 53, 0.015) !important;
}
body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(input,select,textarea):focus {
    border-color: #83e5b1 !important;
    box-shadow: 0 0 0 3px rgba(43, 234, 132, 0.09) !important;
}
body.moyli-theme-light :is(input,textarea)::placeholder { color: var(--ds-text-muted) !important; opacity: 1 !important; }

/* ---------- Reports: exact light preview treatment ---------- */
body.moyli-theme-light #reportsPage .reports-toolbar {
    border-color: var(--moyli-preview-border) !important;
    background: #ffffff !important;
    box-shadow: var(--moyli-preview-shadow) !important;
}

body.moyli-theme-light #reportsPage .reports-filter span {
    color: var(--ds-text-muted) !important;
    font-weight: 800 !important;
}

body.moyli-theme-light #reportsPage .reports-quick-range button {
    color: #245a3d !important;
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset !important;
}

body.moyli-theme-light #reportsPage .reports-quick-range button:hover {
    color: var(--ds-success-text) !important;
    border-color: #bde8d1 !important;
    background: #eefcf5 !important;
}

body.moyli-theme-light #reportsPage .reports-quick-range button.active {
    color: #ffffff !important;
    border-color: #109e52 !important;
    background: linear-gradient(180deg,var(--moyli-primary),var(--moyli-primary)) !important;
    box-shadow: 0 6px 14px rgba(14, 137, 71, 0.16) !important;
}

body.moyli-theme-light #reportsPage .reports-kpi {
    min-height: 96px;
    border-radius: 12px !important;
    background: #ffffff !important;
}
body.moyli-theme-light #reportsPage .reports-kpi span { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #reportsPage .reports-kpi small { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #reportsPage .reports-kpi strong { color: #144229 !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-primary strong { color: var(--ds-success-text) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-success strong { color: var(--ds-success-text) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-danger strong { color: var(--ds-danger-text) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-warning strong { color: var(--ds-warning-text) !important; }

body.moyli-theme-light #reportsPage .reports-panel {
    border-radius: 12px !important;
    background: #ffffff !important;
}
body.moyli-theme-light #reportsPage .reports-section-head {
    border-bottom-color: #e6f3ec !important;
    background: #ffffff !important;
}
body.moyli-theme-light #reportsPage .reports-section-head h2 { color: #103f26 !important; }
body.moyli-theme-light #reportsPage .reports-section-head p { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #reportsPage .reports-chart {
    background-color: #fbfffd !important;
    background-image:
        linear-gradient(rgba(106, 161, 132, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 161, 132, 0.055) 1px, transparent 1px) !important;
}
body.moyli-theme-light #reportsPage .reports-chart-day { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #reportsPage .reports-chart-day__value { color: var(--ds-success-text) !important; }
body.moyli-theme-light #reportsPage .reports-chart-day__bar {
    background: linear-gradient(180deg,#63f0a5 0%,#2bea84 100%) !important;
    box-shadow: 0 5px 12px rgba(43, 234, 132, 0.17) !important;
}
body.moyli-theme-light #reportsPage :is(.reports-payment-row,.reports-ranking-row) {
    border-bottom-color: #e7f4ed !important;
}
body.moyli-theme-light #reportsPage :is(.reports-payment-row,.reports-ranking-row) span { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #reportsPage :is(.reports-payment-row,.reports-ranking-row) strong { color: #17472d !important; }
body.moyli-theme-light #reportsPage .reports-ranking-row b { color: var(--ds-success-text) !important; }
body.moyli-theme-light #reportsPage .reports-table-head {
    color: var(--ds-text-muted) !important;
    border-bottom-color: #e1f1e8 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light #reportsPage .reports-table-row {
    color: #1d4f34 !important;
    border-bottom-color: #e8f3ed !important;
    background: #ffffff !important;
}
body.moyli-theme-light #reportsPage .reports-table-row:hover { background: #f7fefa !important; }

/* ---------- Warehouse ---------- */
body.moyli-theme-light #warehousePage .warehouse-toolbar {
    background: #ffffff !important;
}
body.moyli-theme-light #warehousePage .warehouse-search {
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #warehousePage .warehouse-search input { background: transparent !important; }

body.moyli-theme-light #warehousePage .warehouse-summary-card {
    background: #ffffff !important;
    border-color: var(--moyli-preview-border) !important;
}
body.moyli-theme-light #warehousePage .warehouse-summary-card.is-warning {
    background: #fffdf8 !important;
    border-color: #f0dfad !important;
}
body.moyli-theme-light #warehousePage .warehouse-summary-card.is-danger {
    background: #fff9fa !important;
    border-color: #f1c6cd !important;
}
body.moyli-theme-light #warehousePage .warehouse-summary-card.is-success {
    background: #f8fdfb !important;
    border-color: #bfe8da !important;
}
body.moyli-theme-light #warehousePage .warehouse-summary-card__content > span { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #warehousePage .warehouse-summary-card__content > strong { color: #14442a !important; }
body.moyli-theme-light #warehousePage .warehouse-summary-card__content > small { color: var(--ds-text-muted) !important; }

body.moyli-theme-light #warehousePage .warehouse-insights,
body.moyli-theme-light #warehousePage .warehouse-category-report {
    background: #ffffff !important;
}
body.moyli-theme-light #warehousePage .warehouse-insight-item {
    color: #1a4b31 !important;
    border-color: #e0f1e8 !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #warehousePage .warehouse-products-table__head {
    color: var(--ds-text-muted) !important;
    border-bottom-color: #def0e6 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light #warehousePage .warehouse-product-row {
    color: #215238 !important;
    border-bottom-color: #e7f3ed !important;
    background: #ffffff !important;
}
body.moyli-theme-light #warehousePage .warehouse-product-row:hover { background: #f7fefa !important; }
body.moyli-theme-light #warehousePage .warehouse-product-name__copy strong,
body.moyli-theme-light #warehousePage .warehouse-product-row strong { color: #16472d !important; }
body.moyli-theme-light #warehousePage .warehouse-product-name__copy small { color: var(--ds-text-muted) !important; }
body.moyli-theme-light #warehousePage .warehouse-product-actions button {
    color: #296746 !important;
    border-color: #d8eee2 !important;
    background: #f8fdfa !important;
}

/* ---------- Sales ---------- */
body.moyli-theme-light #salesPage .sales-tabs {
    border-color: var(--moyli-preview-border) !important;
    background: #ffffff !important;
    box-shadow: var(--moyli-preview-shadow) !important;
}
body.moyli-theme-light #salesPage .sales-tab {
    color: var(--ds-text-muted) !important;
    border-color: transparent !important;
    background: transparent !important;
}
body.moyli-theme-light #salesPage .sales-tab:hover { color: var(--ds-success-text) !important; background: #f0fcf6 !important; }
body.moyli-theme-light #salesPage .sales-tab.is-active {
    color: var(--ds-accent-strong) !important;
    border-color: #b9efd2 !important;
    background: #f0fdf6 !important;
    box-shadow: inset 0 0 0 1px rgba(43, 234, 132, 0.04) !important;
}
body.moyli-theme-light #salesPage :is(
    .sales-client-search-field,
    .sales-plate-field,
    .sales-product-picker-search,
    .sales-history-search-wrap
) {
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #salesPage :is(
    .sales-services-table__head,
    .sales-products-table__head
) {
    color: var(--ds-text-muted) !important;
    background: #f7fcf9 !important;
    border-bottom-color: #e2f2e9 !important;
}
body.moyli-theme-light #salesPage :is(.sales-service-row,.sales-product-row) {
    color: #205338 !important;
    border-bottom-color: #e8f3ed !important;
    background: #ffffff !important;
}
body.moyli-theme-light #salesPage :is(.sales-service-row,.sales-product-row):hover { background: #f8fdfa !important; }
body.moyli-theme-light #salesPage .sales-payment-methods button {
    color: var(--ds-text-muted) !important;
    border-color: #d9efe3 !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #salesPage .sales-payment-methods button.is-active {
    color: #ffffff !important;
    border-color: #10a756 !important;
    background: var(--moyli-primary) !important;
}

/* ---------- Clients ---------- */
body.moyli-theme-light #clientsPage .clients-search-field {
    border-color: var(--moyli-preview-border) !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #clientsPage .clients-list-head {
    color: var(--ds-text-muted) !important;
    border-color: #e0f0e7 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light #clientsPage .clients-list { background: #ffffff !important; }
body.moyli-theme-light #clientsPage .client-list-row {
    color: #1b4d32 !important;
    border-bottom-color: #e7f3ed !important;
    background: #ffffff !important;
}
body.moyli-theme-light #clientsPage .client-list-row:hover { background: #f6fefa !important; }
body.moyli-theme-light #clientsPage .client-list-row.is-selected {
    border-color: #a8f1ca !important;
    background: #effdf6 !important;
    box-shadow: inset 3px 0 0 #2bea84 !important;
}
body.moyli-theme-light #clientsPage .client-list-identity strong,
body.moyli-theme-light #clientsPage .client-list-vehicle strong { color: #15492d !important; }
body.moyli-theme-light #clientsPage .client-list-identity span,
body.moyli-theme-light #clientsPage .client-list-vehicle span { color: var(--ds-text-muted) !important; }

body.moyli-theme-light .client-card {
    color: var(--moyli-preview-text) !important;
    border-color: var(--moyli-preview-border-strong) !important;
    background: #ffffff !important;
    box-shadow: -18px 0 48px rgba(29, 76, 51, 0.16) !important;
}
body.moyli-theme-light .client-card__top,
body.moyli-theme-light .client-card-section {
    border-color: #e2f2e9 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .client-card-stats article,
body.moyli-theme-light .client-card-service-summary article {
    border-color: #e1f2e9 !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light .client-card :is(h2,h3,strong) { color: #15492d !important; }
body.moyli-theme-light .client-card :is(p,span,small) { color: var(--ds-text-muted); }

/* ---------- Cash / notifications / archive ---------- */
body.moyli-theme-light :is(
    #cashPage .cash-table-head,
    #archivePage .archive-v99__table-head
) {
    color: var(--ds-text-muted) !important;
    border-bottom-color: #dff0e7 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light :is(
    #cashPage .cash-movement-row,
    #archivePage .archive-v99__row,
    #notificationsPage .notifications-v71__row,
    #notificationsPage .notifications-v71__reminder-row
) {
    color: #215137 !important;
    border-bottom-color: #e7f3ed !important;
    background: #ffffff !important;
}
body.moyli-theme-light :is(
    #cashPage .cash-movement-row,
    #archivePage .archive-v99__row,
    #notificationsPage .notifications-v71__row
):hover { background: #f7fefa !important; }

/* ---------- Semantic status chips ---------- */
body.moyli-theme-light :is(.warehouse-stock-status.is-ok,.is-success,.status-success) {
    color: var(--ds-success-text) !important;
}
body.moyli-theme-light .warehouse-stock-status.is-ok {
    border-color: #b9ebd8 !important;
    background: #e9fbf4 !important;
}
body.moyli-theme-light .warehouse-stock-status.is-low {
    color: var(--ds-warning-text) !important;
    border-color: #f0d79b !important;
    background: #fff7df !important;
}
body.moyli-theme-light .warehouse-stock-status.is-out {
    color: var(--ds-danger-text) !important;
    border-color: #f2bdc5 !important;
    background: #fff0f2 !important;
}

/* ---------- Modals / drawers ---------- */
body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) {
    color: var(--moyli-preview-text) !important;
    border-color: var(--moyli-preview-border-strong) !important;
    background: #ffffff !important;
    box-shadow: 0 28px 72px rgba(25, 63, 43, 0.21) !important;
}

body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) :is(h1,h2,h3,h4,strong) { color: #14442a !important; }

body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .cash-delete-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal
) :is(p,small,label,span) { color: var(--ds-text-muted); }

body.moyli-theme-light :is(
    .warehouse-product-modal-overlay,
    .sales-client-modal-overlay,
    .sales-service-modal-overlay,
    .cash-modal-overlay,
    .archive-v99__modal-overlay,
    .profile-email-modal-overlay,
    .reports-detail-backdrop
) {
    background: rgba(17, 50, 32, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ---------- Settings theme preview tile ---------- */
body.moyli-theme-light .settings-v90__theme-preview.is-light {
    border: 1px solid #c9e8d7 !important;
    background:
        linear-gradient(90deg, #f7fefa 0 24%, transparent 24%),
        linear-gradient(180deg, #ffffff 0 26%, #eef8f3 26% 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75) !important;
}

/* ---------- Keep the layout airy and consistent with the preview ---------- */
body.moyli-theme-light :is(
    #salesPage .sales-header,
    #clientsPage .clients-page__head,
    #warehousePage .warehouse-page__head,
    #cashPage .cash-page__head,
    #reportsPage .reports-page__head
) {
    min-height: 58px !important;
}

@media (max-width: 800px) {
    body.moyli-theme-light .mobile-menu-button {
        color: #245f40 !important;
        border-color: var(--moyli-preview-border) !important;
        background: #ffffff !important;
        box-shadow: var(--moyli-preview-shadow) !important;
    }
}

/* =========================================================
   V1.0.10 — LIGHT THEME CONTRAST & CONSISTENCY PASS
   Removes remaining dark-theme surfaces and restores readable
   contrast across the approved professional Light Theme.
   Dark / Photo / Video themes are intentionally untouched.
   ========================================================= */

body.moyli-theme-light {
    --moyli-l10-text: #103f26;
    --moyli-l10-text-2: #295e42;
    --moyli-l10-muted: #66937b;
    --moyli-l10-faint: #87a896;
    --moyli-l10-line: #dbefe4;
    --moyli-l10-line-strong: #c9e7d7;
    --moyli-l10-soft: #f7fcf9;
    --moyli-l10-soft-blue: #eefdf5;
    --moyli-l10-blue: #2bea84;
    --moyli-l10-blue-deep: #11aa58;
    --moyli-l10-red: #ff2038;
}

/* ---------- Global contrast ---------- */
body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(h1, h2, h3, h4, h5, p, span, small, strong, label) {
    opacity: 1;
}

body.moyli-theme-light .app :is(input, select, textarea) {
    color: var(--moyli-l10-text) !important;
}

body.moyli-theme-light .app :is(input, textarea)::placeholder {
    color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}

body.moyli-theme-light .app :is(input, select, textarea):disabled {
    opacity: 1 !important;
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    background: #f0f8f4 !important;
}

/* ---------- Sidebar ---------- */
/* The dark vertical strip in Light mode was the sidebar scrollbar. */
body.moyli-theme-light .sidebar {
    border-right: 1px solid #d9ede2 !important;
    box-shadow: 7px 0 22px rgba(36, 96, 64, 0.04) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
body.moyli-theme-light .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* The original logo contains white lower details; a soft tile keeps them visible. */
body.moyli-theme-light .brand-logo {
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid #dcf0e5;
    border-radius: 8px;
    background: #edf8f2;
}

body.moyli-theme-light .sidebar-controls .icon-button {
    color: var(--ds-success-text) !important;
    border-color: #d8eee2 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 84, 55, 0.05) !important;
}
body.moyli-theme-light .sidebar-controls .icon-button:hover {
    color: var(--ds-success-text) !important;
    border-color: #b9e5ce !important;
    background: #f2fcf7 !important;
}
body.moyli-theme-light .sidebar-controls .icon-button .control-svg,
body.moyli-theme-light .dashboard-language-arrow {
    color: currentColor !important;
    opacity: 1 !important;
}

/* ---------- Light page/header icon treatment ---------- */
body.moyli-theme-light :is(
    #salesPage .sales-header__icon,
    #salesPage .sales-heading-icon,
    #clientsPage .page-title-icon,
    #warehousePage .page-title-icon,
    #cashPage .page-title-icon,
    #reportsPage .page-title-icon
) {
    color: var(--ds-success-text) !important;
    border-color: #cff2df !important;
    background: linear-gradient(180deg, #f7fefa, #eafbf2) !important;
    box-shadow: none !important;
}

/* ---------- SAVDO: found client ---------- */
body.moyli-theme-light #salesPage .sales-found-client {
    color: var(--moyli-l10-text) !important;
    border-color: #cfebdc !important;
    background: #ffffff !important;
    box-shadow: 0 5px 16px rgba(29, 76, 51, 0.055) !important;
}
body.moyli-theme-light #salesPage .sales-found-client:hover {
    border-color: #b9e8cf !important;
    background: #fbfffd !important;
}
body.moyli-theme-light #salesPage .sales-found-client__main > strong,
body.moyli-theme-light #salesPage .sales-found-client__vehicle > strong {
    color: #15492d !important;
}
body.moyli-theme-light #salesPage .sales-found-client__main > span,
body.moyli-theme-light #salesPage .sales-found-client__vehicle > span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #salesPage .sales-found-client__vehicle {
    border-left-color: #e1f1e8 !important;
}
body.moyli-theme-light #salesPage .sales-found-client__chip {
    color: var(--ds-text-muted) !important;
    border-color: #dcefe5 !important;
    background: #f4fbf7 !important;
}
body.moyli-theme-light #salesPage .sales-found-client__chip.is-debt {
    color: var(--ds-danger-text) !important;
    border-color: #f1c8ce !important;
    background: #fff4f5 !important;
}
body.moyli-theme-light #salesPage .sales-found-client__chip.is-next {
    color: var(--ds-success-text) !important;
    border-color: #bfe8da !important;
    background: #eefaf6 !important;
}
body.moyli-theme-light #salesPage .sales-found-client__open {
    color: var(--ds-success-text) !important;
    border-color: #b8eed1 !important;
    background: #f0fdf6 !important;
    box-shadow: none !important;
}
body.moyli-theme-light #salesPage .sales-found-client__open:hover {
    color: #ffffff !important;
    border-color: #2bea84 !important;
    background: #2bea84 !important;
}

/* ---------- SAVDO: sale workspace ---------- */
body.moyli-theme-light #salesPage .sales-workspace__top {
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--moyli-l10-line) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 16px rgba(29, 76, 51, 0.05) !important;
}
body.moyli-theme-light #salesPage .sales-workspace-back {
    color: #316d4d !important;
    border-color: #d7ede1 !important;
    background: #f5fcf8 !important;
}
body.moyli-theme-light #salesPage .sales-workspace-back:hover {
    color: var(--ds-success-text) !important;
    border-color: #b8e8ce !important;
    background: #edfdf4 !important;
}
body.moyli-theme-light #salesPage .sales-workspace__top h2,
body.moyli-theme-light #salesPage .sales-workspace-title-block h2 {
    color: var(--moyli-l10-text) !important;
}
body.moyli-theme-light #salesPage .sales-workspace__top p,
body.moyli-theme-light #salesPage .sales-workspace-title-block p {
    color: var(--moyli-l10-muted) !important;
}

body.moyli-theme-light #salesPage .sales-selected-client :is(span, small) {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #salesPage .sales-selected-client strong {
    color: #14472c !important;
}

/* ---------- SAVDO: service/product + checkout ---------- */
body.moyli-theme-light #salesPage :is(
    .sales-section-head h3,
    .sales-section-title,
    .sales-checkout__head h3,
    .sales-checkout-card h4
) {
    color: #17492e !important;
    opacity: 1 !important;
}
body.moyli-theme-light #salesPage :is(
    .sales-section-head p,
    .sales-checkout__head p,
    .sales-services-empty,
    .sales-products-empty
) {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #salesPage .sales-section-title__icon {
    color: var(--ds-success-text) !important;
    border-color: #cdf3df !important;
    background: #f0fdf6 !important;
}
body.moyli-theme-light #salesPage .sales-checkout__head {
    border-bottom-color: #e0f1e8 !important;
    background: linear-gradient(90deg, #f5fef9 0%, #ffffff 62%) !important;
}
body.moyli-theme-light #salesPage .sales-checkout__head::before {
    background: linear-gradient(180deg, #3eec8f, #2bea84) !important;
    box-shadow: none !important;
}
body.moyli-theme-light #salesPage .sales-checkout__grand-total span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #salesPage .sales-checkout__grand-total strong {
    color: #14472c !important;
}
body.moyli-theme-light #salesPage .sales-checkout-card {
    border-bottom-color: #e3f1ea !important;
    background: transparent !important;
}
body.moyli-theme-light #salesPage .sales-checkout-row {
    color: var(--ds-text-muted) !important;
    border-bottom-color: #e7f3ed !important;
}
body.moyli-theme-light #salesPage .sales-checkout-row strong,
body.moyli-theme-light #salesPage .sales-checkout-row.is-total span {
    color: #184b30 !important;
}
body.moyli-theme-light #salesPage .sales-discount-controls label > span,
body.moyli-theme-light #salesPage .sales-next-service-grid label > span,
body.moyli-theme-light #salesPage .sales-payment-mixed label > span,
body.moyli-theme-light #salesPage .sales-note-field > span {
    color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}
body.moyli-theme-light #salesPage .sales-payment-methods button {
    color: #356c4f !important;
    border-color: #d6ede1 !important;
    background: #f8fdfa !important;
}
body.moyli-theme-light #salesPage .sales-payment-methods button.is-active {
    color: #ffffff !important;
    border-color: #12b65f !important;
    background: linear-gradient(135deg, var(--moyli-primary), var(--moyli-primary)) !important;
}
body.moyli-theme-light #salesPage .sales-sms-toggle {
    color: var(--ds-text-muted) !important;
    border-color: #dcefe5 !important;
    background: #f5fcf8 !important;
}
body.moyli-theme-light #salesPage .sales-sms-toggle span {
    color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}
body.moyli-theme-light #salesPage .sales-next-service-preview {
    color: var(--ds-text-muted) !important;
    border-color: #e0f0e7 !important;
    background: #f7fcf9 !important;
}

/* ---------- OMBOR: category report ---------- */
body.moyli-theme-light #warehousePage .warehouse-category-report {
    border-top-color: #e1f1e8 !important;
    background: #ffffff !important;
}
body.moyli-theme-light #warehousePage .warehouse-category-report__title {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #warehousePage .warehouse-category-report__row {
    color: var(--ds-text-muted) !important;
    border: 1px solid #e0f0e7 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light #warehousePage .warehouse-category-report__row:hover {
    border-color: #cbe9d9 !important;
    background: #f1fbf6 !important;
}
body.moyli-theme-light #warehousePage .warehouse-category-report__row strong {
    color: #17492e !important;
}
body.moyli-theme-light #warehousePage .warehouse-muted {
    color: var(--ds-text-muted) !important;
}

/* ---------- KASSA ---------- */
body.moyli-theme-light #cashPage .cash-filter > span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #cashPage .cash-search {
    color: var(--ds-text-muted) !important;
    border-color: #d8eee2 !important;
    background: #ffffff !important;
}
body.moyli-theme-light #cashPage .cash-search input {
    color: #17492e !important;
    background: transparent !important;
}
body.moyli-theme-light #cashPage .cash-refresh-btn {
    color: #ffffff !important;
    border-color: #12a858 !important;
    background: linear-gradient(135deg, var(--moyli-primary), var(--moyli-primary)) !important; /* v1.0.20: lighter stop was #16b962 (white text 2.6:1) */
    box-shadow: 0 5px 13px rgba(15, 153, 79, 0.15) !important;
}
body.moyli-theme-light #cashPage .cash-refresh-btn:hover {
    border-color: #0e8e4a !important;
    background: linear-gradient(135deg, var(--moyli-primary), #0d8344) !important;
}
body.moyli-theme-light #cashPage .cash-section-head h2 {
    color: #17492e !important;
}
body.moyli-theme-light #cashPage .cash-section-head p,
body.moyli-theme-light #cashPage .cash-channel-grid span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #cashPage .cash-channel-grid article {
    border-color: #dcefe5 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light #cashPage .cash-channel-grid strong {
    color: #17492e !important;
}

/* ---------- HISOBOTLAR: keep native scrolling, remove dark scrollbar ---------- */
body.moyli-theme-light #reportsPage .reports-chart {
    scrollbar-width: thin !important;
    scrollbar-color: #a9dac0 #edf7f2 !important;
}
body.moyli-theme-light #reportsPage .reports-chart::-webkit-scrollbar {
    height: 8px !important;
}
body.moyli-theme-light #reportsPage .reports-chart::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: #edf7f2 !important;
}
body.moyli-theme-light #reportsPage .reports-chart::-webkit-scrollbar-thumb {
    border: 2px solid #edf7f2 !important;
    border-radius: 999px !important;
    background: #a9dac0 !important;
}
body.moyli-theme-light #reportsPage .reports-chart::-webkit-scrollbar-thumb:hover {
    background: #85c8a4 !important;
}
body.moyli-theme-light #reportsPage .reports-section-head h2,
body.moyli-theme-light #reportsPage .reports-ranking-row strong,
body.moyli-theme-light #reportsPage .reports-payment-row strong {
    color: #17492e !important;
}
body.moyli-theme-light #reportsPage .reports-section-head p,
body.moyli-theme-light #reportsPage .reports-ranking-row span,
body.moyli-theme-light #reportsPage .reports-payment-row span {
    color: var(--ds-text-muted) !important;
}

/* ---------- ARXIV ---------- */
body.moyli-theme-light #archivePage.archive-v99 {
    color: var(--moyli-l10-text) !important;
}
body.moyli-theme-light #archivePage .archive-v99__head {
    min-height: 66px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 11px 14px !important;
}
body.moyli-theme-light #archivePage .archive-v99__eyebrow {
    margin-bottom: 2px !important;
    color: var(--ds-success-text) !important;
    font-size: var(--ds-fs-secondary) !important;
}
body.moyli-theme-light #archivePage .archive-v99__head h1 {
    color: #103f26 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
}
body.moyli-theme-light #archivePage .archive-v99__head p {
    margin-top: 3px !important;
    color: var(--ds-text-muted) !important;
    font-size: var(--ds-fs-secondary) !important;
}
body.moyli-theme-light #archivePage .archive-v99__count {
    min-width: 76px !important;
    padding: 8px 12px !important;
    border-color: #d5ede0 !important;
    background: #f6fcf9 !important;
    box-shadow: none !important;
}
body.moyli-theme-light #archivePage .archive-v99__count span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light #archivePage .archive-v99__count strong {
    color: var(--ds-success-text) !important;
}
body.moyli-theme-light #archivePage .archive-v99__notice {
    border-color: #c9eadf !important;
    background: #f2fbf7 !important;
}
body.moyli-theme-light #archivePage .archive-v99__notice-icon {
    color: var(--ds-success-text) !important;
    border-color: #b9e6d6 !important;
    background: #e9f9f3 !important;
}
body.moyli-theme-light #archivePage .archive-v99__notice strong {
    color: #176a50 !important;
}
body.moyli-theme-light #archivePage .archive-v99__notice small {
    color: var(--ds-text-muted) !important;
}

/* ---------- SUPPORT MODAL ---------- */
body.moyli-theme-light .modal-overlay {
    background: rgba(22, 48, 34, 0.43) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
body.moyli-theme-light .support-modal {
    color: var(--moyli-l10-text) !important;
    border-color: #cde8da !important;
    background: #ffffff !important;
    box-shadow: 0 28px 72px rgba(20, 53, 35, 0.22) !important;
}
body.moyli-theme-light .support-modal .modal-close {
    color: var(--ds-text-muted) !important;
    border-color: #d9eee3 !important;
    background: #f6fbf8 !important;
}
body.moyli-theme-light .support-modal .modal-close:hover {
    color: var(--ds-danger-text) !important;
    border-color: #efbec5 !important;
    background: #fff2f4 !important;
}
body.moyli-theme-light .support-modal-icon {
    color: var(--ds-success-text) !important;
    border-color: #c7efda !important;
    background: #f0fdf6 !important;
}
body.moyli-theme-light .support-modal h2 {
    color: #103f26 !important;
}
body.moyli-theme-light .support-modal > p {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light .support-contact {
    border-color: #d9eee3 !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light .support-contact span {
    color: var(--ds-text-muted) !important;
}
body.moyli-theme-light .support-contact strong {
    color: #17492e !important;
}
body.moyli-theme-light .support-main-button {
    color: #ffffff !important;
    border-color: var(--moyli-primary) !important;
    background: linear-gradient(135deg, var(--moyli-primary), var(--moyli-primary)) !important;
    box-shadow: 0 7px 18px rgba(17, 167, 87, 0.17) !important;
}

/* ---------- Final readable secondary text ---------- */
body.moyli-theme-light :is(
    .dashboard-v62-panel__head p,
    .dashboard-v62-section-title span,
    #salesPage .sales-section-head p,
    #warehousePage .warehouse-insights__head p,
    #cashPage .cash-page__title p,
    #reportsPage .reports-page__title p,
    #archivePage .archive-v99__head p
) {
    opacity: 1 !important;
}

/* =========================================================
   V1.0.11 — LIGHT THEME GLOBAL READABILITY SYSTEM
   One visual language for every Light Theme page and dialog.
   Primary headings: clear navy. Section headings: 18px.
   Secondary labels/subtitles: 16px. No faded/transparent text.
   Dark / Photo / Video themes remain untouched.
   ========================================================= */

body.moyli-theme-light {
    --moyli-l11-primary: #103f26;
    --moyli-l11-secondary: #527f67;
    --moyli-l11-muted: #6b937e;
    --moyli-l11-faint: #8eae9d;
    --moyli-l11-border: #d6ece0;
    --moyli-l11-border-strong: #c5e2d3;
    --moyli-l11-surface: #ffffff;
    --moyli-l11-soft: #f6fbf8;
    --moyli-l11-soft-blue: #eefdf5;
    --moyli-l11-blue: #2bea84;
    --moyli-l11-red: #ff2038;
    color: var(--moyli-l11-primary) !important;
}

/* ---------- Global text clarity inside the application ---------- */
body.moyli-theme-light .main :is(h1, h2, h3, h4, h5, h6),
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-success-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .cash-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal,
    .support-modal
) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--moyli-l11-primary) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

body.moyli-theme-light .main :is(p, label),
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-success-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .cash-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal,
    .support-modal
) :is(p, label) {
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Section titles requested at 18px */
body.moyli-theme-light :is(
    .dashboard-v62-section-title strong,
    #salesPage .sales-card-head h3,
    #salesPage .sales-results__head h3,
    #salesPage .sales-section-head h3,
    #salesPage .sales-checkout-card h4,
    #clientsPage .clients-list-panel h2,
    #clientsPage .clients-detail-card h2,
    #warehousePage .warehouse-insights__head h2,
    #warehousePage .warehouse-products-head h2,
    #cashPage .cash-section-head h2,
    #reportsPage .reports-section-head h2,
    #notificationsPage .notifications-v71__panel-head h2,
    #archivePage .archive-v99__panel h2,
    #profilePage .profile-form-card h2,
    #settingsPage .settings-v90__section-title,
    .sales-client-modal-section h3,
    .sales-checkout-card h4
) {
    color: var(--moyli-l11-primary) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* Main subtitles / form labels requested at 16px */
body.moyli-theme-light :is(
    .dashboard-v62-panel__head p,
    #salesPage .sales-card-head p,
    #salesPage .sales-results__head p,
    #salesPage .sales-section-head p,
    #salesPage .sales-checkout__head p,
    #clientsPage .clients-page__head p,
    #warehousePage .warehouse-page__head p,
    #warehousePage .warehouse-insights__head p,
    #warehousePage .warehouse-products-head p,
    #cashPage .cash-page__title p,
    #cashPage .cash-section-head p,
    #reportsPage .reports-page__title p,
    #reportsPage .reports-section-head p,
    #notificationsPage .notifications-page__head p,
    #notificationsPage .notifications-v71__panel-head p,
    #archivePage .archive-v99__head p,
    #profilePage .profile-page-header p,
    .sales-client-modal-subtitle,
    .sales-service-modal-subtitle,
    .warehouse-product-modal__head p,
    .cash-modal__head p,
    .profile-email-modal > p,
    .support-modal > p
) {
    color: var(--moyli-l11-secondary) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    opacity: 1 !important;
}

/* ---------- ALL operational dialogs use the same Light surface ---------- */
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-success-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .cash-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal,
    .support-modal
) {
    color: var(--moyli-l11-primary) !important;
    color-scheme: light !important;
    border-color: var(--moyli-l11-border-strong) !important;
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(20, 58, 38, 0.22) !important;
}

/* Inputs/selects/textareas in dialogs were still inheriting Dark Theme. */
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-confirm-modal,
    .sales-success-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .cash-modal,
    .reports-detail-drawer,
    .archive-v99__modal,
    .profile-email-modal,
    .support-modal
) :is(input, select, textarea) {
    color: var(--moyli-l11-primary) !important;
    -webkit-text-fill-color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color-scheme: light !important;
    font-size: 16px !important;
}

body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal,
    .profile-email-modal
) :is(input, textarea)::placeholder {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}

body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal,
    .profile-email-modal
) select option {
    color: var(--moyli-l11-primary) !important;
    background: #ffffff !important;
}

body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .sales-detail-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal,
    .profile-email-modal
) :is(input, select, textarea):focus {
    border-color: #75d5a2 !important;
    box-shadow: 0 0 0 3px rgba(43, 234, 132, 0.1) !important;
}

/* Form labels are now always readable 16px. */
body.moyli-theme-light :is(
    .sales-client-field > span,
    .sales-service-field > span,
    .warehouse-product-field > span,
    .warehouse-movement-field > span,
    .cash-modal label > span,
    .profile-email-modal label,
    #salesPage .sales-discount-controls label > span,
    #salesPage .sales-payment-mixed label > span,
    #salesPage .sales-next-service-grid label > span,
    #salesPage .sales-note-field > span
) {
    color: var(--moyli-l11-secondary) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ---------- Sales: new client dialog ---------- */
body.moyli-theme-light .sales-client-modal h2,
body.moyli-theme-light .sales-service-modal h2,
body.moyli-theme-light .warehouse-product-modal__head h2,
body.moyli-theme-light .cash-modal__head h2,
body.moyli-theme-light .profile-email-modal h2,
body.moyli-theme-light .support-modal h2 {
    color: var(--moyli-l11-primary) !important;
    opacity: 1 !important;
}

body.moyli-theme-light .sales-new-plate-row input {
    color: var(--moyli-l11-primary) !important;
    -webkit-text-fill-color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
}

body.moyli-theme-light :is(
    .sales-client-modal-close,
    .sales-service-modal-close,
    .warehouse-product-modal-close,
    .profile-email-modal-close
) {
    color: var(--ds-text-muted) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f7fcf9 !important;
}

body.moyli-theme-light :is(
    .sales-client-modal-close,
    .sales-service-modal-close,
    .warehouse-product-modal-close,
    .profile-email-modal-close
):hover {
    color: var(--ds-danger-text) !important;
    border-color: #efbcc4 !important;
    background: #fff3f5 !important;
}

/* ---------- Sales: product picker ---------- */
body.moyli-theme-light .sales-product-picker,
body.moyli-theme-light .sales-product-picker-search,
body.moyli-theme-light .sales-product-preview,
body.moyli-theme-light .sales-create-service-form,
body.moyli-theme-light .sales-service-modal-section {
    border-color: var(--moyli-l11-border) !important;
    background: #f8fdfa !important;
    box-shadow: none !important;
}

body.moyli-theme-light .sales-product-picker-search input {
    color: var(--moyli-l11-primary) !important;
    -webkit-text-fill-color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
    font-size: 16px !important;
}

body.moyli-theme-light .sales-product-quick-list {
    scrollbar-color: #b6d9c6 #f0f8f4 !important;
}
body.moyli-theme-light .sales-product-quick-list::-webkit-scrollbar {
    width: 8px !important;
}
body.moyli-theme-light .sales-product-quick-list::-webkit-scrollbar-track {
    background: #f0f8f4 !important;
    border-radius: 999px !important;
}
body.moyli-theme-light .sales-product-quick-list::-webkit-scrollbar-thumb {
    background: #b6d9c6 !important;
    border-radius: 999px !important;
}

body.moyli-theme-light .sales-product-quick-item {
    color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(28, 78, 51, 0.035) !important;
}
body.moyli-theme-light .sales-product-quick-item:hover:not(:disabled),
body.moyli-theme-light .sales-product-quick-item.is-selected {
    color: var(--moyli-l11-primary) !important;
    border-color: #9ee5bf !important;
    background: #f0fdf6 !important;
}
body.moyli-theme-light .sales-product-quick-item__text strong {
    color: var(--moyli-l11-primary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-product-quick-item__text small {
    color: var(--moyli-l11-secondary) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-product-quick-item > b {
    color: var(--moyli-l11-primary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-product-quick-empty {
    color: var(--moyli-l11-secondary) !important;
    font-size: 16px !important;
}

/* Quantity stepper and product fields. */
body.moyli-theme-light :is(
    .sales-qty-stepper button,
    .sales-product-picker button:not(.sales-product-quick-item)
) {
    color: #316d4d !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f7fcf9 !important;
}

/* New service toggle */
body.moyli-theme-light .sales-create-service-toggle {
    color: var(--ds-success-text) !important;
    border-color: #c8eeda !important;
    background: #f6fefa !important;
    font-size: 16px !important;
    opacity: 1 !important;
}

/* ---------- Sales checkout cards ---------- */
body.moyli-theme-light #salesPage .sales-checkout-card {
    color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
}
body.moyli-theme-light #salesPage .sales-checkout-card h4 {
    color: var(--moyli-l11-primary) !important;
    font-size: 18px !important;
    opacity: 1 !important;
}
body.moyli-theme-light #salesPage .sales-checkout-card :is(p, label, span) {
    opacity: 1 !important;
}
body.moyli-theme-light #salesPage .sales-sms-toggle {
    color: var(--moyli-l11-secondary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f5fcf8 !important;
}
body.moyli-theme-light #salesPage .sales-sms-toggle span {
    color: var(--moyli-l11-secondary) !important;
    -webkit-text-fill-color: var(--moyli-l11-secondary) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* ---------- Receipt / sale confirmation ---------- */
body.moyli-theme-light .sales-confirm-head {
    border-bottom-color: var(--moyli-l11-border) !important;
}
body.moyli-theme-light .sales-confirm-head > div > span {
    color: var(--ds-success-text) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-head h2 {
    color: var(--moyli-l11-primary) !important;
}
body.moyli-theme-light .sales-confirm-head button {
    color: var(--ds-text-muted) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f6fbf8 !important;
}
body.moyli-theme-light .sales-confirm-meta > div {
    color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light .sales-confirm-meta :is(span, small) {
    color: var(--moyli-l11-secondary) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-meta strong {
    color: var(--moyli-l11-primary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-lines {
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
}
body.moyli-theme-light .sales-confirm-line {
    border-bottom-color: #e6f2ec !important;
    background: #ffffff !important;
}
body.moyli-theme-light .sales-confirm-line > div span {
    color: var(--ds-success-text) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-line > div strong,
body.moyli-theme-light .sales-confirm-line > strong {
    color: var(--moyli-l11-primary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-line > span {
    color: var(--moyli-l11-secondary) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-totals > div {
    color: var(--moyli-l11-secondary) !important;
    border-bottom-color: #e6f2ec !important;
    font-size: 15px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-totals > div strong {
    color: var(--moyli-l11-primary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-totals > div.is-total span,
body.moyli-theme-light .sales-confirm-totals > div.is-total strong {
    color: var(--moyli-l11-primary) !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-technical {
    color: var(--ds-text-muted) !important;
    border-color: #d5f4e3 !important;
    background: #f6fefa !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-confirm-actions button:not(.is-primary) {
    /* v1.0.20: was a near-black button (#103f26); now the shared Light secondary control (tokens: design-system.css) */
    color: var(--ds-ctl-text) !important;
    border-color: var(--ds-ctl-border) !important;
    background: var(--ds-ctl-bg) !important;
}

/* ---------- Success dialog ---------- */
body.moyli-theme-light .sales-success-modal {
    color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border-strong) !important;
    background: #ffffff !important;
}
body.moyli-theme-light .sales-success-modal h2,
body.moyli-theme-light .sales-success-total {
    color: var(--moyli-l11-primary) !important;
}
body.moyli-theme-light .sales-success-modal p {
    color: var(--moyli-l11-secondary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .sales-success-actions button:not(.is-primary) {
    color: #356b4e !important;
    border-color: var(--moyli-l11-border) !important;
    background: #f7fcf9 !important;
}

/* ---------- Warehouse dialogs ---------- */
body.moyli-theme-light .warehouse-product-modal :is(input, select, textarea),
body.moyli-theme-light .warehouse-movement-modal :is(input, select, textarea) {
    color: var(--moyli-l11-primary) !important;
    -webkit-text-fill-color: var(--moyli-l11-primary) !important;
    border-color: var(--moyli-l11-border) !important;
    background: #ffffff !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-product-field > span {
    color: var(--moyli-l11-secondary) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}

/* ---------- Page-level secondary text: never washed out ---------- */
body.moyli-theme-light :is(
    #salesPage,
    #clientsPage,
    #warehousePage,
    #cashPage,
    #reportsPage,
    #notificationsPage,
    #archivePage,
    #profilePage,
    #settingsPage
) :is(.muted, .warehouse-muted, .sales-muted) {
    color: var(--moyli-l11-secondary) !important;
    opacity: 1 !important;
}

/* Disabled controls remain clearly readable instead of looking broken. */
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal,
    #salesPage,
    #warehousePage,
    #cashPage,
    #reportsPage
) :is(input, select, textarea, button):disabled {
    opacity: 1 !important;
}
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal
) :is(input, select, textarea):disabled,
body.moyli-theme-light :is(
    .sales-client-modal,
    .sales-service-modal,
    .warehouse-product-modal,
    .warehouse-movement-modal,
    .cash-modal
) :is(input, select, textarea)[readonly] {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    border-color: #dbece3 !important;
    background: #f2f9f5 !important;
}

/* Keep disabled action buttons visibly disabled without losing their label. */
body.moyli-theme-light button:disabled {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    border-color: #d7eae0 !important;
    background: #edf6f1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Preserve active primary action colors. */
body.moyli-theme-light :is(
    #salesClientSaveBtn,
    #salesServiceAddBtn,
    #warehouseProductSaveBtn,
    .sales-confirm-actions .is-primary,
    .sales-success-actions .is-primary,
    .support-main-button
):not(:disabled) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   MOYLI v1.0.12 — SAVDO FINALIZATION / LEGIBILITY
   - no micro text in sales flow
   - inline service selection
   - multi-product picker
   - client purchase history
   - consistent Light Theme sales cards
   ========================================================= */

/* ---------- Sales typography floor ---------- */
#salesPage :is(p, small, label, button, input, select, textarea, th, td),
#salesPage :is(.sales-selected-client span, .sales-selected-client small),
#salesPage :is(.sales-history-row span, .sales-history-row small),
#salesPage :is(.sales-history-client-pane span, .sales-history-client-pane small, .sales-history-client-pane p),
#salesProductModal :is(p, span, small, label, button, input, select, textarea),
#salesServiceModal :is(p, span, small, label, button, input, select, textarea),
#salesClientModal :is(p, span, small, label, button, input, select, textarea),
#salesConfirmModal :is(p, span, small, label, button, input, select, textarea),
#salesDetailModal :is(p, span, small, label, button, input, select, textarea) {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

#salesPage :is(.sales-section-title, .sales-heading-with-icon, .sales-history-head h2, .sales-analytics-head h2),
#salesPage .sales-section-title > span:last-child,
#salesProductModal h2,
#salesServiceModal h2,
#salesClientModal h2,
#salesConfirmModal h2,
#salesDetailModal h2,
#salesDetailModal h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

#salesPage .sales-selected-client__vehicle > strong {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

#salesPage .sales-selected-client__vehicle > small {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ---------- Inline service checklist ---------- */
#salesPage .sales-services-table__head {
    display: none !important;
}

#salesPage .sales-services-list {
    min-height: 0 !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.sales-service-choice {
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(145px, .58fr);
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(82, 180, 128, 0.2);
    border-radius: 11px;
    background: rgba(5, 47, 25, 0.54);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.sales-service-choice:hover,
.sales-service-choice.is-selected {
    border-color: rgba(43, 234, 132, 0.48);
    background: rgba(43, 234, 132, 0.08);
}

.sales-service-choice__check {
    width: 28px;
    height: 28px;
    position: relative;
    display: grid;
    place-items: center;
}

.sales-service-choice__check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sales-service-choice__check i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(82, 180, 128, 0.36);
    border-radius: 7px;
    background: rgba(4, 35, 18, 0.82);
}

.sales-service-choice__check input:checked + i {
    border-color: #2bea84;
    background: #2bea84;
}

.sales-service-choice__check input:checked + i::after {
    content: "✓";
    color: #fff;
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
}

.sales-service-choice__name {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sales-service-choice__name strong {
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-service-choice__name small {
    color: var(--text-soft);
}

.sales-service-choice__price {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
}

.sales-service-choice__price input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(82, 180, 128, 0.24);
    border-radius: 8px;
    background: #053019;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    outline: none;
}

.sales-service-choice__price b {
    color: var(--text-soft);
    font-size: 14px;
}

#salesPage .sales-services-footer {
    border-top: 1px solid rgba(82, 180, 128, 0.14);
}

/* Service modal is creation-only now; selection happens inline. */
#salesServiceModal .sales-service-modal-section,
#salesServiceModal .sales-create-service-toggle {
    display: none !important;
}

#salesServiceModal .sales-create-service-form[hidden] {
    display: grid !important;
}

/* ---------- Multi-product picker ---------- */
#salesProductModal .sales-product-preview,
#salesProductModal .sales-service-modal-section {
    display: none !important;
}

#salesProductModal .sales-product-quick-list {
    max-height: min(54vh, 560px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 10px !important;
}

#salesProductModal .sales-product-quick-item--multi {
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 30px 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 180, 128, 0.2);
    border-radius: 11px;
    background: rgba(5, 47, 25, 0.72);
    cursor: pointer;
}

#salesProductModal .sales-product-quick-item--multi.is-selected {
    border-color: #2bea84;
    box-shadow: inset 0 0 0 1px rgba(43, 234, 132, 0.18);
    background: rgba(43, 234, 132, 0.1);
}

#salesProductModal .sales-product-quick-item--multi.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

#salesProductModal .sales-product-quick-item--multi > img {
    width: 54px;
    height: 54px;
    border-radius: 9px;
    object-fit: cover;
}

.sales-product-multi-check {
    width: 26px;
    height: 26px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border: 1px solid rgba(82, 180, 128, 0.36) !important;
    border-radius: 7px !important;
    background: rgba(4, 35, 18, 0.82) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.is-selected > .sales-product-multi-check {
    border-color: #2bea84 !important;
    background: #2bea84 !important;
}

.sales-product-multi-side {
    min-width: 118px;
    display: grid;
    justify-items: end;
    gap: 7px;
}

.sales-product-multi-side > b {
    color: var(--text);
    font-size: 14px;
    white-space: nowrap;
}

.sales-product-multi-qty {
    display: grid;
    grid-template-columns: 28px 34px 28px;
    align-items: center;
    gap: 4px;
}

.sales-product-multi-qty button {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 1px solid rgba(82, 180, 128, 0.26) !important;
    border-radius: 7px !important;
    background: rgba(4, 35, 18, 0.8) !important;
    color: #fff !important;
    font-size: 17px !important;
}

.sales-product-multi-qty strong {
    color: var(--text);
    font-size: 14px;
    text-align: center;
}

/* ---------- Sales history: purchase/service timeline ---------- */
.sales-history-client-purchases-section {
    min-height: 0;
}

.sales-history-client-purchases {
    max-height: 330px;
    overflow-y: auto;
    display: grid;
    gap: 7px;
    padding: 8px;
}

.sales-history-client-purchase {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(82, 180, 128, 0.14);
    border-radius: 9px;
    background: rgba(6, 56, 29, 0.65);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.sales-history-client-purchase:hover {
    border-color: rgba(43, 234, 132, 0.42);
    background: rgba(43, 234, 132, 0.07);
}

.sales-history-client-purchase__date,
.sales-history-client-purchase__body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sales-history-client-purchase__body span {
    overflow: hidden;
    color: var(--text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-history-client-purchase__body b {
    color: var(--text);
}

.sales-history-client-purchase__total {
    color: var(--text);
    font-size: 14px;
    white-space: nowrap;
}

/* ---------- Dashboard quick detail popup ---------- */
.dashboard-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 25, 13, 0.6);
    backdrop-filter: blur(8px);
}

.dashboard-detail-overlay[hidden] {
    display: none !important;
}

.dashboard-detail-modal {
    width: min(680px, calc((100vw / var(--ds-zoom, 1)) - 28px));
    max-height: calc(calc(100vh / var(--ds-zoom, 1)) - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: #07341c;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.dashboard-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}

.dashboard-detail-head > div > span {
    color: #6ff1ac;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .05em;
}

.dashboard-detail-head h2 {
    margin: 5px 0 0;
    color: var(--text);
    font-size: 22px;
}

.dashboard-detail-head p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 14px;
}

.dashboard-detail-head button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: #042a16;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

.dashboard-detail-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-detail-card {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(5, 47, 25, 0.72);
}

.dashboard-detail-card span,
.dashboard-detail-card small {
    color: var(--text-soft);
    font-size: 14px;
}

.dashboard-detail-card strong {
    color: var(--text);
    font-size: 20px;
}

.dashboard-detail-footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.dashboard-detail-footer button {
    min-width: 140px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--moyli-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

/* ---------- Strong Light Theme consistency for Savdo ---------- */
body.moyli-theme-light #salesPage .sales-selected-client,
body.moyli-theme-light #salesPage .sales-services-panel,
body.moyli-theme-light #salesPage .sales-products-panel,
body.moyli-theme-light #salesPage .sales-checkout,
body.moyli-theme-light #salesPage .sales-history-client-pane,
body.moyli-theme-light #salesPage .sales-history-client-stats article,
body.moyli-theme-light #salesPage .sales-history-client-section,
body.moyli-theme-light #salesPage .sales-history-client-vehicle,
body.moyli-theme-light #salesPage .sales-history-client-service-summary article,
body.moyli-theme-light #salesPage .sales-analytics-metrics article,
body.moyli-theme-light #salesPage .sales-analytics-chart-card,
body.moyli-theme-light #salesPage .sales-service-choice,
body.moyli-theme-light #salesPage .sales-history-client-purchase,
body.moyli-theme-light #salesDetailModal .sales-detail-card,
body.moyli-theme-light #salesDetailModal .sales-detail-meta article,
body.moyli-theme-light #salesDetailModal .sales-detail-technical-grid > div {
    color: #103f26 !important;
    border-color: #d7ece1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.moyli-theme-light #salesPage :is(
    .sales-selected-client span,
    .sales-selected-client small,
    .sales-history-client-pane span,
    .sales-history-client-pane small,
    .sales-history-client-pane p,
    .sales-analytics-metrics span,
    .sales-analytics-metrics small,
    .sales-service-choice__name small
),
body.moyli-theme-light #salesDetailModal :is(span, small, p) {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}

body.moyli-theme-light #salesPage :is(
    .sales-selected-client strong,
    .sales-history-client-pane strong,
    .sales-history-client-pane h3,
    .sales-history-client-pane h4,
    .sales-service-choice__name strong,
    .sales-history-client-purchase__body b
),
body.moyli-theme-light #salesDetailModal :is(h2, h3, strong) {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
    opacity: 1 !important;
}

body.moyli-theme-light #salesPage .sales-history-client-pane {
    background: #ffffff !important;
}

body.moyli-theme-light #salesPage .sales-history-client-head,
body.moyli-theme-light #salesPage .sales-history-client-section__head {
    border-color: #e1efe8 !important;
}

body.moyli-theme-light #salesPage .sales-history-client-avatar {
    background: #f0fef7 !important;
    border-color: #cefae3 !important;
}

body.moyli-theme-light #salesPage .sales-history-client-stats .is-debt strong.has-debt {
    color: var(--ds-danger-text) !important;
    -webkit-text-fill-color: var(--ds-danger-text) !important;
}

body.moyli-theme-light #salesPage .sales-analytics-metrics strong {
    color: var(--ds-success-text) !important;
    -webkit-text-fill-color: var(--ds-success-text) !important;
}

body.moyli-theme-light #salesPage .sales-analytics-metrics article:first-child strong {
    color: var(--ds-success-text) !important;
    -webkit-text-fill-color: var(--ds-success-text) !important;
}

body.moyli-theme-light #salesPage .sales-analytics-metrics article.is-debt strong {
    color: var(--ds-danger-text) !important;
    -webkit-text-fill-color: var(--ds-danger-text) !important;
}

body.moyli-theme-light #salesPage .sales-analytics-metrics article.is-active {
    border-color: #90eebc !important;
    background: #f0fdf6 !important;
}

body.moyli-theme-light #salesPage .sales-service-choice__check i,
body.moyli-theme-light #salesPage .sales-service-choice__price input,
body.moyli-theme-light #salesProductModal .sales-product-multi-check,
body.moyli-theme-light #salesProductModal .sales-product-multi-qty button {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
    border-color: #cfe8db !important;
    background: #f7fcf9 !important;
}

body.moyli-theme-light #salesPage .sales-service-choice__check input:checked + i,
body.moyli-theme-light #salesProductModal .is-selected > .sales-product-multi-check {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #2bea84 !important;
    background: #2bea84 !important;
}

body.moyli-theme-light #salesPage .sales-service-choice__price input {
    background: #ffffff !important;
}

body.moyli-theme-light #salesProductModal .sales-product-quick-item--multi {
    color: #103f26 !important;
    border-color: #d6ebe0 !important;
    background: #ffffff !important;
}

body.moyli-theme-light #salesProductModal .sales-product-quick-item--multi.is-selected {
    border-color: #80e8b1 !important;
    background: #f0fdf6 !important;
}

body.moyli-theme-light #salesProductModal .sales-product-multi-side > b,
body.moyli-theme-light #salesProductModal .sales-product-multi-qty strong {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-lines,
body.moyli-theme-light #salesDetailModal .sales-detail-line,
body.moyli-theme-light #salesDetailModal .sales-detail-note {
    color: #103f26 !important;
    border-color: #e1efe8 !important;
    background: #ffffff !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-actions {
    border-top-color: #dcede4 !important;
    background: #f7fcf9 !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-secondary {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
}

body.moyli-theme-light #salesPage :is(#salesHistoryRefresh, #salesAnalyticsRefresh):disabled {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    border-color: #d4e8dd !important;
    background: #edf7f2 !important;
}

body.moyli-theme-light .dashboard-detail-modal,
body.moyli-theme-light .dashboard-detail-card {
    color: #103f26 !important;
    border-color: #d8ece1 !important;
    background: #ffffff !important;
}

body.moyli-theme-light .dashboard-detail-head {
    border-bottom-color: #e0efe7 !important;
}

body.moyli-theme-light .dashboard-detail-head h2,
body.moyli-theme-light .dashboard-detail-card strong {
    color: #103f26 !important;
}

body.moyli-theme-light .dashboard-detail-head p,
body.moyli-theme-light .dashboard-detail-card span,
body.moyli-theme-light .dashboard-detail-card small {
    color: var(--ds-text-muted) !important;
}

body.moyli-theme-light .dashboard-detail-head button {
    color: var(--ds-text-muted) !important;
    border-color: #d6ebe0 !important;
    background: #f7fcf9 !important;
}

@media (max-width: 900px) {
    #salesPage .sales-services-list,
    #salesProductModal .sales-product-quick-list {
        grid-template-columns: 1fr !important;
    }

    .sales-service-choice {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .sales-service-choice__price {
        grid-column: 2;
    }
}

@media (max-width: 620px) {
    .dashboard-detail-grid {
        grid-template-columns: 1fr;
    }

    .sales-history-client-purchase {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .sales-history-client-purchase__total {
        grid-column: 2;
        justify-self: start;
    }
}

/* Products are the primary sales workflow; services stay compact below. */
#salesPage .sales-products-panel { order: 1; }
#salesPage .sales-services-panel { order: 2; }

body.moyli-theme-light #salesPage :is(#salesHistoryRefresh, #salesAnalyticsRefresh) {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
}

body.moyli-theme-light #salesPage :is(#salesHistoryRefresh, #salesAnalyticsRefresh):hover:not(:disabled) {
    color: var(--ds-success-text) !important;
    border-color: #9ce4be !important;
    background: #f0fdf6 !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-close {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    border-color: #d4e9de !important;
    background: #f7fcf9 !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-danger {
    color: var(--ds-danger-text) !important;
    -webkit-text-fill-color: var(--ds-danger-text) !important;
    border-color: #efb9c0 !important;
    background: #fff5f6 !important;
}

body.moyli-theme-light #salesDetailModal .sales-detail-danger:hover,
body.moyli-theme-light #salesDetailModal .sales-detail-danger.is-armed {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #f01427 !important;
    background: var(--moyli-danger) !important;
}

/* Explicitly lift legacy 7–13px sales text to the new readable floor. */
#salesPage :is(
    .sales-history-client-stats strong,
    .sales-history-client-section__head h4,
    .sales-history-client-vehicle strong,
    .sales-history-client-mini-list strong,
    .sales-chart-nav strong,
    .sales-day-col > strong,
    .sales-analytics-detail-row strong
) {
    font-size: 14px !important;
}

#salesPage .sales-history-client-stats strong,
#salesPage .sales-history-client-section__head h4 {
    font-size: 16px !important;
}

#salesPage :is(
    .sales-history-client-mini-list span,
    .sales-history-client-mini-empty,
    .sales-day-col > span,
    .sales-day-col > small,
    .sales-analytics-detail-row small,
    .sales-analytics-detail__head p,
    .sales-chart-nav strong
) {
    font-size: 14px !important;
}

#salesConfirmModal :is(.sales-confirm-meta strong, .sales-confirm-line strong, .sales-confirm-totals strong) {
    font-size: 16px !important;
}

#salesConfirmModal .sales-confirm-totals .is-total strong {
    font-size: 22px !important;
}

#salesDetailModal :is(
    .sales-detail-meta strong,
    .sales-detail-line strong,
    .sales-detail-totals strong,
    .sales-detail-payments strong,
    .sales-detail-technical-grid strong
) {
    font-size: 16px !important;
}

#salesDetailModal #salesDetailGrandTotal {
    font-size: 26px !important;
}

/* =========================================================
   V1.0.13 — CLIENTS + DASHBOARD + LIGHT THEME COMPLETION
   ========================================================= */

/* Clients page action */
.clients-add-btn {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--moyli-primary);
    border-radius: 10px;
    background: var(--moyli-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(17, 167, 87, 0.14);
}
.clients-add-btn:hover { background: var(--moyli-primary); }

/* Vehicle cards: brand is primary, plate is secondary + direct edit. */
.client-vehicle-card__identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.client-vehicle-card__identity strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
}
.client-vehicle-card__identity span {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 750;
}
.client-vehicle-edit-btn {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.client-vehicle-edit-btn:hover {
    border-color: var(--blue);
    color: #ffffff;
    background: #084123;
}
.client-vehicle-card__meta { font-size: 14px !important; }

/* Full purchase/service timeline inside the client card. */
.client-history-row--detailed {
    display: block !important;
    min-height: 0;
    padding: 12px !important;
    border: 1px solid rgba(82, 180, 128, 0.13);
    border-radius: 10px;
    margin-bottom: 8px;
}
.client-history-row--detailed:last-child { margin-bottom: 0; }
.client-history-row__head {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.client-history-row--detailed .client-history-date,
.client-history-row--detailed .client-history-vehicle {
    display: grid;
    gap: 3px;
}
.client-history-row--detailed :is(strong, b) { font-size: 14px !important; }
.client-history-row--detailed span { font-size: 14px !important; }
.client-history-lines {
    display: grid !important;
    gap: 5px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(82, 180, 128, 0.12);
}
.client-history-line {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}
.client-history-line > span {
    overflow: visible !important;
    color: var(--text-soft);
    text-overflow: clip !important;
    white-space: normal !important;
}
.client-history-line > strong {
    min-width: 0;
    color: var(--text);
}
.client-history-line > b {
    color: var(--text);
    white-space: nowrap;
}
.client-history-line.is-empty { grid-template-columns: 1fr; }

/* Vehicle quick edit dialog */
.client-vehicle-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 25, 13, 0.62);
    backdrop-filter: blur(8px);
}
.client-vehicle-edit-overlay[hidden] { display: none !important; }
.client-vehicle-edit-modal {
    position: relative;
    width: min(620px, calc((100vw / var(--ds-zoom, 1)) - 28px));
    padding: 24px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: #07341c;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.client-vehicle-edit-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #042a16;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}
.client-vehicle-edit-head h2 {
    margin: 0;
    padding-right: 52px;
    color: var(--text);
    font-size: 22px;
}
.client-vehicle-edit-head p {
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: 16px;
}
.client-vehicle-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
.client-vehicle-edit-grid label { display: grid; gap: 7px; }
.client-vehicle-edit-grid label > span {
    color: var(--text-soft);
    font-size: 16px;
    font-weight: 750;
}
.client-vehicle-edit-grid input {
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #042513;
    color: var(--text);
    font-size: 16px;
    outline: 0;
}
.client-vehicle-edit-message {
    min-height: 20px;
    margin-top: 10px;
    color: #f5a623;
    font-size: 14px;
}
.client-vehicle-edit-message.is-error { color: #ff4052; }
.client-vehicle-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.client-vehicle-edit-actions button {
    min-height: 46px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #06301a;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}
.client-vehicle-edit-actions #clientVehicleEditSave {
    border-color: var(--moyli-primary);
    background: var(--moyli-primary);
    color: #ffffff;
}

/* Dashboard detail: Close is secondary; optional action is primary. */
.dashboard-detail-footer { gap: 10px; }
.dashboard-detail-footer .dashboard-detail-secondary-btn {
    border: 1px solid var(--border-soft);
    background: #06301a;
    color: var(--text);
}
.dashboard-detail-footer .dashboard-detail-primary-btn {
    border: 1px solid var(--moyli-primary);
    background: var(--moyli-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------
   LIGHT THEME — remove the last legacy dark surfaces.
   --------------------------------------------------------- */
body.moyli-theme-light .warehouse-product-detail {
    border-color: #d7ece1 !important;
    background: #f7fcf9 !important;
    box-shadow: none !important;
}
body.moyli-theme-light .warehouse-product-detail > span {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-product-detail > strong {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
    font-size: 16px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-detail-management__label {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-detail-management__actions > button,
body.moyli-theme-light .warehouse-detail-more-summary,
body.moyli-theme-light #warehouseProductDetailsCloseBtn {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-detail-management__actions > button:hover,
body.moyli-theme-light .warehouse-detail-more-summary:hover,
body.moyli-theme-light #warehouseProductDetailsCloseBtn:hover {
    color: var(--ds-success-text) !important;
    border-color: #9ce4be !important;
    background: #f0fdf6 !important;
}
body.moyli-theme-light .warehouse-detail-primary-btn { font-size: 14px !important; }
body.moyli-theme-light .warehouse-detail-primary-btn.is-in {
    color: var(--ds-success-text) !important;
    border-color: #a8e2cf !important;
    background: #eefaf6 !important;
}
body.moyli-theme-light .warehouse-detail-primary-btn.is-out {
    color: var(--ds-warning-text) !important;
    border-color: #f0d29c !important;
    background: #fff9ee !important;
}

body.moyli-theme-light .clients-add-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.moyli-theme-light .client-vehicle-card,
body.moyli-theme-light .client-history-row--detailed {
    color: #103f26 !important;
    border-color: #dcede4 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .client-vehicle-card__identity strong,
body.moyli-theme-light .client-history-row--detailed :is(strong, b) {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
}
body.moyli-theme-light .client-vehicle-card__identity span,
body.moyli-theme-light .client-vehicle-card__meta,
body.moyli-theme-light .client-history-row--detailed span {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}
body.moyli-theme-light .client-vehicle-edit-btn {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .client-vehicle-edit-modal {
    color: #103f26 !important;
    border-color: #cae6d7 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .client-vehicle-edit-head h2 { color: #103f26 !important; }
body.moyli-theme-light .client-vehicle-edit-head p,
body.moyli-theme-light .client-vehicle-edit-grid label > span { color: var(--ds-text-muted) !important; }
body.moyli-theme-light .client-vehicle-edit-grid input {
    color: #103f26 !important;
    -webkit-text-fill-color: #103f26 !important;
    border-color: #d5ebdf !important;
    background: #ffffff !important;
}
body.moyli-theme-light .client-vehicle-edit-close,
body.moyli-theme-light .client-vehicle-edit-actions button:not(#clientVehicleEditSave) {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #d1e8dc !important;
    background: #f7fcf9 !important;
}
body.moyli-theme-light .dashboard-detail-footer .dashboard-detail-secondary-btn {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .dashboard-detail-footer .dashboard-detail-primary-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--moyli-primary) !important;
    background: var(--moyli-primary) !important;
}

/* Keep Mijozlar labels comfortably readable. */
#clientsPage :is(
    .clients-page__head p,
    .clients-list-head p,
    .clients-list-head > span,
    .client-list-identity small,
    .client-list-vehicle small,
    .clients-empty
),
#clientCardPanel :is(
    .client-card__identity > span,
    .client-card__identity p,
    .client-card-stats span,
    .client-card-section__head p,
    .client-vehicle-card__meta
) {
    font-size: 14px !important;
}
#clientsPage :is(.clients-search-field input, .client-list-identity strong, .client-list-vehicle strong),
#clientCardPanel :is(.client-card-section__head h3, .client-card-stats strong) {
    font-size: 16px !important;
}

@media (max-width: 700px) {
    .client-vehicle-edit-grid { grid-template-columns: 1fr; }
    .client-history-row__head { grid-template-columns: 80px minmax(0, 1fr); }
    .client-history-total { grid-column: 2; text-align: left !important; }
    .client-history-line { grid-template-columns: 66px minmax(0, 1fr); }
    .client-history-line > b { grid-column: 2; }
    .clients-page__head { align-items: stretch; }
    .clients-add-btn { width: 100%; }
}

/* Sales history client vehicle quick edit */
.sales-history-client-vehicle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sales-history-client-vehicle__main {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.sales-history-client-vehicle__main strong {
    color: var(--text);
    font-size: 16px !important;
}
.sales-history-client-vehicle__main span,
.sales-history-client-vehicle__main small {
    color: var(--text-soft);
    font-size: 14px !important;
}
.sales-history-client-vehicle-edit {
    min-height: 34px;
    padding: 0 10px;
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #06301a;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.sales-history-client-vehicle-edit:hover {
    border-color: var(--blue);
    color: #fff;
    background: #084123;
}
body.moyli-theme-light .sales-history-client-vehicle-edit {
    color: #316a4c !important;
    -webkit-text-fill-color: #316a4c !important;
    border-color: #cce7d9 !important;
    background: #ffffff !important;
}
body.moyli-theme-light .sales-history-client-vehicle-edit:hover {
    color: var(--ds-success-text) !important;
    border-color: #9ce4be !important;
    background: #f0fdf6 !important;
}

/* =========================================================
   MOYLI v1.0.14 — UNIFIED LIGHT THEME SYSTEM
   One canonical palette for all pages, cards, lists and modals.
   This block intentionally comes last and overrides legacy dark fragments.
   ========================================================= */
body.moyli-theme-light {
    --ml-bg: #edf7f2;
    --ml-surface: #ffffff;
    --ml-surface-2: #f6fbf8;
    --ml-surface-3: #eef8f3;
    --ml-border: #d5eadf;
    --ml-border-strong: #bfddcd;
    --ml-text: #104328;
    --ml-text-2: #386f52;
    --ml-muted: #68987e;
    --ml-blue: #14c868;
    --ml-blue-dark: #0d8244;
    --ml-red: #ff1738;
    --ml-green: #0ca66f;
    --ml-orange: #e69a16;
    --ml-shadow: 0 8px 24px rgba(20, 75, 46, 0.08);
    background: var(--ml-bg) !important;
    color: var(--ml-text) !important;
}

body.moyli-theme-light .app,
body.moyli-theme-light .main,
body.moyli-theme-light .page,
body.moyli-theme-light :is(#dashboardPage,#salesPage,#clientsPage,#warehousePage,#cashPage,#reportsPage,#notificationsPage,#archivePage,#settingsPage,#profilePage) {
    background: var(--ml-bg) !important;
    color: var(--ml-text) !important;
}

/* Typography hierarchy — no micro-copy in the light working UI. */
body.moyli-theme-light .app :is(small,.muted,[class*="subtitle"],[class*="hint"],[class*="meta"] span) {
    color: var(--ml-muted) !important;
    -webkit-text-fill-color: var(--ml-muted) !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
body.moyli-theme-light .app :is(label,label > span,.field-label,[class*="field"] > span) {
    color: var(--ml-text-2) !important;
    -webkit-text-fill-color: var(--ml-text-2) !important;
    opacity: 1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
body.moyli-theme-light .app :is(h2,h3,.section-title,[class*="section-head"] h2,[class*="section-head"] h3) {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 850 !important;
}
body.moyli-theme-light .app h1 {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    opacity: 1 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}

/* Inputs / selects / textareas */
body.moyli-theme-light :is(.app,.warehouse-product-modal,.sales-service-modal,.sales-client-modal,.sales-confirm-modal,.sales-detail-modal,.cash-modal,.archive-v99__modal,.support-modal,.client-vehicle-edit-modal) :is(input,select,textarea) {
    background: #fff !important;
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    border: 1px solid var(--ml-border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-size: 15px !important;
}
body.moyli-theme-light :is(.app,.warehouse-product-modal,.sales-service-modal,.sales-client-modal,.sales-confirm-modal,.sales-detail-modal,.cash-modal,.archive-v99__modal,.support-modal,.client-vehicle-edit-modal) :is(input,textarea)::placeholder {
    color: var(--ds-text-muted) !important;
    -webkit-text-fill-color: var(--ds-text-muted) !important;
    opacity: 1 !important;
}
body.moyli-theme-light :is(.app,.warehouse-product-modal,.sales-service-modal,.sales-client-modal,.sales-confirm-modal,.sales-detail-modal,.cash-modal) :is(input,select,textarea):focus {
    border-color: #65df9e !important;
    box-shadow: 0 0 0 3px rgba(20, 200, 104, 0.1) !important;
}

/* Canonical modal shell */
body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-history-modal,
    .sales-service-modal,
    .sales-client-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .archive-v99__modal,
    .support-modal,
    .client-vehicle-edit-modal
) {
    background: var(--ml-surface) !important;
    color: var(--ml-text) !important;
    border: 1px solid var(--ml-border) !important;
    box-shadow: 0 24px 70px rgba(17, 60, 37, 0.2) !important;
}
body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-history-modal,
    .sales-service-modal,
    .sales-client-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .archive-v99__modal,
    .support-modal,
    .client-vehicle-edit-modal
) :is(h2,h3,strong,b) {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    opacity: 1 !important;
}

/* Warehouse: details, movement history and picker rows. */
body.moyli-theme-light .warehouse-product-detail,
body.moyli-theme-light .warehouse-history-item,
body.moyli-theme-light .warehouse-history-row,
body.moyli-theme-light .warehouse-movement-product,
body.moyli-theme-light .warehouse-detail-management,
body.moyli-theme-light .warehouse-detail-photo-card {
    background: var(--ml-surface-2) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.moyli-theme-light .warehouse-product-detail > span,
body.moyli-theme-light .warehouse-history-list :is(span,small,p),
body.moyli-theme-light .warehouse-detail-management__label {
    color: var(--ml-muted) !important;
    -webkit-text-fill-color: var(--ml-muted) !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-product-detail > strong,
body.moyli-theme-light .warehouse-history-list :is(strong,b) {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-detail-management__actions > button,
body.moyli-theme-light .warehouse-detail-more-summary,
body.moyli-theme-light #warehouseProductDetailsCloseBtn,
body.moyli-theme-light #warehouseHistoryCloseBtn {
    background: #fff !important;
    color: var(--ml-text-2) !important;
    -webkit-text-fill-color: var(--ml-text-2) !important;
    border-color: var(--ml-border) !important;
}
body.moyli-theme-light .warehouse-history-list::-webkit-scrollbar-track,
body.moyli-theme-light .warehouse-products-list::-webkit-scrollbar-track {
    background: #edf7f2 !important;
}
body.moyli-theme-light .warehouse-history-list::-webkit-scrollbar-thumb,
body.moyli-theme-light .warehouse-products-list::-webkit-scrollbar-thumb {
    background: #b8d8c7 !important;
    border-radius: 999px;
}

/* Sales cards and history panels must never fall back to dark gray. */
body.moyli-theme-light #salesPage :is(
    .sales-selected-client,
    .sales-history-client-pane,
    .sales-history-client-stats article,
    .sales-history-client-section,
    .sales-history-client-vehicle,
    .sales-history-client-purchase,
    .sales-analytics-kpi,
    .sales-section,
    .sales-checkout-card
),
body.moyli-theme-light #salesDetailModal :is(.sales-detail-card,.sales-detail-meta article,.sales-detail-lines,.sales-detail-line,.sales-detail-note,.sales-detail-technical-grid > div),
body.moyli-theme-light #salesConfirmModal :is(.sales-confirm-meta > div,.sales-confirm-line,.sales-confirm-summary) {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.moyli-theme-light #salesPage :is(.sales-service-choice,#salesProductModal .sales-product-quick-item--multi),
body.moyli-theme-light #salesProductModal .sales-product-quick-item--multi {
    background: var(--ml-surface-2) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.moyli-theme-light #salesProductModal .sales-product-quick-item--multi.is-selected,
body.moyli-theme-light #salesPage .sales-service-choice.is-selected {
    background: #ecfdf4 !important;
    border-color: #5ae69b !important;
}
body.moyli-theme-light .sales-service-choice__check i,
body.moyli-theme-light .sales-product-multi-check {
    background: #fff !important;
    border-color: var(--ml-border-strong) !important;
    color: var(--ml-text) !important;
}
body.moyli-theme-light .sales-service-choice__check input:checked + i,
body.moyli-theme-light .sales-product-quick-item--multi.is-selected .sales-product-multi-check {
    background: var(--ml-blue) !important;
    color: #fff !important;
}

/* Kassa */
body.moyli-theme-light #cashPage :is(.cash-summary-card,.cash-channels,.cash-movements-panel,.cash-channel-grid article,.cash-toolbar) {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.moyli-theme-light #cashPage :is(.cash-movement-row,.cash-debtor-row) {
    background: #fff !important;
    color: var(--ml-text) !important;
    border-color: #e1efe8 !important;
}
body.moyli-theme-light #cashPage .cash-movement-row:hover { background: #f5fcf8 !important; }
body.moyli-theme-light #cashPage .cash-debtor-pay {
    background: #f0fdf6 !important;
    color: var(--ml-blue-dark) !important;
    border: 1px solid #baefd3 !important;
}

/* Reports */
body.moyli-theme-light #reportsPage :is(.reports-kpi,.reports-panel,.reports-toolbar,.reports-table-wrap) {
    background: #fff !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}
body.moyli-theme-light #reportsPage .reports-kpi :is(span,small) { color: var(--ml-muted) !important; opacity: 1 !important; }
body.moyli-theme-light #reportsPage .reports-kpi strong { color: var(--ml-text) !important; opacity: 1 !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-primary strong { color: var(--ds-success-text) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-success strong { color: var(--ml-green) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-danger strong { color: var(--ds-danger-text) !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-warning strong { color: var(--ds-warning-text) !important; }
body.moyli-theme-light .reports-detail-drawer,
body.moyli-theme-light .reports-detail-row {
    background: #fff !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}

/* Notifications / Archive / Settings */
body.moyli-theme-light #notificationsPage :is(.notifications-v71__panel,.notifications-v71__summary-card,.notifications-v71__toolbar,.notifications-v71__provider),
body.moyli-theme-light #archivePage :is(.archive-v99__head,.archive-v99__notice,.archive-v99__toolbar,.archive-v99__panel,.archive-v99__row),
body.moyli-theme-light #settingsPage :is(.settings-v90__card,.settings-v90__provider,.settings-v90__save-state) {
    background: #fff !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}

/* Settings warehouse reference catalogs. */
.settings-v90__card--warehouse { grid-column: 1 / -1; }
.settings-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.settings-catalog { min-width:0; padding:14px; border:1px solid rgba(75, 169, 119, 0.2); border-radius:14px; background:rgba(5, 47, 25, 0.35); }
.settings-catalog > label { display:grid; gap:3px; margin-bottom:10px; }
.settings-catalog-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.settings-catalog-add input { min-width:0; height:42px; padding:0 12px; border-radius:10px; }
.settings-catalog-add button { height:42px; padding:0 14px; border:1px solid rgba(43, 234, 132, 0.32); border-radius:10px; background:#0a6836; color:#fff; font-weight:800; }
.settings-catalog-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; min-height:31px; }
.settings-catalog-chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:4px 6px 4px 10px; border:1px solid rgba(82, 180, 128, 0.22); border-radius:999px; background:rgba(5, 47, 25, 0.62); }
.settings-catalog-chip b { font-size: 14px; font-weight:750; }
.settings-catalog-chip button { width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:#90c4a8; cursor:pointer; }
.settings-catalog-empty { color:#7eaa93; font-size: 14px; }
body.moyli-theme-light .settings-catalog { background:var(--ml-surface-2) !important; border-color:var(--ml-border) !important; }
body.moyli-theme-light .settings-catalog-chip { background:#fff !important; border-color:var(--ml-border) !important; color:var(--ml-text) !important; }
body.moyli-theme-light .settings-catalog-chip b { color:var(--ml-text) !important; }
body.moyli-theme-light .settings-catalog-add button { background:#f0fdf6 !important; color:var(--ml-blue-dark) !important; border-color:#bff1d6 !important; }

/* Buttons: preserve brand primary colors, normalize secondary actions. */
body.moyli-theme-light :is(
    .warehouse-detail-management__actions > button,
    .warehouse-product-modal-actions > button:not(.is-primary),
    .sales-service-modal-actions > button:not(.is-primary),
    .cash-modal-actions > button:not(.is-primary):not(.is-danger),
    .reports-secondary-btn,
    .notifications-v71__secondary,
    .settings-v90__secondary
) {
    background: #fff !important;
    color: var(--ml-text-2) !important;
    -webkit-text-fill-color: var(--ml-text-2) !important;
    border-color: var(--ml-border) !important;
}

@media (max-width: 980px) {
    .settings-catalog-grid { grid-template-columns:1fr; }
}


/* =========================================================
   MOYLI v1.0.14 — LIGHT THEME FINAL CONSISTENCY
   Final root-level guard against legacy dark fragments.
   ========================================================= */
body.moyli-theme-light {
    --ml-text: #104328;
    --ml-text-2: #356d4f;
    --ml-muted: #619177;
}

/* Minimum readable hierarchy in working UI. */
body.moyli-theme-light .app :is(label,label > span,.field-label,[class*="field"] > span) {
    font-size: 16px !important;
}
body.moyli-theme-light .app :is(
    small,.muted,[class*="subtitle"],[class*="hint"],[class*="meta"],
    [class*="date"],[class*="time"],[class*="note"],[class*="count"]
) {
    font-size: 14px !important;
    opacity: 1 !important;
}
/* v1.0.20.1: the Light-only "every control is 14px" rule that stood here made Light and Dark size the same screens differently (e.g. the phone bottom
   navigation). Sizes are now one scale for both themes (design-system.css, "TYPOGRAPHY SYSTEM"). */

/* Warehouse — every list/detail/history surface is light. */
body.moyli-theme-light :is(
    .warehouse-history-row,
    .warehouse-history-item,
    .warehouse-confirm-product,
    .warehouse-movement-product,
    .warehouse-product-detail,
    .warehouse-detail-management,
    .warehouse-detail-photo-card,
    .warehouse-product-row,
    .warehouse-product-card
) {
    background: #f7fcf9 !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
    box-shadow: none !important;
}
body.moyli-theme-light .warehouse-history-row__main strong {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
    font-size: 15px !important;
    opacity: 1 !important;
}
body.moyli-theme-light :is(.warehouse-history-row__main span,.warehouse-history-date) {
    color: var(--ml-muted) !important;
    -webkit-text-fill-color: var(--ml-muted) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light :is(.warehouse-history-type,.warehouse-history-quantity) {
    font-size: 14px !important;
    opacity: 1 !important;
}
body.moyli-theme-light .warehouse-history-type.is-out {
    color: var(--ds-danger-text) !important;
    -webkit-text-fill-color: var(--ds-danger-text) !important;
    background: #fff0f2 !important;
}
body.moyli-theme-light .warehouse-history-type.is-in {
    color: #087c59 !important;
    -webkit-text-fill-color: #087c59 !important;
    background: #eaf9f3 !important;
}
body.moyli-theme-light .warehouse-history-quantity.is-out { color:var(--ds-danger-text) !important; -webkit-text-fill-color:var(--ds-danger-text) !important; }
body.moyli-theme-light .warehouse-history-quantity.is-in { color:#087c59 !important; -webkit-text-fill-color:#087c59 !important; }

/* Light modal backdrops/shells: no inherited navy content cards. */
body.moyli-theme-light :is(
    .warehouse-product-modal,
    .warehouse-history-modal,
    .warehouse-confirm-modal,
    .sales-service-modal,
    .sales-client-modal,
    .sales-confirm-modal,
    .sales-detail-modal,
    .cash-modal,
    .archive-v99__modal,
    .support-modal,
    .client-vehicle-edit-modal,
    .dashboard-detail-modal
) :is(.card,[class*="-card"],[class*="-panel"],[class*="-section"],[class*="-summary"]):not(button):not(.is-primary):not(.is-danger) {
    color: var(--ml-text) !important;
}

/* Settings catalog controls respect the global minimum font size. */
body.moyli-theme-light .settings-catalog-chip b,
body.moyli-theme-light .settings-catalog-empty {
    font-size: 14px !important;
}

.cash-operation-help {
    display: block;
    max-width: 680px;
    margin-top: 4px;
    color: #78a58d;
    font-size: 14px;
    line-height: 1.45;
}
body.moyli-theme-light .cash-operation-help {
    color: var(--ml-muted) !important;
    -webkit-text-fill-color: var(--ml-muted) !important;
}

.notifications-v71__test-note {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(47, 226, 131, 0.22);
    border-radius: 12px;
    background: rgba(47, 226, 131, 0.07);
    color: #9bc7b0;
    font-size: 14px;
    line-height: 1.45;
}
.notifications-v71__test-note strong { color: #ddfaeb; }
.notifications-v71__test-note code { font: inherit; font-weight: 800; }
body.moyli-theme-light .notifications-v71__test-note {
    background: #f0fdf6 !important;
    border-color: #c8f2dc !important;
    color: var(--ml-text-2) !important;
    -webkit-text-fill-color: var(--ml-text-2) !important;
}
body.moyli-theme-light .notifications-v71__test-note strong {
    color: var(--ml-text) !important;
    -webkit-text-fill-color: var(--ml-text) !important;
}

/* =========================================================
   V1.0.16 — SETTINGS CHECKBOX + FULL SCROLL FIX
   Keep custom switches/chips clean and allow Settings to reach
   the warehouse reference catalogs at the bottom of the page.
   ========================================================= */

/* Native checkbox controls are accessibility inputs only here.
   Their visible UI is the switch/chip next to them. */
#settingsPage .settings-v90__toggle-row > input[type="checkbox"],
#settingsPage .settings-v90__offsets input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Desktop dashboard uses a fixed one-screen grid. Settings is longer,
   so it needs its own scrolling workspace. */
@media (min-width: 801px) {
    .main:has(#settingsPage:not([hidden])) {
        display: block !important;
        height: calc(100vh / var(--ds-zoom, 1)) !important;
        min-height: calc(100vh / var(--ds-zoom, 1)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 22px 16px 40px !important;
        scrollbar-gutter: stable;
    }

    #settingsPage:not([hidden]) {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: max-content !important;
        overflow: visible !important;
        padding-bottom: 36px !important;
    }
}

/* =========================================================
   v1.0.17 — LOYALTY SUGGESTION IN CHECKOUT
   ========================================================= */

.sales-loyalty-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(24, 204, 131, 0.45);
    border-radius: 10px;
    background: rgba(24, 204, 131, 0.10);
}

.sales-loyalty-hint[hidden] {
    display: none !important;
}

.sales-loyalty-hint__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sales-loyalty-hint__text strong {
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
}

.sales-loyalty-hint__text small {
    color: var(--text);
    font-size: 14px;
}

.sales-loyalty-hint button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: var(--green);
    color: #04140d;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.sales-loyalty-hint button:disabled {
    background: transparent;
    color: var(--green);
    cursor: default;
}

body.moyli-theme-light .sales-loyalty-hint {
    background: #ecfbf4;
    border-color: #9fe3c4;
}

body.moyli-theme-light .sales-loyalty-hint__text strong {
    color: var(--ds-success-text);
}

body.moyli-theme-light .sales-loyalty-hint__text small {
    color: var(--moyli-light-text);
}

/* =========================================================
   MIJOZLAR CARD — FINAL REFLOW FIX
   Flex children must not shrink below their content (caused the
   header, vehicle card and service summary to overlap). The panel
   keeps its size; history gets the remaining space and scrolls itself.
   ========================================================= */
#clientCardPanel > * {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}
#clientCardPanel .client-card__top {
    height: auto;
    min-height: 74px;
    align-items: start;
}
#clientCardPanel .client-card__identity h2,
#clientCardPanel .client-card__identity p {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
#clientCardPanel .client-card-edit {
    white-space: nowrap;
}
#clientCardPanel .client-card-stats,
#clientCardPanel .client-card-service-summary {
    height: auto;
}
#clientCardPanel .client-card-stats article,
#clientCardPanel .client-card-service-summary article {
    height: auto;
    min-height: min-content;
    overflow: visible;
}
#clientCardPanel .client-card-stats strong,
#clientCardPanel .client-card-service-summary strong,
#clientCardPanel .client-card-service-summary small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
#clientCardPanel .client-card-section {
    overflow: visible;
}
#clientCardPanel .client-vehicles-list {
    overflow: visible;
    max-height: none;
}
#clientCardPanel .client-vehicle-card {
    height: auto;
    overflow: visible;
}
#clientCardPanel .client-vehicle-card__top {
    flex-wrap: wrap;
    align-items: flex-start;
}
#clientCardPanel .client-vehicle-card__identity {
    flex: 1 1 140px;
    min-width: 0;
}
#clientCardPanel .client-vehicle-card__identity strong,
#clientCardPanel .client-vehicle-card__identity span,
#clientCardPanel .client-vehicle-card__meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
#clientCardPanel .client-vehicle-edit-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
#clientCardPanel .client-card-history-section {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
}
#clientCardPanel .client-card-history-section .client-card-section__head {
    flex: 0 0 auto;
}
#clientCardPanel .client-card-history-section .client-history-list {
    flex: 1 1 0;
    min-height: 220px;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

/* v1.0.21.6 — Sales camera dialog (moyli-plate-camera.js). Reuses the cash-modal dialog look; only the picture area and the messages are new. */
.pcam-modal {
    width: min(560px, calc((100vw / var(--ds-zoom, 1)) - 36px));
}

.pcam-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 56vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.pcam-stage[hidden],
.pcam-stage video[hidden],
.pcam-stage canvas[hidden] {
    display: none;
}

.pcam-stage video,
.pcam-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.pcam-message {
    color: var(--text-soft);
}

.pcam-message[data-state="warn"] {
    color: var(--ds-danger-text, #ff6c79);
}

.pcam-actions {
    flex-wrap: wrap;
}

.pcam-actions button {
    flex: 1 1 150px;
}

/* v1.0.21.9 — camera dialog: selectable plate rectangle, zoom toolbar, editable result */
.pcam-stage canvas {
    touch-action: none;
    cursor: crosshair;
}

.pcam-toolbar {
    margin-top: 10px;
}

.pcam-toolbar button {
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 44px;
    font-size: 20px;
}

.pcam-toolbar button.is-on {
    outline: 2px solid var(--moyli-primary, #2fe082);
}

.pcam-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.pcam-result__fields {
    display: flex;
    gap: 8px;
}

.pcam-result__fields input {
    min-height: 48px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.pcam-result__fields input:first-child {
    flex: 0 0 76px;
}

.pcam-result__fields input:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.pcam-result__enhance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ds-fs-secondary);
    color: var(--text-soft);
}

.pcam-toolbar {
    justify-content: flex-start;
}

/* more specific than the Light theme's red .cash-modal-message: a hint is neutral, only data-state="warn" is red */
body .cash-modal .pcam-message:not([data-state="warn"]) {
    color: var(--ds-text-muted, var(--text-soft));
}

body .cash-modal .pcam-message[data-state="warn"] {
    color: var(--ds-danger-text, #ff6c79);
}

/* v1.0.21.12 — camera: plates found automatically, several different ones -> cards to choose from */
.pcam-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.pcam-choices button {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas: "thumb plate" "thumb conf";
    align-items: center;
    gap: 2px 12px;
    min-height: 56px;
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.pcam-choices canvas {
    grid-area: thumb;
    width: 120px;
    height: auto;
    border-radius: 6px;
}

.pcam-choice__plate {
    grid-area: plate;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pcam-choice__conf {
    grid-area: conf;
    font-size: var(--ds-fs-secondary);
    color: var(--text-soft);
}

.pcam-choices button[aria-pressed="true"] {
    outline: 2px solid var(--moyli-primary, #2fe082);
}


/* =========================================================
   v1.0.22 — tariff choice at registration, subscription notice bar, Business-only menu items
   ========================================================= */
.plan-picker {
    margin: 14px 0 6px;
    padding: 0;
    border: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.plan-picker legend {
    padding: 0 0 6px;
    font-weight: 600;
}

.plan-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--ds-border, #d5e6dc);
    border-radius: 14px;
    background: var(--ds-surface-2, #f2f8f4);
    cursor: pointer;
}

#registerForm .plan-card input[type="radio"] {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    margin: 4px 0 0;
    flex: 0 0 auto;
}

.plan-card:has(input:checked) {
    outline: 2px solid var(--moyli-primary, #2fe082);
    outline-offset: 0;
}

.plan-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.plan-card__name {
    font-size: 16px;
}

.plan-card__price {
    font-weight: 600;
}

.plan-card__list li,
.plan-card__soon,
.plan-picker__note {
    overflow-wrap: anywhere;
}

.plan-card__list {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ds-text-soft, #3f5a4b);
}

.plan-card__soon {
    font-size: 12px;
    color: var(--ds-text-dim, #557362);
}

.plan-picker__note {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ds-text-soft, #3f5a4b);
}

.subscription-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--ds-border, #d5e6dc);
    background: var(--ds-surface-2, #f2f8f4);
    color: var(--ds-text, #0e1d16);
    font-size: 14px;
    line-height: 1.4;
}

.subscription-banner[hidden],
.subscription-toast[hidden] {
    display: none;
}

.subscription-banner--warn {
    border-color: var(--ds-warning, #ff9a32);
    background: color-mix(in srgb, var(--ds-warning, #ff9a32) 14%, var(--ds-surface, #fff));
}

.subscription-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 3000;
    width: min(92vw, 520px);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--ds-warning, #ff9a32);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0e1d16);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    font-size: 14px;
}

.menu-item.is-locked {
    opacity: 0.55;
}

.menu-item.is-locked::after,
.is-locked[data-lock-feature]:not(.menu-item):not(select)::after {
    content: "";
    display: inline-block;
    flex: none;
    width: 0.85em;
    height: 0.85em;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-locked[data-lock-feature]:not(.menu-item):not(select)::after {
    margin-left: 0.4em;
    vertical-align: -0.1em;
}

.is-locked[data-lock-feature] {
    cursor: pointer;
}

select.is-locked[data-lock-feature],
.ds-export-btn.is-locked[data-lock-feature],
.vcat-sales-btn.is-locked[data-lock-feature] {
    opacity: 0.6;
}

/* v1.0.22 - the window that explains a Business-only function: no payment here, only a request */
body.subscription-modal-open {
    overflow: hidden;
}

.subscription-modal {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ds-overlay, rgba(5, 18, 11, 0.62));
}

.subscription-modal[hidden] {
    display: none;
}

.subscription-modal__dialog {
    width: min(100%, 31rem);
    max-height: 100%;
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: 18px;
    border: 1px solid var(--ds-border, #d5e6dc);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0e1d16);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.subscription-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1.25;
}

.subscription-modal__feature {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: var(--ds-surface-2, #f2f8f4);
    font-weight: 600;
}

.subscription-modal__lead {
    margin: 0 0 0.4rem;
    color: var(--ds-text-soft, #3f5a4b);
}

.subscription-modal__list {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.subscription-modal__list li {
    margin: 0.15rem 0;
}

.subscription-modal__list li.is-current {
    font-weight: 700;
}

.subscription-modal__soon,
.subscription-modal__current {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--ds-text-dim, #557362);
}

.subscription-modal__price {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.subscription-modal__field {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--ds-text-soft, #3f5a4b);
}

.subscription-modal__field input,
.subscription-modal__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border, #d5e6dc);
    background: var(--ds-surface-2, #f2f8f4);
    color: var(--ds-text, #0e1d16);
    font: inherit;
}

.subscription-modal__message {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid currentColor;
}

.subscription-modal__message.is-success {
    color: var(--ds-success-text, #0a7d3f);
}

.subscription-modal__message.is-info {
    color: var(--ds-text-soft, #3f5a4b);
}

.subscription-modal__message.is-error {
    color: var(--ds-danger-text, #b42318);
}

.subscription-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.subscription-modal__primary,
.subscription-modal__secondary {
    flex: 1 1 10rem;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ds-accent, #0b984e);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.subscription-modal__primary {
    background: var(--ds-accent, #0b984e);
    color: #03150d;
}

.subscription-modal__secondary {
    background: transparent;
    color: var(--ds-text, #0e1d16);
    border-color: var(--ds-border, #d5e6dc);
}

body.moyli-theme-light .subscription-modal__primary {
    color: #ffffff;
}

.subscription-modal__primary:disabled {
    opacity: 0.6;
    cursor: progress;
}

@media (max-width: 600px) {
    .subscription-modal {
        align-items: flex-end;
        padding: 0;
    }

    .subscription-modal__dialog {
        width: 100%;
        max-height: 92%;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* v1.0.22 - registration feedback: one visible message, a waiting state on the buttons */
.auth-message.info {
    color: #3f5a4b !important;
}

.auth-message.warn {
    color: #b45309 !important;
}

#registerFormMessage,
#verificationNotice {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid currentColor;
    line-height: 1.4;
}

.auth-submit.is-loading {
    opacity: 0.7;
    cursor: progress;
}