@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap");

:root {
    --brand-blue-900: #0d3f68;
    --brand-blue-800: #11517f;
    --brand-blue-700: #17669d;
    --brand-blue-600: #1d79b7;
    --brand-blue-100: #e7f3fb;
    --brand-blue-50: #f3f9fd;
    --brand-green-700: #1c9a42;
    --brand-green-600: #2eb34f;
    --brand-green-500: #49c35e;
    --brand-green-100: #e8f8eb;
    --brand-green-50: #f4fcf5;
    --ink-950: #102638;
    --ink-900: #183247;
    --ink-800: #29475d;
    --ink-700: #425e72;
    --ink-600: #62798b;
    --ink-500: #7e91a0;
    --ink-400: #9eacb7;
    --surface: #ffffff;
    --surface-soft: #f7fafc;
    --canvas: #f1f6f9;
    --line: #dce6ec;
    --line-strong: #cbd9e2;
    --danger-700: #c93645;
    --danger-600: #dc4454;
    --danger-100: #fdecee;
    --warning-700: #b66a11;
    --warning-100: #fff3dd;
    --shadow-xs: 0 1px 2px rgba(18, 54, 77, 0.04);
    --shadow-sm: 0 8px 24px rgba(18, 54, 77, 0.06);
    --shadow-md: 0 18px 48px rgba(18, 54, 77, 0.11);
    --shadow-lg: 0 28px 80px rgba(12, 42, 63, 0.2);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --sidebar-width: 276px;
    --topbar-height: 82px;
    --transition: 180ms ease;
}

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

html {
    min-width: 320px;
    background: var(--canvas);
    scroll-behavior: smooth;
}

body,
input,
button,
textarea,
select {
    font-family: "Prompt", "Leelawadee UI", Tahoma, Arial, sans-serif;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 88% 0%, rgba(46, 179, 79, 0.07), transparent 26rem),
        radial-gradient(circle at 14% 12%, rgba(29, 121, 183, 0.08), transparent 30rem),
        var(--canvas);
    color: var(--ink-900);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modal-open,
body.sidebar-open {
    overflow: hidden;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

button {
    border: 0;
}

img,
svg {
    display: block;
}

.icon,
.icon-button svg,
.nav-icon svg,
.stat-icon svg,
.section-icon svg,
.input-icon svg,
.button-icon svg,
.login-feature-icon svg,
.empty-icon svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* App shell */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 36px rgba(19, 55, 78, 0.04);
    backdrop-filter: blur(18px);
}

.sidebar-brand {
    min-height: var(--topbar-height);
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    width: 174px;
    height: 50px;
    overflow: hidden;
    text-decoration: none;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.sidebar-context {
    margin: 18px 18px 8px;
    min-height: 40px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
    border: 1px solid #d8ebf7;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.context-dot,
.system-status span,
.staff-status {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand-green-600);
    box-shadow: 0 0 0 4px rgba(46, 179, 79, 0.12);
}

.sidebar-nav {
    flex: 1;
    padding: 14px 14px 22px;
    overflow-y: auto;
}

.nav-label {
    padding: 0 12px 10px;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    min-height: 64px;
    margin-bottom: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-600);
    border: 1px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border var(--transition), transform var(--transition);
}

.nav-item:hover {
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
    transform: translateX(2px);
}

.nav-item.active {
    color: var(--brand-blue-900);
    background: linear-gradient(110deg, #e7f3fb 0%, #f4fbf5 100%);
    border-color: #cfe5f1;
    box-shadow: inset 3px 0 0 var(--brand-blue-600);
}

.nav-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--brand-blue-700);
    background: var(--surface);
    border: 1px solid #d8e7ef;
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
}

.nav-item.active .nav-icon {
    color: #fff;
    background: var(--brand-blue-700);
    border-color: var(--brand-blue-700);
}

.nav-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nav-copy strong {
    color: currentColor;
    font-size: 14px;
    font-weight: 750;
}

.nav-copy small {
    margin-top: 1px;
    color: var(--ink-500);
    font-size: 11px;
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid var(--line);
}

.staff-card {
    padding: 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.staff-avatar,
.topbar-avatar {
    display: grid;
    place-items: center;
    color: var(--brand-blue-700);
    background: var(--brand-blue-100);
    border-radius: 11px;
}

.staff-avatar {
    width: 38px;
    height: 38px;
}

.staff-avatar svg,
.topbar-avatar svg {
    width: 18px;
    height: 18px;
}

.staff-copy,
.topbar-user > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.staff-copy span,
.topbar-user span {
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.staff-copy strong,
.topbar-user strong {
    overflow: hidden;
    color: var(--ink-900);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-status {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(46, 179, 79, 0.12);
}

.logout-link {
    min-height: 42px;
    margin-top: 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--danger-600);
    border-radius: 11px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}

.logout-link:hover {
    color: var(--danger-700);
    background: var(--danger-100);
}

.logout-link svg {
    width: 18px;
    height: 18px;
}

.sidebar-close,
.mobile-menu-button {
    display: none !important;
}

.sidebar-backdrop {
    display: none;
}

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--topbar-height);
    padding: 12px clamp(20px, 3vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: rgba(247, 250, 252, 0.9);
    border-bottom: 1px solid rgba(203, 217, 226, 0.85);
    backdrop-filter: blur(18px);
}

.topbar-left,
.topbar-right,
.topbar-user {
    display: flex;
    align-items: center;
}

.topbar-left {
    min-width: 0;
    gap: 12px;
}

.topbar-heading {
    min-width: 0;
}

.topbar-heading h1 {
    color: var(--ink-950);
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.topbar-heading p {
    margin-top: 2px;
    color: var(--ink-600);
    font-size: 12px;
}

.topbar-right {
    gap: 18px;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 700;
}

.system-status span {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(46, 179, 79, 0.12);
}

.topbar-user {
    padding-left: 18px;
    gap: 10px;
    border-left: 1px solid var(--line-strong);
}

.topbar-avatar {
    width: 38px;
    height: 38px;
}

.content-body {
    width: 100%;
    max-width: 1660px;
    margin: 0 auto;
    padding: 32px clamp(20px, 3vw, 42px) 54px;
}

.page-intro {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.page-intro-copy {
    max-width: 700px;
}

.eyebrow {
    margin-bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-blue-700);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-blue-600), var(--brand-green-600));
    border-radius: 999px;
}

.page-intro h2 {
    color: var(--ink-950);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.25;
}

.page-intro p {
    margin-top: 7px;
    color: var(--ink-600);
    font-size: 13px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.icon-button,
.action-button {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    font-weight: 780;
    line-height: 1;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border var(--transition), color var(--transition);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.action-button:hover {
    transform: translateY(-1px);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.icon-button:focus-visible,
.action-button:focus-visible,
.custom-select-trigger:focus-visible,
.input-control:focus-visible {
    outline: 3px solid rgba(29, 121, 183, 0.18);
    outline-offset: 2px;
}

.btn-primary {
    color: #fff;
    background: var(--brand-blue-700);
    border-color: var(--brand-blue-700);
    box-shadow: 0 9px 22px rgba(23, 102, 157, 0.18);
}

.btn-primary:hover {
    background: var(--brand-blue-800);
    border-color: var(--brand-blue-800);
    box-shadow: 0 12px 26px rgba(23, 102, 157, 0.24);
}

.btn-secondary {
    color: var(--ink-800);
    background: var(--surface);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
    border-color: #bdd7e6;
}

.btn-danger {
    color: var(--danger-700);
    background: var(--danger-100);
    border-color: #f9d7dc;
}

.btn-danger:hover {
    color: #fff;
    background: var(--danger-600);
    border-color: var(--danger-600);
}

.btn-success {
    color: #fff;
    background: var(--brand-green-600);
    border-color: var(--brand-green-600);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 12px;
}

.icon-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
    color: var(--ink-700);
    background: var(--surface);
    border-color: var(--line);
}

.icon-button:hover {
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
    border-color: #cce0ec;
}

/* Cards and sections */
.surface-card,
.card,
.filter-panel,
.table-card,
.form-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.filter-panel {
    margin-bottom: 24px;
    padding: 18px;
}

.filter-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.filter-title,
.section-title-row,
.card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-title h3,
.section-title-row h3,
.card-heading h3 {
    color: var(--ink-900);
    font-size: 15px;
    font-weight: 820;
}

.section-icon,
.input-icon,
.stat-icon,
.login-feature-icon,
.empty-icon {
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.section-icon {
    width: 36px;
    height: 36px;
    color: var(--brand-blue-700);
    background: var(--brand-blue-100);
}

.filter-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(180px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

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

.stats-grid {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.stat-card {
    position: relative;
    min-height: 156px;
    padding: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition), border var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: #c9dce7;
    box-shadow: var(--shadow-sm);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(29, 121, 183, 0.045);
}

.stat-card.green::after {
    background: rgba(46, 179, 79, 0.05);
}

.stat-card.warning::after {
    background: rgba(182, 106, 17, 0.05);
}

.stat-card.danger::after {
    background: rgba(220, 68, 84, 0.045);
}

.stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stat-label {
    color: var(--ink-600);
    font-size: 12px;
    font-weight: 720;
}

.stat-icon {
    width: 40px;
    height: 40px;
    color: var(--brand-blue-700);
    background: var(--brand-blue-100);
}

.stat-card.green .stat-icon {
    color: var(--brand-green-700);
    background: var(--brand-green-100);
}

.stat-card.warning .stat-icon {
    color: var(--warning-700);
    background: var(--warning-100);
}

.stat-card.danger .stat-icon {
    color: var(--danger-700);
    background: var(--danger-100);
}

.stat-value {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    color: var(--ink-950);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.stat-value.primary {
    color: var(--brand-blue-800);
}

.stat-value.success {
    color: var(--brand-green-700);
}

.stat-value.danger {
    color: var(--danger-700);
}

.stat-unit {
    margin-left: 5px;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.stat-note {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    color: var(--ink-500);
    font-size: 11px;
}

.section-block {
    margin-top: 28px;
}

.section-header {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.section-title-row p {
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 11px;
}

/* Forms */
.form-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    color: var(--ink-700);
    font-size: 12px;
    font-weight: 750;
}

.form-hint {
    color: var(--ink-500);
    font-size: 10px;
}

.input-shell {
    position: relative;
}

.input-icon {
    position: absolute;
    z-index: 2;
    left: 13px;
    top: 50%;
    width: 20px;
    height: 20px;
    color: var(--ink-500);
    transform: translateY(-50%);
    pointer-events: none;
}

.input-icon svg {
    width: 18px;
    height: 18px;
}

.input-control,
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    box-shadow: inset 0 1px 2px rgba(16, 38, 56, 0.025);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
    outline: 0;
    transition: border var(--transition), box-shadow var(--transition), background var(--transition);
}

.input-shell.has-icon .input-control,
.input-shell.has-icon input {
    padding-left: 42px;
}

.input-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ink-400);
}

.input-control:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
    border-color: #aec6d4;
}

.input-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    background: #fff;
    border-color: var(--brand-blue-600);
    box-shadow: 0 0 0 4px rgba(29, 121, 183, 0.1);
}

.input-control.is-invalid,
input.is-invalid,
select.is-invalid,
.custom-select.is-invalid .custom-select-trigger {
    border-color: var(--danger-600);
    box-shadow: 0 0 0 4px rgba(220, 68, 84, 0.1);
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.custom-select {
    position: relative;
}

.custom-select-trigger {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 0 42px 0 13px;
    display: flex;
    align-items: center;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(16, 38, 56, 0.025);
    font-size: 13px;
    font-weight: 550;
    text-align: left;
    transition: border var(--transition), box-shadow var(--transition), background var(--transition);
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ink-500);
    border-bottom: 2px solid var(--ink-500);
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--transition);
}

.custom-select.open .custom-select-trigger {
    border-color: var(--brand-blue-600);
    box-shadow: 0 0 0 4px rgba(29, 121, 183, 0.1);
}

.custom-select.open .custom-select-trigger::after {
    transform: translateY(-25%) rotate(225deg);
}

.custom-select.disabled .custom-select-trigger {
    color: var(--ink-400);
    background: #f2f5f7;
    border-color: var(--line);
    cursor: not-allowed;
}

.custom-select-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 248px;
    padding: 6px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.custom-select.open .custom-select-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.custom-select-option {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    color: var(--ink-700);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 620;
    text-align: left;
}

.custom-select-option:hover,
.custom-select-option.selected {
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
}

.custom-select-option.selected::after {
    content: "";
    width: 7px;
    height: 4px;
    margin-left: auto;
    border-left: 2px solid var(--brand-green-600);
    border-bottom: 2px solid var(--brand-green-600);
    transform: rotate(-45deg);
}

.datepicker-shell {
    position: relative;
}

.datepicker-shell .input-control {
    padding-right: 44px;
    cursor: pointer;
}

.datepicker-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 5px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--brand-blue-700);
    background: var(--brand-blue-50);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transform: translateY(-50%);
}

.datepicker-toggle svg {
    width: 17px;
    height: 17px;
}

.datepicker-popover {
    position: absolute;
    z-index: 130;
    top: calc(100% + 7px);
    left: 0;
    width: min(310px, calc(100vw - 36px));
    padding: 12px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.datepicker-shell.open .datepicker-popover {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.datepicker-head {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.datepicker-title {
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 800;
}

.datepicker-nav {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--ink-600);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
}

.datepicker-nav svg {
    width: 16px;
    height: 16px;
}

.datepicker-weekdays,
.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.datepicker-weekdays span {
    padding: 5px 0;
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.datepicker-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--ink-700);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.datepicker-day:hover {
    color: var(--brand-blue-800);
    background: var(--brand-blue-50);
}

.datepicker-day.today {
    box-shadow: inset 0 0 0 1px var(--brand-green-600);
}

.datepicker-day.selected {
    color: #fff;
    background: var(--brand-blue-700);
}

.datepicker-day.muted {
    color: var(--ink-400);
}

.datepicker-footer {
    margin-top: 9px;
    padding-top: 9px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px solid var(--line);
}

.datepicker-footer button {
    min-height: 32px;
    padding: 0 10px;
    color: var(--brand-blue-700);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.datepicker-footer button:hover {
    background: var(--brand-blue-50);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

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

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Tables */
.table-card {
    overflow: hidden;
}

.table-toolbar {
    min-height: 62px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
}

.table-toolbar-copy h3 {
    color: var(--ink-900);
    font-size: 14px;
    font-weight: 820;
}

.table-toolbar-copy p {
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 11px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    background: var(--surface);
}

table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    text-align: left;
}

th,
td {
    padding: 14px 17px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th {
    color: var(--ink-600);
    background: #f7fafc;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: var(--ink-800);
    font-size: 12px;
}

tbody tr {
    transition: background var(--transition);
}

tbody tr:hover {
    background: #fbfdfe;
}

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

.cell-primary {
    color: var(--ink-950);
    font-weight: 780;
}

.cell-code {
    color: var(--brand-blue-800);
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 11px;
    font-weight: 700;
}

.cell-money {
    color: var(--brand-blue-800);
    font-weight: 820;
    white-space: nowrap;
}

.cell-discount {
    color: var(--danger-700);
    font-weight: 750;
    white-space: nowrap;
}

.cell-muted {
    color: var(--ink-500);
}

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

.actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.action-button {
    position: relative;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    color: var(--brand-blue-700);
    background: var(--brand-blue-50);
    border-color: #d6e9f4;
    border-radius: 9px;
}

.action-button.danger {
    color: var(--danger-700);
    background: var(--danger-100);
    border-color: #f8d7dc;
}

.action-button::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 160;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 6px 8px;
    visibility: hidden;
    opacity: 0;
    color: #fff;
    background: var(--ink-950);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 650;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, 4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.action-button:hover::after,
.action-button:focus-visible::after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.badge,
.status-badge,
.category-badge,
.stock-badge {
    min-height: 28px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge svg {
    width: 13px;
    height: 13px;
}

.status-badge.cash {
    color: var(--brand-green-700);
    background: var(--brand-green-100);
}

.status-badge.transfer {
    color: var(--brand-blue-800);
    background: var(--brand-blue-100);
}

.status-badge.credit {
    color: var(--warning-700);
    background: var(--warning-100);
}

.category-badge {
    color: var(--ink-700);
    background: #eef3f6;
    border: 1px solid #e0e8ed;
}

.stock-badge.good {
    color: var(--brand-green-700);
    background: var(--brand-green-100);
}

.stock-badge.low {
    color: var(--danger-700);
    background: var(--danger-100);
}

.empty-state {
    padding: 52px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-500);
    text-align: center;
}

.empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--brand-blue-700);
    background: var(--brand-blue-100);
}

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

.empty-state strong {
    color: var(--ink-800);
    font-size: 13px;
}

.empty-state p {
    margin-top: 3px;
    font-size: 11px;
}

/* Modal and overlays */
.modal-overlay,
.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    background: rgba(11, 36, 53, 0.54);
    backdrop-filter: blur(8px);
    transition: opacity var(--transition), visibility var(--transition);
}

.modal-overlay.is-open,
.dialog-overlay.is-open {
    visibility: visible;
    opacity: 1;
}

.modal-box,
.dialog-box {
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(0.985);
    transition: transform var(--transition);
}

.modal-overlay.is-open .modal-box,
.dialog-overlay.is-open .dialog-box {
    transform: translateY(0) scale(1);
}

.modal-box.modal-wide {
    max-width: 920px;
}

.modal-header {
    min-height: 72px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 11px;
}

.modal-title-wrap .section-icon {
    width: 38px;
    height: 38px;
}

.modal-title-wrap h3 {
    color: var(--ink-950);
    font-size: 16px;
    font-weight: 850;
}

.modal-title-wrap p {
    margin-top: 1px;
    color: var(--ink-500);
    font-size: 10px;
}

.modal-close {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    padding: 14px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    background: #f8fafb;
    border-top: 1px solid var(--line);
}

.order-summary {
    margin-bottom: 18px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(105deg, var(--brand-blue-50), var(--brand-green-50));
    border: 1px solid #d9e9ef;
    border-radius: 14px;
}

.order-summary-copy span {
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 700;
}

.order-summary-copy strong {
    display: block;
    color: var(--ink-900);
    font-size: 13px;
}

.order-summary-total {
    text-align: right;
}

.order-summary-total span {
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 700;
}

.order-summary-total strong {
    display: block;
    color: var(--brand-blue-800);
    font-size: 18px;
    font-weight: 850;
}

.step-panel {
    margin-bottom: 20px;
    padding: 17px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 15px;
}

.step-panel-title {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 820;
}

.step-panel-title span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--brand-blue-700);
    border-radius: 9px;
}

.step-panel-title svg {
    width: 15px;
    height: 15px;
}

.modal-table-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.modal-table-wrap table {
    min-width: 700px;
}

.dialog-box {
    max-width: 420px;
}

.dialog-body {
    padding: 25px;
    text-align: center;
}

.dialog-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    color: var(--danger-700);
    background: var(--danger-100);
    border-radius: 17px;
}

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

.dialog-body h3 {
    color: var(--ink-950);
    font-size: 17px;
    font-weight: 850;
}

.dialog-body p {
    margin-top: 6px;
    color: var(--ink-600);
    font-size: 12px;
}

.dialog-footer {
    padding: 0 20px 20px;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.toast-stack {
    position: fixed;
    z-index: 300;
    right: 20px;
    top: 20px;
    width: min(370px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.toast {
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    color: var(--ink-800);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    animation: toast-in 220ms ease both;
}

.toast.is-leaving {
    animation: toast-out 180ms ease both;
}

.toast-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--brand-green-700);
    background: var(--brand-green-100);
    border-radius: 10px;
}

.toast.error .toast-icon {
    color: var(--danger-700);
    background: var(--danger-100);
}

.toast-icon svg {
    width: 18px;
    height: 18px;
}

.toast-copy strong {
    display: block;
    color: var(--ink-900);
    font-size: 12px;
    font-weight: 820;
}

.toast-copy p {
    margin-top: 1px;
    color: var(--ink-600);
    font-size: 10px;
}

.toast-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--ink-500);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

.toast-close svg {
    width: 15px;
    height: 15px;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(18px); }
}

/* Stock page */
.management-grid {
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.form-card {
    padding: 18px;
}

.form-card-head {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.form-card-head .section-icon {
    flex: 0 0 auto;
}

.form-card-head h3 {
    color: var(--ink-950);
    font-size: 14px;
    font-weight: 830;
}

.form-card-head p {
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 10px;
}

.split-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Login */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 16% 20%, rgba(46, 179, 79, 0.14), transparent 24rem),
        radial-gradient(circle at 88% 78%, rgba(29, 121, 183, 0.18), transparent 28rem),
        #edf4f7;
}

.login-shell {
    width: min(1040px, 100%);
    min-height: 610px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    box-shadow: 0 35px 90px rgba(14, 47, 69, 0.16);
}

.login-visual {
    position: relative;
    padding: 44px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-blue-900) 0%, var(--brand-blue-700) 61%, #188d65 140%);
}

.login-visual::before,
.login-visual::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.login-visual::before {
    right: -105px;
    top: -130px;
    width: 340px;
    height: 340px;
    border: 70px solid rgba(255, 255, 255, 0.055);
}

.login-visual::after {
    left: -150px;
    bottom: -180px;
    width: 390px;
    height: 390px;
    background: rgba(46, 179, 79, 0.14);
}

.login-brand {
    position: relative;
    z-index: 1;
    width: 195px;
    height: 66px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(7, 35, 54, 0.16);
}

.login-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-visual-copy {
    position: relative;
    z-index: 1;
    max-width: 430px;
}

.login-kicker {
    margin-bottom: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cce9f7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-kicker span {
    width: 24px;
    height: 2px;
    background: var(--brand-green-500);
    border-radius: 999px;
}

.login-visual h1 {
    font-size: clamp(31px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1.16;
}

.login-visual p {
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.75;
}

.login-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.login-feature {
    min-height: 86px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.login-feature-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.login-feature-icon svg {
    width: 15px;
    height: 15px;
}

.login-feature strong {
    display: block;
    font-size: 11px;
    font-weight: 780;
}

.login-feature span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 9px;
}

.login-panel {
    padding: clamp(32px, 5vw, 58px);
    display: flex;
    align-items: center;
}

.login-form-wrap {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.login-form-head {
    margin-bottom: 26px;
}

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

.login-form-head h2 {
    color: var(--ink-950);
    font-size: 27px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.login-form-head p {
    margin-top: 6px;
    color: var(--ink-600);
    font-size: 12px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 6px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--ink-500);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover {
    color: var(--brand-blue-700);
    background: var(--brand-blue-50);
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}

.password-input {
    padding-right: 44px !important;
}

.alert-box {
    padding: 12px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--danger-700);
    background: var(--danger-100);
    border: 1px solid #f8d4da;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 650;
}

.alert-box svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.login-security {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ink-500);
    font-size: 10px;
}

.login-security svg {
    width: 14px;
    height: 14px;
    color: var(--brand-green-700);
}

/* Responsive */
@media (max-width: 1180px) {
    .filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

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

    .management-grid .form-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    :root {
        --sidebar-width: 272px;
    }

    .sidebar {
        transform: translateX(-102%);
        transition: transform 220ms ease;
        box-shadow: 24px 0 64px rgba(8, 34, 52, 0.18);
    }

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

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(11, 36, 53, 0.46);
        backdrop-filter: blur(3px);
        transition: opacity var(--transition), visibility var(--transition);
    }

    body.sidebar-open .sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }

    .sidebar-close,
    .mobile-menu-button {
        display: inline-flex !important;
    }

    .main-layout {
        margin-left: 0;
    }

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

    .login-shell {
        grid-template-columns: 0.95fr 1.05fr;
    }

    .login-visual {
        padding: 34px;
    }

    .login-features {
        grid-template-columns: 1fr;
    }

    .login-feature {
        min-height: 58px;
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: center;
    }

    .login-feature-icon {
        grid-row: 1 / 3;
        margin-bottom: 0;
    }
}

@media (max-width: 760px) {
    .topbar {
        min-height: 72px;
        padding: 10px 16px;
    }

    .topbar-heading p,
    .system-status,
    .topbar-user > div:last-child {
        display: none;
    }

    .topbar-right {
        gap: 0;
    }

    .topbar-user {
        padding-left: 0;
        border-left: 0;
    }

    .content-body {
        padding: 22px 16px 42px;
    }

    .page-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn,
    .page-actions .btn-primary,
    .page-actions .btn-secondary {
        flex: 1;
    }

    .filter-grid,
    .stats-grid,
    .management-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .management-grid .form-card:last-child,
    .form-grid .full,
    .filter-actions {
        grid-column: auto;
    }

    .filter-actions {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .filter-actions > * {
        flex: 1;
    }

    .stat-card {
        min-height: 138px;
    }

    .section-header,
    .table-toolbar,
    .order-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-summary-total {
        text-align: left;
    }

    .modal-overlay,
    .dialog-overlay {
        padding: 10px;
        align-items: flex-end;
    }

    .modal-box,
    .dialog-box {
        max-height: calc(100vh - 20px);
        border-radius: 21px 21px 14px 14px;
    }

    .modal-footer,
    .dialog-footer {
        flex-wrap: wrap;
    }

    .modal-footer > *,
    .dialog-footer > * {
        flex: 1;
    }

    .login-page {
        padding: 14px;
    }

    .login-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: calc(100vh - 28px);
        padding: 28px 22px;
    }

    .login-form-head .login-mobile-logo {
        width: 180px;
        height: 62px;
        margin-bottom: 25px;
        padding: 7px 10px;
        display: flex;
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 13px;
    }

    .login-mobile-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .page-intro h2 {
        font-size: 23px;
    }

    .page-actions {
        flex-direction: column;
    }

    .page-actions > * {
        width: 100%;
    }

    .filter-actions {
        flex-direction: column;
    }

    .split-fields {
        grid-template-columns: 1fr;
    }

    .toast-stack {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}

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

button:disabled,
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* Product catalog and realtime inventory */
.is-hidden,
[hidden] {
    display: none !important;
}

.compact-intro {
    margin-bottom: 22px;
}

.compact-stats {
    margin-bottom: 22px;
}

.compact-stats .stat-card {
    min-height: 140px;
}

.filter-title > div p,
.section-title-row > div p {
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 10px;
}

.live-filter-panel {
    position: relative;
}

.live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--brand-green-700);
    background: var(--brand-green-50);
    border: 1px solid #cfecd5;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.live-status i {
    width: 7px;
    height: 7px;
    background: var(--brand-green-600);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(46, 179, 79, 0.12);
}

.stock-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(170px, 1fr));
    gap: 13px;
    align-items: end;
}

.active-filter-bar {
    min-height: 38px;
    margin-top: 14px;
    padding-top: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--ink-500);
    border-top: 1px solid var(--line);
    font-size: 11px;
    font-weight: 650;
}

.clear-filter-button {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    opacity: 0.55;
    transition: color var(--transition), background var(--transition), border var(--transition), opacity var(--transition);
}

.clear-filter-button.is-active {
    color: var(--brand-blue-700);
    background: var(--brand-blue-50);
    border-color: #d2e5f0;
    opacity: 1;
}

.clear-filter-button svg {
    width: 15px;
    height: 15px;
}

.inventory-table-card {
    min-height: 340px;
}

.inventory-value-badge b {
    color: var(--brand-blue-800);
}

.inventory-empty {
    padding: 64px 20px;
}

.stock-badge.empty {
    color: var(--danger-700);
    background: var(--danger-100);
    border-color: #f7cfd4;
}

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(330px, 0.78fr) minmax(560px, 1.22fr);
    gap: 18px;
    align-items: start;
}

.catalog-panel {
    padding: 18px;
    overflow: visible;
}

.catalog-panel-head {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.inline-create-form {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.type-create-form {
    grid-template-columns: minmax(175px, 0.78fr) minmax(210px, 1.2fr) auto;
}

.compact-field {
    gap: 6px;
}

.align-end {
    align-self: end;
}

.catalog-search-row {
    margin: 0 -18px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--surface-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.type-filter-row {
    grid-template-columns: minmax(210px, 1fr) minmax(170px, 0.7fr) auto;
}

.live-search-shell .input-control {
    min-height: 42px;
}

.type-filter-select .custom-select-trigger,
.type-filter-select select {
    min-height: 42px;
}

.live-result-count {
    white-space: nowrap;
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 700;
}

.catalog-list {
    max-height: 540px;
    margin: 0 -18px -18px;
    overflow-y: auto;
}

.catalog-item {
    min-height: 76px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    transition: background var(--transition);
}

.catalog-item:last-of-type {
    border-bottom: 0;
}

.catalog-item:hover {
    background: var(--brand-blue-50);
}

.catalog-item-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.catalog-item-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--brand-blue-700);
    background: var(--brand-blue-100);
    border-radius: 11px;
}

.catalog-item-icon svg {
    width: 18px;
    height: 18px;
}

.catalog-item-copy {
    min-width: 0;
}

.catalog-item-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-item-copy span {
    display: block;
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 10px;
}

.catalog-item-copy b {
    color: var(--ink-700);
    font-weight: 750;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.action-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: var(--ink-600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border var(--transition), transform var(--transition);
}

.action-icon:hover {
    color: var(--brand-blue-700);
    background: var(--brand-blue-50);
    border-color: #c8dfea;
    transform: translateY(-1px);
}

.action-icon.danger:hover {
    color: var(--danger-700);
    background: var(--danger-100);
    border-color: #f2cbd0;
}

.action-icon svg {
    width: 16px;
    height: 16px;
}

.catalog-table-wrap {
    margin: 0 -18px -18px;
    overflow-x: auto;
}

.catalog-table {
    min-width: 620px;
}

.catalog-table .cell-actions {
    width: 94px;
    text-align: right;
}

.count-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--ink-500);
    font-size: 10px;
}

.count-badge b {
    color: var(--ink-800);
    font-size: 12px;
}

.catalog-empty {
    min-height: 190px;
    padding: 38px 18px;
}

.btn-primary.is-loading,
.btn-secondary.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-primary.is-loading::after,
.btn-secondary.is-loading::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin 600ms linear infinite;
}

.btn-primary.is-loading::after {
    color: #fff;
}

.btn-secondary.is-loading::after {
    color: var(--brand-blue-700);
}

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

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

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

    .catalog-list {
        max-height: 420px;
    }
}

@media (max-width: 760px) {
    .stock-filter-grid,
    .inline-create-form,
    .type-create-form,
    .type-filter-row {
        grid-template-columns: 1fr;
    }

    .inline-create-form .btn-primary,
    .type-create-form .btn-primary {
        width: 100%;
    }

    .catalog-search-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .type-filter-row .type-filter-select {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .active-filter-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-panel {
        padding: 15px;
    }

    .catalog-search-row,
    .catalog-list,
    .catalog-table-wrap {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* Delivery-ready modules */
.nav-label-spaced { margin-top: 18px; }
.staff-card-link { color: inherit; text-decoration: none; transition: border-color var(--transition), background var(--transition); }
.staff-card-link:hover { background: var(--brand-blue-50); border-color: #cfe5f1; }
.toolbar-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 12px; }
.cell-subtext { display: block; margin-top: 3px; color: var(--ink-500); font-size: 11px; }
.modal-small { width: min(520px, calc(100vw - 28px)); }
.modal-wide { width: min(1120px, calc(100vw - 28px)); }
.status-badge.active { color: var(--brand-green-700); background: var(--brand-green-100); border-color: #ccefd3; }
.status-badge.cancelled { color: var(--danger-700); background: var(--danger-100); border-color: #f7cfd5; }
.stock-badge.inactive { color: var(--ink-600); background: #edf2f5; border-color: #d9e2e8; }
.order-filter-grid { grid-template-columns: minmax(250px, 1.6fr) repeat(3, minmax(145px, .65fr)) auto; }
.order-item-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 22px; }
.order-add-item { min-height: 46px; white-space: nowrap; }
.cancelled-note { margin-top: 18px; padding: 16px; color: var(--danger-700); background: var(--danger-100); border: 1px solid #f5cbd2; border-radius: var(--radius-md); }
.cancelled-note strong { display: block; margin-bottom: 3px; }
.cancelled-note p { color: #8e3d49; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.settings-card { padding: 24px; }
.settings-card .section-title-row { margin-bottom: 22px; }
.settings-card form { margin-top: 18px; }
.handoff-checklist { display: grid; gap: 12px; margin: 20px 0 24px; }
.handoff-checklist > div { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-700); }
.handoff-checklist svg { width: 18px; min-width: 18px; color: var(--brand-green-700); margin-top: 2px; }
.audit-json { display: block; max-width: 420px; max-height: 72px; overflow: auto; padding: 7px 9px; color: var(--ink-700); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.alert-box.success { color: var(--brand-green-700); background: var(--brand-green-50); border-color: #caebd1; }
textarea.input-control { min-height: 96px; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
.is-hidden { display: none !important; }

@media (max-width: 1200px) {
    .order-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .order-add-item { width: 100%; }
}

@media (max-width: 900px) {
    .settings-grid { grid-template-columns: 1fr; }
    .order-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-filter-grid .search-field { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .toolbar-meta { width: 100%; justify-content: flex-start; }
    .order-filter-grid, .order-item-grid { grid-template-columns: 1fr; }
    .order-filter-grid .search-field { grid-column: auto; }
    .settings-card { padding: 18px; }
    .modal-small, .modal-wide { width: calc(100vw - 18px); }
}

.inventory-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(160px, .85fr)) auto;
    gap: 13px;
    align-items: end;
}

.btn-icon-label {
    min-height: 46px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-600);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    opacity: .7;
    transition: color var(--transition), border-color var(--transition), background var(--transition), opacity var(--transition);
}
.btn-icon-label.is-active,
.btn-icon-label:hover { color: var(--brand-blue-700); background: var(--brand-blue-50); border-color: #cfe5f1; opacity: 1; }
.btn-icon-label svg { width: 17px; height: 17px; }

@media (max-width: 1180px) {
    .inventory-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-filter-grid .search-field { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .inventory-filter-grid { grid-template-columns: 1fr; }
    .inventory-filter-grid .search-field { grid-column: auto; }
    .btn-icon-label { width: 100%; }
}

.inventory-filter-grid.order-filter-grid {
    grid-template-columns: minmax(250px, 1.6fr) repeat(3, minmax(145px, .65fr)) auto;
}
@media (max-width: 900px) {
    .inventory-filter-grid.order-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-filter-grid.order-filter-grid .search-field { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .inventory-filter-grid.order-filter-grid { grid-template-columns: 1fr; }
    .inventory-filter-grid.order-filter-grid .search-field { grid-column: auto; }
}

/* Order workspace 2026-07 */
.modal-order-create {
    width: min(1460px, calc(100vw - 32px));
    max-width: 1460px;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}

.modal-order-create .modal-header,
.modal-order-create .modal-footer {
    flex: 0 0 auto;
}

.order-create-body {
    position: relative;
    display: grid;
    gap: 18px;
    overflow: auto;
    max-height: calc(100vh - 190px);
    padding: 20px;
    background: #f6f9fc;
}

.order-form-section {
    padding: 20px;
    border: 1px solid var(--border-color, #dfe8ef);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(20, 68, 98, .05);
}

.order-section-heading,
.order-items-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-section-heading h4,
.product-picker-head h4 {
    margin: 0;
    color: #17384d;
    font-size: 17px;
    font-weight: 650;
}

.order-section-heading p,
.product-picker-head p {
    margin: 3px 0 0;
    color: #708597;
    font-size: 12px;
}

.order-items-toolbar {
    justify-content: space-between;
    margin-bottom: 16px;
}

.order-header-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.order-datetime-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid #cfe2ee;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef7fc, #f5fbf8);
}

.order-datetime-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #17669d;
    background: #fff;
    box-shadow: 0 6px 18px rgba(23, 102, 157, .12);
}

.order-datetime-card .icon { width: 21px; height: 21px; }
.order-datetime-card small { display: block; color: #6f8290; font-size: 11px; }
.order-datetime-card strong { display: block; margin-top: 4px; color: #17384d; font-size: 14px; font-weight: 650; }

.payment-option-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payment-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d5e2ea;
    border-radius: 13px;
    color: #536d7d;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .18s ease;
}

.payment-option:hover { border-color: #88b6d1; color: #17669d; transform: translateY(-1px); }
.payment-option.is-active { border-color: #17669d; color: #17669d; background: #eef7fc; box-shadow: 0 0 0 3px rgba(23, 102, 157, .08); }
.payment-option .icon { width: 19px; height: 19px; }

.order-draft-table-wrap {
    overflow: auto;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
}

.order-draft-table { min-width: 1120px; }
.order-draft-table th { white-space: nowrap; }
.order-draft-table td { vertical-align: top; }
.order-draft-table th:nth-child(1) { width: 150px; }
.order-draft-table th:nth-child(2) { width: 210px; }
.order-draft-table th:nth-child(3) { width: 170px; }
.order-draft-table th:nth-child(4),
.order-draft-table th:nth-child(5),
.order-draft-table th:nth-child(6) { width: 130px; }
.order-draft-table th:nth-child(7) { width: 150px; }

.table-input {
    width: 100%;
    min-width: 92px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #d3e0e8;
    border-radius: 10px;
    outline: none;
    color: #17384d;
    background: #fff;
    font: inherit;
    font-size: 13px;
    transition: .18s ease;
    appearance: textfield;
    -moz-appearance: textfield;
}

.table-input::-webkit-outer-spin-button,
.table-input::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.table-input:focus { border-color: #2382b8; box-shadow: 0 0 0 3px rgba(35, 130, 184, .1); }

.draft-stock-use {
    display: block;
    margin-top: 5px;
    color: #6c8595;
    font-size: 10px;
    line-height: 1.35;
}
.draft-stock-use.is-error { color: #c74444; font-weight: 600; }

.order-total-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.order-total-panel > div {
    padding: 15px 17px;
    border: 1px solid #dce7ed;
    border-radius: 14px;
    background: #f9fbfc;
}
.order-total-panel span { display: block; color: #718595; font-size: 11px; }
.order-total-panel strong { display: block; margin-top: 5px; color: #17384d; font-size: 21px; font-weight: 680; }
.order-total-panel .order-total-primary { border-color: #acd9c6; background: #effaf5; }
.order-total-panel .order-total-primary strong { color: #17845c; }
.order-total-panel small { display: block; margin-top: 5px; color: #17845c; font-size: 10px; }

.order-product-picker {
    position: absolute;
    z-index: 8;
    inset: 14px;
    display: none;
    flex-direction: column;
    min-height: 420px;
    padding: 18px;
    border: 1px solid #d3e1e9;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(14, 53, 78, .18);
    backdrop-filter: blur(8px);
}
.order-product-picker.is-open { display: flex; }
.product-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-picker-tools { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.8fr); gap: 14px; align-items: center; margin-top: 16px; }
.product-category-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d7e3e9;
    border-radius: 999px;
    color: #5d7484;
    background: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.category-chip.is-active { border-color: #17669d; color: #17669d; background: #edf7fc; }
.product-picker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 16px; overflow: auto; padding: 2px; }
.product-picker-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 14px;
    border: 1px solid #dbe6ec;
    border-radius: 14px;
    text-align: left;
    color: #17384d;
    background: #fff;
    font: inherit;
    cursor: pointer;
    transition: .18s ease;
}
.product-picker-card:hover { border-color: #6eaacb; box-shadow: 0 10px 24px rgba(23,102,157,.1); transform: translateY(-2px); }
.product-picker-category { color: #17845c; font-size: 10px; font-weight: 650; }
.product-picker-card strong { font-size: 14px; }
.product-picker-card small { color: #718595; font-size: 10px; }
.product-picker-card > div { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; padding-top: 8px; border-top: 1px solid #edf2f5; font-size: 11px; }
.product-picker-card b { color: #17669d; }

.compact-empty { padding: 25px 16px; }
.order-create-footer { border-top: 1px solid #dce6ec; background: #fff; }
.order-detail-note { margin-top: 16px; padding: 14px 16px; border: 1px solid #dfe8ee; border-radius: 13px; background: #f8fafb; }
.order-detail-note span { color: #718595; font-size: 11px; }
.order-detail-note p { margin: 5px 0 0; color: #28485c; }

.fixed-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.fixed-category-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 20px;
    border: 1px solid #dce7ed;
    border-radius: 17px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(19,62,89,.05);
    transition: .18s ease;
}
.fixed-category-card:hover { border-color: #8cb9d0; transform: translateY(-2px); box-shadow: 0 15px 35px rgba(19,62,89,.09); }
.fixed-category-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #17669d; background: #edf7fc; }
.fixed-category-icon .icon { width: 23px; height: 23px; }
.fixed-category-copy > span { color: #17845c; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.fixed-category-copy h3 { margin: 3px 0; color: #17384d; font-size: 17px; }
.fixed-category-copy p { margin: 0; color: #718595; font-size: 11px; }
.fixed-category-meta { text-align: right; }
.fixed-category-meta strong { display: block; color: #17669d; font-size: 22px; }
.fixed-category-meta span,.fixed-category-meta small { display: block; color: #718595; font-size: 10px; }
.catalog-policy { display: flex; align-items: flex-start; gap: 13px; margin-top: 16px; padding: 18px; }
.catalog-policy h3 { margin: 0; color: #17384d; font-size: 15px; }
.catalog-policy p { margin: 5px 0 0; color: #6f8494; font-size: 12px; line-height: 1.7; }
.inventory-filter-grid-simple { grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .7fr) minmax(170px, .65fr) auto; }
.field-hint { display: block; margin-top: 5px; color: #768a99; font-size: 10px; line-height: 1.45; }

@media (max-width: 1180px) {
    .order-header-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .product-picker-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .product-picker-tools { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .modal-order-create { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .order-create-body { max-height: calc(100dvh - 150px); padding: 12px; }
    .order-form-section { padding: 14px; border-radius: 14px; }
    .order-header-grid,.payment-option-grid,.order-total-panel,.fixed-category-grid { grid-template-columns: 1fr; }
    .order-items-toolbar { align-items: flex-start; }
    .order-items-toolbar .btn-secondary { flex: 0 0 auto; }
    .order-product-picker { inset: 7px; padding: 13px; border-radius: 14px; }
    .product-picker-list { grid-template-columns: 1fr; }
    .product-category-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .category-chip { flex: 0 0 auto; }
    .fixed-category-card { grid-template-columns: auto 1fr; }
    .fixed-category-meta { grid-column: 2; text-align: left; }
    .inventory-filter-grid-simple { grid-template-columns: 1fr; }
}

/* Gas sales workflow 2026-07-17 */
.payment-select-field .custom-select { width: 100%; }
.payment-selected-hint {
    display: block;
    margin-top: 6px;
    color: #17845c;
    font-size: 11px;
    font-weight: 600;
}

.order-draft-table .custom-select { min-width: 180px; }
.order-draft-table .custom-select-trigger {
    min-height: 40px;
    padding: 8px 34px 8px 11px;
    border-radius: 10px;
    font-size: 12px;
}
.order-draft-table .custom-select-menu { min-width: 240px; z-index: 25; }
.order-draft-table .custom-select-option { font-size: 12px; line-height: 1.45; }
.table-input[readonly], .table-input:disabled {
    color: #526d7d;
    border-color: #e0e8ed;
    background: #f2f6f8;
    cursor: default;
}
.table-fixed-value {
    min-width: 190px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #dbe6ec;
    border-radius: 10px;
    background: #f7fafb;
}
.table-fixed-value strong { display: block; color: #17384d; font-size: 12px; font-weight: 650; }
.table-fixed-value small { display: block; margin-top: 3px; color: #718595; font-size: 9px; }
.gas-stock-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid #b8dfce;
    border-radius: 999px;
    color: #2f6651;
    background: #effaf5;
    font-size: 11px;
}
.gas-stock-inline strong { color: #17845c; }
.gas-stock-inline.is-warning { border-color: #efb5b5; color: #9d3636; background: #fff2f2; }
.gas-stock-inline.is-warning strong { color: #c74444; }
.gas-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: #28a978; box-shadow: 0 0 0 4px rgba(40,169,120,.12); }
.gas-stock-inline.is-warning .gas-stock-dot { background: #d45151; box-shadow: 0 0 0 4px rgba(212,81,81,.12); }

.order-total-layout { display: flex; justify-content: flex-start; }
.order-total-panel.order-total-panel-compact {
    width: min(100%, 610px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.order-total-panel.order-total-panel-compact > div { padding: 11px 13px; border-radius: 12px; }
.order-total-panel.order-total-panel-compact strong { font-size: 17px; }
.order-total-panel.order-total-panel-compact span { font-size: 10px; }
.order-total-panel.order-total-panel-compact small { min-height: 15px; font-size: 9px; line-height: 1.4; }

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

.gas-inventory-hero {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.5fr);
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid #d9e7ee;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(38,147,194,.13), transparent 30%),
        linear-gradient(135deg, #f7fbfd 0%, #f4fbf8 100%);
    box-shadow: 0 14px 42px rgba(18,67,96,.08);
}
.gas-inventory-hero.is-low { border-color: #ecc4a8; background: linear-gradient(135deg,#fffaf5,#fff7f1); }
.gas-tank-stage { position: relative; display: grid; place-items: center; min-height: 390px; }
.gas-tank-shadow { position: absolute; bottom: 20px; width: 180px; height: 25px; border-radius: 50%; background: rgba(16,55,77,.14); filter: blur(8px); }
.gas-tank {
    position: relative;
    width: 190px;
    height: 310px;
    overflow: hidden;
    border: 8px solid #dce8ee;
    border-radius: 64px 64px 54px 54px;
    background: #f7fbfd;
    box-shadow: inset 0 0 0 3px #fff, 0 20px 45px rgba(15,64,91,.16);
}
.gas-tank::before, .gas-tank::after {
    content: '';
    position: absolute;
    z-index: 7;
    top: 44px;
    width: 15px;
    height: 220px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
}
.gas-tank::before { left: 18px; }
.gas-tank::after { right: 18px; opacity: .5; }
.gas-tank-neck { position: absolute; z-index: 10; top: -8px; left: 50%; width: 70px; height: 40px; border: 7px solid #cbdbe3; border-bottom: 0; border-radius: 13px 13px 0 0; transform: translateX(-50%); background: #edf4f7; }
.gas-tank-valve { position: absolute; z-index: 11; top: 7px; left: 50%; width: 33px; height: 12px; border-radius: 6px; transform: translateX(-50%); background: #7b98a8; box-shadow: 0 -8px 0 -2px #567484; }
.gas-liquid {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0;
    background: linear-gradient(180deg,#40b7d8 0%,#2495bd 44%,#1773a5 100%);
    transition: height .8s cubic-bezier(.2,.8,.2,1);
}
.gas-wave { position: absolute; left: -20%; width: 140%; height: 34px; border-radius: 45%; background: rgba(255,255,255,.28); animation: gasWave 5.5s linear infinite; }
.gas-wave-one { top: -17px; }
.gas-wave-two { top: -12px; opacity: .45; animation-duration: 7.5s; animation-direction: reverse; }
.gas-tank-gloss { position: absolute; z-index: 6; inset: 0; background: linear-gradient(100deg,rgba(255,255,255,.58),transparent 28%,transparent 72%,rgba(255,255,255,.2)); pointer-events: none; }
.gas-tank-reading { position: absolute; z-index: 12; top: 50%; left: 50%; width: 132px; padding: 12px; border: 1px solid rgba(255,255,255,.68); border-radius: 16px; text-align: center; transform: translate(-50%,-50%); color: #17384d; background: rgba(255,255,255,.82); box-shadow: 0 10px 28px rgba(16,65,93,.13); backdrop-filter: blur(8px); }
.gas-tank-reading small, .gas-tank-reading span { display: block; font-size: 10px; }
.gas-tank-reading strong { display: block; margin: 4px 0; font-size: 20px; }
.gas-tank-reading span { color: #17845c; font-weight: 700; }
@keyframes gasWave { from { transform: translateX(-8%) rotate(0); } to { transform: translateX(8%) rotate(360deg); } }

.gas-inventory-copy { min-width: 0; }
.gas-status-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #738897; font-size: 11px; }
.gas-inventory-copy h3 { margin: 18px 0 7px; color: #17384d; font-size: clamp(22px,3vw,34px); }
.gas-inventory-copy > p { max-width: 750px; margin: 0; color: #667f8f; font-size: 13px; line-height: 1.8; }
.gas-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 22px; }
.gas-metric { padding: 15px; border: 1px solid #dce8ee; border-radius: 15px; background: rgba(255,255,255,.78); }
.gas-metric.primary { border-color: #acd9c6; background: #effaf5; }
.gas-metric span, .gas-metric small { display: block; color: #718595; font-size: 10px; }
.gas-metric strong { display: block; margin: 5px 0 2px; color: #17384d; font-size: 24px; }
.gas-metric.primary strong { color: #17845c; }
.gas-stock-progress { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.72); }
.gas-stock-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: #617b8a; font-size: 11px; }
.gas-stock-progress strong { color: #17669d; }
.gas-progress-track { height: 9px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #dce9ef; }
.gas-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2293bd,#27a878); transition: width .8s ease; }
.gas-refill-current { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border: 1px solid #cfe4d9; border-radius: 13px; color: #536f61; background: #f1faf6; }
.gas-refill-current strong { color: #17845c; font-size: 18px; }

@media (max-width: 1180px) {
    .payment-stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .gas-inventory-hero { grid-template-columns: 260px minmax(0,1fr); }
}
@media (max-width: 860px) {
    .gas-inventory-hero { grid-template-columns: 1fr; }
    .gas-tank-stage { min-height: 350px; }
    .gas-status-line { align-items: flex-start; flex-direction: column; }
    .gas-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .payment-stats-grid { grid-template-columns: 1fr; }
    .order-total-panel.order-total-panel-compact { grid-template-columns: 1fr; width: 100%; }
    .gas-inventory-hero { padding: 18px; border-radius: 18px; }
    .gas-metric-grid { grid-template-columns: 1fr; }
    .gas-tank-stage { min-height: 330px; transform: scale(.9); margin: -18px 0; }
}

/* Final compact payment and summary refinements */
.payment-select-field .custom-select-trigger {
    min-height: 46px;
    border-color: #cbdde7;
    background: linear-gradient(180deg, #ffffff, #f8fbfc);
    font-weight: 650;
}
.payment-select-field .custom-select-menu {
    min-width: 100%;
}
.payment-select-field .custom-select-option {
    min-height: 42px;
    padding-inline: 12px;
}
.order-total-panel.order-total-panel-compact {
    width: min(100%, 560px);
}
.order-summary-total small {
    display: block;
    margin-top: 2px;
    color: var(--ink-500);
    font-size: 9px;
    font-weight: 650;
}
#gasTankTotal {
    margin-top: 3px;
    color: #5d7a89;
    font-weight: 600;
}


/* Order modal natural-height layout — 2026-07-17 */
#createOrderModal {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 24px;
}

#createOrderModal .modal-order-create {
    flex: 0 0 auto;
    max-height: none;
    height: auto;
    overflow: visible;
}

#createOrderModal .order-create-body {
    max-height: none;
    overflow: visible;
}

@media (min-width: 1181px) {
    #createOrderModal .order-draft-table-wrap {
        overflow: visible;
    }

    #createOrderModal .order-draft-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }
}

@media (max-width: 760px) {
    #createOrderModal {
        padding: 0;
    }

    #createOrderModal .modal-order-create {
        min-height: 100dvh;
        height: auto;
        max-height: none;
    }

    #createOrderModal .order-create-body {
        max-height: none;
        overflow: visible;
    }
}

/* Multi-tank sales and inventory refinements */
.payment-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inventory-filter-grid.order-filter-grid-date { grid-template-columns: minmax(280px, 1.7fr) minmax(180px, .7fr) minmax(180px, .7fr) auto; }
.order-header-grid.order-header-grid-auto { grid-template-columns: 1.2fr 1fr 1fr 1fr; align-items: end; }
.staff-other-field.is-hidden { display: none !important; }
.muted-value { color: #758895; background: #f5f7f8; }

.order-draft-table.order-draft-table-tanks { min-width: 1320px; }
.order-draft-table.order-draft-table-tanks th:nth-child(1) { width: 155px; }
.order-draft-table.order-draft-table-tanks th:nth-child(2) { width: 205px; }
.order-draft-table.order-draft-table-tanks th:nth-child(3) { width: 245px; }
.order-draft-table.order-draft-table-tanks th:nth-child(4) { width: 145px; }
.order-draft-table.order-draft-table-tanks th:nth-child(5),
.order-draft-table.order-draft-table-tanks th:nth-child(6),
.order-draft-table.order-draft-table-tanks th:nth-child(7) { width: 115px; }
.order-draft-table.order-draft-table-tanks th:nth-child(8) { width: 140px; }
.order-draft-table .tank-select + .custom-select,
.order-draft-table .tank-select { min-width: 225px; }

.gas-tank-overview {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.5fr);
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid #d9e7ee;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 14% 12%, rgba(38,147,194,.13), transparent 30%), linear-gradient(135deg, #f7fbfd 0%, #f4fbf8 100%);
    box-shadow: 0 14px 42px rgba(18,67,96,.08);
}
.gas-tank-carousel { min-width: 0; }
.tank-carousel-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 2px; }
.tank-position { min-width: 150px; text-align: center; }
.tank-position span, .tank-position small { display: block; }
.tank-position span { color: #17384d; font-size: 13px; font-weight: 700; }
.tank-position small { margin-top: 2px; color: #728795; font-size: 10px; }
.tank-nav-button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.gas-tank.is-old .gas-liquid { background: linear-gradient(180deg,#f4d269 0%,#dfa92f 48%,#bd7916 100%); }
.gas-tank.is-current .gas-liquid { background: linear-gradient(180deg,#40b7d8 0%,#2495bd 44%,#1773a5 100%); }
.tank-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 16px; }
.tank-title-line h3 { margin: 6px 0 0; }
.tank-type-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.tank-type-badge.current { color: #17669d; background: #e9f6fc; border: 1px solid #b8deef; }
.tank-type-badge.old { color: #8a6515; background: #fff7df; border: 1px solid #efdca2; }
.tank-type-badge.empty { color: #6f8290; background: #eef2f4; border: 1px solid #dbe3e7; }
.tank-overall-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.tank-overall-summary > div { padding: 12px 14px; border: 1px solid #dce7ed; border-radius: 13px; background: rgba(255,255,255,.7); }
.tank-overall-summary span { display: block; color: #718595; font-size: 10px; }
.tank-overall-summary strong { display: block; margin-top: 4px; color: #17384d; font-size: 15px; }

@media (min-width: 1181px) {
    #createOrderModal .order-draft-table.order-draft-table-tanks { min-width: 1320px; table-layout: fixed; }
    #createOrderModal .order-draft-table-wrap { overflow-x: auto; overflow-y: visible; }
}
@media (max-width: 1180px) {
    .order-header-grid.order-header-grid-auto { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .gas-tank-overview { grid-template-columns: 260px minmax(0,1fr); }
}
@media (max-width: 900px) {
    .inventory-filter-grid.order-filter-grid-date { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .inventory-filter-grid.order-filter-grid-date .search-field { grid-column: 1 / -1; }
    .gas-tank-overview { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .payment-stats-grid,
    .order-header-grid.order-header-grid-auto,
    .inventory-filter-grid.order-filter-grid-date,
    .tank-overall-summary { grid-template-columns: 1fr; }
    .inventory-filter-grid.order-filter-grid-date .search-field { grid-column: auto; }
    .gas-tank-overview { padding: 18px; border-radius: 18px; }
    .tank-title-line { flex-direction: column; }
}

/* Order form layout polish — 2026-07-18 */
#createOrderModal {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px 12px;
}

#createOrderModal .modal-order-create {
    width: min(1680px, calc(100vw - 24px));
    max-width: 1680px;
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: 20px;
}

#createOrderModal .modal-header,
#createOrderModal .modal-footer {
    position: static;
    width: 100%;
}

#createOrderModal .order-create-body {
    display: grid;
    gap: 18px;
    max-height: none;
    overflow: visible;
    padding: 20px;
}

.order-header-grid.order-header-grid-balanced {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 18px;
}

.order-header-grid-balanced > .form-group,
.order-header-grid-balanced > .order-datetime-card {
    min-width: 0;
    margin: 0;
}

.order-header-grid-balanced .order-datetime-card {
    min-height: 76px;
    height: 100%;
}

.order-header-grid-balanced .input-control,
.order-header-grid-balanced .custom-select-trigger {
    min-height: 46px;
}

.order-header-grid-balanced .order-note-field textarea {
    min-height: 76px;
    height: 76px;
    resize: vertical;
}

.responsible-staff-field .staff-other-field {
    margin-top: 9px;
}

.responsible-staff-field .staff-other-field.is-hidden {
    display: none !important;
}

#createOrderModal .order-items-toolbar {
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#createOrderModal .order-items-toolbar .order-section-heading {
    min-width: 0;
    flex: 1 1 420px;
}

#createOrderModal #addOrderRow {
    flex: 0 0 auto;
    min-width: 122px;
    white-space: nowrap;
}

#createOrderModal .order-draft-table-wrap {
    width: 100%;
    overflow: visible !important;
    border: 1px solid #dfe8ee;
    border-radius: 14px;
    background: #fff;
}

#createOrderModal .order-draft-table.order-draft-table-tanks {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

#createOrderModal .order-draft-table .col-category { width: 13%; }
#createOrderModal .order-draft-table .col-product { width: 15%; }
#createOrderModal .order-draft-table .col-tank { width: 18%; }
#createOrderModal .order-draft-table .col-weight { width: 11%; }
#createOrderModal .order-draft-table .col-price { width: 10%; }
#createOrderModal .order-draft-table .col-qty { width: 8%; }
#createOrderModal .order-draft-table .col-discount { width: 10%; }
#createOrderModal .order-draft-table .col-total { width: 11%; }
#createOrderModal .order-draft-table .col-action { width: 4%; }

#createOrderModal .order-draft-table th,
#createOrderModal .order-draft-table td {
    min-width: 0;
    padding: 10px 7px;
    overflow: visible;
}

#createOrderModal .order-draft-table th {
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}

#createOrderModal .order-draft-table td {
    position: relative;
}

#createOrderModal .order-draft-table td:has(.custom-select.open) {
    z-index: 50;
}

#createOrderModal .order-draft-table .custom-select,
#createOrderModal .order-draft-table .tank-select + .custom-select,
#createOrderModal .order-draft-table .tank-select,
#createOrderModal .order-draft-table .table-fixed-value,
#createOrderModal .order-draft-table .table-input {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
}

#createOrderModal .order-draft-table .custom-select-trigger {
    min-width: 0;
    padding-inline: 10px 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#createOrderModal .order-draft-table .custom-select-menu {
    width: max-content;
    min-width: max(100%, 230px);
    max-width: min(360px, calc(100vw - 48px));
    z-index: 180;
}

#createOrderModal .order-draft-table .table-input {
    padding-inline: 9px;
    font-size: 12px;
}

#createOrderModal .order-draft-table .draft-stock-use {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#createOrderModal .order-draft-table .cell-money {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
}

#createOrderModal .draft-action-cell {
    text-align: center;
}

#createOrderModal .draft-action-cell .action-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
}

#createOrderModal .order-create-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px 20px;
}

#createOrderModal .order-create-footer > button {
    min-width: 126px;
}

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

    #createOrderModal .order-draft-table-wrap {
        border: 0;
        background: transparent;
    }

    #createOrderModal .order-draft-table,
    #createOrderModal .order-draft-table tbody,
    #createOrderModal .order-draft-table tr,
    #createOrderModal .order-draft-table td {
        display: block;
        width: 100%;
    }

    #createOrderModal .order-draft-table colgroup,
    #createOrderModal .order-draft-table thead {
        display: none;
    }

    #createOrderModal .order-draft-table tbody {
        display: grid;
        gap: 14px;
    }

    #createOrderModal .order-draft-table tr[data-draft-row] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        padding: 15px;
        border: 1px solid #dfe8ee;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 7px 20px rgba(20, 68, 98, .045);
    }

    #createOrderModal .order-draft-table tr:not([data-draft-row]) {
        border: 1px solid #dfe8ee;
        border-radius: 14px;
        background: #fff;
    }

    #createOrderModal .order-draft-table td {
        padding: 0;
        border: 0;
    }

    #createOrderModal .order-draft-table tr[data-draft-row] td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #687f8e;
        font-size: 10px;
        font-weight: 750;
    }

    #createOrderModal .order-draft-table .draft-action-cell {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    #createOrderModal .order-draft-table .draft-action-cell::before {
        margin-right: auto;
        margin-bottom: 0;
    }

    #createOrderModal .order-draft-table .custom-select-menu {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 760px) {
    #createOrderModal {
        padding: 0;
    }

    #createOrderModal .modal-order-create {
        width: 100%;
        min-height: 100dvh;
        border-radius: 0;
    }

    #createOrderModal .order-create-body {
        padding: 12px;
    }

    .order-header-grid.order-header-grid-balanced {
        grid-template-columns: 1fr;
    }

    #createOrderModal .order-draft-table tr[data-draft-row] {
        grid-template-columns: 1fr;
    }

    #createOrderModal .order-items-toolbar {
        align-items: stretch;
    }

    #createOrderModal #addOrderRow {
        width: 100%;
    }

    #createOrderModal .order-create-footer > button {
        flex: 1 1 140px;
        min-width: 0;
    }
}

#createOrderModal .modal-header {
    align-items: flex-start;
    gap: 14px;
}

#createOrderModal .modal-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

#createOrderModal .modal-title-wrap > div {
    min-width: 0;
}

#createOrderModal .modal-title-wrap p {
    line-height: 1.5;
}

#createOrderModal .modal-close {
    flex: 0 0 38px;
}

/* Sales summary and date card refinements */
.sales-overview-card {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.sales-overview-heading h3 {
    margin: 0;
    color: var(--ink-900);
    font-size: 16px;
    font-weight: 800;
}
.sales-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.sales-overview-grid article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}
.sales-overview-grid span {
    display: block;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 650;
}
.sales-overview-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--ink-900);
    font-size: clamp(16px, 1.7vw, 22px);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.sales-date-stat-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px);
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
    padding: 17px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.sales-date-stat-copy span {
    display: block;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 700;
}
.sales-date-stat-copy strong {
    display: block;
    margin-top: 6px;
    color: var(--brand-blue-700);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 850;
}
.sales-date-picker { margin: 0; }
.sales-history-table { min-width: 1380px; }
.sales-history-table th,
.sales-history-table td { vertical-align: top; }
.sales-history-table td:nth-child(4),
.sales-history-table td:nth-child(5) {
    min-width: 170px;
    white-space: normal;
    line-height: 1.55;
}
.tank-overall-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar .nav-copy { display: flex; align-items: center; min-height: 22px; }
.sidebar .nav-copy strong { line-height: 1.35; }

@media (max-width: 900px) {
    .sales-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-date-stat-card { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 560px) {
    .sales-overview-grid { grid-template-columns: 1fr; }
    .sales-date-stat-copy strong { font-size: 24px; }
}

/* Business overview sales cards — total plus color-separated channels */
.sales-overview-card {
    display: grid;
    gap: 14px;
}

.sales-total-card,
.sales-channel-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
}

.sales-total-card {
    padding: 18px 20px;
    border: 1px solid #b8d8ec;
    background: linear-gradient(135deg, #edf7fd 0%, #f8fcff 100%);
}

.sales-total-card::after,
.sales-channel-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -48px;
    width: 132px;
    height: 132px;
    border-radius: 999px;
    opacity: .6;
    pointer-events: none;
}

.sales-total-card::after {
    background: rgba(29, 121, 183, .12);
}

.sales-total-card span,
.sales-channel-card span {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 12px;
    font-weight: 750;
}

.sales-total-card span {
    color: #27647f;
}

.sales-total-card strong,
.sales-channel-card strong {
    position: relative;
    z-index: 1;
    display: block;
    overflow-wrap: anywhere;
    letter-spacing: -.025em;
}

.sales-total-card strong {
    margin-top: 6px;
    color: #114f75;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 850;
}

.sales-overview-grid {
    margin-top: 0;
}

.sales-channel-card {
    padding: 15px 16px;
    border: 1px solid transparent;
}

.sales-channel-card strong {
    margin-top: 6px;
    font-size: clamp(17px, 1.8vw, 23px);
    font-weight: 820;
}

.sales-channel-card.cash {
    border-color: #b9e4cd;
    background: #effaf5;
}
.sales-channel-card.cash::after { background: rgba(32, 163, 104, .13); }
.sales-channel-card.cash span { color: #31765a; }
.sales-channel-card.cash strong { color: #15734f; }

.sales-channel-card.transfer {
    border-color: #b9d9ee;
    background: #eef7fd;
}
.sales-channel-card.transfer::after { background: rgba(29, 121, 183, .13); }
.sales-channel-card.transfer span { color: #346f94; }
.sales-channel-card.transfer strong { color: #17669d; }

.sales-channel-card.credit {
    border-color: #efd9ac;
    background: #fff8e9;
}
.sales-channel-card.credit::after { background: rgba(182, 106, 17, .12); }
.sales-channel-card.credit span { color: #936421; }
.sales-channel-card.credit strong { color: #a06113; }

.sales-channel-card.discount {
    border-color: #efc5cb;
    background: #fff2f4;
}
.sales-channel-card.discount::after { background: rgba(220, 68, 84, .11); }
.sales-channel-card.discount span { color: #a54e5b; }
.sales-channel-card.discount strong { color: #c43f50; }

/* Sales totals and lot management refinements */
.order-total-panel.order-total-panel-compact {
    width: min(100%, 720px);
    gap: 10px;
}
.order-total-panel.order-total-panel-compact > div {
    padding: 15px 17px;
}
.order-total-panel.order-total-panel-compact span {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}
.order-total-panel.order-total-panel-compact strong {
    margin-top: 7px;
    font-size: 22px;
    line-height: 1.25;
}
.order-total-panel.order-total-panel-compact small,
#paymentTotalHint {
    min-height: 0;
    margin-top: 8px;
    color: #126a4a;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 850;
}
.order-summary {
    flex-wrap: wrap;
    align-items: stretch;
}
.order-summary-copy,
.order-summary-total {
    min-width: 150px;
    flex: 1 1 150px;
    padding: 9px 11px;
    border: 1px solid rgba(194, 218, 229, .85);
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
    text-align: left;
}
.order-summary-total {
    border-color: #b7dfcd;
    background: #effaf5;
}
.order-summary-copy span,
.order-summary-total span {
    font-size: 11px;
}
.order-summary-copy strong {
    margin-top: 4px;
    font-size: 15px;
}
.order-summary-total strong {
    margin-top: 4px;
    font-size: 20px;
}
.sales-history-table {
    min-width: 1220px;
}
.tank-page-actions {
    flex-wrap: wrap;
}
.tank-page-actions .btn-primary,
.tank-page-actions .btn-secondary,
.tank-page-actions .btn-danger {
    min-height: 42px;
}
.confirm-message {
    padding: 15px 16px;
    border: 1px solid #efc7cc;
    border-radius: 14px;
    background: #fff5f6;
}
.confirm-message strong {
    display: block;
    color: #8d2e3b;
    font-size: 16px;
}
.confirm-message p {
    margin: 7px 0 0;
    color: #7c5960;
    font-size: 12px;
    line-height: 1.7;
}
@media (max-width: 760px) {
    .order-total-panel.order-total-panel-compact {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .tank-page-actions {
        width: 100%;
    }
    .tank-page-actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}