:root {
    --ink-950: #08111f;
    --ink-900: #0c1728;
    --ink-800: #13243b;
    --ink-700: #203651;
    --slate-700: #34455e;
    --slate-600: #52627a;
    --slate-500: #718096;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f7f9fc;
    --white: #fff;
    --blue-700: #1558d6;
    --blue-600: #1667e8;
    --blue-500: #2582ff;
    --blue-100: #ddebff;
    --cyan-500: #00b8d9;
    --teal-500: #0db39e;
    --green-600: #079455;
    --green-100: #dcfae6;
    --amber-600: #dc6803;
    --amber-100: #fef0c7;
    --red-600: #d92d20;
    --red-100: #fee4e2;
    --violet-600: #6938ef;
    --violet-100: #ebe9fe;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 8px 24px rgba(15, 31, 55, .09);
    --shadow-lg: 0 24px 64px rgba(7, 17, 31, .18);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --sidebar: 250px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--slate-50); }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--ink-900);
    background: var(--slate-50);
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.login-page {
    display: grid;
    grid-template-columns: minmax(420px, 46%) 1fr;
    min-height: 100vh;
    background: var(--white);
}

.login-panel {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px clamp(32px, 6vw, 100px);
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: white;
    background: linear-gradient(145deg, var(--blue-500), var(--cyan-500));
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(22, 103, 232, .28);
}

.brand-mark svg { width: 22px; height: 22px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; }

.login-card h1 {
    margin: 54px 0 10px;
    font-family: Manrope, sans-serif;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.login-card > p {
    margin: 0 0 34px;
    color: var(--slate-600);
    font-size: 15px;
    line-height: 1.65;
}

.login-art {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: var(--ink-950) url("/assets/login-art.png") center/cover no-repeat;
}

.login-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 17, 31, .24), rgba(8, 17, 31, 0) 45%);
}

.login-message {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: 8%;
    width: min(460px, 80%);
    color: white;
}

.login-message .eyebrow { color: #70e1ff; }

.login-message h2 {
    margin: 12px 0;
    font-family: Manrope, sans-serif;
    font-size: clamp(28px, 3.3vw, 48px);
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.login-message p { color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.6; }

.demo-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 13px 15px;
    color: #304768;
    background: #eef6ff;
    border: 1px solid #d8e9ff;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.5;
}

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { color: var(--ink-800); font-weight: 600; font-size: 13px; }

.input-wrap { position: relative; }
.input-wrap .icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    color: var(--slate-400);
    transform: translateY(-50%);
}

.input, .select, .textarea {
    width: 100%;
    min-height: 42px;
    color: var(--ink-900);
    background: var(--white);
    border: 1px solid var(--slate-300);
    border-radius: 10px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.input { padding: 10px 13px; }
.input-wrap .input { padding-left: 42px; }
.select { padding: 9px 34px 9px 12px; }
.textarea { min-height: 88px; padding: 10px 13px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(37, 130, 255, .12);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-lg { min-height: 46px; padding: 12px 18px; }
.btn-sm { min-height: 32px; padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.btn-primary { color: white; background: var(--blue-600); box-shadow: 0 4px 12px rgba(22, 103, 232, .22); }
.btn-primary:hover { background: var(--blue-700); }
.btn-secondary { color: var(--ink-800); background: var(--white); border-color: var(--slate-300); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--slate-50); border-color: var(--slate-400); }
.btn-soft { color: var(--blue-700); background: #eaf3ff; }
.btn-danger { color: var(--red-600); background: var(--red-100); }
.btn-dark { color: white; background: var(--ink-900); }
.btn-icon { width: 38px; padding: 0; }

.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: var(--sidebar);
    color: #c5d0e0;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 130, 255, .13), transparent 28%),
        var(--ink-950);
    border-right: 1px solid rgba(255, 255, 255, .04);
    transition: transform .24s;
}

.sidebar-head {
    display: flex;
    align-items: center;
    height: 72px;
    padding: 0 20px;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar .brand { font-size: 18px; }
.sidebar .brand-mark { width: 34px; height: 34px; }

.sidebar-nav {
    overflow: auto;
    flex: 1;
    padding: 18px 12px 28px;
    scrollbar-width: thin;
    scrollbar-color: #2a3c55 transparent;
}

.nav-label {
    margin: 20px 11px 7px;
    color: #61728a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nav-label:first-child { margin-top: 3px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    margin: 2px 0;
    padding: 9px 11px;
    color: #9dadc1;
    font-size: 13px;
    font-weight: 500;
    border-radius: 9px;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.nav-item:hover { color: white; background: rgba(255, 255, 255, .055); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(37, 130, 255, .23), rgba(37, 130, 255, .1)); }
.nav-item.active .icon { color: #58b7ff; }
.nav-item .icon { width: 18px; }
.nav-item .nav-badge { margin-left: auto; }

.sidebar-user {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px 17px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: #dcecff;
    background: linear-gradient(145deg, #244e83, #1a3458);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-user strong { display: block; overflow: hidden; color: white; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user span { color: #75869d; font-size: 11px; }
.sidebar-user > div:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-user button { color: #71849b; background: none; border: 0; cursor: pointer; }

.main { min-height: 100vh; margin-left: var(--sidebar); }

.topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 72px;
    padding: 0 clamp(18px, 3vw, 34px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--slate-200);
    backdrop-filter: blur(14px);
}

.mobile-menu { display: none; }

.top-search {
    position: relative;
    width: min(380px, 34vw);
}

.top-search .input { min-height: 38px; padding-left: 38px; background: var(--slate-50); border-color: transparent; }
.top-search .icon { position: absolute; top: 50%; left: 12px; width: 17px; color: var(--slate-400); transform: translateY(-50%); }
.topbar-spacer { flex: 1; }
.alert-button { position: relative; }
.alert-button > span { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; color: #fff; background: var(--red-600); border: 2px solid #fff; border-radius: 20px; font-size: 8px; font-weight: 800; }

.branch-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 11px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 9px;
}

.branch-picker .icon { width: 16px; color: var(--blue-600); }
.branch-picker select { max-width: 170px; font-weight: 600; background: transparent; border: 0; outline: none; }

.content { padding: 26px clamp(18px, 3vw, 34px) 46px; }

.page-head {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 23px;
}

.page-head h1 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 25px;
    letter-spacing: -.65px;
}

.page-head p { margin: 5px 0 0; color: var(--slate-600); font-size: 13px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }

.notice {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 14px;
    color: #315581;
    background: #eef6ff;
    border: 1px solid #d9eaff;
    border-radius: var(--radius);
    font-size: 12px;
}

.grid { display: grid; gap: 18px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--slate-200);
}

.card-head h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: -.2px; }
.card-body { padding: 18px; }

.kpi-card { position: relative; overflow: hidden; padding: 18px; }
.kpi-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -42px;
    width: 100px;
    height: 100px;
    background: var(--kpi-soft, var(--blue-100));
    border-radius: 50%;
    opacity: .55;
}

.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--kpi, var(--blue-600)); background: var(--kpi-soft, var(--blue-100)); border-radius: 10px; }
.kpi-icon .icon { width: 19px; }
.kpi-label { color: var(--slate-600); font-size: 12px; font-weight: 600; }
.kpi-value { position: relative; z-index: 1; margin: 14px 0 5px; font-family: Manrope, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.8px; }
.kpi-meta { position: relative; z-index: 1; color: var(--slate-500); font-size: 11px; }
.trend { color: var(--green-600); font-weight: 700; }
.trend.down { color: var(--red-600); }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 16px 5px 0; }
.chart-bar-wrap { display: flex; flex: 1; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.chart-bar {
    width: min(34px, 65%);
    min-height: 3px;
    background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
    border-radius: 7px 7px 3px 3px;
    box-shadow: 0 5px 12px rgba(37, 130, 255, .16);
    transition: height .4s;
}
.chart-day { color: var(--slate-500); font-size: 10px; }
.chart-value { color: var(--slate-600); font-size: 9px; font-weight: 600; }

.progress-row { display: grid; grid-template-columns: 110px 1fr 45px; gap: 12px; align-items: center; margin: 16px 0; }
.progress-label { color: var(--slate-600); font-size: 12px; }
.progress-track { height: 7px; overflow: hidden; background: var(--slate-100); border-radius: 20px; }
.progress-bar { height: 100%; background: var(--blue-500); border-radius: inherit; }
.progress-value { text-align: right; font-size: 12px; font-weight: 700; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.toolbar .search-field { position: relative; width: min(340px, 100%); }
.toolbar .search-field .input { padding-left: 38px; }
.toolbar .search-field .icon { position: absolute; top: 50%; left: 12px; width: 17px; color: var(--slate-400); transform: translateY(-50%); }
.toolbar .select { width: auto; min-width: 150px; }
.toolbar-spacer { flex: 1; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
    padding: 11px 14px;
    color: var(--slate-500);
    background: #fafbfd;
    border-top: 1px solid var(--slate-200);
    border-bottom: 1px solid var(--slate-200);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--slate-100); font-size: 12px; vertical-align: middle; }
.table tbody tr:hover { background: #fbfdff; }
.table tr:last-child td { border-bottom: 0; }
.text-right { text-align: right !important; }
.text-muted { color: var(--slate-500); }
.text-danger { color: var(--red-600); }
.text-success { color: var(--green-600); }
.strong { font-weight: 700; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 3px 8px;
    color: var(--slate-700);
    background: var(--slate-100);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.badge.success { color: var(--green-600); background: var(--green-100); }
.badge.warning { color: var(--amber-600); background: var(--amber-100); }
.badge.danger { color: var(--red-600); background: var(--red-100); }
.badge.info { color: var(--blue-700); background: var(--blue-100); }
.badge.violet { color: var(--violet-600); background: var(--violet-100); }

.empty { display: grid; place-items: center; min-height: 250px; padding: 40px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; color: var(--slate-400); background: var(--slate-100); border-radius: 16px; }
.empty h3 { margin: 0 0 5px; font-size: 15px; }
.empty p { max-width: 360px; margin: 0; color: var(--slate-500); font-size: 12px; line-height: 1.6; }

.pos-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(430px, .85fr); gap: 18px; align-items: start; }
.pos-catalog { min-width: 0; }
.pos-search { display: flex; gap: 10px; margin-bottom: 16px; }
.pos-search .search-field { position: relative; flex: 1; }
.pos-search .input { min-height: 48px; padding-left: 44px; font-size: 14px; }
.pos-search .icon { position: absolute; top: 50%; left: 15px; color: var(--slate-400); transform: translateY(-50%); }

.category-pills { display: flex; gap: 7px; margin-bottom: 15px; overflow-x: auto; padding-bottom: 3px; }
.pill {
    padding: 7px 12px;
    color: var(--slate-600);
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.pill.active { color: white; background: var(--ink-900); border-color: var(--ink-900); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-card {
    position: relative;
    display: flex;
    min-height: 155px;
    flex-direction: column;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.product-card:hover { border-color: #9ec8ff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.product-art {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    color: var(--product-color, var(--blue-600));
    background: var(--product-soft, var(--blue-100));
    border-radius: 12px;
}
.product-card h3 { margin: 0 0 4px; font-size: 13px; line-height: 1.35; }
.product-card .sku { color: var(--slate-500); font-size: 9px; }
.product-card-footer { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.product-price { font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; }
.stock { color: var(--green-600); font-size: 9px; font-weight: 700; }
.stock.low { color: var(--red-600); }

.cart {
    position: sticky;
    top: 90px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.cart-head { padding: 17px; border-bottom: 1px solid var(--slate-200); }
.cart-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.cart-title h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 16px; }
.customer-select { display: flex; align-items: center; gap: 8px; }
.customer-select .select { min-width: 0; flex: 1; }
.customer-combobox { position: relative; min-width: 0; flex: 1; }
.customer-combobox .input { width: 100%; }
.customer-results { position: absolute; z-index: 25; top: calc(100% + 5px); right: 0; left: 0; overflow-y: auto; max-height: 280px; padding: 5px; background: #fff; border: 1px solid var(--slate-200); border-radius: 10px; box-shadow: var(--shadow-lg); }
.customer-result { display: block; width: 100%; padding: 9px 10px; text-align: left; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.customer-result:hover, .customer-result:focus { background: var(--blue-100); outline: none; }
.customer-result strong, .customer-result span { display: block; }
.customer-result strong { color: var(--ink-900); font-size: 11px; }
.customer-result span { overflow: hidden; margin-top: 2px; color: var(--slate-500); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-result-empty { padding: 13px 10px; color: var(--slate-500); font-size: 10px; text-align: center; }
.alert-list { display: grid; gap: 10px; }
.alert-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 13px; color: inherit; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 11px; text-decoration: none; }
.alert-item:hover { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.alert-item .kpi-icon { --kpi: var(--blue-600); --kpi-soft: var(--blue-100); }
.alert-item.danger .kpi-icon { --kpi: var(--red-600); --kpi-soft: #fee4e2; }
.alert-item.ok .kpi-icon { --kpi: var(--green-600); --kpi-soft: #dcfae6; }
.alert-item strong { display: block; font-size: 12px; }
.alert-item p { margin: 3px 0 0; color: var(--slate-500); font-size: 10px; line-height: 1.45; }
.cart-items { max-height: calc(100vh - 435px); min-height: 190px; overflow-y: auto; padding: 6px 14px; }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--slate-100); }
.cart-item h4 { overflow: hidden; margin: 0 0 4px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-meta { color: var(--slate-500); font-size: 9px; }
.cart-line-total { text-align: right; font-size: 12px; font-weight: 700; }
.qty-control { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.qty-control button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: var(--slate-100); border: 0; border-radius: 6px; cursor: pointer; }
.qty-control input { width: 40px; height: 24px; text-align: center; border: 1px solid var(--slate-200); border-radius: 6px; }
.remove-line { margin-top: 8px; padding: 0; color: var(--red-600); background: none; border: 0; font-size: 9px; cursor: pointer; }
.cart-empty { display: grid; place-items: center; height: 190px; color: var(--slate-400); text-align: center; font-size: 11px; }
.cart-summary { padding: 14px 17px 17px; background: #fbfcfe; border-top: 1px solid var(--slate-200); }
.summary-line { display: flex; justify-content: space-between; margin: 7px 0; color: var(--slate-600); font-size: 12px; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin: 13px 0; padding-top: 12px; border-top: 1px dashed var(--slate-300); font-weight: 700; }
.summary-total strong { font-family: Manrope, sans-serif; font-size: 23px; color: var(--ink-950); }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 13px; overflow-x: auto; padding-bottom: 12px; }
.kanban-column { min-height: 480px; padding: 11px; background: #eef2f7; border-radius: 14px; }
.kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 11px; font-size: 11px; font-weight: 700; }
.kanban-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; color: var(--slate-600); background: white; border-radius: 20px; }
.order-card { margin-bottom: 9px; padding: 13px; background: white; border: 1px solid #e0e6ee; border-radius: 11px; box-shadow: var(--shadow-sm); cursor: pointer; }
.order-card:hover { border-color: #9ec8ff; }
.order-card-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.order-card-code { color: var(--blue-700); font-size: 10px; font-weight: 700; }
.order-card h3 { margin: 0 0 5px; font-size: 12px; line-height: 1.4; }
.order-card p { margin: 0; color: var(--slate-500); font-size: 10px; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--slate-100); }
.due { display: flex; align-items: center; gap: 4px; color: var(--slate-500); font-size: 9px; }
.due.late { color: var(--red-600); font-weight: 700; }
.mini-avatar { display: grid; place-items: center; width: 25px; height: 25px; color: white; background: var(--ink-700); border-radius: 50%; font-size: 8px; font-weight: 700; }

.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.report-card { display: flex; align-items: center; gap: 13px; padding: 15px; cursor: pointer; }
.report-card:hover { border-color: #afd0fa; box-shadow: var(--shadow-md); }
.report-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; color: var(--blue-600); background: var(--blue-100); border-radius: 10px; }
.report-card h3 { margin: 0 0 3px; font-size: 12px; }
.report-card p { margin: 0; color: var(--slate-500); font-size: 10px; }
.report-card .arrow { margin-left: auto; color: var(--slate-400); }

.settings-nav { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; }
.settings-tab { padding: 9px 13px; color: var(--slate-600); background: white; border: 1px solid var(--slate-200); border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.settings-tab.active { color: var(--blue-700); background: #eef6ff; border-color: #bcd9ff; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.input-action { display: flex; gap: 8px; }
.input-action .input { min-width: 0; }
.table-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.logo-upload-row { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px dashed var(--slate-300); border-radius: 12px; background: var(--slate-50); }
.logo-preview { display: grid; place-items: center; flex: 0 0 96px; width: 96px; height: 72px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; color: var(--blue-600); }
.logo-preview img { max-width: 86px; max-height: 62px; object-fit: contain; }
.logo-preview svg { width: 32px; height: 32px; }
.quote-line { display: grid; grid-template-columns: minmax(220px, 2fr) 90px 110px 110px 80px 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
.quote-line-head { color: var(--slate-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.purchase-line { display: grid; grid-template-columns: minmax(240px, 1fr) 100px 110px 90px 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
.purchase-line-head { color: var(--slate-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.transfer-line { display: grid; grid-template-columns: minmax(280px, 1fr) 120px 38px; gap: 8px; margin-bottom: 8px; }
.quote-document { padding: 22px; color: #172b4d; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; }
.quote-document header { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 18px; border-bottom: 2px solid var(--blue-600); }
.quote-document header img { max-width: 130px; max-height: 70px; object-fit: contain; margin-bottom: 8px; }
.quote-document header h2 { margin: 0 0 4px; }
.quote-document header p, .quote-document footer { margin: 0; color: var(--slate-500); font-size: 11px; line-height: 1.5; }
.quote-number { text-align: right; }
.quote-number span, .quote-number strong, .quote-number small { display: block; }
.quote-number span { color: var(--blue-600); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.quote-number strong { margin: 4px 0 9px; font-size: 20px; }
.quote-customer { display: grid; grid-template-columns: 110px 1fr; margin: 18px 0; padding: 12px; background: var(--slate-50); border-radius: 8px; }
.quote-document table { width: 100%; border-collapse: collapse; font-size: 11px; }
.quote-document th, .quote-document td { padding: 9px 7px; border-bottom: 1px solid var(--slate-200); text-align: right; }
.quote-document th:first-child, .quote-document td:first-child { text-align: left; }
.quote-totals { width: min(320px, 100%); margin: 16px 0 16px auto; }
.quote-totals div { display: flex; justify-content: space-between; padding: 6px 0; }
.quote-totals .grand { padding-top: 10px; color: var(--blue-600); border-top: 2px solid var(--blue-600); font-size: 16px; }
.quote-document footer { margin-top: 22px; padding-top: 12px; text-align: center; border-top: 1px solid var(--slate-200); }
.report-document-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.report-document-head img { width: 90px; height: 55px; object-fit: contain; }
.report-document-head h2, .report-document-head p { margin: 0; }
.print-document { padding: 24px; background: #fff; }
.print-document .quote-document { max-width: 900px; margin: auto; border: 0; }
.form-section-title { grid-column: 1 / -1; margin: 9px 0 17px; padding-bottom: 9px; border-bottom: 1px solid var(--slate-200); font-family: Manrope, sans-serif; font-size: 13px; }

.modal-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(6, 14, 26, .63);
    backdrop-filter: blur(4px);
    animation: fadeIn .14s ease-out;
}

.modal {
    overflow: hidden;
    width: min(620px, 100%);
    max-height: min(90vh, 860px);
    background: white;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    animation: slideUp .18s ease-out;
}
.modal.wide { width: min(850px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 19px 21px; border-bottom: 1px solid var(--slate-200); }
.modal-head h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 18px; }
.modal-head p { margin: 4px 0 0; color: var(--slate-500); font-size: 11px; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; color: var(--slate-500); background: var(--slate-100); border: 0; border-radius: 9px; cursor: pointer; }
.modal-body { overflow-y: auto; max-height: calc(90vh - 145px); padding: 20px 21px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 21px; background: #fafbfd; border-top: 1px solid var(--slate-200); }

.payment-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.payment-method { display: grid; place-items: center; gap: 7px; min-height: 74px; color: var(--slate-600); background: white; border: 1px solid var(--slate-200); border-radius: 11px; cursor: pointer; }
.payment-method.active { color: var(--blue-700); background: #edf5ff; border-color: #85baff; box-shadow: 0 0 0 2px rgba(37,130,255,.08); }
.payment-method .icon { width: 22px; }
.payment-method span { font-size: 10px; font-weight: 700; }
.payment-total { padding: 16px; text-align: center; background: var(--ink-950); border-radius: 13px; color: white; }
.payment-total span { display: block; color: #8fa3bc; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.payment-total strong { display: block; margin-top: 3px; font-family: Manrope, sans-serif; font-size: 30px; }

.toast-region { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: grid; gap: 9px; width: min(360px, calc(100vw - 40px)); }
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    color: white;
    background: var(--ink-900);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    animation: slideLeft .22s ease-out;
}
.toast.success { background: #075a39; }
.toast.error { background: #9f241b; }
.toast strong { display: block; margin-bottom: 2px; font-size: 12px; }
.toast span { color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.4; }

.loading-page { display: grid; place-items: center; min-height: 100vh; color: var(--slate-500); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--slate-200); border-top-color: var(--blue-600); border-radius: 50%; animation: spin .7s linear infinite; }

.sidebar-overlay { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(15px); } }

@media (max-width: 1180px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    .login-page { grid-template-columns: 1fr; }
    .login-panel { min-height: 100vh; }
    .login-art { display: none; }
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { position: fixed; z-index: 29; inset: 0; display: block; background: rgba(6,14,26,.54); }
    .main { margin-left: 0; }
    .mobile-menu { display: inline-flex; }
    .top-search { display: none; }
    .pos-layout { grid-template-columns: 1fr; }
    .cart { position: static; }
    .cart-items { max-height: 360px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .topbar { height: 62px; padding: 0 14px; }
    .content { padding: 19px 13px 36px; }
    .branch-picker { margin-left: auto; }
    .branch-picker span { display: none; }
    .branch-picker select { max-width: 120px; font-size: 11px; }
    .page-head { align-items: stretch; flex-direction: column; gap: 12px; }
    .page-actions { justify-content: flex-start; }
    .grid-5,
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .span-2, .span-3 { grid-column: auto; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .product-card { min-height: 145px; padding: 12px; }
    .report-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .quote-line { grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--slate-200); }
    .quote-line-head { display: none; }
    .purchase-line { grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--slate-200); }
    .purchase-line-head { display: none; }
    .transfer-line { grid-template-columns: 1fr 90px 38px; }
    .logo-upload-row { align-items: flex-start; flex-direction: column; }
    .payment-methods { grid-template-columns: repeat(2, 1fr); }
    .modal-backdrop { padding: 8px; align-items: end; }
    .modal { max-height: 94vh; border-radius: 18px 18px 0 0; }
    .toolbar .search-field { width: 100%; }
}

@media print {
    body * { visibility: hidden; }
    #receipt, #receipt *, .quote-document, .quote-document *, #report-document, #report-document * { visibility: visible; }
    #receipt, .quote-document, #report-document { position: absolute; inset: 0; width: 100%; }
    .modal-backdrop, .modal { position: static; display: block; padding: 0; background: #fff; box-shadow: none; }
    .modal-head, .modal-foot, .no-print { display: none !important; }
    .modal-body { max-height: none; overflow: visible; padding: 0; }
    .quote-document { border: 0; }
}

/* Logo dinámico con nombre del negocio en login y menú lateral */
.login-panel .brand-logo, .sidebar .brand-logo { max-width: 46px; max-height: 46px; object-fit: contain; }
.login-panel .brand { align-items: center; }

.brand.brand-with-label {
    gap: 12px;
    max-width: 100%;
}
.brand.brand-with-label .brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    flex: 0 0 auto;
}
.brand.brand-with-label .brand-name {
    display: inline-block;
    color: inherit;
    font-weight: 800;
    line-height: 1.05;
    white-space: normal;
    word-break: break-word;
}
.sidebar .brand.brand-with-label {
    width: 100%;
}
.sidebar .brand.brand-with-label .brand-logo {
    width: 40px;
    height: 40px;
}
.sidebar .brand.brand-with-label .brand-name {
    max-width: 150px;
    font-size: 17px;
}
.login-panel .brand.brand-with-label {
    justify-content: flex-start;
}
.login-panel .brand.brand-with-label .brand-logo {
    width: 58px;
    height: 58px;
}
.login-panel .brand.brand-with-label .brand-name {
    font-size: 22px;
}

/* Acciones de ventas/facturas */
.action-buttons { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; }
.invoice-document { max-width:850px; margin:0 auto; color:#111827; }
.invoice-header { display:flex; align-items:center; gap:18px; border-bottom:1px solid #e5e7eb; padding-bottom:16px; margin-bottom:16px; }
.invoice-header .receipt-logo { width:120px; display:flex; justify-content:center; align-items:center; }
.invoice-header img { max-width:110px; max-height:80px; object-fit:contain; }
.invoice-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; font-size:13px; margin:12px 0; }
.invoice-customer { background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:12px 0; }
.invoice-table { margin-top:12px; }
.invoice-totals { max-width:360px; margin:18px 0 0 auto; }
@media print { .action-buttons, .topbar, .sidebar, .modal-foot, .no-print { display:none!important; } .invoice-document { max-width:none; } }

/* BarcodeInput: campos dedicados para lectores USB HID y escritura manual de códigos. */
.barcodeinput {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .02em;
}
.barcodeinput:focus {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* v17: compras manuales e iconos de categoría */
.purchase-line-manual{grid-template-columns:minmax(280px,1fr) 120px 120px 120px 64px;}
.category-toolbar{align-items:end;}
.category-icon-select .select{min-width:220px;}
.category-icon-preview{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:#f8fafc;}
@media(max-width:900px){.purchase-line-manual{grid-template-columns:1fr 1fr}.purchase-line-manual .btn-icon{width:100%;}}

/* Paginación automática para tablas grandes */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px 0;
    flex-wrap: wrap;
}
.table-pagination-left,
.table-pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-pagination-center {
    font-size: 13px;
}
.table-pagination .table-page-size {
    width: auto;
    min-width: 84px;
    height: 36px;
    padding: 6px 28px 6px 10px;
}
.table-pagination .table-page-current {
    min-width: 110px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #667085);
}
@media (max-width: 640px) {
    .table-pagination {
        align-items: stretch;
    }
    .table-pagination-left,
    .table-pagination-center,
    .table-pagination-right {
        width: 100%;
        justify-content: center;
    }
}

/* Botón visible de cambio de contraseña */
.nav-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
}
.user-password-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    color: #dcecff !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
}
.user-password-btn .icon {
    width: 14px;
}
.user-password-btn span {
    color: #dcecff !important;
    font-size: 11px !important;
}
.top-password-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    white-space: nowrap;
}
.top-password-btn .icon {
    width: 16px;
}
@media (max-width: 760px) {
    .top-password-btn span {
        display: none;
    }
    .top-password-btn {
        width: 38px;
        padding: 0;
        justify-content: center;
    }
    .user-password-btn span {
        display: none;
    }
}


/* v31 productos: miniaturas y ajuste de inventario */
.product-art .product-thumb,.product-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;display:block;background:#f2f4f7;border:1px solid #d0d5dd}
.product-art .product-thumb{width:100%;height:100%;border:0;border-radius:inherit}
.product-thumb-placeholder{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#f2f4f7;color:#667085;border:1px solid #d0d5dd}
.inventory-product-cell{display:flex;align-items:center;gap:10px;min-width:220px}
.product-upload-row{display:flex;gap:14px;align-items:center}.product-upload-preview{display:grid;place-items:center;width:86px;height:86px;border:1px dashed #98a2b3;border-radius:14px;background:#f8fafc;overflow:hidden}.product-upload-preview img{width:100%;height:100%;object-fit:cover}.table-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:260px}.stock-adjust-visible,.stock-adjust-visible-inline{font-weight:700;white-space:nowrap}.stock-adjust-visible-inline{padding:5px 8px;min-height:30px}
/* Limpieza v32: no mostrar botón Ajustar debajo del producto */
.stock-adjust-visible-inline {
    display: none !important;
}
/* Compresión de imágenes de producto */
.product-upload-preview {
    display: grid;
    place-items: center;
    overflow: hidden;
}
.product-upload-preview img {
    max-width: 92px;
    max-height: 92px;
    object-fit: cover;
    border-radius: 10px;
}


/* v38: el cambio de contraseña queda solo en el menú Cuenta */
.sidebar-user {
    display: block !important;
    padding: 14px 15px !important;
}
.sidebar-user-main {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.sidebar-user-info {
    min-width: 0;
}
.sidebar-user-info strong,
.sidebar-user-info span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-logout-btn {
    display: grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #71849b !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
}


.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}
.report-summary-grid article {
    padding: 12px 14px;
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    background: #f8fafc;
}
.report-summary-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 700;
}
.report-summary-grid strong {
    color: var(--slate-900);
    font-size: 22px;
    font-family: Manrope, sans-serif;
}
@media print {
    .report-summary-grid { grid-template-columns: repeat(2, 1fr); }
}


.kpi-clickable {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.kpi-clickable .kpi-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kpi-clickable:hover .kpi-card,
.kpi-clickable.active .kpi-card {
    transform: translateY(-2px);
    border-color: #f04438;
    box-shadow: 0 12px 30px rgba(217, 45, 32, .14);
}
.inventory-filter-notice {
    justify-content: space-between;
    align-items: center;
}
.table-pagination-top {
    margin-bottom: 10px;
}


.product-thumb-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-thumb-badge {
    position: absolute;
    right: -7px;
    bottom: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 118, 110, .25);
}
.product-upload-row + .product-upload-row {
    margin-top: 10px;
}


.fifo-notice {
    background: #f0fdfa;
    border-color: #99f6e4;
    color: #115e59;
}


/* ARTEES_QUOTE_INVENTORY_PRODUCTS_V60_CSS */
.quote-line {
    grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1.5fr) 100px 110px 110px 90px 44px;
}
.quote-line-head {
    align-items: center;
}
.quote-product {
    min-width: 0;
}
@media (max-width: 980px) {
    .quote-line {
        grid-template-columns: 1fr;
    }
}


/* ARTEES_QUOTATION_HEADER_DELETE_V62_CSS */
.quote-header-enhanced {
    display: grid !important;
    grid-template-columns: 1.25fr 1.15fr .9fr;
    gap: 18px;
    align-items: start;
}
.quote-brand-block {
    display: flex;
    gap: 16px;
    align-items: center;
}
.quote-logo-large {
    max-width: 210px !important;
    max-height: 120px !important;
    width: auto;
    height: auto;
    object-fit: contain;
}
.quote-contact-block {
    font-size: 11px;
    color: var(--slate-600);
    line-height: 1.45;
}
.quote-contact-block p {
    margin: 0 0 4px;
    word-break: break-word;
}
@media print {
    .quote-logo-large {
        max-width: 230px !important;
        max-height: 130px !important;
    }
    .quote-header-enhanced {
        grid-template-columns: 1.2fr 1.1fr .85fr;
    }
}
@media (max-width: 900px) {
    .quote-header-enhanced {
        grid-template-columns: 1fr !important;
    }
    .quote-number {
        text-align: left;
    }
}


/* ARTEES_V65_RTN_PDF_VOID_FIX_CSS */
.quote-header-no-contact {
    grid-template-columns: 1.45fr .8fr !important;
}
.quote-bottom-row {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 360px);
    gap: 20px;
    align-items: end;
    margin-top: 22px;
}
.quote-bottom-row footer {
    margin-top: 0 !important;
    text-align: left;
}
.quote-contact-bottom {
    justify-self: end;
    text-align: right;
    color: var(--slate-600);
    font-size: 11px;
    line-height: 1.45;
}
.quote-contact-bottom p {
    margin: 0 0 4px;
    word-break: break-word;
}
@media print {
    .quote-bottom-row {
        grid-template-columns: 1fr 340px;
        page-break-inside: avoid;
    }
    .quote-contact-bottom {
        text-align: right;
    }
}
@media (max-width: 900px) {
    .quote-bottom-row {
        grid-template-columns: 1fr;
    }
    .quote-contact-bottom {
        justify-self: stretch;
        text-align: left;
    }
}


/* ARTEES_V74_MODAL_STATIC_BACKDROP_CSS */
.modal-attention {
    animation: modalAttentionPulse .18s ease-out;
}
@keyframes modalAttentionPulse {
    0% { transform: scale(1); }
    50% { transform: scale(.992); }
    100% { transform: scale(1); }
}


/* ARTEES_V83_QUOTE_MODAL_WIDE_CSS */
.modal.wide, .modal:has(#quotation-form) {
    width: min(1480px, 98vw);
}
#quotation-form.quotation-form-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 18px;
}
#quotation-form .quotation-detail-area {
    grid-column: 1 / -1;
}
#quotation-form .quote-line {
    grid-template-columns: minmax(280px, 1.45fr) minmax(260px, 1.35fr) 110px 130px 130px 90px 58px;
    gap: 10px;
    align-items: center;
}
#quotation-form .quote-line-head {
    font-size: 12px;
}
#quotation-form .quote-product-search-wrap,
#quotation-form .quote-product-search {
    min-width: 0;
    width: 100%;
}
#quotation-form #quotation-lines {
    overflow-x: auto;
    padding-bottom: 4px;
}
#quotation-form .quote-line-body {
    min-width: 1080px;
}
@media (max-width: 1100px) {
    #quotation-form.quotation-form-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #quotation-form .quote-line {
        grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) 95px 115px 115px 80px 54px;
    }
}
@media (max-width: 760px) {
    #quotation-form.quotation-form-wide {
        grid-template-columns: 1fr;
    }
}


/* ARTEES_V84_QUOTE_PRODUCT_RESULTS_CSS */
#quotation-form .quote-product-picker {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}
#quotation-form .quote-product-search-wrap {
    position: relative;
    overflow: visible;
}
#quotation-form .quote-product-results {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d6e0ef;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
    padding: 6px;
}
#quotation-form .quote-product-result {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
}
#quotation-form .quote-product-result:hover {
    background: #eef4ff;
}
#quotation-form .quote-product-result strong,
#quotation-form .quote-product-result span {
    display: block;
}
#quotation-form .quote-product-result span,
#quotation-form .quote-product-result-empty {
    color: #667085;
    font-size: 12px;
}
#quotation-form .quote-product-result-empty {
    padding: 10px;
}


/* ARTEES_V85_QUOTE_MODAL_FORCE_WIDTH_CSS */
#modal-root .modal.wide:has(#quotation-form),
#modal-root .modal:has(#quotation-form[data-quote-v85="1"]) {
    width: 98vw !important;
    max-width: 1560px !important;
    min-width: min(1180px, 98vw) !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v85="1"]) .modal-body {
    max-height: calc(100vh - 190px);
    overflow: auto;
}
#quotation-form[data-quote-v85="1"].quotation-form-wide {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
}
#quotation-form[data-quote-v85="1"] .field.full,
#quotation-form[data-quote-v85="1"] .quotation-detail-area {
    grid-column: 1 / -1 !important;
}
#quotation-form[data-quote-v85="1"] .quote-line {
    display: grid !important;
    grid-template-columns: minmax(340px, 1.6fr) minmax(300px, 1.4fr) 105px 125px 125px 85px 54px !important;
    gap: 8px !important;
    align-items: center !important;
}
#quotation-form[data-quote-v85="1"] .quote-line-body {
    min-width: 1160px !important;
}
#quotation-form[data-quote-v85="1"] #quotation-lines {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
}
#quotation-form[data-quote-v85="1"] .quote-product-search-wrap {
    overflow: visible !important;
}
#quotation-form[data-quote-v85="1"] .quote-product-results {
    z-index: 9999 !important;
}
@media (max-width: 1200px) {
    #quotation-form[data-quote-v85="1"].quotation-form-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    #quotation-form[data-quote-v85="1"].quotation-form-wide {
        grid-template-columns: 1fr !important;
    }
    #modal-root .modal:has(#quotation-form[data-quote-v85="1"]) {
        min-width: 98vw !important;
    }
}


/* ARTEES_V87_DIRECT_DEPLOY_CLIENT_CONTACT_QUOTES */
#modal-root .modal.wide:has(#quotation-form),
#modal-root .modal:has(#quotation-form[data-quote-v87="1"]) {
    width: 98vw !important;
    max-width: 1560px !important;
    min-width: min(1180px, 98vw) !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v87="1"]) .modal-body {
    max-height: calc(100vh - 190px) !important;
    overflow: auto !important;
}
#quotation-form[data-quote-v87="1"].quotation-form-wide {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
}
#quotation-form[data-quote-v87="1"] .field.full,
#quotation-form[data-quote-v87="1"] .quotation-detail-area {
    grid-column: 1 / -1 !important;
}
#quotation-form[data-quote-v87="1"] .quote-line {
    display: grid !important;
    grid-template-columns: minmax(340px, 1.6fr) minmax(300px, 1.4fr) 105px 125px 125px 85px 54px !important;
    gap: 8px !important;
    align-items: center !important;
}
#quotation-form[data-quote-v87="1"] .quote-line-body {
    min-width: 1160px !important;
}
#quotation-form[data-quote-v87="1"] #quotation-lines {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-picker {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-search-wrap {
    position: relative !important;
    overflow: visible !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-results {
    position: absolute !important;
    z-index: 99999 !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 260px !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #d6e0ef !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px rgba(15,23,42,.18) !important;
    padding: 6px !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-result {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-result:hover {
    background: #eef4ff !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-result strong,
#quotation-form[data-quote-v87="1"] .quote-product-result span {
    display: block !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-result span,
#quotation-form[data-quote-v87="1"] .quote-product-result-empty {
    color: #667085 !important;
    font-size: 12px !important;
}
#quotation-form[data-quote-v87="1"] .quote-product-result-empty {
    padding: 10px !important;
}
@media (max-width: 1200px) {
    #quotation-form[data-quote-v87="1"].quotation-form-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    #quotation-form[data-quote-v87="1"].quotation-form-wide {
        grid-template-columns: 1fr !important;
    }
    #modal-root .modal:has(#quotation-form[data-quote-v87="1"]) {
        min-width: 98vw !important;
    }
}


/* ARTEES_V88_QUOTE_FOOTER_SEARCH_FIX */
#modal-root {
    align-items: center !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v88="1"]),
#modal-root .modal.wide:has(#quotation-form) {
    width: 98vw !important;
    max-width: 1560px !important;
    height: min(94vh, 980px) !important;
    max-height: 94vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v88="1"]) .modal-head,
#modal-root .modal.wide:has(#quotation-form) .modal-head {
    flex: 0 0 auto !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v88="1"]) .modal-body,
#modal-root .modal.wide:has(#quotation-form) .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-bottom: 18px !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v88="1"]) .modal-foot,
#modal-root .modal.wide:has(#quotation-form) .modal-foot {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100000 !important;
    background: #fff !important;
    border-top: 1px solid #e4e7ec !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, .08) !important;
    padding: 12px 18px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
#quotation-form[data-quote-v88="1"].quotation-form-wide {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
}
#quotation-form[data-quote-v88="1"] .field.full,
#quotation-form[data-quote-v88="1"] .quotation-detail-area {
    grid-column: 1 / -1 !important;
}
#quotation-form[data-quote-v88="1"] .quote-line {
    display: grid !important;
    grid-template-columns: minmax(400px, 1.8fr) minmax(320px, 1.45fr) 95px 120px 120px 78px 54px !important;
    gap: 8px !important;
    align-items: start !important;
}
#quotation-form[data-quote-v88="1"] .quote-line-body {
    min-width: 1250px !important;
}
#quotation-form[data-quote-v88="1"] #quotation-lines {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-picker {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-results {
    position: absolute !important;
    z-index: 100001 !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 340px !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #d6e0ef !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.22) !important;
    padding: 6px !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-search-wrap {
    position: relative !important;
    overflow: visible !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-result {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-result:hover,
#quotation-form[data-quote-v88="1"] .quote-product-result:focus {
    background: #eef4ff !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-result strong,
#quotation-form[data-quote-v88="1"] .quote-product-result span {
    display: block !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-result span,
#quotation-form[data-quote-v88="1"] .quote-product-result-empty {
    color: #667085 !important;
    font-size: 12px !important;
}
#quotation-form[data-quote-v88="1"] .quote-product-result-empty {
    padding: 10px !important;
}
@media (max-width: 1200px) {
    #quotation-form[data-quote-v88="1"].quotation-form-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    #modal-root .modal:has(#quotation-form[data-quote-v88="1"]) {
        width: 99vw !important;
        max-height: 96vh !important;
    }
    #quotation-form[data-quote-v88="1"].quotation-form-wide {
        grid-template-columns: 1fr !important;
    }
}


/* ARTEES_V89_QUOTE_LIVE_PRODUCT_SEARCH */
#modal-root .modal:has(#quotation-form[data-quote-v89="1"]),
#modal-root .modal.wide:has(#quotation-form) {
    width: 98vw !important;
    max-width: 1560px !important;
    height: min(94vh, 980px) !important;
    max-height: 94vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v89="1"]) .modal-body,
#modal-root .modal.wide:has(#quotation-form) .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-bottom: 18px !important;
}
#modal-root .modal:has(#quotation-form[data-quote-v89="1"]) .modal-foot,
#modal-root .modal.wide:has(#quotation-form) .modal-foot {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100000 !important;
    background: #fff !important;
    border-top: 1px solid #e4e7ec !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, .08) !important;
    padding: 12px 18px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
#quotation-form[data-quote-v89="1"].quotation-form-wide {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
}
#quotation-form[data-quote-v89="1"] .field.full,
#quotation-form[data-quote-v89="1"] .quotation-detail-area {
    grid-column: 1 / -1 !important;
}
#quotation-form[data-quote-v89="1"] .quote-line {
    display: grid !important;
    grid-template-columns: minmax(430px, 1.9fr) minmax(320px, 1.35fr) 95px 120px 120px 78px 54px !important;
    gap: 8px !important;
    align-items: start !important;
}
#quotation-form[data-quote-v89="1"] .quote-line-body {
    min-width: 1290px !important;
}
#quotation-form[data-quote-v89="1"] #quotation-lines {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-picker {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-search-wrap {
    position: relative !important;
    overflow: visible !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-results {
    display: block !important;
    position: static !important;
    margin-top: 6px !important;
    max-height: 260px !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #d6e0ef !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.12) !important;
    padding: 6px !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-results:empty {
    display: none !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-result {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-result:hover,
#quotation-form[data-quote-v89="1"] .quote-product-result:focus {
    background: #eef4ff !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-result strong,
#quotation-form[data-quote-v89="1"] .quote-product-result span {
    display: block !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-result span,
#quotation-form[data-quote-v89="1"] .quote-product-result-empty {
    color: #667085 !important;
    font-size: 12px !important;
}
#quotation-form[data-quote-v89="1"] .quote-product-result-empty {
    padding: 10px !important;
}
@media (max-width: 1200px) {
    #quotation-form[data-quote-v89="1"].quotation-form-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    #modal-root .modal:has(#quotation-form[data-quote-v89="1"]) {
        width: 99vw !important;
        max-height: 96vh !important;
    }
    #quotation-form[data-quote-v89="1"].quotation-form-wide {
        grid-template-columns: 1fr !important;
    }
}

/* ARTEES_V90_QUOTE_SAVE_CONTACT_BACKEND_FIX */

/* ARTEES_V91_IDLE_LOGOUT */

/* ARTEES_V92_CASH_SALE_SUMMARY_MODALS */

/* ARTEES_V93_CASH_SALE_SUMMARY_FIX */
.action-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.cash-summary-modal .table-wrap{max-height:360px;overflow:auto}

/* ARTEES_V94_SALES_DATE_RANGE_FILTER */
.sales-filter-toolbar {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sales-filter-toolbar .search-field {
    min-width: 300px;
}
.date-range-filter {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.date-range-filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.date-range-filter input {
    width: 170px;
}
@media (max-width: 780px) {
    .sales-filter-toolbar .search-field,
    .date-range-filter,
    .date-range-filter label,
    .date-range-filter input {
        width: 100%;
    }
}

/* ARTEES_V95_POS_PAYMENT_BLOCKER_FIX */