:root,
[data-theme="dark"] {
    --bg: #0d1013;
    --bg-2: #11161b;
    --panel: #14191f;
    --panel-2: #181f27;
    --surface: #14191f;
    --surface-2: #181f27;
    --surface-3: #1d252e;

    --border: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.16);
    --border-accent: rgba(255, 122, 0, 0.45);

    --text: #f3f5f7;
    --text-soft: #d6dde5;
    --muted: #98a2ad;
    --muted-2: #69737b;

    --metal: #c9ced2;
    --metal-dark: #8d969d;

    --primary: #ff7a00;
    --primary-dark: #e86b00;
    --primary-light: #ff9329;
    --primary-glow: rgba(255, 122, 0, 0.22);
    --accent: #ff7a00;
    --accent-2: #ff9329;

    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.14);

    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.14);

    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.14);

    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.14);

    --sidebar: #0a0d10;
    --sidebar-hover: #14191f;
    --sidebar-active: #1c242c;
    --sidebar-muted: #98a2ad;

    --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-small: 0 7px 22px rgba(0, 0, 0, 0.28);

    --radius-sm: 3px;
    --radius-small: 4px;
    --radius: 6px;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #f4f6f8;
    --bg-2: #eaeef2;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;

    --border: rgba(15, 23, 42, 0.13);
    --border-light: rgba(15, 23, 42, 0.2);
    --border-accent: rgba(232, 107, 0, 0.5);

    --text: #111827;
    --text-soft: #334155;
    --muted: #5b6675;
    --muted-2: #64748b;

    --metal: #334155;
    --metal-dark: #64748b;

    --primary: #e86b00;
    --primary-dark: #cc5c00;
    --primary-light: #ff7a00;
    --primary-glow: rgba(232, 107, 0, 0.18);
    --accent: #e86b00;
    --accent-2: #ff7a00;

    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.12);

    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.12);

    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.12);

    --info: #2563eb;
    --info-bg: rgba(37, 99, 235, 0.12);

    --sidebar: #11161c;
    --sidebar-hover: #1a222b;
    --sidebar-active: #222c38;
    --sidebar-muted: #98a2ad;

    --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-small: 0 4px 14px rgba(15, 23, 42, 0.06);
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(255,157,0,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(255,125,0,.035),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

input,
textarea,
select {
    color: var(--text);
    background: #0f1316;
    border: 1px solid var(--border);
    outline: none;

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

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px var(--primary-glow);

    background: #13181c;
}

input::placeholder,
textarea::placeholder {
    color: #667078;
}

select option {
    background: #121619;
    color: var(--text);
}


/* =========================================================
   APP
   ========================================================= */

#app {
    min-height: 100vh;
    display: flex;
}


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

.sidebar {
    width: 258px;
    min-width: 258px;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 22px 14px;

    background:
        linear-gradient(
            180deg,
            #0a0c0e 0%,
            #0d1012 55%,
            #090b0d 100%
        );

    border-right: 1px solid #252b30;

    color: #fff;

    position: relative;
    z-index: 150;
}

.sidebar::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(255,157,0,.35),
            transparent
        );

    opacity: .7;
}

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

    padding: 5px 9px 27px;
}

.brand-mark {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #111;
    font-size: 12px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #f2f4f5,
            #8e979e
        );

    border: 1px solid #d9dde0;

    box-shadow:
        0 0 0 2px rgba(255,157,0,.12),
        0 8px 20px rgba(0,0,0,.4);
}

.brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
}

.brand-subtitle {
    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
    letter-spacing: .04em;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item,
.nav-subitem {
    width: 100%;

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

    color: var(--sidebar-muted);
    background: transparent;

    padding: 12px 13px;

    display: flex;
    align-items: center;

    gap: 12px;

    text-align: left;

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

.nav-item:hover,
.nav-subitem:hover {
    color: #fff;

    background: var(--sidebar-hover);

    border-color: #292f34;
}

.nav-item.active,
.nav-subitem.active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(255,157,0,.16),
            rgba(255,157,0,.045)
        );

    border-color: rgba(255,157,0,.28);

    box-shadow:
        inset 3px 0 0 var(--primary);
}

.nav-icon,
.nav-subicon {
    width: 23px;

    text-align: center;

    color: var(--metal-dark);

    font-size: 16px;
}

.nav-item.active .nav-icon,
.nav-subitem.active .nav-subicon {
    color: var(--primary-light);
}

.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-item.has-submenu {
    position: relative;
    padding-right: 30px;
}

.nav-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--sidebar-muted);
    transition: transform 0.2s ease, color 0.15s ease;
    pointer-events: none;
    line-height: 1;
}

.nav-group.open > .nav-item.has-submenu .nav-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-light);
}

.nav-group .nav-submenu {
    display: none;
    margin: 2px 0 4px 22px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    gap: 2px;
}

.nav-group.open > .nav-submenu {
    display: flex;
}

.nav-subitem {
    padding: 7px 10px;
    font-size: 12px;
}

.sidebar-footer {
    margin-top: auto;

    padding: 17px 10px 5px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--sidebar-muted);

    border-top: 1px solid #252b30;

    font-size: 11px;
}

.connection-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 9px rgba(66,215,125,.65);
}


/* =========================================================
   MAIN / TOPBAR
   ========================================================= */

.main {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: calc(70px + env(safe-area-inset-top, 0px));

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

    padding: calc(12px + env(safe-area-inset-top, 0px)) 24px 12px;

    background:
        rgba(12,15,17,.94);

    border-bottom: 1px solid #252b30;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar > div:first-child {
    display: flex;
    align-items: center;
}

.topbar h1 {
    margin: 0;

    color: #f5f6f7;

    font-size: 20px;
    line-height: 1.2;

    font-weight: 800;
}

.topbar p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.topbar-actions button {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

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

    color: var(--metal);

    background: #15191c;

    transition: .15s ease;
}

.topbar-actions button:hover {
    color: var(--primary-light);

    border-color: rgba(255,157,0,.4);

    background: #1b1f23;
}

.mobile-menu {
    display: none;
}


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

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-left: 8px;
}

.user-chip .avatar {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #171717;

    background:
        linear-gradient(
            145deg,
            #ffe08a,
            #ff9700
        );

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 0 14px rgba(255,157,0,.18);
}

.user-chip strong {
    display: block;

    color: #e9ecee;

    font-size: 12px;
}

.user-chip small {
    display: block;

    margin-top: 2px;

    color: var(--muted-2);

    font-size: 10px;
}

.logout-button {
    min-height: 37px;

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

    gap: 7px;

    padding: 0 11px;

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

    color: var(--muted);

    background: #14181b;

    font-size: 12px;

    transition: .15s ease;
}

.logout-button:hover {
    color: #ff8585;

    border-color: rgba(255,85,85,.4);

    background: rgba(255,85,85,.07);
}


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

.content {
    flex: 1;

    padding: 25px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(255,157,0,.035),
            transparent 28%
        );
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.page-head h2 {
    margin: 0;

    color: #f5f6f7;

    font-size: 22px;
    line-height: 1.2;

    font-weight: 850;
}

.page-head p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 12px;
}


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

.btn {
    min-height: 40px;

    padding: 0 15px;

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

    font-size: 12px;
    font-weight: 750;

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

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    color: #17120a;

    background:
        linear-gradient(
            135deg,
            #ffbf3d,
            #ff8a00
        );

    border-color: #ffb000;

    box-shadow:
        0 7px 20px rgba(255,140,0,.17);
}

.btn-primary:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #ffd166,
            #ff9700
        );

    box-shadow:
        0 9px 25px rgba(255,140,0,.27);
}

.btn-secondary {
    color: var(--metal);

    background: #171b1f;

    border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
    color: #fff;

    background: #1e2429;

    border-color: #424b53;
}


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

.panel {
    margin-bottom: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #171b1f,
            #121619
        );

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

    border-radius: var(--radius);

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

.panel-header {
    min-height: 53px;

    padding: 13px 17px;

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

    gap: 10px;

    border-bottom: 1px solid #292f34;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            transparent
        );
}

.panel-header h3 {
    margin: 0;

    color: #f0f2f3;

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

.panel-header > span {
    color: var(--muted);

    font-size: 11px;
}


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

.stats {
    display: grid;

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

    gap: 13px;

    margin-bottom: 17px;
}

.stat-card {
    position: relative;

    min-height: 112px;

    padding: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1a1f23,
            #121619
        );

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

    border-radius: var(--radius);

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

.stat-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -40px;
    bottom: -55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,157,0,.12),
            transparent 70%
        );
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-label {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}

.stat-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: var(--primary-light);

    background:
        rgba(255,157,0,.09);

    border: 1px solid rgba(255,157,0,.15);
}

.stat-value {
    margin-top: 13px;

    color: #fff;

    font-size: 29px;
    line-height: 1;

    font-weight: 850;
}


/* =========================================================
   TOOLBAR / SEARCH
   ========================================================= */

.toolbar {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 14px;
}

.search {
    flex: 1;
    max-width: 500px;

    position: relative;
}

.search input {
    width: 100%;
    min-height: 42px;

    padding: 0 13px;

    border-radius: 9px;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}


/* =========================================================
   TABLES
   ========================================================= */

.table-wrap {
    width: 100%;

    overflow-x: auto;
}

table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

thead th {
    padding: 11px 14px;

    color: #89939b;

    background: #111518;

    border-bottom: 1px solid #2b3238;

    text-align: left;

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .035em;
}

tbody td {
    padding: 12px 14px;

    color: #cbd0d4;

    border-bottom: 1px solid #252c31;

    vertical-align: middle;
}

tbody tr {
    transition: background .12s ease;
}

tbody tr:hover {
    background: rgba(255,157,0,.035);
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody td strong {
    color: #f4f5f6;

    font-weight: 750;
}


/* =========================================================
   OFFER NUMBER / MONEY
   ========================================================= */

.offer-number,
.offer-list-table tbody td:first-child strong,
.dashboard-offers-table tbody td:first-child strong {
    color: var(--primary-light);

    font-weight: 850;
}

.offer-amount,
.dashboard-offers-table tbody td:nth-child(5),
.offer-list-table tbody td:nth-child(5) {
    color: #ffd477;

    font-weight: 800;
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;

    padding: 4px 10px;

    border-radius: 999px;

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

    white-space: nowrap;

    border: 1px solid transparent;
}

.status-draft {
    color: #ffd36a;

    background: var(--warning-bg);

    border-color: rgba(255,194,71,.24);
}

.status-sent {
    color: #82c4ff;

    background: var(--info-bg);

    border-color: rgba(105,183,255,.24);
}

.status-accepted {
    color: #7be9a4;

    background: var(--success-bg);

    border-color: rgba(66,215,125,.24);
}

.status-rejected {
    color: #ff8585;

    background: var(--danger-bg);

    border-color: rgba(255,85,85,.24);
}

.status-archived {
    color: #aeb7bd;

    background: rgba(174,183,189,.08);

    border-color: rgba(174,183,189,.16);
}


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

.action-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.small-btn {
    min-height: 34px;

    padding: 0 10px;

    color: #bdc4c9;

    background: #171c20;

    border: 1px solid #30383f;

    border-radius: 8px;

    font-size: 11px;

    transition: .14s ease;
}

.small-btn:hover:not(:disabled) {
    color: #fff;

    border-color: #59636b;

    background: #20262b;
}

.email-btn {
    color: #ffc65b;

    border-color: rgba(255,157,0,.25);

    background: rgba(255,157,0,.07);
}

.email-btn:hover:not(:disabled) {
    color: #17120a;

    background: var(--primary);
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.empty {
    min-height: 150px;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    padding: 30px;

    color: var(--muted);

    text-align: center;
}

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

    font-size: 14px;
}

.empty span {
    font-size: 12px;
}

.loading {
    padding: 50px;

    color: var(--muted);

    text-align: center;
}


/* =========================================================
   FORMS
   ========================================================= */

.offer-form,
#customerForm {
    padding: 20px;
}

.form-grid {
    display: grid;

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

    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    color: #aeb6bc;

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

.form-group label span {
    color: var(--primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    min-height: 42px;

    padding: 9px 11px;

    border-radius: 8px;
}

.form-group textarea {
    resize: vertical;
}


/* =========================================================
   OFFER EDITOR
   ========================================================= */

.offer-editor {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.offer-section {
    overflow: hidden;
}

.section-header {
    min-height: 57px;

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

    gap: 12px;

    padding: 10px 15px;

    background:
        linear-gradient(
            90deg,
            rgba(255,157,0,.065),
            transparent 55%
        );

    border-bottom: 1px solid #292f34;
}

.section-title-wrap {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.section-number {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #17120a;

    background:
        linear-gradient(
            145deg,
            #ffd166,
            #ff8a00
        );

    font-size: 12px;
    font-weight: 900;
}

.section-name {
    min-width: 200px;

    padding: 8px 10px;

    border-radius: 7px;
}

.section-actions {
    display: flex;

    gap: 6px;
}

.items-table input {
    width: 100%;

    min-height: 35px;

    padding: 6px 8px;

    border-radius: 7px;
}

.items-table .number-input {
    text-align: right;
}

.item-total {
    color: #ffd477;

    font-weight: 800;

    white-space: nowrap;
}

.delete-item {
    width: 31px;
    height: 31px;

    border: 1px solid rgba(255,85,85,.22);
    border-radius: 7px;

    color: #ff7777;

    background: rgba(255,85,85,.07);

    font-size: 18px;
}

.delete-item:hover {
    background: rgba(255,85,85,.16);
}

.add-section-btn {
    width: 100%;

    min-height: 43px;

    color: #ffc45b;

    background: rgba(255,157,0,.055);

    border: 1px dashed rgba(255,157,0,.35);

    border-radius: 10px;

    font-size: 12px;
    font-weight: 750;
}

.add-section-btn:hover {
    background: rgba(255,157,0,.1);
}

.offer-totals {
    padding: 16px 18px;
}

.totals-row {
    min-height: 39px;

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

    color: #aeb6bc;

    border-bottom: 1px solid #272e33;

    font-size: 12px;
}

.totals-row strong {
    color: #e9edef;

    font-size: 14px;
}

.totals-row.grand {
    min-height: 54px;

    border-bottom: 0;

    color: #fff;

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

.totals-row.grand strong {
    color: #ffc95e;

    font-size: 22px;
}

.vat-inline {
    width: 58px;

    margin-left: 5px;

    padding: 4px 5px;

    border-radius: 6px;
}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings-nav-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panel-2);
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    max-width: 100%;
    overflow-x: auto;
}

.settings-tab-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-soft);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 750;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.settings-tab-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.settings-tab-btn.active {
    background: var(--panel);
    color: var(--primary-light);
    border-color: var(--border-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .settings-tab-btn.active {
    background: #ffffff;
    color: var(--primary-dark);
    border-color: var(--border-accent);
}

.settings-card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #171b1f,
            #121619
        );

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

    border-radius: var(--radius);

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

.settings-card-head {
    padding: 17px 19px;

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

    gap: 15px;

    border-bottom: 1px solid #292f34;
}

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

    color: #f2f4f5;

    font-size: 15px;
}

.settings-card-head p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.settings-body {
    padding: 20px;
}

.settings-head-actions {
    display: flex;
    gap: 7px;
}


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

.modal {
    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

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

    padding: 20px;

    background:
        rgba(0,0,0,.72);

    backdrop-filter: blur(7px);
}

.modal.hidden {
    display: none !important;
}

.modal-card {
    width: min(760px, 100%);

    max-height: 92vh;

    overflow: auto;

    background:
        linear-gradient(
            145deg,
            #1a1f23,
            #111518
        );

    border: 1px solid #3a4248;

    border-radius: 15px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.62);
}

.modal-header {
    padding: 17px 20px;

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

    border-bottom: 1px solid #2c3338;
}

.modal-header h2 {
    margin: 0;

    color: #f3f5f6;

    font-size: 18px;
}

.modal-header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.modal-close {
    width: 34px;
    height: 34px;

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

    color: #aab2b7;

    background: #151a1d;

    font-size: 21px;
}

.modal-close:hover {
    color: #fff;

    border-color: #555f67;
}

.modal-footer {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 20px;
    padding-top: 15px;

    border-top: 1px solid #2b3237;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast-container {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.toast {
    min-width: 260px;
    max-width: 420px;

    padding: 12px 15px;

    color: #f4f5f6;

    background: #171c20;

    border: 1px solid #353d44;

    border-left: 3px solid var(--metal);

    border-radius: 9px;

    box-shadow:
        0 14px 40px rgba(0,0,0,.45);

    font-size: 12px;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--danger);
}


/* =========================================================
   LOGIN
   ========================================================= */

.app-hidden {
    display: none !important;
}

.login-screen {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;

    place-items: center;

    padding: 25px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,157,0,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(255,102,0,.08),
            transparent 32%
        ),
        #080a0c;
}

.login-card {
    width: min(950px, 100%);

    min-height: 570px;

    display: grid;

    grid-template-columns: 43% 57%;

    overflow: hidden;

    background: #121619;

    border: 1px solid #343c42;

    border-radius: 22px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.65);
}

.login-brand-panel {
    position: relative;

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

    padding: 50px;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(255,157,0,.28),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #171b1f,
            #080a0c 70%
        );

    border-right: 1px solid #30373d;
}

.login-brand-panel::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff8a00,
            #ffd166,
            #ff8a00,
            transparent
        );

    box-shadow:
        0 0 18px rgba(255,138,0,.7);
}

.login-logo-wrap {
    width: 115px;
    height: 115px;

    padding: 7px;

    margin-bottom: 27px;

    display: grid;
    place-items: center;

    border-radius: 27px;

    background: #090b0d;

    border: 1px solid #4a5258;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 0 2px rgba(255,157,0,.06);
}

.login-logo-wrap img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 20px;
}

.login-brand-title {
    color: #f6f7f7;

    font-size: 32px;
    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.03em;
}

.login-brand-subtitle {
    margin-top: 9px;

    color: #aeb6bc;

    font-size: 15px;
}

.login-brand-line {
    width: 70px;
    height: 3px;

    margin: 26px 0 18px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #ff8a00,
            #ffd166
        );

    box-shadow:
        0 0 12px rgba(255,138,0,.55);
}

.login-brand-text {
    max-width: 300px;

    color: #858f96;

    line-height: 1.7;

    font-size: 13px;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px 65px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,157,0,.045),
            transparent 35%
        ),
        #111518;
}

.login-mobile-logo {
    display: none;
}

.login-heading h1 {
    margin: 0;

    color: #f5f6f7;

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

.login-heading p {
    margin: 8px 0 31px;

    color: var(--muted);

    font-size: 13px;
}

.login-field {
    margin-bottom: 17px;
}

.login-field label {
    display: block;

    margin-bottom: 7px;

    color: #b7bec3;

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

.login-input-wrap {
    position: relative;
}

.login-input-wrap input {
    width: 100%;
    height: 52px;

    padding:
        0 48px 0 43px;

    border-radius: 10px;

    color: #f5f6f7;

    background: #0d1114;

    border-color: #30383e;
}

.login-input-wrap input:focus {
    background: #111619;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(255,157,0,.12);
}

.login-input-icon {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #737d84;

    pointer-events: none;
}

.login-password-toggle {
    position: absolute;

    right: 7px;
    top: 50%;

    transform: translateY(-50%);

    padding: 7px 8px;

    color: #858f96;

    border: 0;
    border-radius: 7px;

    background: transparent;

    font-size: 11px;
}

.login-password-toggle:hover {
    color: var(--primary-light);

    background: rgba(255,157,0,.07);
}

.login-submit {
    width: 100%;
    height: 52px;

    margin-top: 7px;

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

    gap: 9px;

    border: 1px solid #ffad1f;
    border-radius: 10px;

    color: #17120a;

    background:
        linear-gradient(
            135deg,
            #ffc94f,
            #ff8500
        );

    box-shadow:
        0 12px 28px rgba(255,133,0,.18);

    font-size: 13px;
    font-weight: 850;
}

.login-submit:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #ffd875,
            #ff9700
        );

    box-shadow:
        0 14px 32px rgba(255,133,0,.27);
}

.login-error {
    margin: 4px 0 13px;

    padding: 10px 12px;

    color: #ff9292;

    background: rgba(255,85,85,.08);

    border: 1px solid rgba(255,85,85,.22);

    border-radius: 8px;

    font-size: 12px;
}

.login-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 29px;
    padding-top: 17px;

    border-top: 1px solid #252c31;

    color: #616b72;

    font-size: 10px;
}

.login-submit-spinner {
    width: 16px;
    height: 16px;

    border: 2px solid rgba(0,0,0,.2);
    border-top-color: #17120a;

    border-radius: 50%;

    animation: login-spin .7s linear infinite;
}

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


/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {
    display: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .sidebar {
        width: 225px;
        min-width: 225px;
    }

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

    .content {
        padding: 20px;
    }
}


@media (max-width: 720px) {

    body {
        font-size: 14px;
    }

    #app {
        display: block;
    }

    .sidebar {
        position: fixed;
        z-index: 250;

        left: -280px;
        top: 0;
        bottom: 0;

        width: 270px;
        min-width: 270px;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding-top: calc(22px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;

        transition: left .2s ease;

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

    .sidebar .nav,
    .sidebar .brand,
    .sidebar .sidebar-footer {
        flex-shrink: 0;
    }

    .sidebar.open {
        left: 0;
    }

    .topbar {
        min-height: calc(64px + env(safe-area-inset-top, 0px));

        padding: calc(9px + env(safe-area-inset-top, 0px)) 12px 9px;
    }

    .mobile-menu {
        display: inline-grid;

        width: 39px;
        height: 39px;

        margin-right: 9px;

        place-items: center;

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

        color: var(--metal);

        background: #15191c;

        font-size: 0;
    }

    .mobile-menu::before {
        content: "☰";

        font-size: 18px;
    }

    .topbar h1 {
        max-width: 170px;

        font-size: 18px;

        line-height: 1.1;
    }

    .topbar p {
        display: none;
    }

    .user-chip {
        margin-left: auto;
    }

    .user-chip > div:last-child {
        display: none;
    }

    .logout-button {
        width: 38px;

        padding: 0;
    }

    .logout-text {
        display: none;
    }

    .content {
        padding: 13px 10px 28px;
    }

    .page-head {
        margin-bottom: 12px;
    }

    .page-head h2 {
        font-size: 21px;
    }

    .page-head p {
        font-size: 12px;
    }

    .page-head .btn {
        width: 100%;
    }

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

        gap: 9px;

        margin-bottom: 12px;
    }

    .stat-card {
        min-height: 90px;

        padding: 12px;
    }

    .stat-label {
        font-size: 16px;
    }

    .stat-value {
        font-size: 25px;
    }

    .stat-icon {
        width: 30px;
        height: 30px;

        font-size: 12px;
    }

    .panel {
        border-radius: 12px;

        margin-bottom: 12px;
    }

    .panel-header {
        min-height: 48px;

        padding: 11px 13px;
    }

    .panel-header h3 {
        font-size: 14px;
    }

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

        gap: 7px;

        margin-bottom: 10px;
    }

    .search {
        max-width: none;
    }

    .search input,
    .toolbar input,
    .toolbar select,
    .toolbar button {
        width: 100%;

        min-height: 45px;

        font-size: 14px;
    }

    .toolbar-actions {
        width: 100%;
        margin-left: 0;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .toolbar-actions .btn,
    .toolbar-actions .small-btn {
        flex: 1;
        min-height: 42px;
        justify-content: center;
    }

    /* -------------------------
       Mobile offer cards
       ------------------------- */

    .offer-list-table,
    .dashboard-offers-table,
    .customer-list-table {
        border: 0;
    }

    .offer-list-table thead,
    .dashboard-offers-table thead,
    .customer-list-table thead {
        display: none;
    }

    .offer-list-table tbody,
    .dashboard-offers-table tbody,
    .customer-list-table tbody {
        display: grid;

        gap: 10px;

        padding: 9px;

	background: #56565675;
    }

    .offer-list-table tbody tr,
    .dashboard-offers-table tbody tr,
    .customer-list-table tbody tr {
        display: block;

        width: 100%;

        padding: 13px;

        background:
	    linear-gradient(178deg, #000000, #1a50958f);

        border: 1px solid #30383f;

        border-radius: 13px;

        box-shadow:
            0 7px 20px rgba(0,0,0,.25);
    }

    .offer-list-table tbody td,
    .dashboard-offers-table tbody td,
    .customer-list-table tbody td {
        display: flex;

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

        width: 100%;

        min-height: 34px;

        padding: 7px 0;

        gap: 10px;

        border-bottom: 1px solid #252c31;

        color: #d3d8dc;

        font-size: 13px;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }

    .offer-list-table tbody td:last-child,
    .dashboard-offers-table tbody td:last-child,
    .customer-list-table tbody td:last-child {
        border-bottom: 0;
    }

    .offer-list-table tbody td::before,
    .dashboard-offers-table tbody td::before,
    .customer-list-table tbody td::before {
        flex: 0 0 70px;

        color: #778188;

        font-size: 10px;
        font-weight: 750;

        text-transform: uppercase;
        letter-spacing: .025em;
    }

    .offer-list-table tbody td > *,
    .dashboard-offers-table tbody td > *,
    .customer-list-table tbody td > * {
        min-width: 0;

        text-align: right;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Number */

    .offer-list-table tbody td:first-child,
    .dashboard-offers-table tbody td:first-child,
    .customer-list-table tbody td:first-child {
        padding-top: 2px;
        padding-bottom: 11px;

        border-bottom: 1px solid #394148;
    }

    .offer-list-table tbody td:first-child strong,
    .dashboard-offers-table tbody td:first-child strong,
    .customer-list-table tbody td:first-child strong {
        color: #ffc85b;

        font-size: 16px;

        font-weight: 850;
    }

    /* Amount */

    .offer-list-table tbody td:nth-child(5),
    .dashboard-offers-table tbody td:nth-child(5) {
        margin: 7px 0;

        padding: 11px 10px;

        border: 1px solid rgba(255,157,0,.17);

        border-radius: 9px;

        background:
            linear-gradient(
                135deg,
                rgba(255,157,0,.10),
                rgba(255,157,0,.035)
            );

        color: #ffd477;

        font-size: 17px;

        font-weight: 850;
    }

    /* Status */

    .offer-list-table tbody td:nth-child(6) {
        align-items: center;
    }

    .status {
        min-height: 27px;

        padding: 4px 10px;

        font-size: 10px;
    }

    /* Actions */

    .offer-list-table tbody td:last-child,
    .customer-list-table tbody td:last-child {
        display: block;

        padding-top: 12px;

        border-top: 1px solid #30383f;
    }

    .offer-list-table tbody td:last-child::before,
    .customer-list-table tbody td:last-child::before {
        display: block;

        margin-bottom: 8px;

        flex: none;

        content: "Действия";
    }

    .action-buttons {
        display: grid;

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

        gap: 7px;
    }

    .small-btn {
        width: 100%;

        min-height: 41px;

        font-size: 12px;
    }

    /* -------------------------
       Customer cards
       ------------------------- */

    .customer-list-table tbody td {
        font-size: 13px;
    }

    .customer-list-table tbody td:first-child strong {
        font-size: 16px;
    }

    /* -------------------------
       Forms
       ------------------------- */

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

    .form-group.full {
        grid-column: auto;
    }

    .offer-form,
    #customerForm {
        padding: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 45px;

        font-size: 15px;
    }

    /* -------------------------
       Offer editor
       ------------------------- */

    .section-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 12px;
    }

    .section-title-wrap {
        width: 100%;
    }

    .section-name {
        width: 100%;

        min-width: 0;
    }

    .section-actions {
        width: 100%;
    }

    .section-actions .small-btn {
        flex: 1;
    }

    .items-table {
        min-width: 760px;
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .offer-totals {
        padding: 13px;
    }

    .totals-row.grand strong {
        font-size: 20px;
    }

    /* -------------------------
       Settings
       ------------------------- */

    .settings-card-head {
        align-items: stretch;

        flex-direction: column;

        padding: 14px;
    }

    .settings-body {
        padding: 14px;
    }

    /* -------------------------
       Modal
       ------------------------- */

    .modal {
        padding: 8px;
    }

    .modal-card {
        max-height: 96vh;

        border-radius: 13px;
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* -------------------------
       Login
       ------------------------- */

    .login-screen {
        display: block;

        padding: 0;

        overflow-y: auto;

        background:
            radial-gradient(
                circle at 50% -10%,
                rgba(255,157,0,.16),
                transparent 38%
            ),
            #080a0c;
    }

    .login-card {
        width: 100%;
        min-height: 100dvh;

        display: block;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        background: transparent;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        min-height: 100dvh;

        padding:
            max(30px, env(safe-area-inset-top))
            22px
            max(25px, env(safe-area-inset-bottom));
    }

    .login-mobile-logo {
        width: 92px;
        height: 92px;

        margin: 20px auto 24px;

        padding: 6px;

        display: grid;
        place-items: center;

        border-radius: 22px;

        background: #090b0d;

        border: 1px solid #444c52;

        box-shadow:
            0 15px 35px rgba(0,0,0,.45),
            0 0 25px rgba(255,157,0,.08);
    }

    .login-mobile-logo img {
        width: 100%;
        height: 100%;

        object-fit: contain;

        border-radius: 17px;
    }

    .login-heading {
        text-align: center;
    }

    .login-heading h1 {
        font-size: 28px;
    }

    .login-heading p {
        margin-bottom: 27px;

        font-size: 13px;
    }

    .login-input-wrap input,
    .login-submit {
        height: 55px;

        font-size: 16px;
    }

    .login-footer {
        margin-top: auto;

        padding-top: 25px;
    }
}


@media (max-width: 390px) {

    .content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .stats {
        gap: 7px;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-label {
        font-size: 9px;
    }

    .stat-value {
        font-size: 23px;
    }

    .offer-list-table tbody,
    .dashboard-offers-table tbody,
    .customer-list-table tbody {
        padding: 7px;
    }

    .offer-list-table tbody tr,
    .dashboard-offers-table tbody tr,
    .customer-list-table tbody tr {
        padding: 11px;
    }

    .offer-list-table tbody td,
    .dashboard-offers-table tbody td,
    .customer-list-table tbody td {
        font-size: 12.5px;
    }

    .offer-list-table tbody td::before,
    .dashboard-offers-table tbody td::before,
    .customer-list-table tbody td::before {
        flex-basis: 64px;

        font-size: 9px;
    }

    .offer-list-table tbody td:nth-child(5),
    .dashboard-offers-table tbody td:nth-child(5) {
        font-size: 16px;
    }
}

/* Metal Group logo in sidebar */
.brand-mark {
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;

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

    overflow: hidden;

    padding: 3px;

    border-radius: 10px;

    background: #080a0c;
    border: 1px solid #454d53;

    box-shadow:
        0 0 0 1px rgba(255,157,0,.08),
        0 6px 18px rgba(0,0,0,.4);
}

.brand-mark img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 7px;
}

/* =========================================================
   LOGO - SETTINGS
   ========================================================= */

.settings-logo-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 20px;
}

.settings-logo-frame {
    width: 220px;
    height: 140px;

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

    padding: 12px;

    overflow: hidden;

    background: #0b0e10;

    border: 1px solid #30383e;
    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.3),
        inset 0 0 25px rgba(255,255,255,.015);
}

.settings-logo-frame img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 8px;
}

.settings-logo-empty {
    color: #68727a;
    font-size: 12px;
}

/* На мобилен телефон логото да е още по-компактно */
@media (max-width: 720px) {
    .settings-logo-frame {
        width: 180px;
        height: 115px;
    }
}

/* =========================================================
   DASHBOARD SHORTCUT CARDS
   ========================================================= */

.dashboard-link-card {
    cursor: pointer;

    position: relative;

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

.dashboard-link-card:hover {
    transform: translateY(-3px);

    border-color: rgba(255,157,0,.42);

    background:
        linear-gradient(
            145deg,
            #20262b,
            #15191c
        );

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,157,0,.06);
}

.dashboard-link-card:active {
    transform: translateY(-1px);
}

.dashboard-link-card:focus-visible {
    outline: none;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(255,157,0,.16);
}

.dashboard-link-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

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

    opacity: 0;

    transition: opacity .16s ease;
}

.dashboard-link-card:hover::after {
    opacity: 1;
}

.stat-link-hint {
    margin-top: 10px;

    color: #778188;

    font-size: 10px;
    font-weight: 650;

    transition: color .16s ease;
}

.dashboard-link-card:hover .stat-link-hint {
    color: var(--primary-light);
}

@media (max-width: 720px) {

    .dashboard-link-card {
        min-height: 103px;
    }

    .stat-link-hint {
        margin-top: 7px;

        font-size: 13px;
    }

    .dashboard-link-card:hover {
        transform: none;
    }

    .dashboard-link-card:active {
        transform: scale(.985);
    }
}

/* =========================================================
   OFFER EDITOR - NO HORIZONTAL SCROLL
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

#app,
.main,
.content,
#pageContent {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.offer-editor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.offer-editor .panel,
.offer-editor .offer-main-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Всички полета в редактора */
.offer-editor input,
.offer-editor select,
.offer-editor textarea,
.offer-editor button {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Таблицата с позициите */
.offer-editor .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: hidden;
}

/* Самата таблица никога да не разширява страницата */
.offer-editor table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

/* Полетата вътре в таблицата */
.offer-editor table input,
.offer-editor table select {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

/* =========================================================
   MOBILE OFFER EDITOR
   ========================================================= */

@media (max-width: 720px) {

    .offer-editor {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .offer-editor .panel {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .offer-editor .table-wrap {
        overflow-x: hidden;
    }

    /*
     * Таблицата се свива според телефона.
     * Не позволява широка таблица да разшири страницата.
     */
    .offer-editor table {
        width: 100%;
        table-layout: fixed;
    }

    .offer-editor th,
    .offer-editor td {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .offer-editor th {
        font-size: 8px;
        line-height: 1.1;
        white-space: normal;
    }

    .offer-editor td {
        padding: 4px 2px;
    }

    .offer-editor td input,
    .offer-editor td select {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        padding-left: 5px;
        padding-right: 5px;

        font-size: 10px;
    }

    /* Описание получава най-много място */
    .offer-editor th:nth-child(2),
    .offer-editor td:nth-child(2) {
        width: 27%;
    }

    /* Останалите колони са компактни */
    .offer-editor th:nth-child(1),
    .offer-editor td:nth-child(1) {
        width: 8%;
    }

    .offer-editor th:nth-child(3),
    .offer-editor td:nth-child(3) {
        width: 15%;
    }

    .offer-editor th:nth-child(4),
    .offer-editor td:nth-child(4) {
        width: 13%;
    }

    .offer-editor th:nth-child(5),
    .offer-editor td:nth-child(5) {
        width: 17%;
    }

    .offer-editor th:nth-child(6),
    .offer-editor td:nth-child(6) {
        width: 20%;
    }

    /* Основните полета също да не излизат извън картата */
    .offer-editor .form-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .offer-editor .form-group {
        min-width: 0;
        max-width: 100%;
    }

    .offer-editor textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* =========================================================
   MOBILE OFFER ITEMS - VERTICAL CARDS
   ========================================================= */

.mobile-item-label {
    display: none;
}

@media (max-width: 720px) {

    html,
    body {
        overflow-x: clip !important;
        max-width: 100%;
    }

    #app,
    .main,
    .content,
    #pageContent {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .offer-editor,
    #offerSections {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    /* ============================
       СЕКЦИЯ
       ============================ */

    .offer-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .offer-section .section-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .offer-section .section-title-wrap {
        width: 100%;
        min-width: 0;
    }

    .offer-section .section-name {
        height: 34px;
        min-height: 34px;
        font-size: 12px;
        padding: 0 9px;
    }

    .offer-section .section-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        width: 100%;
    }

    .offer-section .section-actions .small-btn {
        height: 32px;
        min-height: 32px;
        padding: 0 5px;
        font-size: 9px;
    }

    /* ============================
       ТАБЛИЦАТА
       ============================ */

    .offer-section .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .offer-section .items-table {
        width: 100%;
        display: block;
        border: 0;
        min-width: 0 !important;
    }

    .offer-section .items-table thead {
        display: none;
    }

    .offer-section .items-table tbody {
        display: block;
        width: 100%;
    }

    /* ============================
       КАРТА НА ПОЗИЦИЯТА
       ============================ */

    .offer-section .offer-item-row {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        margin: 0 0 8px 0;
        padding: 8px;

        background: #111518;

        border: 1px solid #30373c;
        border-radius: 9px;
    }

    .offer-section .offer-item-row > td {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 0;
        margin: 0 0 6px 0;

        border: 0;
    }

    /* ============================
       НОМЕР
       ============================ */

    .offer-section .offer-item-row > td.item-number {
        display: flex;
        align-items: center;

        height: 25px;
        padding-bottom: 6px;
        margin-bottom: 7px;

        border-bottom: 1px solid #292f33;
    }

    .item-number-value {
        width: 23px;
        height: 23px;

        border-radius: 6px;

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

    /* ============================
       ЕТИКЕТИ
       ============================ */

    .offer-section .mobile-item-label {
        display: block;

        margin-bottom: 3px;

        color: #879198;

        font-size: 8px;
        line-height: 10px;

        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    /* ============================
       INPUT ПОЛЕТА
       ============================ */

    .offer-section .offer-item-row input {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        height: 32px;
        min-height: 32px;

        box-sizing: border-box;

        padding: 0 8px;

        background: #0c1012;

        border: 1px solid #30383e;
        border-radius: 6px;

        color: #f4f6f7;

        font-size: 11px;
    }

    .offer-section .offer-item-row input::placeholder {
        color: #596269;
        font-size: 10px;
    }

    .offer-section .offer-item-row input:focus {
        border-color: #ff9d00;
        outline: none;

        box-shadow:
            0 0 0 1px rgba(255, 157, 0, .15);
    }

    /* ============================
       ОБЩО
       ============================ */

    .offer-section .offer-item-row > td.item-total {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 34px;
        box-sizing: border-box;

        margin-top: 2px;
        margin-bottom: 6px;

        padding: 0 9px;

        background: rgba(255, 157, 0, .05);

        border: 1px solid rgba(255, 157, 0, .16);
        border-radius: 6px;
    }

    .offer-section .item-total .mobile-item-label {
        margin: 0;

        font-size: 8px;
    }

    .offer-section .item-total strong {
        color: #ffb52e;

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

    /* ============================
       ИЗТРИЙ
       ============================ */

    .offer-section .offer-item-row > td.item-action {
        margin: 0;
    }

    .offer-section .delete-item {
        width: 100%;

        height: 30px;
        min-height: 30px;

        padding: 0 8px;

        background: transparent;

        border: 1px solid #553131;
        border-radius: 6px;

        color: #ff7272;

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

    /* ============================
       ДОБАВИ РАЗДЕЛ
       ============================ */

    .add-section-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        height: 36px;
        min-height: 36px;

        font-size: 10px;
    }
}
/* =========================================================
   MOBILE DATE INPUT - iOS
   ========================================================= */

@media (max-width: 720px) {

    #offerDate {
        width: 100%;
        height: 46px;

        box-sizing: border-box;

        padding: 0 12px;

        background: #0c1012;

        border: 1px solid #30383e;
        border-radius: 9px;

        color: #f4f6f7;

        font-size: 16px;
        font-family: inherit;

        -webkit-appearance: none;
        appearance: none;

        color-scheme: dark;
    }

    #offerDate:focus {
        outline: none;

        border-color: #ff9d00;

        box-shadow:
            0 0 0 2px rgba(255,157,0,.12);
    }

    /*
     * iOS използва собствен вътрешен date контрол.
     * Правим текстовата част нормална и четлива.
     */
    #offerDate::-webkit-date-and-time-value {
        text-align: left;
    }

    #offerDate::-webkit-calendar-picker-indicator {
        opacity: .8;
        filter: invert(1);
        width: 20px;
        height: 20px;
    }
}


/* =========================================================
   ENHANCED MODALS, DASHBOARD, EDITOR & UX IMPROVEMENTS
   ========================================================= */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(8px);
}

.modal-backdrop.hidden {
    display: none !important;
}

.modal-backdrop > .modal {
    position: relative;
    inset: auto;
    z-index: 601;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: 92vh;
    padding: 0;
    overflow-y: auto;
    background: linear-gradient(145deg, #1a1f23, #111518);
    border: 1px solid #3a4248;
    border-radius: 15px;
    box-shadow: 0 35px 100px rgba(0, 0, 0, .68);
}

.modal-backdrop > .modal.confirm-dialog-card {
    width: min(460px, 100%);
}

#emailForm {
    padding: 20px;
}

.confirm-modal-body {
    padding: 22px 20px 8px;
    color: var(--text-soft);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-line;
}

.modal-backdrop > .modal .modal-footer {
    padding: 15px 20px;
    margin-top: 8px;
}

.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #ff5f5f, #d93838);
    border-color: #ff6b6b;
    box-shadow: 0 7px 20px rgba(255, 85, 85, .2);
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff7676, #e64545);
}

.small-btn.danger-btn {
    color: #ff8585;
    border-color: rgba(255, 85, 85, .28);
    background: rgba(255, 85, 85, .07);
}

.small-btn.danger-btn:hover:not(:disabled) {
    color: #fff;
    background: rgba(255, 85, 85, .2);
    border-color: rgba(255, 85, 85, .5);
}

/* Dashboard Financial Overview */
.finance-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 17px;
}

.finance-card {
    padding: 16px 18px;
    background: linear-gradient(145deg, #181d22, #111518);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.finance-card.highlight-accepted {
    border-color: rgba(66, 215, 125, .28);
    background: linear-gradient(145deg, rgba(66, 215, 125, .07), #121619);
}

.finance-card.highlight-pending {
    border-color: rgba(105, 183, 255, .28);
    background: linear-gradient(145deg, rgba(105, 183, 255, .07), #121619);
}

.finance-card.highlight-expiring {
    border-color: rgba(255, 194, 71, .28);
    background: linear-gradient(145deg, rgba(255, 194, 71, .07), #121619);
}

.finance-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.finance-value {
    font-size: 22px;
    font-weight: 850;
    color: #fff;
}

.finance-card.highlight-accepted .finance-value {
    color: #7be9a4;
}

.finance-card.highlight-pending .finance-value {
    color: #82c4ff;
}

.finance-card.highlight-expiring .finance-value {
    color: #ffd36a;
}

.finance-sub {
    font-size: 11px;
    color: var(--muted);
}

/* Status select in Offer table */
.offer-status-select {
    min-height: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.status-select-draft {
    color: #ffd36a;
    background: var(--warning-bg);
    border-color: rgba(255, 194, 71, .3);
}

.status-select-sent {
    color: #82c4ff;
    background: var(--info-bg);
    border-color: rgba(105, 183, 255, .3);
}

.status-select-accepted {
    color: #7be9a4;
    background: var(--success-bg);
    border-color: rgba(66, 215, 125, .3);
}

.status-select-rejected {
    color: #ff8585;
    background: var(--danger-bg);
    border-color: rgba(255, 85, 85, .3);
}

/* Version badge */
.version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    margin-left: 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 750;
    color: #ffc85b;
    background: rgba(255, 157, 0, .12);
    border: 1px solid rgba(255, 157, 0, .24);
    cursor: pointer;
}

.version-badge:hover {
    background: rgba(255, 157, 0, .24);
}

/* Customer select + quick add in Offer Editor */
.customer-select-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.customer-select-wrap select {
    flex: 1;
    min-width: 0;
}

.customer-quick-add-btn {
    white-space: nowrap;
    padding: 0 12px;
    min-height: 42px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 750;
    color: #ffc65b;
    background: rgba(255, 157, 0, .09);
    border: 1px solid rgba(255, 157, 0, .3);
}

.customer-quick-add-btn:hover {
    color: #17120a;
    background: var(--primary);
}

.customer-filter-input {
    min-height: 34px !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    margin-bottom: 4px;
    background: #0b0e11 !important;
}

/* Multiline description textarea in Offer Editor */
.items-table textarea.item-desc-textarea {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 7px;
    resize: vertical;
    line-height: 1.35;
    font-family: inherit;
    font-size: 12px;
    overflow-y: hidden;
}

/* Item & section reorder buttons */
.item-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.reorder-btn {
    width: 27px;
    height: 31px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid #30383f;
    border-radius: 6px;
    background: #15191d;
    color: #9aa3ab;
    font-size: 12px;
    line-height: 1;
}

.reorder-btn:hover:not(:disabled) {
    color: #fff;
    border-color: var(--primary);
    background: rgba(255, 157, 0, .12);
}

/* Section subtotal bar */
.section-subtotal-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .02);
    border-top: 1px solid #262d32;
    font-size: 12px;
    color: var(--muted);
}

.section-subtotal-bar strong {
    color: #ffd477;
    font-size: 13.5px;
    font-weight: 800;
}

/* Sticky bottom bar in Offer Editor */
.offer-sticky-bar {
    position: sticky;
    bottom: 12px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 13px 18px;
    margin-top: 8px;
    background: rgba(16, 20, 24, .95);
    border: 1px solid rgba(255, 157, 0, .35);
    border-radius: 13px;
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.sticky-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.sticky-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sticky-metric span {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sticky-metric strong {
    font-size: 14px;
    color: #e9edef;
}

.sticky-metric.grand strong {
    font-size: 18px;
    color: #ffc95e;
    font-weight: 850;
}

.sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Versions list inside modal */
.versions-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.version-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 15px;
    background: #14191d;
    border: 1px solid #2d353b;
    border-radius: 10px;
}

.version-row-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.version-row-title {
    font-size: 13px;
    font-weight: 800;
    color: #ffc85b;
}

.version-row-meta {
    font-size: 11px;
    color: var(--muted);
}

.version-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-row-amount {
    font-size: 13.5px;
    font-weight: 800;
    color: #f3f5f6;
}

@media (max-width: 720px) {
    .finance-stats {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .customer-select-wrap {
        flex-direction: column;
    }

    .offer-sticky-bar {
        flex-direction: column;
        align-items: stretch;
        bottom: 6px;
        padding: 11px 13px;
    }

    .sticky-metrics {
        justify-content: space-between;
        gap: 10px;
    }

    .sticky-actions {
        width: 100%;
    }

    .sticky-actions .btn {
        flex: 1;
    }

    .item-actions-cell {
        display: grid;
        grid-template-columns: 42px 42px 1fr;
        gap: 6px;
        width: 100%;
    }

    .reorder-btn {
        width: 100%;
        height: 30px;
    }
}

/* =========================================================
   Gallery Admin (Offer Manager -> Галерия (Сайт))
   ========================================================= */

.gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.gallery-admin-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
    box-shadow: var(--shadow);
}

.gallery-admin-card:hover {
    border-color: rgba(255, 122, 0, 0.45);
    transform: translateY(-2px);
}

.gallery-admin-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #0d1116;
    cursor: pointer;
    overflow: hidden;
}

.gallery-admin-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.gallery-admin-cover:hover img {
    transform: scale(1.03);
}

.gallery-admin-empty-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.gallery-admin-count {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(10, 13, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

.gallery-admin-vis {
    position: absolute;
    top: 10px;
    right: 10px;
}

.gallery-admin-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.gallery-admin-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.gallery-admin-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    color: var(--text);
}

.gallery-admin-title:hover {
    color: var(--accent-2);
}

.gallery-admin-desc {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-admin-actions {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-open-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: 13.5px;
}

.gallery-admin-row-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.gallery-admin-row-actions .gallery-toggle-switch {
    width: 100%;
    min-width: 0;
}

.gallery-admin-row-actions .small-btn,
.gallery-photo-admin-bar .small-btn {
    width: auto !important;
    min-height: 36px !important;
    height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.gallery-upload-dropzone {
    padding: 28px 20px;
    text-align: center;
    border: 2px dashed rgba(255, 122, 0, 0.35);
    border-radius: 14px;
    background: rgba(255, 122, 0, 0.04);
}

.gallery-photos-admin-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.gallery-photo-admin-card {
    background: #101419;
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gallery-photo-admin-card.is-cover {
    border-color: rgba(255, 160, 40, 0.65);
    box-shadow: 0 0 0 1px rgba(255, 160, 40, 0.25);
}

.gallery-photo-admin-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #090c0f;
    overflow: hidden;
}

.gallery-photo-admin-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-cover-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a00, #ffa133);
    color: #111;
    font-size: 11px;
    font-weight: 800;
}

.gallery-photo-admin-bar {
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gallery-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: #14191d;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, background 0.18s ease;
    height: 36px;
}

.gallery-toggle-switch:hover {
    border-color: rgba(255, 157, 0, 0.45);
}

.gallery-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.gallery-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #2b333a;
    border: 1px solid #3c464f;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.gallery-toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9aa3ab;
    transition: transform 0.2s ease, background 0.2s ease;
}

.gallery-toggle-switch input:checked + .gallery-toggle-slider {
    background: rgba(66, 215, 125, 0.22);
    border-color: var(--success);
}

.gallery-toggle-switch input:checked + .gallery-toggle-slider::after {
    transform: translateX(16px);
    background: var(--success);
}

.gallery-toggle-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.gallery-toggle-switch input:checked ~ .gallery-toggle-label {
    color: var(--success);
}

/* =========================================================
   UNIFIED INDUSTRIAL DESIGN (SHARP EDGES + LIGHT / DARK THEME)
   ========================================================= */

/* Theme Toggle Button (Topbar & Login) */
.topbar-actions .theme-toggle-btn,
.login-footer .theme-toggle-btn {
    width: auto;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-small);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.16s ease;
}

.topbar-actions .theme-toggle-btn:hover,
.login-footer .theme-toggle-btn:hover {
    border-color: var(--border-accent);
    color: var(--primary);
    background: var(--panel-2);
}

.theme-icon {
    font-size: 14px;
    line-height: 1;
}

/* Badges used in Settings, Gallery, and Customers */
.badge,
.customer-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text-soft);
    white-space: nowrap;
}

.badge-accepted {
    background: var(--success-bg);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--success);
}

.badge-rejected {
    background: var(--danger-bg);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--danger);
}

.badge-draft {
    background: var(--warning-bg);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--warning);
}

/* Sharp Industrial Corners Across Offer Manager */
.btn,
.small-btn,
.logout-button,
.topbar-actions button,
.mobile-menu,
.nav-item,
.nav-subitem,
.form-group input,
.form-group select,
.form-group textarea,
.search input,
.section-name,
.items-table input,
.items-table textarea.item-desc-textarea,
.delete-item,
.reorder-btn,
.customer-quick-add-btn,
.modal-close,
.login-input-wrap input,
.login-submit,
.login-error,
.login-password-toggle,
.gallery-toggle-switch,
.version-badge,
.toast {
    border-radius: var(--radius-small) !important;
}

.panel,
.stat-card,
.finance-card,
.settings-card,
.modal-card,
.modal-backdrop > .modal,
.login-card,
.gallery-admin-card,
.gallery-photo-admin-card,
.gallery-upload-dropzone,
.offer-sticky-bar,
.version-row-card,
.settings-logo-frame {
    border-radius: var(--radius) !important;
}

.brand-mark,
.brand-mark img,
.login-logo-wrap,
.login-logo-wrap img,
.login-mobile-logo,
.login-mobile-logo img,
.stat-icon,
.section-number,
.user-chip .avatar,
.status,
.offer-status-select,
.gallery-admin-count,
.gallery-cover-badge,
.gallery-toggle-slider,
.gallery-toggle-slider::after {
    border-radius: var(--radius-sm) !important;
}

/* Primary button consistency with public website */
.btn-primary,
.login-submit {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #111;
    border-color: rgba(255, 122, 0, 0.5);
    box-shadow: 0 6px 18px rgba(255, 122, 0, 0.22);
}

.btn-primary:hover:not(:disabled),
.login-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-2), #ffa74f);
    box-shadow: 0 10px 24px rgba(255, 122, 0, 0.34);
}

/* Clean mobile table row cards (replace legacy blue gradient) */
@media (max-width: 720px) {
    .offer-list-table tbody tr,
    .dashboard-offers-table tbody tr,
    .customer-list-table tbody tr {
        background: var(--panel) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: var(--shadow-small) !important;
    }

    .topbar-actions .theme-label {
        display: none;
    }

    .topbar-actions .theme-toggle-btn {
        padding: 0 10px;
    }
}

/* =========================================================
   LIGHT THEME OVERRIDES ([data-theme="light"])
   ========================================================= */

[data-theme="light"] body {
    background:
        radial-gradient(circle at top right, rgba(232, 107, 0, 0.07), transparent 32%),
        radial-gradient(circle at 15% 40%, rgba(232, 107, 0, 0.04), transparent 28%),
        var(--bg);
    color: var(--text);
}

[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: var(--border);
}

[data-theme="light"] .topbar h1,
[data-theme="light"] .page-head h2,
[data-theme="light"] .panel-header h3,
[data-theme="light"] .settings-card-head h3,
[data-theme="light"] .modal-header h2,
[data-theme="light"] .stat-value,
[data-theme="light"] .finance-value,
[data-theme="light"] tbody td strong,
[data-theme="light"] .totals-row strong,
[data-theme="light"] .totals-row.grand,
[data-theme="light"] .sticky-metric strong,
[data-theme="light"] .version-row-amount,
[data-theme="light"] .user-chip strong,
[data-theme="light"] .login-heading h1 {
    color: var(--text);
}

[data-theme="light"] .panel,
[data-theme="light"] .stat-card,
[data-theme="light"] .finance-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-backdrop > .modal,
[data-theme="light"] .gallery-admin-card,
[data-theme="light"] .gallery-photo-admin-card,
[data-theme="light"] .version-row-card {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: var(--shadow-small);
}

[data-theme="light"] .dashboard-link-card:hover {
    background: var(--panel-2);
    border-color: var(--border-accent);
    box-shadow: var(--shadow);
}

[data-theme="light"] .panel-header,
[data-theme="light"] .settings-card-head,
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer,
[data-theme="light"] .section-header,
[data-theme="light"] .section-subtotal-bar {
    background: var(--panel-2);
    border-color: var(--border);
}

[data-theme="light"] thead th {
    background: #f1f5f9;
    color: #475569;
    border-bottom-color: var(--border);
}

[data-theme="light"] tbody td {
    color: var(--text-soft);
    border-bottom-color: var(--border);
}

[data-theme="light"] tbody tr:hover {
    background: rgba(232, 107, 0, 0.04);
}

[data-theme="light"] .offer-number,
[data-theme="light"] .offer-list-table tbody td:first-child strong,
[data-theme="light"] .dashboard-offers-table tbody td:first-child strong,
[data-theme="light"] .version-row-title {
    color: var(--primary-dark);
}

[data-theme="light"] .offer-amount,
[data-theme="light"] .dashboard-offers-table tbody td:nth-child(5),
[data-theme="light"] .offer-list-table tbody td:nth-child(5),
[data-theme="light"] .item-total,
[data-theme="light"] .section-subtotal-bar strong,
[data-theme="light"] .totals-row.grand strong,
[data-theme="light"] .sticky-metric.grand strong {
    color: #b85000;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .customer-filter-input,
[data-theme="light"] .login-input-wrap input {
    background: #f8fafc !important;
    color: var(--text) !important;
    border-color: var(--border-light) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .login-input-wrap input:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
}

[data-theme="light"] select option {
    background: #ffffff;
    color: var(--text);
}

[data-theme="light"] .form-group label,
[data-theme="light"] .login-field label {
    color: var(--text-soft);
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .small-btn,
[data-theme="light"] .topbar-actions button,
[data-theme="light"] .logout-button,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .modal-close,
[data-theme="light"] .reorder-btn,
[data-theme="light"] .gallery-toggle-switch {
    background: #f8fafc;
    color: var(--text-soft);
    border-color: var(--border-light);
}

[data-theme="light"] .btn-secondary:hover:not(:disabled),
[data-theme="light"] .small-btn:hover:not(:disabled),
[data-theme="light"] .topbar-actions button:hover:not(:disabled),
[data-theme="light"] .modal-close:hover,
[data-theme="light"] .reorder-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: var(--text);
    border-color: var(--border-accent);
}

/* Keep sidebar button in dark sidebar styled for dark background */
[data-theme="light"] .sidebar .btn-secondary {
    background: #1a222b;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .sidebar .btn-secondary:hover {
    background: #222c38;
    color: #ffffff;
    border-color: var(--border-accent);
}

[data-theme="light"] .email-btn,
[data-theme="light"] .customer-quick-add-btn,
[data-theme="light"] .add-section-btn,
[data-theme="light"] .version-badge {
    color: #b85000;
    background: rgba(232, 107, 0, 0.08);
    border-color: rgba(232, 107, 0, 0.35);
}

[data-theme="light"] .small-btn.danger-btn,
[data-theme="light"] .delete-item {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .status-draft,
[data-theme="light"] .status-select-draft {
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="light"] .status-sent,
[data-theme="light"] .status-select-sent {
    color: #1d4ed8 !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.32) !important;
}

[data-theme="light"] .status-accepted,
[data-theme="light"] .status-select-accepted {
    color: #15803d !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

[data-theme="light"] .status-rejected,
[data-theme="light"] .status-select-rejected {
    color: #b91c1c !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.32) !important;
}

[data-theme="light"] .offer-sticky-bar {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--border-accent);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .toast {
    background: #ffffff;
    color: var(--text);
    border-color: var(--border-light);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .login-screen {
    background:
        radial-gradient(circle at 20% 20%, rgba(232, 107, 0, 0.1), transparent 32%),
        var(--bg);
}

[data-theme="light"] .login-card {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .login-form-panel {
    background: #ffffff;
}

[data-theme="light"] .gallery-toggle-slider {
    background: #cbd5e1;
    border-color: #94a3b8;
}

[data-theme="light"] .gallery-toggle-slider::after {
    background: #475569;
}

@media (max-width: 720px) {
    [data-theme="light"] .offer-section .offer-item-row {
        background: #f8fafc;
        border-color: var(--border-light);
    }

    [data-theme="light"] .offer-list-table tbody td,
    [data-theme="light"] .dashboard-offers-table tbody td,
    [data-theme="light"] .customer-list-table tbody td {
        color: var(--text-soft);
        border-bottom-color: var(--border);
    }

    [data-theme="light"] #offerDate {
        color-scheme: light;
    }

    [data-theme="light"] #offerDate::-webkit-calendar-picker-indicator {
        filter: none;
    }
}