@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* EAGS egg wholesale — compact dense admin */
    --ink: #0b3d36;
    --ink-soft: #124f46;
    --teal: #0f5c56;
    --teal-bright: #167a6f;
    --saffron: #e8a317;
    --saffron-deep: #c4890f;
    --saffron-soft: #fff3d6;
    --surface: #fff8eb;
    --surface-2: #f3ead6;
    --card: rgba(255, 252, 246, 0.96);
    --text: #0b3d36;
    --muted: #5a6f6a;
    --border: rgba(11, 61, 54, 0.12);
    --success: #0f5c56;
    --warning: #c4890f;
    --danger: #b91c1c;
    --shadow: 0 6px 18px rgba(11, 61, 54, 0.07);
    --radius: 10px;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", system-ui, sans-serif;
    --font-arabic: "Noto Naskh Arabic", "Manrope", Tahoma, sans-serif;
    /* Standard type scale (readable for FA/PS/EN) */
    --text-xs: 0.8125rem;   /* 13px captions */
    --text-sm: 0.875rem;    /* 14px labels / muted */
    --text-base: 0.9375rem; /* 15px body / tables / inputs */
    --text-md: 1rem;        /* 16px menu / buttons */
    --text-lg: 1.125rem;    /* 18px panel titles */
    --text-xl: 1.4rem;      /* page title */
    --text-stat: 1.35rem;   /* KPI numbers */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --control-h: 36px;
    /* Thermal receipt: 80 mm paper, 72.1 mm printable, 210 mm tall */
    --receipt-paper-width: 80mm;
    --receipt-print-width: 72.1mm;
    --receipt-paper-height: 210mm;
    --receipt-side-margin: 3.95mm;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--text);
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(232, 163, 23, 0.16), transparent 55%),
        radial-gradient(900px 420px at -10% 20%, rgba(15, 92, 86, 0.1), transparent 50%),
        linear-gradient(165deg, #fffaf0 0%, var(--surface) 48%, #eef5f1 100%);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(20, 36, 40, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 36, 40, 0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
    z-index: 0;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* —— Sidebar —— */
.sidebar {
    width: 272px;
    background:
        linear-gradient(165deg, rgba(36, 138, 128, 0.18), transparent 42%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: #f4f7f6;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    position: sticky;
    top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 8px 0 32px rgba(12, 31, 36, 0.18);
    transition: width 0.22s ease, padding 0.22s ease;
    flex-shrink: 0;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 8px 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    animation: rise 0.55s ease both;
    position: relative;
}

.brand-text { min-width: 0; flex: 1; }

.sidebar-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.sidebar-toggle:hover { background: rgba(232, 163, 23, 0.25); }

.sidebar-toggle-icon,
.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    display: block;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.sidebar-toggle-icon::before { top: -5px; }
.sidebar-toggle-icon::after { top: 5px; }

.sidebar-toggle-mobile { display: none; }

.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topbar-back:hover {
    background: rgba(15, 92, 86, 0.08);
    color: var(--ink);
    border-color: rgba(15, 92, 86, 0.22);
}
.topbar-back-icon {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
}
[dir="rtl"] .topbar-back-icon {
    transform: scaleX(-1);
}
.topbar-back-label {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .topbar-back-label {
        display: none;
    }
    .topbar-back {
        padding: 7px 9px;
    }
}

.nav-section { margin-bottom: 4px; }

.nav-subgroup {
    margin-top: 8px;
}

.nav-subgroup:first-child {
    margin-top: 0;
}

.nav-subgroup-label {
    display: block;
    padding: 4px 14px 3px;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(244, 247, 246, 0.42);
    line-height: 1.2;
}

.admin-shell.sidebar-collapsed .nav-subgroup-label {
    display: none;
}

.nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    background: transparent;
    color: rgba(244, 247, 246, 0.72);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 12px 6px;
    cursor: pointer;
    text-align: start;
}

.nav-section-toggle:hover { color: rgba(244, 247, 246, 0.85); }

.nav-section-toggle .chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    opacity: 0.8;
}

.nav-section.is-collapsed .nav-section-toggle .chevron {
    transform: rotate(-45deg);
}

.nav-section-links {
    display: grid;
    gap: 2px;
    overflow: hidden;
    max-height: 520px;
    transition: max-height 0.22s ease, opacity 0.18s ease;
    opacity: 1;
}

.nav-section.is-collapsed .nav-section-links {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar nav a {
    color: rgba(244, 247, 246, 0.88);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: var(--text-md);
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.sidebar nav a .nav-abbr {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateX(2px);
}

.sidebar nav a.active {
    background: linear-gradient(90deg, rgba(36, 138, 128, 0.45), rgba(36, 138, 128, 0.18));
    border-color: rgba(36, 138, 128, 0.35);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--saffron);
}

/* Collapsed rail */
.admin-shell.sidebar-collapsed .sidebar {
    width: 84px;
    padding: 18px 10px;
}

.admin-shell.sidebar-collapsed .brand {
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.admin-shell.sidebar-collapsed .brand-text,
.admin-shell.sidebar-collapsed .nav-label,
.admin-shell.sidebar-collapsed .nav-section-toggle span:first-child {
    display: none;
}

.admin-shell.sidebar-collapsed .nav-section-toggle {
    justify-content: center;
    padding: 8px 0 4px;
}

.admin-shell.sidebar-collapsed .nav-section-toggle .chevron { display: none; }

.admin-shell.sidebar-collapsed .nav-section.is-collapsed .nav-section-links {
    max-height: 520px;
    opacity: 1;
    pointer-events: auto;
}

.admin-shell.sidebar-collapsed .sidebar nav a {
    justify-content: center;
    padding: 10px 8px;
    transform: none;
}

.admin-shell.sidebar-collapsed .sidebar nav a .nav-abbr { display: grid; }

.admin-shell.sidebar-collapsed .sidebar nav a:hover::after,
.admin-shell.sidebar-collapsed .logout-form button:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    z-index: 20;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.12);
}

.admin-shell.sidebar-collapsed .logout-form button {
    display: grid;
    place-items: center;
    padding: 10px;
}

.admin-shell.sidebar-collapsed .logout-form .nav-abbr { display: inline; }
.admin-shell.sidebar-collapsed .logout-form .nav-label { display: none; }
.logout-form .nav-abbr { display: none; }

.brand.centered {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 20px;
    border: 0;
    padding: 0;
    gap: 14px;
}

.brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(232, 163, 23, 0.28);
    background: #fff8eb;
    flex-shrink: 0;
}

.brand.centered .brand-logo {
    width: 88px;
    height: 88px;
    border-radius: 22px;
}

.brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.brand small {
    display: block;
    opacity: 0.72;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar nav {
    display: block;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}

.logout-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }

.logout-form button {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    padding: 11px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.logout-form button:hover {
    background: rgba(185, 28, 28, 0.25);
    border-color: rgba(248, 113, 113, 0.45);
}

/* —— Main —— */
.content {
    flex: 1;
    padding: 28px 32px 40px;
    min-width: 0;
    animation: fade-in 0.45s ease both;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.admin-quick-links {
    margin: 0 0 18px;
    padding: 0;
    position: relative;
    z-index: 40;
}
.admin-quick-links-track {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
.admin-quick-menu {
    position: relative;
    flex: 0 0 auto;
}
.admin-quick-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(11, 61, 54, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-quick-menu-trigger:hover,
.admin-quick-menu.is-open .admin-quick-menu-trigger,
.admin-quick-menu:hover .admin-quick-menu-trigger {
    background: rgba(15, 92, 86, 0.08);
    border-color: rgba(15, 92, 86, 0.28);
    color: var(--teal);
}
.admin-quick-menu-trigger.is-active,
.admin-quick-menu.has-active .admin-quick-menu-trigger {
    background: rgba(15, 92, 86, 0.12);
    border-color: rgba(15, 92, 86, 0.35);
    color: var(--teal);
}
.admin-quick-menu-caret {
    width: 0;
    height: 0;
    border-inline-start: 4px solid transparent;
    border-inline-end: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.65;
    transition: transform 0.15s ease;
}
.admin-quick-menu.is-open .admin-quick-menu-caret,
.admin-quick-menu:hover .admin-quick-menu-caret {
    transform: rotate(180deg);
}
.admin-quick-menu-panel {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 200px;
    max-width: min(280px, 90vw);
    /* Invisible bridge so the pointer can reach the panel without closing */
    padding: 10px 0 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    gap: 0;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.admin-quick-menu-panel::before {
    content: "";
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 10px;
}
.admin-quick-menu-panel-inner {
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(11, 61, 54, 0.14);
}
.admin-quick-menu:hover .admin-quick-menu-panel,
.admin-quick-menu.is-open .admin-quick-menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.admin-quick-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
}
.admin-quick-menu-item:hover {
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
}
.admin-quick-menu-item.is-active {
    background: var(--teal);
    color: #fff;
}
.admin-quick-link-abbr {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 3px;
    border-radius: 999px;
    background: rgba(15, 92, 86, 0.12);
    color: var(--teal);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.admin-quick-menu-item.is-active .admin-quick-link-abbr {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
@media (max-width: 720px) {
    .admin-quick-links-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
}

.topbar h1 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.topbar p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    max-width: 42rem;
}

.user-chip {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.topbar-dropdown {
    position: relative;
    z-index: 20;
}

.topbar-dropdown.is-open {
    z-index: 50;
}

.topbar-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 248, 235, 0.92));
    border: 1px solid rgba(11, 61, 54, 0.1);
    padding: 7px 12px 7px 8px;
    border-radius: 999px;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(11, 61, 54, 0.08);
    backdrop-filter: blur(10px);
    min-height: 44px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.topbar-dropdown-trigger:hover {
    border-color: rgba(15, 92, 86, 0.28);
    box-shadow: 0 10px 26px rgba(11, 61, 54, 0.12);
    transform: translateY(-1px);
}

.topbar-dropdown.is-open .topbar-dropdown-trigger {
    border-color: rgba(15, 92, 86, 0.35);
    box-shadow: 0 0 0 3px rgba(15, 92, 86, 0.1), 0 10px 26px rgba(11, 61, 54, 0.12);
    transform: none;
}

.topbar-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.topbar-icon-lang {
    background: linear-gradient(145deg, rgba(15, 92, 86, 0.14), rgba(232, 163, 23, 0.18));
    color: var(--teal);
}

.topbar-trigger-copy {
    display: grid;
    gap: 0;
    text-align: start;
    line-height: 1.15;
}

.topbar-dropdown-label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topbar-dropdown-trigger strong {
    font-size: 0.9rem;
    font-weight: 750;
}

.topbar-caret {
    width: 8px;
    height: 8px;
    border-inline-end: 1.8px solid var(--muted);
    border-bottom: 1.8px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    transition: transform 0.18s ease;
    opacity: 0.7;
}

.topbar-dropdown.is-open .topbar-caret {
    transform: rotate(225deg) translateY(-1px);
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 196px;
    background: rgba(255, 252, 246, 0.98);
    border: 1px solid rgba(11, 61, 54, 0.1);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(11, 40, 36, 0.16);
    padding: 8px;
    z-index: 60;
    display: none;
    gap: 2px;
    backdrop-filter: blur(12px);
    transform-origin: top;
    animation: topbar-pop 0.16s ease;
}

.topbar-dropdown.is-open .topbar-dropdown-menu {
    display: grid;
}

@keyframes topbar-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.topbar-dropdown-menu a,
.topbar-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: start;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 11px;
    padding: 10px 11px;
    font: inherit;
    font-weight: 650;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.topbar-dropdown-menu a:hover,
.topbar-dropdown-menu button:hover {
    background: rgba(15, 92, 86, 0.08);
}

.topbar-dropdown-menu a.active {
    background: linear-gradient(135deg, rgba(15, 92, 86, 0.12), rgba(232, 163, 23, 0.12));
    color: var(--teal);
}

.lang-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: rgba(11, 61, 54, 0.06);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

.topbar-dropdown-menu a.active .lang-badge {
    background: rgba(15, 92, 86, 0.16);
    color: var(--teal);
}

.lang-check {
    margin-inline-start: auto;
    color: var(--teal);
    font-weight: 800;
}

.topbar-account-trigger {
    padding-inline: 8px 12px;
}

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(145deg, var(--teal) 0%, #1a8a7c 55%, var(--saffron) 140%);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.topbar-avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
}

.topbar-account-text {
    display: grid;
    gap: 1px;
    text-align: start;
    min-width: 0;
}

.topbar-account-text strong {
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.topbar-account-text small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

.topbar-account-menu {
    min-width: 248px;
    padding: 10px;
}

.topbar-account-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid rgba(11, 61, 54, 0.08);
    margin-bottom: 6px;
}

.topbar-account-meta > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.topbar-account-meta strong {
    font-size: 0.95rem;
    line-height: 1.2;
}

.topbar-account-meta span {
    color: var(--muted);
    font-size: 0.76rem;
    word-break: break-all;
}

.topbar-account-meta em {
    font-style: normal;
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 700;
}

.topbar-account-menu form {
    margin: 0;
}

.topbar-logout-btn {
    color: #9f1239 !important;
}

.topbar-logout-btn:hover {
    background: rgba(185, 28, 28, 0.08) !important;
}

.topbar-logout-btn span {
    opacity: 0.8;
}
/* —— Stats & panels —— */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -20px;
    top: -20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 107, 99, 0.14), transparent 70%);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(12, 31, 36, 0.12);
}

.stat-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-stat);
    margin: 8px 0 4px;
    letter-spacing: -0.03em;
}

.stat-label, .stat-card small { color: var(--muted); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card small a { color: var(--teal); font-weight: 700; text-decoration: none; }

.panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.panel {
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.panel h2, .panel-toolbar h2 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.panel-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.panel-toolbar h2 { margin: 0; }

/* —— Tables —— */
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
th {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(26, 107, 99, 0.05); }
td a { color: var(--teal); font-weight: 700; text-decoration: none; }
td a:hover { color: var(--ink); text-decoration: underline; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px !important; }

.back-link { margin: 0 0 16px; }
.back-link a { color: var(--teal); text-decoration: none; font-weight: 700; }
.actions-cell { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(26, 107, 99, 0.12);
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
}
.badge-success { background: #ccfbf1; color: #0f766e; }
.badge-warning { background: var(--saffron-soft); color: var(--warning); }
.badge-danger { background: #fee2e2; color: #b91c1c; }

/* —— Reminders —— */
.reminders-page { display: grid; gap: 16px; }
.reminders-run-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.06), transparent 55%),
        var(--card);
}
.reminders-run-copy h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.reminders-run-copy .muted {
    margin: 0;
    font-size: 0.85rem;
    max-width: 46ch;
}
.reminders-run-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.reminders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
}
.reminder-card {
    padding: 16px;
    margin: 0;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.reminder-card:hover {
    border-color: rgba(15, 92, 86, 0.22);
    box-shadow: 0 10px 28px rgba(11, 61, 54, 0.08);
}
.reminder-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.reminder-card-head h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.15rem;
}
.reminder-active-toggle {
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.02);
}
.reminder-card-grid {
    gap: 12px;
}
.reminder-channels-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--ink-soft);
}
.reminder-channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.reminder-channel-chip {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.02);
    margin: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reminder-channel-chip:has(input:checked) {
    border-color: rgba(15, 92, 86, 0.35);
    background: rgba(22, 122, 111, 0.1);
    color: var(--ink);
    font-weight: 600;
}
.reminder-placeholders {
    margin: 0;
    font-size: 0.78rem;
}
.reminder-card-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 700px) {
    .reminders-grid { grid-template-columns: 1fr; }
    .reminders-run-bar { align-items: stretch; }
    .reminders-run-form { width: 100%; justify-content: space-between; }
}

/* —— App settings —— */
.app-settings-page { display: grid; gap: 10px; }
.app-settings-form { display: grid; gap: 10px; margin: 0; }
.app-settings-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
    gap: 10px;
}
.app-settings-currency {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-inline-start: 4px solid var(--saffron);
    background:
        linear-gradient(135deg, rgba(232, 163, 23, 0.08), transparent 55%),
        var(--card);
}
.app-settings-section-copy h2 {
    margin: 0 0 2px;
    font-size: 0.98rem;
}
.app-settings-section-copy .muted {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 52ch;
}
.app-settings-compact-grid {
    gap: 8px;
}
.app-settings-currency-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}
.app-settings-currency-field {
    flex: 1 1 240px;
    min-width: 0;
    display: grid;
    gap: 4px;
}
.app-settings-currency-field select {
    width: 100%;
    font-weight: 500;
}
.app-settings-preview {
    margin: 0;
    min-width: 140px;
}
.app-settings-system-panel .app-settings-preview {
    align-self: stretch;
}
.app-settings-owner { padding: 12px 14px; }
.app-settings-section-head {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.app-settings-locales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}
.app-settings-locale-card {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    background: rgba(255, 252, 246, 0.7);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.app-settings-locale-card:hover {
    border-color: rgba(15, 92, 86, 0.22);
    box-shadow: 0 10px 28px rgba(11, 61, 54, 0.08);
}
.app-settings-locale-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.app-settings-locale-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.98rem;
}
.app-settings-locale-grid {
    gap: 8px;
}
.app-settings-locale-grid textarea {
    min-height: 86px;
}
.app-settings-hints {
    margin: 10px 0 0;
    padding: 10px 12px 10px 1.3em;
    list-style: disc;
    border-radius: 10px;
    background: rgba(20, 36, 40, 0.03);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.4;
}
.app-settings-hints li + li { margin-top: 4px; }
.app-settings-letterhead {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
}
.app-settings-letterhead-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    max-height: 160px;
}
.app-settings-letterhead-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    object-position: top center;
}
.app-settings-letterhead-file input[type="file"] {
    display: block;
    margin-top: 6px;
    max-width: 100%;
}
.app-settings-letterhead-remove {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
}
.app-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    margin: 0;
}

@media (max-width: 700px) {
    .app-settings-top,
    .app-settings-locales { grid-template-columns: 1fr; }
    .app-settings-currency-row { align-items: stretch; }
    .app-settings-preview { width: 100%; }
}

/* —— Employee detail —— */
.employee-detail {
    display: grid;
    gap: 10px;
}
.employee-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.employee-back {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}
.employee-back:hover {
    text-decoration: underline;
}
.employee-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.employee-detail .panel {
    padding: 12px 14px;
}
.employee-detail .panel h2 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.employee-hero {
    display: grid;
    gap: 10px;
}
.employee-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.employee-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(15, 92, 86, 0.16);
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
}
.employee-meta {
    flex: 1;
    min-width: 0;
}
.employee-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.employee-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.03);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}
.employee-chip-status.is-active {
    border-color: rgba(15, 92, 86, 0.25);
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
}
.employee-chip-status.is-inactive {
    border-color: rgba(120, 80, 40, 0.25);
    background: rgba(120, 80, 40, 0.08);
    color: #8a5a20;
}
.employee-meta-copy {
    display: grid;
    gap: 6px;
}
.employee-meta-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}
.employee-meta-copy strong {
    color: var(--ink);
}
.employee-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.employee-stat {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.8);
}
.employee-stat span {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.employee-stat strong {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.employee-history-panel .badge {
    padding: 1px 7px;
}
@media (max-width: 1100px) {
    .employee-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .employee-detail-head,
    .employee-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .employee-stats {
        grid-template-columns: 1fr;
    }
    .employee-detail-actions {
        width: 100%;
    }
    .employee-detail-actions .toolbar,
    .employee-detail-actions .btn,
    .employee-detail-actions form {
        width: 100%;
    }
    .employee-detail-actions .btn {
        justify-content: center;
    }
    .employee-hero-top {
        align-items: flex-start;
    }
}

/* —— Salary create —— */
.salary-create-page .salary-create-back-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.salary-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 12px;
    align-items: start;
}
.salary-create-form-panel .form-section-head {
    margin-bottom: 12px;
}
.salary-create-form-panel .form-section-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.salary-create-hero {
    margin-bottom: 12px;
}
.employee-stat-highlight {
    border-color: #0b7a68;
    background: #f3fbf9;
}
.employee-stat-highlight strong {
    color: #0b7a68;
}
.salary-create-history-panel h2 {
    margin: 0;
    font-size: 1.05rem;
}
.salary-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.salary-history-toolbar .toolbar {
    margin: 0;
}
@media (max-width: 980px) {
    .salary-create-layout {
        grid-template-columns: 1fr;
    }
}

/* —— Dashboard (compact one-screen) —— */
.dashboard-compact {
    display: grid;
    gap: 8px;
}
.dashboard-compact-top {
    padding: 8px 10px;
    display: grid;
    gap: 6px;
}
.dashboard-compact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}
.dashboard-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 3px 3px 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f7faf9;
    max-width: 100%;
}
.dashboard-date-fields {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.dashboard-date-filter .shamsi-date-wrap {
    width: 132px;
    flex: 0 0 132px;
    min-width: 132px;
}
.dashboard-date-filter input.shamsi-date {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 5px 30px 5px 8px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.8rem;
    line-height: 1.2;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.dashboard-date-filter input.shamsi-date:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(15, 92, 86, 0.28);
}
.dashboard-date-filter .shamsi-date-trigger {
    width: 26px;
    height: 26px;
    inset-inline-end: 2px;
}
.dashboard-date-sep {
    color: var(--muted, #6b7c78);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 2px;
    user-select: none;
    flex: 0 0 auto;
}
.dashboard-date-go {
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}
.dashboard-date-go:hover {
    filter: brightness(0.95);
}
@media (max-width: 720px) {
    .dashboard-date-filter {
        width: 100%;
        justify-content: space-between;
    }
    .dashboard-date-filter .shamsi-date-wrap {
        width: 118px;
        flex-basis: 118px;
        min-width: 110px;
    }
}
.dashboard-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-inline-start: auto;
}
.dashboard-compact-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}
.dashboard-compact-btn.is-primary {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}
.dashboard-compact-btn:hover {
    border-color: rgba(15, 92, 86, 0.35);
}
.dashboard-capital-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label link"
        "value value"
        "hint hint";
    gap: 4px 16px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px solid rgba(15, 92, 86, 0.22);
    background:
        linear-gradient(135deg, rgba(15, 92, 86, 0.08), rgba(255, 255, 255, 0.95) 55%),
        #fff;
}
.dashboard-capital-card:hover {
    border-color: rgba(15, 92, 86, 0.4);
}
.dashboard-capital-main {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    grid-column: 1 / -1;
}
.dashboard-capital-label {
    grid-area: label;
    font-size: 1rem;
    font-weight: 800;
    color: var(--teal);
}
.dashboard-capital-main .dashboard-capital-label,
.dashboard-capital-main .dashboard-capital-value,
.dashboard-capital-main .dashboard-capital-hint {
    grid-area: auto;
}
.dashboard-capital-value {
    grid-area: value;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.dashboard-capital-value.is-negative,
.capital-hero-value.is-negative,
.capital-math .is-negative {
    color: #b42318;
}
.dashboard-capital-hint {
    grid-area: hint;
    color: var(--muted);
    font-size: 0.88rem;
}
.dashboard-capital-link {
    grid-area: link;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--teal);
    white-space: nowrap;
}
.dashboard-capital-parts {
    grid-column: 1 / -1;
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(15, 92, 86, 0.12);
    display: grid;
    gap: 6px;
}
.dashboard-capital-parts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.84rem;
    color: #475467;
}
.dashboard-capital-parts li strong {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.dashboard-capital-parts li.is-floor {
    color: var(--teal);
    font-weight: 600;
}
.capital-hero {
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 92, 86, 0.22);
    background:
        linear-gradient(160deg, rgba(15, 92, 86, 0.1), rgba(255, 255, 255, 0.96) 50%),
        #fff;
}
.capital-hero-label {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--teal);
}
.capital-hero-value {
    margin: 10px 0 8px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
}
.capital-hero-note {
    max-width: 36rem;
    margin: 0 auto 14px;
}
.capital-hero-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.capital-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.capital-block h2,
.capital-formula h2,
.capital-equity h2 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.capital-block.is-asset {
    border-top: 3px solid #0f5c56;
}
.capital-block.is-debt {
    border-top: 3px solid #b42318;
}
.capital-rows {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.capital-rows li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(20, 36, 40, 0.08);
}
.capital-rows li:last-child {
    border-bottom: 0;
}
.capital-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.capital-row-text strong {
    font-size: 0.95rem;
}
.capital-row-text span {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}
.capital-row-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.capital-row-value em {
    font-style: normal;
    font-weight: 800;
    font-size: 1.05rem;
}
.capital-row-value a {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
}
.capital-subtotal {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(20, 36, 40, 0.18);
    font-weight: 800;
}
.capital-steps {
    margin: 10px 0 0;
    padding-inline-start: 1.2rem;
    line-height: 1.7;
}
.capital-math {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(15, 92, 86, 0.06);
    font-weight: 700;
}
.capital-math strong {
    font-size: 1.05rem;
}
.capital-equity {
    margin-top: 14px;
}
@media (max-width: 900px) {
    .capital-columns {
        grid-template-columns: 1fr;
    }
    .dashboard-capital-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "value"
            "hint"
            "link";
    }
}
.dashboard-kpi-text {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 0;
    margin-top: 2px;
}
.dashboard-kpi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(20, 36, 40, 0.08);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.dashboard-kpi-row:hover .dashboard-kpi-label {
    color: var(--teal);
}
.dashboard-kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.3;
    min-width: 0;
}
.dashboard-kpi-value {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: end;
    white-space: nowrap;
}
.dashboard-kpi-value strong {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.dashboard-kpi-value small {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.2;
}
.dashboard-kpi-row.is-alert .dashboard-kpi-label,
.dashboard-kpi-row.is-alert .dashboard-kpi-value strong {
    color: var(--danger);
}
@media (max-width: 900px) {
    .dashboard-kpi-text {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .dashboard-kpi-text {
        grid-template-columns: 1fr;
    }
}
.dashboard-compact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
}
.dashboard-stat {
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.05);
    border: 1px solid rgba(15, 92, 86, 0.08);
}
a.dashboard-stat {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.dashboard-stat:hover {
    border-color: rgba(15, 92, 86, 0.28);
    background: rgba(15, 92, 86, 0.08);
}
.dashboard-stat.is-highlight {
    background: linear-gradient(145deg, #fff 0%, #f3fbf9 100%);
    border-color: rgba(15, 92, 86, 0.2);
}
.dashboard-stat.is-alert {
    background: #fff5f5;
    border-color: rgba(185, 28, 28, 0.28);
}
.dashboard-stat.is-alert span,
.dashboard-stat.is-alert strong {
    color: var(--danger);
}
.dashboard-stat span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 2px;
}
.dashboard-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.2;
}
.dashboard-stat small {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
}
.dashboard-compact-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.85fr;
    gap: 8px;
    min-height: 0;
}
.dashboard-compact-chart {
    padding: 8px 10px;
    min-height: 0;
}
.dashboard-compact-chart h3 {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ink-soft);
}
.dashboard-compact-chart-wrap {
    position: relative;
    height: 140px;
}
.dashboard-compact-chart-wrap.is-donut {
    height: 160px;
}
.dashboard-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.dashboard-compact-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.dashboard-compact-list {
    padding: 10px 12px;
}
.dashboard-compact-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.dashboard-compact-list-head h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink-soft);
}
.dashboard-compact-list-head a {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.dashboard-mini-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(11, 61, 54, 0.06);
    font-size: 0.78rem;
}
.dashboard-mini-list li:last-child {
    border-bottom: 0;
}
.dashboard-mini-list li.is-empty {
    grid-template-columns: 1fr;
    color: var(--muted);
    font-weight: 600;
    border: 0;
}
.dashboard-mini-list a {
    color: var(--teal);
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-mini-list span {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-mini-list strong {
    font-family: var(--font-display);
    color: var(--ink);
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .dashboard-compact-main {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-compact-chart.is-small {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .dashboard-compact-main,
    .dashboard-compact-bottom {
        grid-template-columns: 1fr;
    }
}

/* —— Staff admin —— */
.staff-page {
    display: grid;
    gap: 10px;
}
.staff-panel,
.staff-form-panel {
    padding: 12px 14px;
}
.staff-form {
    display: grid;
    gap: 10px;
}
.staff-form-grid {
    gap: 10px;
}

/* —— Purchase detail (compact) —— */
.purchase-detail {
    display: grid;
    gap: 10px;
}
.purchase-detail .panel {
    padding: 12px 14px;
}
.purchase-detail .panel h2 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.purchase-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.purchase-back {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}
.purchase-back:hover { text-decoration: underline; }
.purchase-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.purchase-detail-actions form { margin: 0; }
.purchase-receive-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 4px;
    border-radius: 10px;
    background: rgba(15, 92, 86, 0.06);
    border: 1px solid rgba(15, 92, 86, 0.12);
}
.purchase-receive-form select {
    min-width: 120px;
    max-width: 180px;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font: inherit;
    font-size: 0.82rem;
    background: #fff;
}
.purchase-hero {
    display: grid;
    gap: 10px;
}
.purchase-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.purchase-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.03);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
}
a.purchase-chip:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.purchase-chip-status.is-active {
    border-color: rgba(15, 92, 86, 0.25);
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
}
.purchase-chip-status.is-inactive {
    border-color: rgba(160, 50, 40, 0.25);
    background: rgba(160, 50, 40, 0.08);
    color: #8a3028;
}
.purchase-chip-status.is-warn {
    border-color: rgba(180, 120, 20, 0.28);
    background: rgba(180, 120, 20, 0.1);
    color: #8a5a20;
}
.purchase-notes {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
}
.purchase-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.purchase-stat {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.8);
}
.purchase-stat span {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.purchase-stat strong {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
}
.purchase-totals-label {
    text-align: end;
    color: var(--muted);
    font-weight: 600;
}
.purchase-totals-final td {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.purchase-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 10px;
}
.purchase-split.is-single {
    grid-template-columns: 1fr;
}
.purchase-split > .panel { min-width: 0; }
.purchase-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}
.purchase-pay-form label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.purchase-pay-form input,
.purchase-pay-form select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.purchase-pay-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
html[dir="rtl"] .purchase-totals-label { text-align: start; }

@media (max-width: 900px) {
    .purchase-stats,
    .purchase-split,
    .purchase-pay-grid {
        grid-template-columns: 1fr;
    }
    .purchase-detail-actions { width: 100%; }
    .purchase-receive-form { width: 100%; }
    .purchase-receive-form select { flex: 1; max-width: none; }
}

/* —— Forms & toolbar —— */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar input[type=search] { min-width: 240px; flex: 1; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.shamsi-date-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.shamsi-date-wrap input.shamsi-date {
    flex: 1;
    min-width: 0;
    padding-inline-end: 34px;
}
.shamsi-date-trigger {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shamsi-date-trigger:hover,
.shamsi-date-wrap.is-open .shamsi-date-trigger {
    background: rgba(15, 92, 86, 0.1);
}
.shamsi-date-trigger svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
input.shamsi-date {
    min-width: 132px;
    font-variant-numeric: tabular-nums;
}
.shamsi-picker {
    position: fixed;
    z-index: 5000;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    padding: 10px;
    color: var(--text);
}
.shamsi-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.shamsi-picker-title {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
}
.shamsi-picker-nav {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, #f8fafc);
    color: var(--text);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.shamsi-picker-nav:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.shamsi-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}
.shamsi-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.shamsi-picker-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.shamsi-picker-day,
.shamsi-picker-month {
    border: 0;
    border-radius: 8px;
    background: transparent;
    min-height: 32px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text);
}
.shamsi-picker-day:hover,
.shamsi-picker-month:hover {
    background: rgba(15, 92, 86, 0.08);
}
.shamsi-picker-day.is-today {
    box-shadow: inset 0 0 0 1px var(--teal);
}
.shamsi-picker-day.is-selected,
.shamsi-picker-month.is-selected {
    background: var(--teal);
    color: #fff;
}
.shamsi-picker-empty {
    min-height: 32px;
}
.shamsi-picker-time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.shamsi-picker-time label {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 0.65rem;
    color: var(--muted);
}
.shamsi-picker-time input {
    width: 52px;
    min-height: 30px;
    padding: 4px 6px;
    text-align: center;
}
.shamsi-picker-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.shamsi-picker-foot button {
    border: 0;
    background: transparent;
    color: var(--teal);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.shamsi-picker-foot button:hover {
    background: rgba(15, 92, 86, 0.08);
}

.panel-product-form { width: 100%; max-width: none; }
.product-smart-form .form-section { margin-bottom: 8px; }
.product-smart-form .form-section-head {
    margin-bottom: 12px;
}
.product-smart-form .form-section-head h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.product-smart-form .form-section-head .muted {
    margin: 0;
    font-size: 0.84rem;
}
.product-smart-form .field-primary input {
    font-size: 1.05rem;
    padding: 13px 14px;
}
.product-smart-form .field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
}
.product-smart-form .dual-unit-box {
    padding: 12px 14px;
    border: 1px solid var(--border, #dde5e3);
    border-radius: 10px;
    background: rgba(15, 92, 86, 0.03);
}
.product-smart-form .dual-unit-toggle {
    margin-bottom: 4px;
}
.product-smart-form .dual-unit-hint {
    margin: 0 0 10px;
    font-size: 0.82rem;
}
.product-smart-form .dual-unit-fields {
    margin-top: 4px;
}
.select-with-add {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
}
.select-with-add select { width: 100%; }
.btn-add-inline {
    min-width: 42px;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.15rem;
    line-height: 1;
}
.form-more {
    margin: 16px 0 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px 14px;
    background: rgba(20, 36, 40, 0.02);
}
.form-more > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink-soft);
    list-style: none;
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::before {
    content: '+';
    display: inline-block;
    width: 1.2em;
    color: var(--teal);
    font-weight: 800;
}
.form-more[open] > summary::before { content: '–'; }
.form-actions-sticky {
    position: sticky;
    bottom: 0;
    margin-top: 18px;
    padding: 12px 0 4px;
    background: linear-gradient(180deg, transparent, var(--card) 35%);
    align-items: center;
}
.form-kbd-hint {
    font-size: 0.78rem;
    margin-inline-start: auto;
}

label { display: grid; gap: 6px; font-weight: 700; font-size: 0.84rem; color: var(--ink-soft); }

label input, label select, label textarea,
.form-grid input, .form-grid select, .form-grid textarea,
.toolbar input, .toolbar select {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    font: inherit;
    width: 100%;
    background: #fffefb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

label input:focus, label select:focus, label textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.toolbar input:focus, .toolbar select:focus {
    outline: none;
    border-color: rgba(26, 107, 99, 0.55);
    box-shadow: 0 0 0 3px rgba(26, 107, 99, 0.15);
}

.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.checkbox input { width: auto; }

.btn {
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--teal-bright), var(--teal));
    color: #fff;
    box-shadow: 0 8px 18px rgba(26, 107, 99, 0.28);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary {
    background: rgba(20, 36, 40, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-small { padding: 6px 12px; font-size: 0.82rem; }
.btn-whatsapp {
    background: #25d366;
    color: #fff;
    border: 1px solid #1ebe57;
}
.btn-whatsapp:hover { filter: brightness(1.06); color: #fff; }
.btn-whatsapp:disabled,
.btn-whatsapp[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.inline-form { display: inline; }

.alert {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    animation: rise 0.35s ease both;
}
.alert-success, .alert.success { background: #ecfdf5; color: #0f766e; border-color: #99f6e4; }
.alert-error, .alert.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.alert ul { margin: 0; padding-left: 18px; }

.finance-journal-intro {
    margin: 0 0 8px;
    font-size: 0.78rem;
    line-height: 1.35;
}
.finance-panels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-start;
}
.finance-panels-row > .col-md-6 {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: 0;
}
.finance-panels-row > .panel {
    margin: 0;
    padding: 10px 12px;
}
.finance-panels-row .panel-toolbar {
    margin-bottom: 8px;
}
.finance-panels-row .finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-other-cash-panel h2 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.finance-other-cash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: end;
}
.finance-other-cash-grid .full {
    grid-column: 1 / -1;
}
.finance-other-cash-form label {
    display: grid;
    gap: 4px;
    margin: 0;
    font-weight: 600;
}
.finance-other-cash-form label > span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.finance-other-cash-form input,
.finance-other-cash-form select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fffefb;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.finance-other-cash-form input:focus,
.finance-other-cash-form select:focus {
    outline: none;
    border-color: rgba(26, 107, 99, 0.55);
    box-shadow: 0 0 0 3px rgba(26, 107, 99, 0.12);
}
.finance-other-cash-actions {
    margin-top: 8px;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .finance-other-cash-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 992px) {
    .finance-panels-row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .finance-panels-row .finance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .finance-panels-row .finance-summary-grid {
        grid-template-columns: 1fr;
    }
}
.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
}
.finance-micro-list {
    background: #fffefb;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    min-width: 0;
}
.finance-micro-list-title {
    margin: 0 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.finance-micro-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.finance-micro-rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.25;
}
.finance-micro-rows li > span {
    color: var(--muted);
    flex: 1 1 auto;
    min-width: 0;
}
.finance-micro-rows li > strong {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-align: end;
}
.finance-micro-rows li.finance-cash-row > span {
    color: #991b1b;
    font-weight: 700;
}
.finance-micro-rows li.finance-cash-row > strong {
    color: #b91c1c !important;
    font-weight: 800 !important;
}
.finance-micro-rows li.finance-cash-row.is-negative {
    margin: 0 -2px;
    padding: 2px 4px;
    border-radius: 6px;
    background: #fef2f2;
}
@media (max-width: 1100px) {
    .finance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .finance-summary-grid {
        grid-template-columns: 1fr;
    }
}
.finance-ledger-panel h2 {
    margin: 0 0 12px;
}
.finance-ledger-table th.num,
.finance-ledger-table td.num {
    white-space: nowrap;
    text-align: left;
}
[dir="rtl"] .finance-ledger-table th.num,
[dir="rtl"] .finance-ledger-table td.num {
    text-align: right;
}
.finance-ledger-opening td {
    background: #faf8f3;
    font-weight: 600;
}
.pagination-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
[dir="rtl"] .pagination-nav {
    align-items: flex-end;
}
.pagination-summary {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
}
.pagination-summary strong {
    color: var(--text);
    font-weight: 600;
}
.pagination {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.pagination li { list-style: none; }
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    background: #fffefb;
}
.pagination li.disabled span {
    opacity: 0.45;
    cursor: not-allowed;
}
.pagination .active span {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
}

.json-block {
    background: var(--ink);
    color: #d8e6e3;
    border-radius: 14px;
    padding: 14px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.5;
    max-height: 520px;
}

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

.table-wrap table {
    min-width: 720px;
}

td.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* —— Reports hub —— */
.reports-hub-panel {
    padding: 12px 14px 14px;
}
.reports-hub-panel .finance-journal-intro {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.55;
}
.reports-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    width: 100%;
}
.reports-hub-grid .finance-micro-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    min-height: 0;
}
.reports-hub-grid .finance-micro-list-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-align: start;
    line-height: 1.35;
}
.reports-hub-grid .finance-micro-rows {
    flex: 1 1 auto;
    gap: 0;
}
.reports-hub-grid .finance-micro-rows li {
    display: block;
    border-bottom: 1px solid rgba(11, 61, 54, 0.06);
}
.reports-hub-grid .finance-micro-rows li:last-child {
    border-bottom: 0;
}
.reports-hub-grid .finance-micro-rows li > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.8rem;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
    padding: 6px 2px;
    border-radius: 6px;
}
.reports-hub-grid .finance-micro-rows li > a:hover {
    background: rgba(15, 92, 86, 0.06);
}
.reports-hub-grid .finance-micro-rows li > a span {
    color: var(--ink-soft, var(--ink));
    font-weight: 600;
    font-size: 0.8rem;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reports-hub-grid .finance-micro-rows li > a strong {
    color: var(--teal);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: end;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .reports-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .reports-hub-grid {
        grid-template-columns: 1fr;
    }
    .reports-hub-grid .finance-micro-rows li > a {
        grid-template-columns: minmax(0, 1fr) 3.2rem;
    }
}

/* —— Compact report layout —— */
.back-link-compact { margin: 0 0 8px; font-size: 0.88rem; }

.panel.panel-report {
    padding: 12px 14px 14px;
}

.toolbar.toolbar-compact {
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}

.toolbar.toolbar-compact input,
.toolbar.toolbar-compact select {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    max-width: 148px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.25;
}

.toolbar.toolbar-compact input[type="date"] {
    max-width: 138px;
}

.toolbar.toolbar-compact select {
    max-width: 118px;
}

.toolbar.toolbar-compact select.toolbar-select-md {
    max-width: 168px;
}

.toolbar.toolbar-compact .btn-small {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    height: auto;
}

.toolbar.toolbar-compact .toolbar-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.toolbar.toolbar-compact .toolbar-check input {
    width: auto;
    max-width: none;
    margin: 0;
}

.toolbar.toolbar-compact input.toolbar-search,
.toolbar.toolbar-compact input[type="search"] {
    max-width: 200px;
    min-width: 140px;
}

.toolbar.toolbar-compact .shamsi-date-wrap {
    width: auto;
    flex: 0 0 auto;
}

.toolbar.toolbar-compact .shamsi-date-wrap input.shamsi-date,
.toolbar.toolbar-compact input.toolbar-date-sm {
    width: 138px;
    min-width: 138px;
    max-width: 138px;
    padding-inline-end: 34px;
}

.toolbar.toolbar-compact .shamsi-date-wrap .shamsi-date-trigger {
    inset-inline-end: 4px;
}

.panel.panel-list {
    padding: 12px 14px 14px;
}

.panel-toolbar.panel-toolbar-compact {
    margin-bottom: 10px;
    gap: 8px;
}

.panel-filter-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.88rem;
}

.panel-filter-note a {
    margin-inline-start: 8px;
}

.panel-toolbar.panel-toolbar-compact .toolbar {
    margin-bottom: 0;
}

.panel-toolbar.panel-toolbar-compact .btn-small {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    height: auto;
}

.journal-filter-party.is-filter-hidden,
.journal-filter-party-customer.is-filter-hidden,
.journal-filter-party-supplier.is-filter-hidden,
.journal-filter-payment-method.is-filter-hidden,
.journal-filter-warehouse.is-filter-hidden {
    display: none;
}

.toolbar.toolbar-compact select option:disabled {
    color: #9aa3a0;
    background: #f3f5f4;
}

.toolbar.toolbar-compact select option[disabled] {
    display: none;
}

.panel-report .report-range {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.3;
}

.customer-photo-wrap {
    margin-bottom: 16px;
}

.customer-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid var(--border, #e8dfd0);
    box-shadow: 0 4px 14px rgba(11, 61, 54, 0.12);
}

.customer-photo-sm {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

.customer-photo-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #167a6f, #0b3d36);
    color: #fff8eb;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
}

.customer-detail {
    display: grid;
    gap: 10px;
}

.customer-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 0;
}

.customer-detail-layout > .panel {
    margin: 0;
    height: auto;
}

.customer-detail-layout > .customer-detail-side > .panel {
    margin: 0;
    height: auto;
}

.customer-detail-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.customer-detail-side .customer-form-panel {
    flex: 0 0 auto;
    min-width: 0;
}

.customer-detail-side .customer-form-panel h2 {
    margin: 0 0 10px;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 0.95rem;
}

.customer-detail-statement .panel-toolbar {
    margin-bottom: 8px;
}

.customer-detail-statement .panel-toolbar h2 {
    margin: 0;
    font-size: 0.95rem;
}

@media (max-width: 992px) {
    .customer-detail-layout {
        grid-template-columns: 1fr;
    }
}

.customer-detail-toolbar {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.customer-detail-toolbar .back-link {
    margin: 0;
}

.customer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.customer-detail .panel {
    padding: 12px 14px;
}

.customer-detail .panel h2 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.customer-profile {
    display: grid;
    gap: 10px;
}

.customer-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.customer-profile-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.customer-profile-copy {
    min-width: 0;
    flex: 1;
}

.customer-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.customer-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.03);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.customer-chip-status.is-active {
    border-color: rgba(15, 92, 86, 0.25);
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
}

.customer-chip-status.is-inactive {
    border-color: rgba(120, 80, 40, 0.25);
    background: rgba(120, 80, 40, 0.08);
    color: #8a5a20;
}

.customer-chip-status.is-alert {
    border-color: rgba(185, 28, 28, 0.18);
    background: rgba(254, 242, 242, 0.9);
    color: #b91c1c;
}

.customer-profile-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.customer-profile-copy p {
    margin: 0;
}

.customer-profile-meta {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.customer-profile-copy .phone-stat {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.customer-profile-address {
    max-width: 42rem;
}

.customer-profile-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.customer-profile-stats .stat-card {
    margin: 0;
}

.customer-profile-stats .stat-card.is-alert {
    border-color: rgba(185, 28, 28, 0.18);
    background: rgba(254, 242, 242, 0.9);
}

.customer-profile-stats .stat-card.is-alert strong {
    color: #b91c1c;
}

.customer-forms {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 10px;
}

.customer-form-panel {
    min-width: 0;
}

.customer-form-panel h2 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.customer-adjust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
}

.customer-adjust label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.customer-adjust input,
.customer-adjust select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.customer-adjust input:focus,
.customer-adjust select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}

.customer-adjust-wide {
    grid-column: 1 / -1;
}

.customer-adjust-actions {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding-bottom: 0;
    justify-content: flex-end;
}

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

.customer-table-panel {
    min-width: 0;
}

.customer-table-panel.customer-table-panel-wide {
    grid-column: 1 / -1;
}

.customer-detail .pagination-wrap {
    margin-top: 8px;
}

@media (max-width: 900px) {
    .customer-profile-stats,
    .customer-forms,
    .customer-tables,
    .customer-adjust-grid {
        grid-template-columns: 1fr;
    }

    .customer-profile-head,
    .customer-profile-main {
        align-items: flex-start;
    }
}

.stats-grid.stats-grid-compact {
    gap: 6px;
    margin-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.stat-card.stat-card-compact {
    padding: 8px 10px;
    border-radius: 10px;
}

.stat-card.stat-card-compact::after {
    width: 56px;
    height: 56px;
    right: -14px;
    top: -14px;
}

.stat-card.stat-card-compact:hover {
    transform: none;
}

.stat-card.stat-card-compact .stat-label {
    font-size: 0.64rem;
    letter-spacing: 0.03em;
}

.stat-card.stat-card-compact strong {
    font-size: 0.98rem;
    margin: 2px 0 0;
    line-height: 1.2;
}

.table-wrap.table-compact th,
.table-wrap.table-compact td {
    padding: 6px 7px;
    font-size: 0.82rem;
}

.table-wrap.table-compact th {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
}

.table-wrap.table-compact .badge {
    padding: 1px 6px;
    font-size: 0.7rem;
}

.table-wrap.table-compact .empty {
    padding: 14px 8px !important;
}

.table-wrap.table-compact table {
    min-width: 640px;
}

.line-items { display: grid; gap: 10px; }
.line-item { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: end; }
.line-item.line-item-locked { grid-template-columns: 2fr 1fr 1fr 1fr; }

/* —— Compact sale form —— */
.panel-sale-form { padding: 12px 14px; }
.panel-sale-form.pos-page { padding: 8px 10px; }
.sale-form-compact { display: grid; gap: 10px; margin: 0; }
.sale-meta-bar {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) minmax(110px, 1fr) minmax(110px, 0.9fr) minmax(80px, 0.7fr) minmax(80px, 0.7fr) auto;
    gap: 8px;
    align-items: end;
}
.sale-meta-bar label,
.sale-notes-field {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sale-meta-bar input:not([type="checkbox"]),
.sale-meta-bar select,
.sale-notes-field input,
.sale-line-item input,
.sale-line-item select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.86rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.sale-credit-check {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(20, 36, 40, 0.02);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8rem !important;
    white-space: nowrap;
}
.sale-notes-field { max-width: 100%; }
.sale-customer-hint {
    margin: -2px 0 0;
    font-size: 0.76rem;
}
.sale-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
.sale-lines-head h2 {
    margin: 0;
    font-size: 0.92rem;
}
.sale-lines-table { display: grid; gap: 6px; }
.sale-lines-cols,
.line-item.sale-line-item {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(110px, 0.8fr) minmax(100px, 0.7fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) 34px;
    gap: 6px;
    align-items: center;
}
.sale-lines-cols {
    padding: 0 2px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sale-line-item {
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.65);
}
.sale-line-field {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.sale-line-label {
    display: none;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sale-line-field-product {
    min-width: 0;
}
.sale-product-picker {
    position: relative;
    z-index: 2;
}
.sale-product-search {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(15, 92, 86, 0.2);
    border-radius: 8px;
    background: #fffefb;
    font-size: 0.84rem;
    font-weight: 600;
}
.sale-product-search:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.sale-product-suggestions {
    position: absolute;
    z-index: 80;
    top: calc(100% + 4px);
    inset-inline: 0;
    min-width: 220px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 36, 40, 0.14);
}
.sale-product-suggestions[hidden] {
    display: none !important;
}
.sale-suggestion {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid rgba(20, 36, 40, 0.06);
    background: transparent;
    text-align: inherit;
    cursor: pointer;
    font: inherit;
}
.sale-suggestion:last-child { border-bottom: none; }
.sale-suggestion:hover {
    background: rgba(15, 92, 86, 0.08);
}
.sale-suggestion-name {
    font-weight: 700;
    line-height: 1.3;
}
.sale-suggestion-meta,
.sale-suggestion-empty {
    font-size: 0.74rem;
    color: var(--muted);
}
.sale-suggestion-empty {
    padding: 10px;
}
.sale-stock-hint {
    font-size: 0.72rem;
    line-height: 1.2;
}
.sale-line-total {
    background: rgba(20, 36, 40, 0.04) !important;
    font-weight: 700;
}
.sale-remove-line {
    width: 34px;
    min-width: 34px;
    align-self: end;
    padding: 0 !important;
    justify-content: center;
}
.sale-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.sale-totals {
    margin: 0;
    width: min(240px, 100%);
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(22, 122, 111, 0.05);
}
.sale-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.78rem;
}
.sale-totals-row strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 0.84rem;
}
.sale-totals-grand {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--ink);
    font-weight: 700;
}
.sale-totals-grand strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--teal);
}
.sale-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 980px) {
    .sale-meta-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sale-credit-check { grid-column: 1 / -1; width: fit-content; }
}
@media (max-width: 700px) {
    .sale-meta-bar { grid-template-columns: 1fr; }
    .sale-lines-cols { display: none; }
    .line-item.sale-line-item { grid-template-columns: 1fr 1fr; }
    .sale-line-label { display: block; }
    .sale-line-item .sale-line-field-product,
    .sale-line-item .sale-stock-hint,
    .sale-line-item .sale-line-total,
    .sale-line-item .sale-remove-line { grid-column: 1 / -1; width: 100%; }
    .sale-footer { align-items: stretch; }
    .sale-totals { width: 100%; }
}

/* —— Sale show & receipt —— */
.sale-show-page { display: grid; gap: 12px; }
.sale-show-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.95fr);
    gap: 12px;
    align-items: start;
}
.sale-show-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.sale-show-receipt-rail {
    min-width: 0;
}
.sale-show-page.is-a5-invoice .sale-show-layout {
    grid-template-columns: 1fr;
}
.sale-show-page.is-a5-invoice .sale-show-receipt-rail {
    order: -1;
}
.sale-invoice-a5 {
    width: 210mm;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 1.5px solid #1a1a1a;
    border-inline-start: 1.5px solid #1a1a1a;
    background: #fff;
    box-shadow: none;
}
.sale-invoice-a5 .sale-receipt-watermark {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.sale-invoice-a5 .sale-receipt-watermark-cell {
    position: absolute;
    top: 44%;
    left: 50%;
    width: 88%;
    transform: translate(-50%, -50%) rotate(-45deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    opacity: 0.1;
    color: #0f5c56;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
}
.sale-invoice-a5 .sale-receipt-watermark-cell img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.85;
}
.sale-invoice-a5 .sale-receipt-letterhead {
    margin: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    line-height: 0;
}
.sale-invoice-a5 .sale-receipt-letterhead img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
}
.sale-invoice-a5 .sale-invoice-body {
    padding: 4mm 6mm 5mm;
}
.sale-invoice-a5 .sale-receipt-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
}
.sale-invoice-a5 .sale-receipt-number {
    font-size: 1.15rem;
    color: #111;
}
.sale-invoice-a5 .sale-receipt-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.sale-invoice-a5 .sale-receipt-party {
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 8px 10px;
    background: #fafafa;
}
.sale-invoice-a5 .sale-receipt-table table {
    border: 1px solid #222;
}
.sale-invoice-a5 .sale-receipt-table th,
.sale-invoice-a5 .sale-receipt-table td {
    border: 1px solid #bbb;
    padding: 6px 8px;
}
.sale-invoice-a5 .sale-receipt-table thead th {
    background: #f0f0f0;
    color: #111;
}
.sale-invoice-a5 .sale-receipt-footer {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #222;
    align-items: start;
}
.sale-invoice-a5 .sale-receipt-totals {
    border: 1px solid #222;
    padding: 6px 8px;
}
.sale-invoice-a5 .sale-receipt-grand {
    background: #f3f3f3;
}
.sale-show-receipt-rail .sale-receipt {
    position: sticky;
    top: 12px;
}
.sale-show-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.sale-show-stats .stat-card { margin: 0; }
.sale-receipt {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 22px 24px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.05), transparent 42%),
        var(--card);
    overflow: hidden;
}
.sale-receipt.thermal-58,
.sale-receipt.thermal-80 {
    width: var(--receipt-paper-width, 80mm);
    max-width: min(100%, var(--receipt-paper-width, 80mm));
    margin-inline: auto;
    padding: 14px var(--receipt-side-margin, 3.95mm);
    font-size: 12px;
    box-sizing: border-box;
}
.sale-receipt.is-thermal-compact .sale-receipt-head {
    margin-bottom: 10px;
    padding-bottom: 8px;
    justify-content: center;
    text-align: center;
}
.sale-receipt.is-thermal-compact .sale-receipt-brand {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.sale-receipt.is-thermal-compact .sale-receipt-brand > div {
    width: 100%;
}
.sale-receipt.is-thermal-compact .sale-receipt-logo {
    display: none;
}
.sale-receipt.is-thermal-compact .sale-receipt-head h2 {
    font-size: 1rem;
}
.sale-receipt.is-thermal-compact .sale-receipt-business-meta,
.sale-receipt.is-thermal-compact .sale-receipt-head .muted,
.sale-receipt.is-thermal-compact .sale-receipt-facts > div,
.sale-receipt.is-thermal-compact .sale-receipt-party .muted {
    font-size: 0.72rem;
    line-height: 1.25;
}
.sale-receipt.is-thermal-compact .sale-receipt-business-meta,
.sale-receipt.is-thermal-compact .sale-receipt-party,
.sale-receipt.is-thermal-compact .sale-receipt-party > strong,
.sale-receipt.is-thermal-compact .sale-receipt-party .stat-label {
    text-align: center;
    justify-content: center;
}
.sale-receipt.is-thermal-compact .sale-receipt-meta {
    display: none;
}
.sale-receipt.is-thermal-compact .sale-receipt-parties,
.sale-receipt.is-thermal-compact .sale-receipt-footer {
    grid-template-columns: 1fr;
    gap: 8px;
}
.sale-receipt.is-thermal-compact .sale-receipt-party,
.sale-receipt.is-thermal-compact .sale-receipt-totals {
    padding: 8px 9px;
    border-radius: 10px;
}
.sale-receipt.is-thermal-compact .sale-receipt-table table {
    font-size: 0.78rem;
}
.sale-receipt.is-thermal-compact .sale-receipt-table th,
.sale-receipt.is-thermal-compact .sale-receipt-table td {
    padding: 5px 4px;
}
.sale-receipt.is-thermal-compact .sale-col-num {
    width: 24px;
}
.sale-receipt.is-thermal-compact .sale-receipt-totals > div {
    font-size: 0.76rem;
}
.sale-receipt.is-thermal-compact .sale-receipt-grand {
    font-size: 0.88rem;
}
.sale-receipt.is-thermal-compact .sale-receipt-grand strong {
    font-size: 1rem;
}
.sale-receipt-items {
    display: grid;
    gap: 6px;
    margin: 0 0 10px;
}
.sale-receipt-items-head,
.sale-receipt-item {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(56px, auto) minmax(72px, auto);
    align-items: start;
    gap: 8px;
    padding: 6px 0;
}
.sale-receipt-items-head {
    padding-top: 0;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(20, 36, 40, 0.3);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
}
.sale-receipt-items-head span:nth-child(2),
.sale-receipt-items-head span:nth-child(3),
.sale-receipt-item-qty,
.sale-receipt-item-total {
    text-align: center;
}
.sale-receipt-item {
    border-bottom: 1px dashed rgba(20, 36, 40, 0.18);
}
.sale-receipt-item:last-child {
    border-bottom: 0;
}
.sale-receipt-item-name {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
}
.sale-receipt-item-qty {
    color: var(--muted);
    font-size: 0.72rem;
}
.sale-receipt-item-total {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
}
.sale-receipt-detail-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    line-height: 1.35;
}
.sale-receipt-detail-line span {
    color: var(--muted);
}
.sale-receipt-detail-line strong {
    font-weight: 700;
}
.sale-receipt-watermark {
    display: none;
}
.sale-receipt > *:not(.sale-receipt-watermark) {
    position: relative;
    z-index: 1;
}
.sale-receipt-letterhead {
    margin: 0 0 10px;
    line-height: 0;
}
.sale-receipt-letterhead img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    object-position: top center;
}
.sale-receipt-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.sale-receipt-brand {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.sale-receipt-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
}
.sale-receipt-head h2 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--ink);
}
.sale-receipt-head .muted { margin: 0; font-size: 0.84rem; }
.sale-receipt-business-meta {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 0.82rem;
}
.sale-receipt-meta {
    display: grid;
    gap: 6px;
    min-width: 180px;
    text-align: end;
    font-size: 0.88rem;
}
.sale-receipt-meta > div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.sale-receipt-meta > div > span { color: var(--muted); }
.sale-receipt-number {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 2px;
}
.sale-receipt-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.sale-receipt-party {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.7);
}
.sale-receipt-party .stat-label {
    display: block;
    margin-bottom: 6px;
}
.sale-receipt-party > strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.sale-receipt-facts {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}
.sale-receipt-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.88rem;
}
.sale-receipt-facts span { color: var(--muted); }
.sale-receipt-table { margin: 0; }
.sale-receipt-table table {
    width: 100%;
    min-width: 0;
    font-size: 0.92rem;
}
.sale-receipt-table th,
.sale-receipt-table td { padding: 10px 12px; }
.sale-col-num {
    width: 40px;
    color: var(--muted);
}
.sale-receipt-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 18px;
    align-items: start;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.sale-receipt-notes-block .stat-label { display: block; margin-bottom: 6px; }
.sale-receipt-notes-block p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 42ch;
}
.sale-receipt-totals {
    margin: 0;
    width: 100%;
    display: grid;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(22, 122, 111, 0.05);
}
.sale-receipt-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.88rem;
}
.sale-receipt-totals strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.sale-receipt-grand {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 1.02rem;
    font-weight: 700;
}
.sale-receipt-grand span,
.sale-receipt-grand strong { color: var(--teal); }
.sale-receipt-grand strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
}

html[dir="rtl"] .sale-receipt-meta,
html[dir="rtl"] .sale-receipt-meta > div { text-align: start; justify-content: flex-start; }

@media (max-width: 900px) {
    .sale-show-layout {
        grid-template-columns: 1fr;
    }
    .sale-show-receipt-rail .sale-receipt {
        position: static;
    }
    .sale-show-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sale-receipt-parties,
    .sale-receipt-footer { grid-template-columns: 1fr; }
    .sale-receipt-meta { text-align: start; }
    .sale-receipt-meta > div { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .sale-show-stats { grid-template-columns: 1fr; }
}

/* —— Sale return —— */
.sale-return-panel,
.sale-returns-history {
    padding: 14px 16px;
}
.sale-return-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.sale-return-head .muted {
    margin: 0 0 12px;
    font-size: 0.84rem;
    max-width: 62ch;
}
.sale-return-meta {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(140px, 1fr) minmax(180px, 1.6fr);
    gap: 8px;
    margin-bottom: 12px;
}
.sale-return-meta label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sale-return-meta input,
.sale-return-meta select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.86rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.sale-return-qty-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.sale-return-qty {
    width: 96px;
    min-height: 32px;
    padding: 4px 8px;
    text-align: end;
}
.sale-return-egg-table .sale-return-jora,
.sale-return-egg-table .sale-return-carton,
.sale-return-egg-table .sale-return-mold {
    width: 88px;
    min-height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: left;
}
.sale-return-sold-hint {
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.35;
}
.sale-return-total {
    font-variant-numeric: tabular-nums;
}
.sale-return-actions {
    margin-top: 12px;
}
.sale-return-costs {
    margin-top: 14px;
    padding: 10px;
    border: 1px dashed rgba(15, 92, 86, 0.22);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.03);
    display: grid;
    gap: 8px;
}
.sale-return-costs-head strong {
    font-size: 0.9rem;
}
.sale-return-costs-head .muted {
    margin: 4px 0 0;
    font-size: 0.75rem;
}
.sale-return-cost-rows {
    display: grid;
    gap: 8px;
}
.sale-return-cost-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(100px, 0.7fr) 90px minmax(110px, 0.8fr) auto;
    gap: 8px;
    align-items: end;
}
.sale-return-cost-fx[hidden] {
    display: none !important;
}
.sale-return-cost-row label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
}
.sale-return-cost-row input,
.sale-return-cost-row select {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
}
@media (max-width: 720px) {
    .sale-return-cost-row {
        grid-template-columns: 1fr 1fr;
    }
}
.sale-returns-history h2 {
    margin: 0;
    font-size: 1.05rem;
}

@media (max-width: 900px) {
    .sale-return-meta { grid-template-columns: 1fr 1fr; }
    .sale-return-notes { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .sale-return-meta { grid-template-columns: 1fr; }
    .sale-return-qty-cell { width: 100%; justify-content: stretch; }
    .sale-return-qty { flex: 1; width: auto; }
}

@media print {
    html, body {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
    }
    html:has(body.print-a5-invoice),
    body.print-a5-invoice {
        overflow: hidden !important;
    }
    body::before { display: none !important; }

    .sidebar,
    .topbar,
    .admin-quick-links,
    .flash,
    .alert,
    .no-print,
    .sale-show-stats {
        display: none !important;
    }

    .admin-shell,
    .content,
    .sale-show-page {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .sale-receipt:not(.sale-invoice-a5) {
        position: relative !important;
        display: block !important;
        width: var(--receipt-print-width, 72.1mm) !important;
        max-width: var(--receipt-print-width, 72.1mm) !important;
        min-width: var(--receipt-print-width, 72.1mm) !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 2mm 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .sale-invoice-a5 {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 138mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 1.5px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
    }
    .sale-invoice-a5 .sale-invoice-body {
        padding: 3mm 5mm 4mm !important;
    }
    .sale-invoice-a5 .sale-receipt-letterhead {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .sale-invoice-a5 .sale-receipt-letterhead img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: top center !important;
    }
    .sale-invoice-a5 .sale-receipt-watermark {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    .sale-invoice-a5 .sale-receipt-watermark-cell {
        position: absolute !important;
        top: 44% !important;
        left: 50% !important;
        width: 88% !important;
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3mm !important;
        text-align: center !important;
        opacity: 0.11 !important;
        color: #0f5c56 !important;
        font-size: 20pt !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    .sale-invoice-a5 .sale-receipt-watermark-cell img {
        width: 16mm !important;
        height: 16mm !important;
        object-fit: contain !important;
        opacity: 0.85 !important;
    }
    .sale-invoice-a5 > *:not(.sale-receipt-watermark) {
        position: relative !important;
        z-index: 1 !important;
    }
    .sale-invoice-a5 .sale-receipt-head {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        justify-content: space-between !important;
        text-align: start !important;
        border-bottom: 1px solid #000 !important;
        margin: 0 0 3mm !important;
        padding: 0 0 2mm !important;
    }
    .sale-invoice-a5 .sale-receipt-meta {
        text-align: start !important;
        width: auto !important;
        font-size: 9pt !important;
    }
    .sale-invoice-a5 .sale-receipt-meta > div {
        justify-content: flex-start !important;
    }
    .sale-invoice-a5 .sale-receipt-number {
        font-size: 12pt !important;
        margin: 0 0 2px !important;
    }
    .sale-invoice-a5 .sale-receipt-parties {
        grid-template-columns: 1fr 1fr !important;
        gap: 3mm !important;
        margin: 0 0 3mm !important;
    }
    .sale-invoice-a5 .sale-receipt-party {
        text-align: start !important;
        border: 1px solid #444 !important;
        padding: 2mm !important;
    }
    .sale-invoice-a5 .sale-receipt-party .stat-label,
    .sale-invoice-a5 .sale-receipt-party > strong,
    .sale-invoice-a5 .sale-receipt-facts > div,
    .sale-invoice-a5 .sale-receipt-detail-line {
        font-size: 8pt !important;
        text-align: start !important;
    }
    .sale-invoice-a5 .sale-receipt-table table {
        font-size: 8.5pt !important;
        border: 1px solid #000 !important;
    }
    .sale-invoice-a5 .sale-receipt-table th,
    .sale-invoice-a5 .sale-receipt-table td {
        border: 1px solid #555 !important;
        padding: 1.5mm 2mm !important;
        font-size: 8.5pt !important;
    }
    .sale-invoice-a5 .sale-receipt-footer {
        grid-template-columns: 1fr 55mm !important;
        border-top: 1px solid #000 !important;
        gap: 4mm !important;
        margin-top: 3mm !important;
        padding-top: 2mm !important;
    }
    .sale-invoice-a5 .sale-receipt-totals > div,
    .sale-invoice-a5 .sale-receipt-grand,
    .sale-invoice-a5 .sale-receipt-notes-block p {
        font-size: 9pt !important;
    }

    .sale-receipt:not(.sale-invoice-a5) .sale-receipt-watermark {
        display: none !important;
    }

    .sale-receipt:not(.sale-invoice-a5) .sale-receipt-letterhead {
        margin: 0 0 2mm;
    }
    .sale-receipt:not(.sale-invoice-a5) .sale-receipt-letterhead img {
        max-height: 32mm;
        width: 100%;
        height: auto;
    }

    .sale-receipt-head {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0 0 2mm;
        padding: 0 0 1.5mm;
        border-bottom: 1px dashed #999;
        text-align: center;
    }
    .sale-receipt-brand {
        gap: 4px;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
    .sale-receipt-logo {
        width: 16px;
        height: 16px;
        border-radius: 3px;
    }
    .sale-receipt-head h2 {
        margin: 0;
        font-size: 9pt;
        line-height: 1.2;
    }
    .sale-receipt-head .muted,
    .sale-receipt-business-meta {
        margin: 1px 0 0;
        font-size: 6pt;
        line-height: 1.25;
        gap: 2px 6px;
        justify-content: center;
    }
    .sale-receipt-number {
        margin: 0 0 1px;
        font-size: 8pt;
        color: #000 !important;
        line-height: 1.2;
    }
    .sale-receipt-meta {
        text-align: center;
        font-size: 6pt;
        min-width: 0;
        gap: 1px;
        width: 100%;
    }
    .sale-receipt-meta > div {
        justify-content: center;
        gap: 4px;
    }
    .sale-receipt-meta .badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #888;
        padding: 0 4px;
        font-size: 6pt;
        border-radius: 3px;
    }

    .sale-receipt-parties {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 1.5mm;
        margin: 0 0 2mm;
    }
    .sale-receipt-party {
        padding: 1mm 1.5mm;
        border: 1px dashed #bbb;
        border-radius: 0;
        background: transparent !important;
        text-align: center;
    }
    .sale-receipt-party .stat-label {
        margin-bottom: 1px;
        font-size: 5.5pt;
    }
    .sale-receipt-party > strong {
        margin-bottom: 1px;
        font-size: 7pt;
        line-height: 1.2;
    }
    .sale-receipt-facts {
        gap: 1px;
    }
    .sale-receipt-facts > div,
    .sale-receipt-party .muted {
        font-size: 6pt;
        line-height: 1.25;
    }

    .sale-receipt-table {
        overflow: visible !important;
        margin: 0 0 2mm !important;
    }
    .sale-receipt-items {
        gap: 0;
        margin: 0 0 1.5mm;
    }
    .sale-receipt-item {
        padding: 0.8mm 0;
        border-bottom: 1px dashed #ddd;
        gap: 1.5mm;
    }
    .sale-receipt-items-head {
        gap: 1.5mm;
        font-size: 5.6pt;
        padding-bottom: 0.6mm;
    }
    .sale-receipt-item-name {
        font-size: 6.6pt;
    }
    .sale-receipt-item-qty {
        font-size: 5.8pt;
        color: #555 !important;
    }
    .sale-receipt-item-total {
        font-size: 6pt;
        color: #000 !important;
    }
    .sale-receipt-detail-line {
        font-size: 5.8pt;
        gap: 2mm;
    }
    .sale-receipt-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: 6.2pt;
    }
    .sale-receipt-table th,
    .sale-receipt-table td {
        padding: 0.8mm 0.9mm;
        border-bottom: 1px dotted #ddd;
        line-height: 1.2;
    }
    .sale-receipt-table thead th {
        border-bottom: 1px solid #333;
        background: transparent !important;
        font-size: 5.8pt;
    }
    .sale-col-num { width: 10px; }

    .sale-receipt-footer {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 1.5mm;
        align-items: end;
        margin: 0 !important;
        padding: 1.5mm 0 0;
        border-top: 1px dashed #999;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .sale-receipt-notes-block p {
        font-size: 6pt;
        max-width: none;
        line-height: 1.3;
    }
    .sale-receipt-totals {
        padding: 1mm 1.5mm;
        border: 1px dashed #bbb;
        border-radius: 0;
        background: transparent !important;
        gap: 0.3mm;
        font-size: 6.2pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .sale-receipt-totals > div { gap: 6px; }
    .sale-receipt-grand {
        margin-top: 0.5mm;
        padding-top: 1mm;
        font-size: 7.2pt;
        border-top-color: #333;
    }
    .sale-receipt-grand span,
    .sale-receipt-grand strong { color: #000 !important; }
    .sale-receipt-grand strong { font-size: 8pt; }

    .sale-invoice-a5 .sale-receipt-head {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        justify-content: space-between !important;
        align-items: start !important;
        text-align: start !important;
        border-bottom: 1px solid #000 !important;
    }
    .sale-invoice-a5 .sale-receipt-brand,
    .sale-invoice-a5 .sale-receipt-meta {
        text-align: start !important;
        width: auto !important;
        justify-content: flex-start !important;
    }
    .sale-invoice-a5 .sale-receipt-meta > div,
    .sale-invoice-a5 .sale-receipt-parties,
    .sale-invoice-a5 .sale-receipt-party,
    .sale-invoice-a5 .sale-receipt-facts > div {
        justify-content: flex-start !important;
        text-align: start !important;
    }
    .sale-invoice-a5 .sale-receipt-parties {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .sale-invoice-a5 .sale-receipt-party {
        border: 1px solid #444 !important;
        padding: 2mm !important;
    }
    .sale-invoice-a5 .sale-receipt-party .stat-label,
    .sale-invoice-a5 .sale-receipt-party > strong,
    .sale-invoice-a5 .sale-receipt-facts > div,
    .sale-invoice-a5 .sale-receipt-table th,
    .sale-invoice-a5 .sale-receipt-table td,
    .sale-invoice-a5 .sale-receipt-totals > div,
    .sale-invoice-a5 .sale-receipt-notes-block p {
        font-size: 8.5pt !important;
        line-height: 1.35 !important;
    }
    .sale-invoice-a5 .sale-receipt-number { font-size: 11pt !important; }
    .sale-invoice-a5 .sale-receipt-head { margin: 0 0 2mm !important; padding: 0 0 1.5mm !important; }
    .sale-invoice-a5 .sale-receipt-parties { margin: 0 0 2mm !important; gap: 2mm !important; }
    .sale-invoice-a5 .sale-receipt-party .stat-label,
    .sale-invoice-a5 .sale-receipt-party > strong,
    .sale-invoice-a5 .sale-receipt-facts > div,
    .sale-invoice-a5 .sale-receipt-table th,
    .sale-invoice-a5 .sale-receipt-table td,
    .sale-invoice-a5 .sale-receipt-totals > div,
    .sale-invoice-a5 .sale-receipt-notes-block p {
        font-size: 8pt !important;
        line-height: 1.25 !important;
    }
    .sale-invoice-a5 .sale-receipt-table th,
    .sale-invoice-a5 .sale-receipt-table td {
        border: 1px solid #444 !important;
        padding: 1.6mm 2mm !important;
    }
    .sale-invoice-a5 .sale-receipt-footer {
        display: grid !important;
        grid-template-columns: 1fr 58mm !important;
        margin-top: 3mm !important;
        padding-top: 2mm !important;
        gap: 4mm !important;
        align-items: start !important;
        border-top: 1px solid #000 !important;
    }
    .sale-invoice-a5 .sale-receipt-totals {
        border: 1px solid #000 !important;
        font-size: 9pt !important;
    }
    .sale-invoice-a5 .sale-receipt-grand,
    .sale-invoice-a5 .sale-receipt-grand strong {
        font-size: 11pt !important;
    }
}

.muted, .hint, .muted-block { color: var(--muted); }
.stack { display: grid; gap: 14px; margin-top: 18px; }
.totals-row td { background: rgba(26, 107, 99, 0.08); font-weight: 700; }
.report-range { margin: 0 0 14px; font-size: 14px; }
.pager { margin-top: 16px; }

/* —— Login —— */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    background:
        radial-gradient(800px 400px at 15% 20%, rgba(232, 163, 23, 0.28), transparent 55%),
        radial-gradient(700px 380px at 90% 80%, rgba(15, 92, 86, 0.35), transparent 50%),
        linear-gradient(145deg, #0b3d36 0%, #124f46 48%, #0f5c56 100%);
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
}

.login-card {
    position: relative;
    z-index: 1;
    width: min(440px, 94vw);
    background: rgba(255, 252, 246, 0.96);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: rise 0.55s ease both;
}

.login-card .brand strong {
    color: var(--ink);
    font-size: 1.5rem;
}

.login-card .brand small { color: var(--muted); text-transform: none; letter-spacing: 0; opacity: 1; }

.login-card h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
}

.login-card form { display: grid; gap: 14px; margin-top: 18px; }

.login-card button[type=submit] {
    border: none;
    border-radius: 12px;
    padding: 13px 16px;
    font: inherit;
    font-weight: 800;
    background: linear-gradient(135deg, var(--teal-bright), var(--teal));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(26, 107, 99, 0.3);
}

.hint { margin-top: 18px; font-size: 13px; text-align: center; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .sidebar {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        box-shadow: none;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
    }
    .admin-shell.sidebar-open .sidebar {
        max-height: 70vh;
        opacity: 1;
        padding: 16px;
        overflow: auto;
        width: 100%;
    }
    /* Reset rail styles on mobile when menu is open */
    .admin-shell.sidebar-collapsed.sidebar-open .brand-text,
    .admin-shell.sidebar-collapsed.sidebar-open .nav-label,
    .admin-shell.sidebar-collapsed.sidebar-open .nav-section-toggle span:first-child {
        display: block;
    }
    .admin-shell.sidebar-collapsed.sidebar-open .sidebar nav a .nav-abbr { display: none; }
    .admin-shell.sidebar-collapsed.sidebar-open .sidebar nav a { justify-content: flex-start; }
    .admin-shell.sidebar-collapsed.sidebar-open .sidebar {
        width: 100%;
        padding: 16px;
    }
    .sidebar-toggle { display: none; }
    .sidebar-toggle-mobile {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--ink);
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: var(--shadow);
    }
    .sidebar nav { max-height: none; }
    .content { padding: 20px 16px 32px; }
}

@media (max-width: 700px) {
    .line-item { grid-template-columns: 1fr; }
    .topbar-dropdown-label,
    .topbar-account-text { display: none; }
    .topbar-dropdown-trigger { padding-inline: 8px; gap: 6px; }
    .topbar-lang .topbar-caret { display: none; }
}

/* —— Language switcher (login) —— */
.lang-switcher {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.lang-switcher a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: rgba(244, 247, 246, 0.75);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.lang-switcher a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.lang-switcher a.active {
    background: rgba(232, 163, 23, 0.22);
    border-color: rgba(232, 163, 23, 0.45);
    color: #fff;
}

.lang-switcher-login {
    background: rgba(11, 61, 54, 0.06);
    margin: 0 0 16px;
}

.lang-switcher-login a { color: var(--muted); }
.lang-switcher-login a.active {
    background: rgba(15, 92, 86, 0.12);
    color: var(--teal);
    border-color: rgba(15, 92, 86, 0.25);
}

/* —— RTL (Dari / Pashto) —— */
html[dir="rtl"] body.locale-fa,
html[dir="rtl"] body.locale-ps,
html[dir="rtl"] .locale-fa,
html[dir="rtl"] .locale-ps {
    font-family: var(--font-arabic);
}

html[dir="rtl"] body.locale-fa .topbar h1,
html[dir="rtl"] body.locale-ps .topbar h1,
html[dir="rtl"] body.locale-fa .panel h2,
html[dir="rtl"] body.locale-ps .panel h2,
html[dir="rtl"] body.locale-fa .panel-toolbar h2,
html[dir="rtl"] body.locale-ps .panel-toolbar h2,
html[dir="rtl"] body.locale-fa .stat-card strong,
html[dir="rtl"] body.locale-ps .stat-card strong,
html[dir="rtl"] body.locale-fa .dashboard-stat strong,
html[dir="rtl"] body.locale-ps .dashboard-stat strong,
html[dir="rtl"] body.locale-fa .dashboard-compact-chart h3,
html[dir="rtl"] body.locale-ps .dashboard-compact-chart h3,
html[dir="rtl"] body.locale-fa .dashboard-compact-list-head h3,
html[dir="rtl"] body.locale-ps .dashboard-compact-list-head h3 {
    font-family: var(--font-arabic);
    letter-spacing: 0;
}

html[dir="rtl"] .stat-label,
html[dir="rtl"] .stat-card small,
html[dir="rtl"] .dashboard-stat span,
html[dir="rtl"] label,
html[dir="rtl"] table th {
    text-transform: none;
    letter-spacing: 0;
}

html[dir="rtl"] .admin-shell { direction: rtl; }

html[dir="rtl"] .sidebar {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: -8px 0 32px rgba(12, 31, 36, 0.18);
}

html[dir="rtl"] .sidebar nav a.active {
    box-shadow: inset -3px 0 0 var(--saffron);
}

html[dir="rtl"] .sidebar nav a:hover { transform: translateX(-2px); }

html[dir="rtl"] .topbar,
html[dir="rtl"] .panel-toolbar,
html[dir="rtl"] .topbar-left,
html[dir="rtl"] .topbar-right {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td { text-align: right; }

/* Phone numbers stay LTR (digit order) but align with page language. */
.phone-ltr,
input[name="phone"],
input[name="supplier_phone"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

html[dir="rtl"] .phone-ltr,
html[dir="rtl"] td.phone-ltr,
html[dir="rtl"] input[name="phone"],
html[dir="rtl"] input[name="supplier_phone"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* Stat cards: keep phone below the label (never overlapping). */
.stat-card .phone-stat {
    display: block;
    width: 100%;
    font-size: 1.25rem;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.phone-ltr {
    white-space: nowrap;
}

html[dir="rtl"] .admin-shell.sidebar-collapsed .sidebar nav a:hover::after,
html[dir="rtl"] .admin-shell.sidebar-collapsed .logout-form button:hover::after {
    left: auto;
    right: calc(100% + 10px);
}

html[dir="rtl"] .nav-section-toggle .chevron {
    transform: rotate(45deg) scaleX(-1);
}

html[dir="rtl"] .nav-section.is-collapsed .nav-section-toggle .chevron {
    transform: rotate(-45deg) scaleX(-1);
}

.pos-page .pos-search-field { min-width: 220px; flex: 1; }
.pos-page .pos-empty { margin: 8px 0 0; }

/* —— Retail POS (redesign) —— */
.pos-page {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.pos-page .pos-form {
    display: grid;
    gap: 10px;
}
.pos-page .pos-top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}
.pos-page .pos-sale-scope-head {
    grid-column: 1 / -1;
}
.pos-page .pos-hero {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.pos-page .pos-sale-scope {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.3fr);
    gap: 8px;
    margin: 0;
    align-items: end;
}
.pos-page .pos-sale-scope label,
.pos-page .pos-sale-scope-field,
.pos-page .pos-truck-add {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
}
.pos-page .pos-sale-scope select,
.pos-page .pos-truck-add select {
    min-height: 32px;
    width: 100%;
}
.pos-page .pos-combo {
    position: relative;
}
.pos-page .pos-combo-control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: text;
}
.pos-page .pos-combo-control:focus-within {
    border-color: #0b3d36;
    box-shadow: 0 0 0 2px rgba(11, 61, 54, 0.12);
}
.pos-page .pos-combo-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    text-align: start;
}
.pos-page .pos-combo-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.pos-page .pos-combo-caret {
    flex: none;
    color: #64748b;
    font-size: 0.7rem;
}
.pos-page .pos-combo-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    inset-inline: 0;
    display: grid;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}
.pos-page .pos-combo-panel[hidden] {
    display: none;
}
.pos-page .pos-combo-search {
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pos-page .pos-combo-list {
    display: grid;
    gap: 2px;
    max-height: 220px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.pos-page .pos-combo-list li {
    padding: 6px 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}
.pos-page .pos-combo-list li:hover,
.pos-page .pos-combo-list li.is-active {
    background: #eef2f6;
}
.pos-page .pos-combo-list li.is-selected {
    background: #e2e8f0;
}
.pos-page .pos-combo-list li.is-clear {
    color: #94a3b8;
    font-weight: 500;
}
.pos-page .pos-truck-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pos-page .pos-truck-add-row select { flex: 1; }
@media (max-width: 760px) {
    .pos-page .pos-sale-scope,
    .pos-page .pos-guest-fields {
        grid-template-columns: 1fr;
    }
}
.pos-page .pos-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pos-page .pos-guest-fields[hidden] { display: none; }
.pos-page .pos-guest-fields label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
}
.pos-page .pos-more {
    font-size: 0.78rem;
}
.pos-page .pos-more summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
}
.pos-page .pos-more .pos-meta-grid { margin-top: 8px; }
.pos-page .pos-search-wrap {
    position: relative;
}
.pos-page .pos-search-wrap label {
    display: grid;
    gap: 4px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pos-page .pos-search-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid rgba(15, 92, 86, 0.22);
    border-radius: 12px;
    background: #fff;
}
.pos-page .pos-search-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 92, 86, 0.12);
}
.pos-page .pos-search-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}
.pos-page .pos-suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 36, 40, 0.14);
}
.pos-page .pos-suggestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(20, 36, 40, 0.06);
    background: transparent;
    text-align: inherit;
    cursor: pointer;
    font: inherit;
}
.pos-page .pos-suggestion:last-child { border-bottom: none; }
.pos-page .pos-suggestion:hover,
.pos-page .pos-suggestion.is-active {
    background: rgba(15, 92, 86, 0.08);
}
.pos-page .pos-suggestion-name {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.pos-page .pos-suggestion-meta {
    font-size: 0.75rem;
    color: var(--muted);
}
.pos-page .pos-suggestion-price {
    font-weight: 800;
    color: var(--teal);
    white-space: nowrap;
}
.pos-page .pos-suggestion-stock {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}
.pos-page .pos-suggestion-empty {
    padding: 14px 12px;
    color: var(--muted);
    font-size: 0.86rem;
}
.pos-page .pos-truck-hint {
    margin: 0 0 10px;
    font-size: 0.78rem;
}
.pos-page .pos-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}
.pos-page .pos-meta-grid label {
    display: grid;
    gap: 4px;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pos-page .pos-meta-grid input:not([type="checkbox"]),
.pos-page .pos-meta-grid select {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 0.88rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.pos-page .pos-meta-compact {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
    align-items: end;
}
.pos-page .pos-meta-compact label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    gap: 2px;
}
.pos-page .pos-meta-compact input:not([type="checkbox"]),
.pos-page .pos-meta-compact select {
    min-height: 32px;
    padding: 3px 8px;
    font-size: 0.86rem;
    border-radius: 8px;
}
.pos-page .pos-credit-inline {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(20, 36, 40, 0.02);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.pos-page .pos-credit-inline input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0;
    accent-color: var(--teal);
}
.pos-page .pos-credit-inline.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.pos-page .pos-credit-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: end;
}
.pos-page .pos-credit-check {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(20, 36, 40, 0.02);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.pos-page .pos-credit-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0;
    cursor: pointer;
    accent-color: var(--teal);
}
.pos-page .pos-credit-check.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.pos-page .pos-credit-check.is-disabled input {
    cursor: not-allowed;
}
.pos-page .pos-credit-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
}
.pos-page .pos-cart-panel {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.pos-page .pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.pos-page .pos-cart-head h2 {
    margin: 0;
    font-size: 1rem;
}
.pos-page .pos-cols {
    display: none;
}
.pos-page .pos-line {
    display: grid;
    grid-template-columns: minmax(72px, 0.7fr) minmax(120px, 1.1fr) minmax(140px, 1.05fr) minmax(190px, 1.25fr) 88px 36px;
    gap: 8px;
    align-items: start;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.7);
}
.pos-page .pos-line > .pos-product-cell,
.pos-page .pos-line > .pos-field-truck,
.pos-page .pos-line > .pos-line-total-wrap,
.pos-page .pos-line > .pos-remove-wrap {
    display: grid;
    grid-template-rows: 18px 36px;
    gap: 4px;
    min-width: 0;
}
.pos-page .pos-field-egg,
.pos-page .pos-field-price {
    min-width: 0;
}
.pos-page .sale-price[readonly] {
    background: #f4f1ea;
}
.pos-page .pos-egg-box {
    display: grid;
    grid-template-rows: 18px 36px;
    gap: 4px;
    margin: 0;
    min-width: 0;
}
.pos-page .pos-field-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}
.pos-page .pos-field-truck .pos-field-label,
.pos-page .pos-product-cell .pos-field-label {
    justify-content: flex-start;
}
.pos-page .pos-input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(15, 92, 86, 0.22);
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pos-page .pos-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 92, 86, 0.12);
}
.pos-page .pos-egg-qty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.pos-page .pos-egg-qty input {
    width: 100%;
    min-width: 0;
    text-align: center;
}
.pos-page .pos-truck-remain {
    display: none;
}
.pos-page .pos-input-select.sale-truck {
    font-weight: 700;
}
.pos-page .pos-input-select {
    padding-inline: 10px 30px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f5c56' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}
html[dir="rtl"] .pos-page .pos-input-select {
    background-position: left 10px center;
}
.pos-page .pos-qty-control {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(15, 92, 86, 0.22);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pos-page .pos-qty-control:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 92, 86, 0.12);
}
.pos-page .pos-qty-btn {
    flex: 0 0 36px;
    border: none;
    background: rgba(15, 92, 86, 0.07);
    color: var(--teal);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pos-page .pos-qty-btn:hover {
    background: rgba(15, 92, 86, 0.14);
}
.pos-page .pos-qty-btn:active {
    background: rgba(15, 92, 86, 0.2);
}
.pos-page .pos-input-qty {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 4px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pos-page .pos-input-qty:focus {
    box-shadow: none;
}
.pos-page .pos-input-price {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.pos-page .pos-input[type="number"]::-webkit-inner-spin-button,
.pos-page .pos-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pos-page .pos-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.pos-page .pos-product-cell {
    min-width: 0;
}
.pos-page .pos-product-name {
    display: flex;
    align-items: center;
    height: 36px;
    min-height: 36px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-page .pos-product-sku {
    display: none;
}
.pos-page .pos-line-total {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0 8px;
    font-weight: 800;
    text-align: center;
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.06);
    box-sizing: border-box;
}
.pos-page .pos-remove-line {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pos-page .pos-empty {
    margin: 10px 0 4px;
    padding: 18px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
}
.pos-page .pos-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 246, 0.98));
}
.pos-page .pos-totals {
    display: grid;
    gap: 6px;
    min-width: 240px;
}
.pos-page .pos-totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.9rem;
}
.pos-page .pos-totals-row strong {
    font-size: 1rem;
}
.pos-page .pos-totals-grand {
    padding-top: 6px;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 800;
}
.pos-page .pos-totals-grand strong {
    font-size: 1.35rem;
    color: var(--teal);
}
.pos-page .pos-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pos-page #pos-pay {
    min-width: 180px;
    min-height: 44px;
    font-size: 1rem;
    font-weight: 800;
}
@media (max-width: 900px) {
    .pos-page .pos-line {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .pos-page .pos-product-cell,
    .pos-page .pos-field-truck,
    .pos-page .pos-field-egg {
        grid-column: 1 / -1;
    }
    .pos-page .pos-remove-line {
        width: 100%;
    }
}

/* —— Supplier detail (dense) —— */
.supplier-detail {
    display: grid;
    gap: 8px;
}
.supplier-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.supplier-back {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}
.supplier-back:hover {
    text-decoration: underline;
}
.supplier-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.supplier-detail .panel {
    padding: 10px 12px;
}
.supplier-detail .panel h2 {
    margin: 0 0 6px;
    font-size: 0.88rem;
}
.supplier-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.85fr);
    gap: 10px 14px;
    align-items: start;
}
.supplier-hero-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.supplier-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.supplier-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(15, 92, 86, 0.16);
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
}
.supplier-icon svg {
    width: 18px;
    height: 18px;
}
.supplier-meta {
    flex: 1;
    min-width: 0;
}
.supplier-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.supplier-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.03);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
}
.supplier-chip-status.is-active {
    border-color: rgba(15, 92, 86, 0.25);
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
}
.supplier-chip-status.is-inactive {
    border-color: rgba(120, 80, 40, 0.25);
    background: rgba(120, 80, 40, 0.08);
    color: #8a5a20;
}
.supplier-address,
.supplier-notes {
    margin: 4px 0 0;
    font-size: 0.76rem;
    line-height: 1.3;
}
.supplier-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.supplier-stat {
    display: grid;
    gap: 1px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 252, 246, 0.85);
}
.supplier-stat-focus {
    border-color: rgba(15, 92, 86, 0.22);
    background: rgba(15, 92, 86, 0.07);
}
.supplier-stat span {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.supplier-stat strong {
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.supplier-katha {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 252, 246, 0.65);
}
.supplier-katha h2 {
    margin: 0 0 4px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem !important;
}
.supplier-katha-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.supplier-katha-rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.76rem;
}
.supplier-katha-rows li span {
    color: var(--muted);
}
.supplier-katha-rows li strong {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.supplier-katha-closing {
    margin-top: 2px;
    padding-top: 4px !important;
    border-top: 1px solid var(--border);
}
.supplier-katha-closing span,
.supplier-katha-closing strong {
    font-weight: 800 !important;
    color: var(--ink) !important;
}
.supplier-form-panel {
    min-width: 0;
}
.supplier-form-panel h2 {
    margin: 0 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.supplier-form-grid {
    display: grid;
    gap: 6px;
    align-items: end;
}
.supplier-form-grid-payment {
    grid-template-columns: minmax(90px, 0.9fr) minmax(140px, 1.3fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(120px, 1.2fr) auto;
}
.supplier-form label {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.supplier-form input,
.supplier-form select {
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 500;
}
.supplier-form input:focus,
.supplier-form select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.supplier-form-submit {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.supplier-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.supplier-table-panel {
    min-width: 0;
}
.supplier-table-panel h2 {
    margin: 0 0 4px !important;
}
.supplier-detail .pagination-wrap {
    margin-top: 6px;
}
.supplier-detail .pagination-wrap.pagination-compact {
    margin-top: 4px;
}
@media (max-width: 1100px) {
    .supplier-hero {
        grid-template-columns: 1fr;
    }
    .supplier-tables {
        grid-template-columns: 1fr;
    }
    .supplier-form-grid-payment {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .supplier-form-notes {
        grid-column: 1 / -1;
    }
    .supplier-form-submit {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
@media (max-width: 700px) {
    .supplier-stats,
    .supplier-form-grid-payment {
        grid-template-columns: 1fr 1fr;
    }
    .supplier-form-submit {
        justify-content: stretch;
    }
    .supplier-form-submit .btn {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .supplier-stats,
    .supplier-form-grid-payment {
        grid-template-columns: 1fr;
    }
}

/* —— Partner detail —— */
.partner-detail .partner-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.partner-detail .supplier-stat strong.is-negative,
.partner-detail .supplier-katha-closing strong.is-negative,
.partner-detail td.is-negative {
    color: #a13a2a;
}
.partner-detail td.is-positive {
    color: #0f5c56;
}
.partner-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}
.partner-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partner-form-grid .full {
    grid-column: 1 / -1;
}
.partner-detail .supplier-form-submit {
    margin-top: 8px;
}
.partner-goods-fields {
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.03);
}
.partner-goods-hint {
    margin: 6px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
}
@media (max-width: 1100px) {
    .partner-action-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .partner-detail .partner-stats {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .partner-detail .partner-stats,
    .partner-form-grid {
        grid-template-columns: 1fr;
    }
}

/* —— Purchase form (compact) —— */
.purchase-form-page {
    display: grid;
    gap: 10px;
}
.purchase-form-page .panel {
    padding: 12px 14px;
    overflow: visible;
}
.purchase-form-back {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
}
.purchase-form-back a {
    color: var(--teal);
    text-decoration: none;
}
.purchase-form-back a:hover {
    text-decoration: underline;
}
.purchase-form {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 8;
}
.purchase-lines-panel {
    overflow: visible;
    position: relative;
    z-index: 5;
}
.purchase-form-footer {
    position: relative;
    z-index: 1;
}
.purchase-quick-supplier {
    position: relative;
    z-index: 0;
}
.purchase-line:focus-within {
    position: relative;
    z-index: 30;
}
.purchase-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
.purchase-meta-grid label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.purchase-meta-grid input,
.purchase-meta-grid select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.purchase-meta-grid input:focus,
.purchase-meta-grid select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.purchase-meta-wide {
    grid-column: 1 / -1;
}
.purchase-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.purchase-lines-head h2 {
    margin: 0;
    font-size: 0.95rem;
}
.purchase-lines-cols,
.purchase-line {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 108px 96px 108px 38px;
    gap: 8px;
    align-items: center;
}
.purchase-lines-cols.has-sale-price,
.purchase-line.has-sale-price {
    grid-template-columns: minmax(0, 2fr) 96px 88px 96px 96px 38px;
}
.purchase-lines-cols {
    display: none;
}
.purchase-line {
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.7);
}
.purchase-line label {
    display: grid;
    gap: 3px;
    margin: 0;
    min-width: 0;
}
.purchase-line-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}
.purchase-line input,
.purchase-line select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(15, 92, 86, 0.2);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
}
.purchase-product-field {
    min-width: 0;
}
.purchase-product-picker {
    position: relative;
    z-index: 2;
}
.purchase-product-search {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(15, 92, 86, 0.2);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
}
.purchase-product-search:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.purchase-product-suggestions {
    position: absolute;
    z-index: 80;
    top: calc(100% + 4px);
    inset-inline: 0;
    min-width: 220px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 36, 40, 0.14);
}
.purchase-product-suggestions[hidden] {
    display: none !important;
}
.purchase-suggestion {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid rgba(20, 36, 40, 0.06);
    background: transparent;
    text-align: inherit;
    cursor: pointer;
    font: inherit;
}
.purchase-suggestion:last-child { border-bottom: none; }
.purchase-suggestion:hover,
.purchase-suggestion.is-create {
    background: rgba(15, 92, 86, 0.08);
}
.purchase-suggestion.is-create {
    font-weight: 700;
    color: var(--teal);
}
.purchase-suggestion-name {
    font-weight: 700;
    line-height: 1.3;
}
.purchase-suggestion-meta,
.purchase-suggestion-empty {
    font-size: 0.74rem;
    color: var(--muted);
}
.purchase-suggestion-empty {
    padding: 10px;
}
.purchase-line input:focus,
.purchase-line select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.purchase-remove-line {
    align-self: end;
    min-width: 34px;
    padding-inline: 0;
}
.purchase-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.purchase-form-footer-main {
    min-width: 0;
}
.purchase-draft-check {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.82rem !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-soft);
}
.purchase-form-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.purchase-quick-supplier {
    padding: 10px 14px;
}
.purchase-quick-supplier summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--teal);
    list-style: none;
}
.purchase-quick-supplier summary::-webkit-details-marker {
    display: none;
}
.purchase-quick-supplier-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
    margin-top: 10px;
}
.purchase-quick-supplier-form label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}
.purchase-quick-supplier-form input {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
}
@media (max-width: 1100px) {
    .purchase-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .purchase-lines-cols { display: none; }
    .purchase-line,
    .purchase-line.has-sale-price {
        grid-template-columns: 1fr 1fr;
    }
    .purchase-line label:first-child { grid-column: 1 / -1; }
    .purchase-line-label { display: block; }
    .purchase-remove-line { grid-column: 1 / -1; width: 100%; }
    .purchase-meta-grid,
    .purchase-quick-supplier-form {
        grid-template-columns: 1fr;
    }
    .purchase-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .purchase-form-footer-actions .btn {
        flex: 1;
    }
}

/* —— Catalog pages (units, categories, …) —— */
.catalog-page,
.units-page,
.categories-page {
    display: grid;
    gap: 14px;
}
.catalog-intro,
.units-intro,
.categories-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.06), transparent 55%),
        var(--card);
}
.catalog-intro-copy h2,
.units-intro-copy h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.catalog-intro-copy .muted,
.units-intro-copy .muted {
    margin: 0;
    font-size: 0.85rem;
    max-width: 52ch;
}
.catalog-intro-actions,
.units-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.catalog-stats,
.units-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.catalog-name-cell,
.unit-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.catalog-name-stack {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.catalog-sub {
    font-size: 0.76rem;
    line-height: 1.3;
}
.catalog-icon,
.unit-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.category-icon {
    font-size: 0.82rem;
}
.catalog-empty,
.units-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 8px 0;
}
.catalog-empty p,
.units-empty p {
    margin: 0;
}
.units-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.category-show-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
}
.category-description-panel {
    padding: 12px 14px;
}
.categories-form-panel,
.units-form-panel {
    max-width: 720px;
}
.catalog-active-toggle,
.units-active-toggle {
    align-self: end;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.8);
}
.catalog-form-meta,
.units-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 92, 86, 0.05);
}

/* —— Units catalog —— */
.units-page {
    display: grid;
    gap: 14px;
}
.units-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.06), transparent 55%),
        var(--card);
}
.units-intro-copy h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.units-intro-copy .muted {
    margin: 0;
    font-size: 0.85rem;
    max-width: 52ch;
}
.units-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.units-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.unit-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.unit-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 92, 86, 0.08);
    color: var(--teal);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.unit-symbol-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 92, 86, 0.1);
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.units-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 8px 0;
}
.units-empty p {
    margin: 0;
}
.units-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.actions-cell-compact {
    gap: 6px;
}
.actions-cell-compact .btn-small {
    padding: 4px 10px;
    font-size: 0.76rem;
}
.catalog-form-page {
    display: grid;
    gap: 12px;
}
.units-form-panel {
    max-width: 720px;
}
.units-form .field-hint,
.categories-form .field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}
.units-active-toggle {
    align-self: end;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.8);
}
.units-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 92, 86, 0.05);
}

/* —— Products catalog —— */
.products-page {
    display: grid;
    gap: 14px;
}
.products-stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.product-icon {
    font-size: 0.82rem;
}
.product-icon-lg {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}
.product-name-cell {
    min-width: 180px;
}
.product-row-low-stock {
    background: rgba(245, 158, 11, 0.05);
}
.product-stock-qty.is-low {
    color: var(--warning);
    font-weight: 700;
}
.product-stock-unit {
    display: inline-block;
    margin-inline-start: 4px;
    font-size: 0.76rem;
}
.product-low-badge {
    display: inline-block;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.toolbar-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
}
.product-show-page {
    display: grid;
    gap: 14px;
}
.product-show-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.product-show-hero {
    display: grid;
    gap: 18px;
    padding: 18px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.08), transparent 48%),
        linear-gradient(180deg, rgba(255, 243, 214, 0.45), transparent 70%),
        var(--card);
}
.product-show-hero-grid {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.product-show-media {
    width: 148px;
}
.product-show-image,
.product-show-image-fallback {
    width: 148px;
    height: 148px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(11, 61, 54, 0.08);
}
.product-show-image-fallback {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(15, 92, 86, 0.16), rgba(232, 163, 23, 0.18));
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 700;
}
.product-show-hero-copy {
    min-width: 0;
}
.product-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.product-show-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}
.product-show-meta {
    margin: 0 0 8px;
    font-size: 0.84rem;
}
.product-show-meta span {
    display: inline;
}
.product-show-desc {
    margin: 0 0 14px;
    color: var(--muted);
    max-width: 46rem;
    line-height: 1.55;
}
.product-show-stock-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 92, 86, 0.14);
    background: rgba(15, 92, 86, 0.06);
}
.product-show-stock-banner.is-low {
    border-color: rgba(196, 137, 15, 0.28);
    background: rgba(255, 243, 214, 0.7);
}
.product-show-stock-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.product-show-stock-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}
.product-show-stock-mixed {
    display: block;
}
.product-show-stock-value small {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
}
.product-show-stock-alt {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
}
.product-show-stock-meta {
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: end;
}
.product-show-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.product-price-chip {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.9);
}
.product-price-chip span {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.product-price-chip strong {
    font-size: 1.05rem;
    color: var(--ink);
}
.product-price-chip em {
    font-style: normal;
    font-size: 0.78rem;
}
.product-price-chip-accent {
    border-color: rgba(232, 163, 23, 0.35);
    background: linear-gradient(180deg, rgba(255, 243, 214, 0.9), rgba(255, 252, 246, 0.95));
}
.product-price-chip-stock strong {
    font-size: 0.95rem;
}
.product-dual-unit-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}
.product-dual-unit-copy h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.product-dual-unit-copy .muted {
    margin: 0;
}
.product-dual-unit-formula {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.product-dual-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(15, 92, 86, 0.06);
    font-weight: 700;
    color: var(--ink);
}
.product-dual-pill.is-accent {
    border-color: rgba(232, 163, 23, 0.35);
    background: rgba(232, 163, 23, 0.14);
}
.product-dual-eq {
    font-weight: 800;
    color: var(--muted);
}
.product-movement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 0 2px 6px;
}
.product-movement-item {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 252, 246, 0.75);
}
.product-movement-item span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}
.product-movement-item strong {
    font-size: 1.05rem;
    color: var(--ink);
}
.product-movement-item.is-remaining {
    border-color: rgba(15, 92, 86, 0.22);
    background: rgba(15, 92, 86, 0.08);
}
.product-detail-stats,
.product-movement-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.product-movement-stats {
    padding: 0 2px 4px;
}
.product-danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-color: rgba(185, 28, 28, 0.15);
    background: rgba(254, 242, 242, 0.35);
}
.product-danger-copy {
    min-width: 0;
}
.product-danger-copy strong {
    display: block;
    margin-bottom: 2px;
}
.product-danger-copy .muted {
    margin: 0;
    font-size: 0.84rem;
}
.product-form-page .panel-product-form {
    max-width: none;
}
@media (max-width: 760px) {
    .product-show-hero-grid {
        grid-template-columns: 1fr;
    }
    .product-show-media,
    .product-show-image,
    .product-show-image-fallback {
        width: 100%;
        max-width: 220px;
    }
    .product-show-stock-meta {
        text-align: start;
    }
}

/* —— Products catalog —— */
.products-page {
    display: grid;
    gap: 14px;
}
.products-stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.product-icon {
    font-size: 0.82rem;
}
.product-icon-lg {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}
.product-name-cell {
    min-width: 180px;
}
.product-row-low-stock {
    background: rgba(245, 158, 11, 0.05);
}
.product-stock-qty.is-low {
    color: var(--warning);
    font-weight: 700;
}
.product-stock-unit {
    display: inline-block;
    margin-inline-start: 4px;
    font-size: 0.76rem;
}
.product-low-badge {
    display: inline-block;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.toolbar-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
}
.product-show-page {
    display: grid;
    gap: 14px;
}
.product-show-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.product-show-hero {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-inline-start: 4px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.06), transparent 55%),
        var(--card);
}
.product-show-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.product-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.product-show-meta {
    margin: 0;
    font-size: 0.82rem;
}
.product-show-meta span {
    display: inline;
}
.product-show-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.product-price-chip {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.85);
}
.product-price-chip span {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.product-price-chip strong {
    font-size: 1rem;
}
.product-price-chip-stock strong {
    font-size: 0.95rem;
}
.product-detail-stats,
.product-movement-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.product-movement-stats {
    padding: 0 2px 4px;
}
.product-danger-zone {
    padding: 12px 14px;
    border-color: rgba(185, 28, 28, 0.15);
    background: rgba(254, 242, 242, 0.35);
}
.product-form-page .panel-product-form {
    max-width: none;
}


/* =========================================================
   Compact density + standard typography
   ========================================================= */

body {
    font-size: var(--text-base);
    line-height: 1.45;
}

.sidebar {
    width: 260px;
    padding: 12px 10px 12px;
}

.brand {
    gap: 8px;
    margin-bottom: 10px;
    padding: 4px 2px 10px;
}

.brand-logo {
    width: 36px !important;
    height: 36px !important;
}

.brand-text strong {
    font-size: var(--text-md) !important;
}

.brand-text small {
    font-size: var(--text-xs) !important;
}

.sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.nav-section-toggle {
    padding: 8px 10px 6px !important;
    font-size: var(--text-md) !important;
}

.sidebar nav a {
    padding: 8px 10px !important;
    font-size: var(--text-md) !important;
    gap: 8px !important;
    border-radius: 8px !important;
}

.sidebar nav a .nav-abbr {
    width: 24px;
    height: 24px;
    font-size: var(--text-xs) !important;
}

.nav-subgroup-label {
    padding: 6px 8px 2px !important;
    font-size: var(--text-sm) !important;
}

.logout-form {
    margin-top: 8px !important;
    padding-top: 8px !important;
}

.logout-form button {
    padding: 8px 10px !important;
    font-size: var(--text-md) !important;
}

.content {
    padding: 14px 18px 24px;
}

.topbar {
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.topbar h1 {
    margin: 0 0 2px;
    font-size: var(--text-xl);
    line-height: 1.25;
}

.topbar p {
    font-size: var(--text-sm);
    line-height: 1.4;
    max-width: 36rem;
}

.topbar-dropdown-trigger {
    gap: 6px;
    padding: 4px 10px 4px 6px;
    min-height: var(--control-h);
    box-shadow: 0 2px 8px rgba(11, 61, 54, 0.06);
}

.topbar-icon,
.topbar-avatar {
    width: 26px !important;
    height: 26px !important;
}

.topbar-dropdown-label {
    font-size: var(--text-xs) !important;
}

.topbar-account-text strong,
.topbar-dropdown-trigger strong {
    font-size: var(--text-sm) !important;
}

.topbar-account-text small {
    font-size: var(--text-xs) !important;
}

.topbar-dropdown-menu a,
.topbar-dropdown-menu button {
    font-size: var(--text-sm) !important;
}

.stats,
.stat-grid,
.dashboard-compact-stats,
.finance-summary-grid {
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.stat-card,
.dashboard-stat,
.stat-card-compact {
    border-radius: 10px !important;
    padding: 10px 12px !important;
    box-shadow: var(--shadow) !important;
}

.stat-card:hover,
.dashboard-stat:hover {
    transform: translateY(-1px) !important;
}

.stat-card strong,
.dashboard-stat strong {
    font-size: var(--text-stat) !important;
    margin: 4px 0 2px !important;
}

.stat-label,
.stat-card small,
.dashboard-stat span,
.dashboard-stat small {
    font-size: var(--text-sm) !important;
    letter-spacing: 0.02em !important;
}

.panels {
    gap: 10px !important;
}

.panel {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow) !important;
}

.panel h2,
.panel-toolbar h2,
.finance-micro-list-title,
.supplier-form-panel h2,
.supplier-table-panel h2,
.saraf-action-panel h3 {
    margin: 0 0 8px !important;
    font-size: var(--text-lg) !important;
}

.panel-toolbar {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.toolbar {
    gap: 6px !important;
    margin-bottom: 10px !important;
}

.form-grid {
    gap: 8px !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

label {
    gap: 3px !important;
    font-size: var(--text-sm) !important;
}

label input,
label select,
label textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.toolbar input,
.toolbar select,
.dashboard-date-fields input,
input,
select,
textarea {
    border-radius: 8px !important;
    padding: 7px 10px !important;
    min-height: var(--control-h);
    font-size: var(--text-base) !important;
}

/* Form controls fall back to the browser default font, which clips Persian glyphs —
   inherit the app font and give the script enough line box to render fully. */
input,
select,
textarea,
button {
    font-family: inherit;
    line-height: 1.5;
}

.btn,
.dashboard-compact-btn,
a.btn {
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: var(--text-sm) !important;
    min-height: var(--control-h);
}

.btn-small,
.dashboard-compact-btn {
    padding: 6px 10px !important;
    font-size: var(--text-sm) !important;
}

table {
    font-size: var(--text-base) !important;
}

table th,
table td {
    padding: 7px 9px !important;
    line-height: 1.35 !important;
}

table th {
    font-size: var(--text-sm) !important;
    letter-spacing: 0.01em;
}

.table-wrap table {
    min-width: 560px;
}

.muted,
.hint,
.finance-journal-intro,
.shipment-field-note {
    font-size: var(--text-sm) !important;
    line-height: 1.4 !important;
}

.flash,
.alert {
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    font-size: var(--text-sm) !important;
}

.dashboard-compact-top {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
}

.dashboard-compact-bar {
    gap: 8px !important;
}

.dashboard-compact-actions {
    gap: 6px !important;
}

.dashboard-compact-main,
.dashboard-compact-bottom {
    gap: 10px !important;
}

.dashboard-compact-chart h3,
.dashboard-compact-list-head h3 {
    font-size: var(--text-md) !important;
    margin: 0 0 6px !important;
}

.dashboard-compact-chart-wrap {
    min-height: 160px !important;
}

.dashboard-compact-list li,
.finance-micro-rows li a,
.dashboard-kpi-label {
    font-size: var(--text-sm) !important;
}

.dashboard-kpi-value strong {
    font-size: var(--text-base) !important;
}

.dashboard-kpi-value small {
    font-size: var(--text-xs) !important;
}

.dashboard-compact-list li,
.finance-micro-rows li a {
    padding: 6px 0 !important;
}

.reports-hub-panel {
    padding: 10px 12px !important;
}

.reports-hub-grid {
    gap: 8px !important;
}

.reports-hub-grid .finance-micro-list {
    padding: 8px 10px !important;
}

.pos-layout,
.pos-shell,
.sale-pos {
    gap: 10px !important;
}

.badge,
.chip,
.status-pill {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
}

.pagination,
.pager {
    gap: 4px !important;
    margin-top: 10px !important;
}

.pagination a,
.pagination span,
.pager a,
.pager span {
    padding: 4px 8px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
}

.login-page .login-card,
.login-card {
    padding: 18px 20px !important;
    border-radius: 12px !important;
    max-width: 380px;
}

.login-card h1 {
    font-size: var(--text-xl) !important;
    margin-bottom: 6px !important;
}

body.locale-fa .topbar h1,
body.locale-ps .topbar h1 {
    letter-spacing: 0;
}

@media (max-width: 900px) {
    .content {
        padding: 12px 12px 20px;
    }

    .sidebar {
        width: min(86vw, 260px);
    }

    .topbar h1 {
        font-size: 1.2rem;
    }
}

/* —— Product show (dense polish) —— */
.product-show-page {
    display: grid !important;
    gap: 8px !important;
}
.product-show-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px !important;
}
.product-show-back {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}
.product-show-back:hover { text-decoration: underline; }
.product-show-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.product-show-actions .inline-form { display: inline; margin: 0; }
.product-show-page .panel { padding: 10px 12px !important; }
.product-show-hero {
    display: grid !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-inline-start: 3px solid var(--teal-bright);
    background:
        linear-gradient(135deg, rgba(22, 122, 111, 0.07), transparent 52%),
        linear-gradient(180deg, rgba(255, 243, 214, 0.28), transparent 72%),
        var(--card) !important;
}
.product-show-hero-grid {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) minmax(160px, 0.85fr) !important;
    gap: 12px !important;
    align-items: start;
}
.product-show-media { width: 88px !important; }
.product-show-image,
.product-show-image-fallback {
    width: 88px !important;
    height: 88px !important;
    border-radius: 12px !important;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(11, 61, 54, 0.08);
}
.product-show-image-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(15, 92, 86, 0.16), rgba(232, 163, 23, 0.18));
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.8rem !important;
    font-weight: 700;
}
.product-show-hero-copy { min-width: 0; }
.product-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px !important;
}
.product-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(20, 36, 40, 0.03);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-soft);
}
.product-show-title {
    margin: 0 0 4px !important;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}
.product-show-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 !important;
    font-size: 0.76rem !important;
}
.product-show-desc {
    margin: 6px 0 0 !important;
    color: var(--muted);
    max-width: 40rem;
    font-size: 0.8rem;
    line-height: 1.4;
}
.product-show-stock-card {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 92, 86, 0.16);
    background: rgba(15, 92, 86, 0.07);
    min-width: 0;
}
.product-show-stock-card.is-low {
    border-color: rgba(196, 137, 15, 0.3);
    background: rgba(255, 243, 214, 0.75);
}
.product-show-stock-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
}
.product-show-stock-value {
    font-family: var(--font-display);
    font-size: 1.15rem !important;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}
.product-show-stock-alt { font-size: 0.74rem; }
.product-show-stock-meta {
    display: grid;
    gap: 1px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(11, 61, 54, 0.08);
    font-size: 0.7rem;
    color: var(--muted);
    text-align: start !important;
}
.product-show-prices {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 6px !important;
}
.product-price-chip {
    display: grid;
    gap: 1px;
    padding: 8px 10px !important;
    border: 1px solid var(--border);
    border-radius: 8px !important;
    background: rgba(255, 252, 246, 0.9);
}
.product-price-chip span {
    font-size: 0.62rem !important;
    font-weight: 700;
    color: var(--muted);
    text-transform: none !important;
    letter-spacing: 0.02em;
}
.product-price-chip strong {
    font-size: 0.95rem !important;
    color: var(--ink);
    line-height: 1.2;
}
.product-price-chip em {
    font-style: normal;
    font-size: 0.7rem;
    color: var(--muted);
}
.product-price-chip-accent {
    border-color: rgba(232, 163, 23, 0.35);
    background: linear-gradient(180deg, rgba(255, 243, 214, 0.9), rgba(255, 252, 246, 0.95)) !important;
}
.product-dual-unit-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    font-size: 0.78rem;
}
.product-dual-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px !important;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(15, 92, 86, 0.06);
    font-weight: 700;
    font-size: 0.76rem;
    color: var(--ink);
}
.product-dual-pill.is-accent {
    border-color: rgba(232, 163, 23, 0.35);
    background: rgba(232, 163, 23, 0.14);
}
.product-dual-eq { font-weight: 800; color: var(--muted); }
.product-show-section h2 {
    margin: 0 0 6px !important;
    font-size: 0.88rem !important;
}
.product-show-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}
.product-show-section-head h2 { margin: 0 !important; }
.product-movement-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
}
.product-movement-item {
    display: grid;
    gap: 2px !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border);
    background: rgba(255, 252, 246, 0.8);
}
.product-movement-item span {
    font-size: 0.64rem !important;
    font-weight: 700;
    color: var(--muted);
}
.product-movement-item strong {
    font-size: 0.92rem !important;
    color: var(--ink);
    line-height: 1.2;
}
.product-movement-item.is-remaining {
    border-color: rgba(15, 92, 86, 0.22);
    background: rgba(15, 92, 86, 0.08);
}
.product-show-empty {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding: 6px 0;
}
.product-show-empty p { margin: 0; }
.product-danger-zone {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-color: rgba(185, 28, 28, 0.15);
    background: rgba(254, 242, 242, 0.35);
}
.product-danger-copy strong {
    display: block;
    margin-bottom: 1px;
    font-size: 0.82rem;
}
.product-danger-copy .muted {
    margin: 0;
    font-size: 0.74rem !important;
}
@media (max-width: 900px) {
    .product-show-hero-grid {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }
    .product-show-stock-card { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .product-show-hero-grid { grid-template-columns: 1fr !important; }
    .product-show-media,
    .product-show-image,
    .product-show-image-fallback {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
    }
}

/* —— Shipment create/edit form (compact) —— */
.shipment-form-page {
    display: grid;
    gap: 6px;
}
.shipment-form {
    display: grid;
    gap: 6px;
}
.shipment-form-compact .shipment-form-panel {
    padding: 8px 10px !important;
}
.shipment-form-compact .shipment-form-panel h2 {
    margin: 0 !important;
    padding: 0;
    border: 0;
    font-size: 0.82rem !important;
    white-space: nowrap;
}
.shipment-form-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}
.shipment-form-hint {
    margin: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.3;
}
.shipment-form-hint-inline {
    flex: 1;
    min-width: 120px;
}
.shipment-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
}
.shipment-grid-deal,
.shipment-grid-route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shipment-form-grid label,
.shipment-partner-form label,
.shipment-qty-row label {
    display: grid;
    gap: 1px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.01em;
}
.shipment-form-grid input,
.shipment-form-grid select,
.shipment-partner-form input,
.shipment-qty-row input {
    width: 100%;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #fff;
}
.shipment-form-grid input:focus,
.shipment-form-grid select:focus,
.shipment-partner-form input:focus,
.shipment-qty-row input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15, 92, 86, 0.1);
}
.shipment-form-wide {
    grid-column: 1 / -1;
}
.shipment-partner-quick {
    margin-top: 0;
}
.shipment-partner-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    align-items: end;
}
.shipment-partner-submit {
    display: flex;
    align-items: flex-end;
}
.shipment-live-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(15, 92, 86, 0.16);
    border-radius: 8px;
    background: linear-gradient(180deg, #f7fffc 0%, #eef8f5 100%);
    box-shadow: 0 1px 0 rgba(15, 92, 86, 0.06);
}
.shipment-live-chip {
    display: grid;
    gap: 0;
    min-width: 88px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 92, 86, 0.1);
}
.shipment-live-chip span {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
}
.shipment-live-chip strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}
.shipment-live-chip-accent {
    background: rgba(15, 92, 86, 0.1);
    border-color: rgba(15, 92, 86, 0.22);
}
.shipment-live-chip-accent strong {
    color: var(--teal);
}
.shipment-live-actions {
    margin-inline-start: auto;
    display: flex;
    gap: 5px;
    align-items: center;
}
.shipment-qty-panel {
    background: #fffef9;
}
.shipment-qty-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(180px, 1.6fr);
    gap: 6px;
    align-items: end;
}
.shipment-qty-result {
    display: grid;
    gap: 1px;
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 92, 86, 0.07);
    border: 1px dashed rgba(15, 92, 86, 0.22);
    align-content: center;
}
.shipment-qty-result span {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-qty-result strong {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
@media (max-width: 980px) {
    .shipment-form-grid,
    .shipment-grid-deal,
    .shipment-grid-route {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .shipment-qty-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shipment-qty-result {
        grid-column: 1 / -1;
    }
}
@media (max-width: 700px) {
    .shipment-form-grid,
    .shipment-grid-deal,
    .shipment-grid-route,
    .shipment-partner-form,
    .shipment-qty-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shipment-partner-submit {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .shipment-live-actions {
        width: 100%;
        margin-inline-start: 0;
        justify-content: flex-end;
    }
}
@media (max-width: 480px) {
    .shipment-form-grid,
    .shipment-grid-deal,
    .shipment-grid-route,
    .shipment-partner-form,
    .shipment-qty-row {
        grid-template-columns: 1fr;
    }
    .shipment-field-purchase-type,
    .shipment-field-supplier {
        grid-column: auto;
    }
}
/* The purchase-type / supplier option labels are long — one grid column clips the selected text. */
.shipment-field-purchase-type,
.shipment-field-supplier {
    grid-column: span 2;
}
.shipment-field.is-hidden,
.shipment-field[hidden] {
    display: none !important;
}
.shipment-type-hint {
    margin: 0;
    flex: 1;
    min-width: 140px;
    font-size: 0.68rem !important;
    line-height: 1.3;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(15, 92, 86, 0.06);
    border: 1px solid rgba(15, 92, 86, 0.1);
}
.shipment-req {
    color: var(--danger);
    font-style: normal;
    font-weight: 800;
}
.shipment-funding {
    grid-column: span 2;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(255, 252, 246, 0.75);
}
.shipment-funding legend {
    padding: 0 3px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-funding-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.shipment-funding-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}
.shipment-funding-option input {
    width: auto !important;
    min-height: 0 !important;
    margin: 0;
}
.shipment-hawala-box {
    grid-column: 1 / -1;
    padding: 6px 8px;
    border: 1px solid rgba(15, 92, 86, 0.14);
    border-radius: 7px;
    background: rgba(15, 92, 86, 0.05);
}
.shipment-hawala-title {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
}
.shipment-hawala-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.shipment-funding-hint {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.shipment-field-note {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.25;
}
.shipment-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.shipment-inline-link {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--teal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.shipment-inline-link:hover {
    color: var(--ink);
}
.shipment-quick-supplier {
    margin-top: 6px;
    padding: 8px;
    border: 1px dashed rgba(15, 92, 86, 0.22);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.03);
}
.shipment-quick-supplier-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
}
.shipment-quick-supplier-form label {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-quick-supplier-form input {
    width: 100%;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
}
.shipment-quick-supplier-msg.is-error {
    color: var(--danger, #b42318);
}
@media (max-width: 720px) {
    .shipment-quick-supplier-form {
        grid-template-columns: 1fr;
    }
}
.shipment-partner-pick input[list] {
    width: 100%;
}
.shipment-partners-block {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(15, 92, 86, 0.14);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.03);
}
.shipment-partners-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.shipment-partners-head strong {
    font-size: 0.82rem;
}
.shipment-partners-total {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
}
.shipment-partners-total b {
    color: var(--teal);
    font-size: 0.9rem;
}
.shipment-share-mode {
    margin: 0;
    padding: 6px 8px;
    border: 1px dashed rgba(15, 92, 86, 0.2);
    border-radius: 7px;
    background: #fff;
}
.shipment-share-mode legend {
    padding: 0 3px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-partner-rows {
    display: grid;
    gap: 8px;
}
.shipment-partner-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(90px, 0.8fr) minmax(90px, 0.7fr) minmax(80px, 0.6fr) auto;
    gap: 6px;
    align-items: end;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
}
.shipment-partner-row label {
    display: grid !important;
    gap: 3px !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
}
.shipment-partner-row input {
    width: 100%;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: #fff;
}
.shipment-partner-row input.is-synced,
.shipment-partner-row input[readonly] {
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
    font-weight: 700;
}
.shipment-partner-row .partner-row-remove {
    min-width: 32px;
    height: 30px;
    padding: 0;
}
@media (max-width: 900px) {
    .shipment-partner-row {
        grid-template-columns: 1fr 1fr;
    }
    .shipment-partner-row .partner-row-remove {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
.shipment-qty-row input.is-synced,
.shipment-qty-row input[readonly] {
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
    font-weight: 700;
}

/* Shipment workflow steps */
.shipment-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(15, 92, 86, 0.14);
    border-radius: 8px;
    background: #f8fffc;
}
.shipment-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(15, 92, 86, 0.1);
}
.shipment-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(15, 92, 86, 0.08);
}
.shipment-step.is-active {
    color: var(--ink);
    border-color: rgba(15, 92, 86, 0.28);
    background: rgba(15, 92, 86, 0.08);
}
.shipment-step.is-active .shipment-step-num {
    background: var(--teal);
    color: #fff;
}
.shipment-step.is-clickable {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}
.shipment-step.is-clickable:hover {
    border-color: rgba(15, 92, 86, 0.4);
    background: rgba(15, 92, 86, 0.12);
}
.shipment-step.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.shipment-steps-hint {
    margin: 0 0 8px !important;
    font-size: 0.72rem !important;
}
.shipment-step.is-done {
    color: var(--teal);
}
.shipment-step.is-done .shipment-step-num {
    background: rgba(15, 92, 86, 0.18);
    color: var(--teal);
}
.shipment-step-line {
    flex: 1;
    min-width: 12px;
    height: 2px;
    background: rgba(15, 92, 86, 0.12);
    border-radius: 2px;
}
.shipment-step-line.is-done {
    background: rgba(15, 92, 86, 0.35);
}
.shipment-workflow-panels {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}
.shipment-step-panel {
    padding: 8px 10px !important;
}
.shipment-step-panel.is-locked {
    opacity: 0.72;
}
.shipment-step-panel.is-active {
    border-color: rgba(15, 92, 86, 0.28) !important;
    box-shadow: 0 0 0 1px rgba(15, 92, 86, 0.08);
}
.shipment-step-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.shipment-step-panel-head h3 {
    margin: 0;
    font-size: 0.84rem !important;
}
.shipment-step-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.shipment-step-badge.is-done {
    background: rgba(15, 92, 86, 0.12);
    color: var(--teal);
}
.shipment-step-badge.is-active {
    background: rgba(15, 92, 86, 0.18);
    color: var(--ink);
}
.shipment-step-badge.is-locked {
    background: rgba(0,0,0,0.06);
    color: var(--muted);
}
.shipment-step-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.76rem;
    color: var(--ink);
}
.shipment-step-hint {
    margin: 0 0 6px !important;
    font-size: 0.72rem !important;
}
.shipment-step-form {
    display: grid;
    gap: 8px;
}
.shipment-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.shipment-step-calc {
    display: grid;
    gap: 1px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 92, 86, 0.07);
    border: 1px dashed rgba(15, 92, 86, 0.22);
    align-content: center;
}
.shipment-step-calc span {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-step-calc strong {
    font-size: 0.9rem;
    font-weight: 800;
    direction: ltr;
    text-align: start;
}
@media (max-width: 700px) {
    .shipment-step-grid {
        grid-template-columns: 1fr !important;
    }
    .shipment-steps {
        flex-direction: column;
        align-items: stretch;
    }
    .shipment-step-line {
        width: 2px;
        height: 10px;
        min-width: 0;
        margin-inline-start: 18px;
    }
}

/* —— Shipment detail compact —— */
.shipment-detail {
    gap: 6px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}
.shipment-detail .panel {
    padding: 7px 9px !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.shipment-detail .panel h3 {
    margin: 0 0 6px !important;
    font-size: 0.8rem !important;
}
.shipment-detail .purchase-detail-head {
    margin-bottom: 0;
    gap: 6px;
    flex-wrap: wrap;
}
.shipment-detail .purchase-back {
    font-size: 0.76rem;
}
.shipment-detail .shipment-steps {
    padding: 5px 7px;
    margin-bottom: 0;
    gap: 3px;
}
.shipment-detail .shipment-step {
    padding: 2px 6px;
    font-size: 0.66rem;
}
.shipment-detail .shipment-step-num {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
}
.shipment-detail .shipment-workflow-panels {
    gap: 5px;
    margin-bottom: 0;
}
.shipment-done-strip {
    padding: 6px 8px !important;
    background: rgba(15, 92, 86, 0.04);
}
.shipment-done-items {
    display: grid;
    gap: 4px;
}
.shipment-done-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 0.72rem;
    line-height: 1.3;
}
.shipment-done-item strong {
    font-size: 0.68rem;
    color: var(--teal);
    white-space: nowrap;
}
.shipment-done-item span {
    color: var(--ink);
}
.shipment-info-panel {
    padding: 8px 10px !important;
    gap: 6px !important;
}
.shipment-overview {
    padding: 8px 10px !important;
    border-color: rgba(15, 92, 86, 0.22) !important;
    background: linear-gradient(180deg, rgba(15, 92, 86, 0.05), #fff 42%);
    max-width: 100%;
    min-width: 0;
}
.shipment-ops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
}
.shipment-ops-panel {
    padding: 8px 10px !important;
    min-width: 0;
}
.shipment-ops-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}
.shipment-ops-head h3 {
    margin: 0 !important;
    font-size: 0.8rem !important;
}
.shipment-ops-badge.is-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    background: var(--teal);
}
.shipment-ops-hint {
    margin: 0 0 6px !important;
    font-size: 0.68rem !important;
    line-height: 1.35;
}
.shipment-ops-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 5px 6px;
    align-items: end;
    margin-bottom: 6px;
    width: 100%;
}
.shipment-ops-form label {
    display: grid;
    gap: 1px;
    margin: 0;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    min-width: 0;
}
.shipment-ops-form input,
.shipment-ops-form select {
    min-height: 30px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.78rem;
}
.shipment-ops-form-actions {
    display: flex;
    align-items: end;
}
.shipment-ops-form .shipment-ops-readonly {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border, #d7dde5);
    border-radius: 6px;
    background: var(--surface-2, #f4f6f8);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text, #1f2933);
    box-sizing: border-box;
}
.shipment-wastage-form .shipment-wastage-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.3;
}
.shipment-ops-confirm {
    margin: 0 0 6px;
}
.shipment-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.shipment-overview-head h3 {
    margin: 0 !important;
    font-size: 0.92rem !important;
}
.shipment-overview-sub {
    margin: 2px 0 0 !important;
    font-size: 0.72rem !important;
}
.shipment-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shipment-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    width: 100%;
}
.shipment-kpi {
    display: grid;
    gap: 1px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(15, 92, 86, 0.12);
    background: #fff;
    min-width: 0;
}
.shipment-kpi.is-accent {
    border-color: rgba(15, 92, 86, 0.28);
    background: rgba(15, 92, 86, 0.07);
}
.shipment-kpi span {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-kpi strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.shipment-kpi.is-accent strong {
    color: var(--teal);
}
.shipment-kpi small {
    font-size: 0.62rem;
    color: var(--muted);
    line-height: 1.3;
}
.shipment-result-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 14px 16px;
    border-radius: 12px;
    color: #fff;
}
.shipment-result-banner.is-profit {
    background: #067647;
    border: 1px solid #085d3a;
}
.shipment-result-banner.is-loss {
    background: #b42318;
    border: 1px solid #912018;
}
/* Commission loads have no profit — the headline figure is what stays payable to the goods owner. */
.shipment-result-banner.is-payable {
    background: #1570ef;
    border: 1px solid #1260cd;
}
.shipment-result-banner span {
    font-size: 1.05rem;
    font-weight: 800;
}
.shipment-result-banner strong {
    font-size: 1.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.shipment-kpi.is-result {
    color: #fff;
}
.shipment-kpi.is-result.is-profit {
    background: #067647;
    border-color: #085d3a;
}
.shipment-kpi.is-result.is-loss {
    background: #b42318;
    border-color: #912018;
}
.shipment-kpi.is-result.is-payable {
    background: #1570ef;
    border-color: #1260cd;
}
.shipment-kpi.is-result span,
.shipment-kpi.is-result small,
.shipment-kpi.is-result strong {
    color: #fff;
}
.shipment-kpi.is-result strong {
    font-size: 1.15rem;
}
.shipment-partner-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}
.shipment-partner-page > .supplier-detail-head,
.shipment-partner-page > .shipment-partner-span {
    grid-column: 1 / -1;
}
.shipment-partner-page .shipment-partner-panel {
    padding: 8px 10px;
    margin: 0;
}
.shipment-partner-page .panel h2 {
    margin: 0 0 6px;
    font-size: 0.82rem;
}
.shipment-partner-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.shipment-partner-page .form-actions {
    margin-top: 0;
}
@media (max-width: 640px) {
    .shipment-partner-page {
        grid-template-columns: 1fr;
    }
}
.shipment-partner-page .shipment-partner-fields,
.shipment-partner-move {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    align-items: end;
}
.shipment-partner-page .shipment-partner-fields .full,
.shipment-partner-move .full,
.shipment-partner-choice,
.shipment-partner-move > button {
    grid-column: 1 / -1;
}
.shipment-partner-move > input[type="hidden"] {
    display: none;
}
.shipment-partner-page .shipment-partner-fields label,
.shipment-partner-move > label {
    min-width: 0;
    margin: 0;
}
.shipment-partner-move label {
    display: grid;
    gap: 2px;
    margin: 0;
    min-width: 0;
}
.shipment-partner-move label span {
    font-size: 0.72rem;
    font-weight: 700;
}
.shipment-partner-page .shipment-partner-fields input,
.shipment-partner-page .shipment-partner-fields textarea,
.shipment-partner-move input[type="number"],
.shipment-partner-move input[type="text"],
.shipment-partner-move select {
    min-width: 0;
    width: 100%;
    min-height: 30px;
    padding: 4px 8px !important;
}
.shipment-partner-move input[type="radio"],
.shipment-partner-move input[type="checkbox"],
.shipment-partner-page .shipment-partner-fields input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
}
.shipment-partner-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 0;
}
.shipment-partner-choice .checkbox {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.shipment-partner-page .form-actions {
    display: flex;
    justify-content: flex-start;
}
.shipment-partner-page .stat-card.stat-card-compact {
    padding: 6px 8px;
}
.shipment-partner-page .stat-card.stat-card-compact strong {
    font-size: 0.86rem;
}
.shipment-partner-pay-table {
    margin-top: 6px;
}
.shipment-partner-pay-table table {
    min-width: 0 !important;
    width: 100%;
}
.shipment-partner-pay-table th,
.shipment-partner-pay-table td {
    padding: 4px 6px !important;
    font-size: 0.78rem !important;
}
.shipment-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
    width: 100%;
}
.shipment-overview-block {
    border: 1px solid rgba(15, 92, 86, 0.12);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    min-width: 0;
}
.shipment-overview-block h4 {
    margin: 0 0 6px;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--teal);
}
.shipment-cost-lines {
    display: grid;
    gap: 3px;
}
.shipment-cost-line-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    font-size: 0.72rem;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(15, 92, 86, 0.1);
}
.shipment-cost-line-row:last-child {
    border-bottom: 0;
}
.shipment-cost-line-row span {
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.shipment-cost-line-row strong {
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.shipment-cost-line-row.is-total {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px solid rgba(15, 92, 86, 0.18);
    border-bottom: 0;
}
.shipment-cost-line-row.is-total span,
.shipment-cost-line-row.is-total strong {
    color: var(--teal);
    font-size: 0.78rem;
}
.shipment-stock-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}
.shipment-stock-bar {
    display: grid;
    gap: 1px;
    padding: 6px 7px;
    border-radius: 6px;
    background: rgba(15, 92, 86, 0.04);
    border: 1px solid rgba(15, 92, 86, 0.1);
    min-width: 0;
}
.shipment-stock-bar.is-remain {
    background: rgba(15, 92, 86, 0.1);
    border-color: rgba(15, 92, 86, 0.22);
}
.shipment-stock-bar span {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-stock-bar strong {
    font-size: 0.9rem;
    font-weight: 800;
}
.shipment-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
}
.shipment-info-head h3 {
    margin: 0 !important;
    font-size: 0.78rem !important;
}
.shipment-info-status {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--teal);
    background: rgba(15, 92, 86, 0.08);
}
.shipment-info-text {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 8px;
    width: 100%;
}
.shipment-info-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: normal;
}
.shipment-info-k {
    color: var(--muted);
    font-weight: 600;
    margin-inline-end: 3px;
}
.shipment-info-v {
    color: var(--ink);
    font-weight: 700;
}
.shipment-info-kv.is-money .shipment-info-v {
    color: var(--teal);
}
.shipment-info-v bdi {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.shipment-detail .purchase-chip {
    padding: 1px 6px;
    font-size: 0.68rem;
    line-height: 1.35;
}
.shipment-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 5px;
}
.shipment-hero-stat {
    display: grid;
    gap: 0;
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid rgba(15, 92, 86, 0.1);
    background: rgba(15, 92, 86, 0.04);
    min-width: 0;
}
.shipment-hero-stat span {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted);
}
.shipment-hero-stat strong {
    font-size: 0.86rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}
.shipment-detail .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.shipment-detail .table-wrap table {
    width: 100%;
    min-width: 420px;
}
@media (max-width: 1100px) {
    .shipment-ops-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1100px) {
    .shipment-info-text {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .shipment-overview-head {
        flex-direction: column;
    }
    .shipment-info-kv {
        white-space: normal;
    }
    .shipment-ops-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shipment-stock-bars {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .shipment-kpi-row,
    .shipment-ops-form,
    .shipment-info-text {
        grid-template-columns: 1fr;
    }
}
.shipment-qty-mini {
    margin-top: 2px;
}
.shipment-qty-mini table {
    font-size: 0.74rem;
}
.shipment-qty-mini th,
.shipment-qty-mini td {
    padding: 3px 5px !important;
}
.shipment-receive-inline {
    display: grid !important;
    gap: 10px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.shipment-receive-qty {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}
.shipment-receive-qty label,
.shipment-receive-warehouse {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    align-content: start;
}
.shipment-receive-qty input,
.shipment-receive-warehouse select {
    min-height: 34px;
    width: 100%;
    box-sizing: border-box;
}
.shipment-receive-qty .shipment-step-calc {
    min-height: 34px;
    align-self: stretch;
}
.shipment-receive-qty input.is-synced,
.shipment-receive-qty input[readonly] {
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
    font-weight: 700;
}
.shipment-receive-warehouse {
    max-width: 280px;
}
.shipment-receive-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.04);
}
.shipment-receive-summary .shipment-step-calc {
    min-height: 34px;
}
@media (max-width: 520px) {
    .shipment-receive-summary {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .shipment-receive-qty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .shipment-receive-qty {
        grid-template-columns: 1fr;
    }
}
.shipment-step-locked-note {
    margin: 0 !important;
    padding: 4px 8px;
    font-size: 0.7rem !important;
}
.shipment-detail .toolbar {
    gap: 5px !important;
    margin-bottom: 6px !important;
}
.shipment-detail .toolbar select,
.shipment-detail .toolbar input {
    min-height: 30px;
    font-size: 0.78rem;
    padding: 3px 6px;
}
.shipment-detail .stats-row {
    gap: 5px !important;
}
.shipment-detail .stat-card-compact {
    padding: 5px 7px !important;
}
.shipment-detail .stat-card-compact .stat-label {
    font-size: 0.58rem !important;
}
.shipment-detail .stat-card-compact strong {
    font-size: 0.86rem !important;
}
.shipment-detail .table-wrap table {
    font-size: 0.74rem;
}
.shipment-detail .table-wrap th,
.shipment-detail .table-wrap td {
    padding: 3px 5px !important;
}

/* Shipment list row states — bg on td (tr bg fails with border-collapse) */
.shipment-list-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    font-size: 0.72rem;
}
.shipment-list-legend-title {
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-inline-end: 4px;
}
.shipment-list-legend-item {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.shipment-list-table tbody tr[class*="sh-row-"] > td {
    background-color: var(--sh-row-bg, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--sh-row-bg, #fff) 70%, #94a3b8);
}
.shipment-list-table tbody tr[class*="sh-row-"] > td:first-child {
    box-shadow: inset 4px 0 0 var(--sh-row-border, transparent);
}
.shipment-list-table tbody tr[class*="sh-row-"]:hover > td {
    filter: brightness(0.97);
}
.shipment-list-legend .sh-row-hawala-due { background: #fecaca; border-color: #ef4444; }
.shipment-list-legend .sh-row-hawala-paid { background: #bfdbfe; border-color: #3b82f6; }
.shipment-list-legend .sh-row-await-stock { background: #fed7aa; border-color: #f97316; }
.shipment-list-legend .sh-row-in-stock { background: #bbf7d0; border-color: #22c55e; }
.shipment-list-legend .sh-row-in-transit { background: #fde68a; border-color: #eab308; }
.shipment-list-legend .sh-row-draft { background: #e2e8f0; border-color: #94a3b8; }
.shipment-list-legend .sh-row-closed { background: #cbd5e1; border-color: #64748b; }
.shipment-list-legend .sh-row-cancelled { background: #e5e7eb; border-color: #9ca3af; color: #6b7280; }
.shipment-row-badge {
    display: inline-block;
    font-size: 0.68rem;
    padding: 1px 6px;
    margin-bottom: 2px;
    background: rgba(255, 255, 255, 0.55);
}
.shipment-row-status {
    display: block;
    font-size: 0.66rem;
    line-height: 1.2;
}

/* Foreign kg purchase + extra costs */
.shipment-extra-costs .shipment-form-grid { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.shipment-field[hidden], .shipment-live-chip[hidden] { display: none !important; }

.shipment-cost-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(255, 252, 246, 0.55);
}
.shipment-cost-line .shipment-form-grid {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.shipment-cost-line .shipment-remove-cost {
    flex-shrink: 0;
    align-self: center;
    min-width: 34px;
    padding-inline: 0;
}
.shipment-cost-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.shipment-cost-grid label span,
.shipment-cost-grid .shipment-step-calc span {
    font-size: 0.62rem;
}
.shipment-cost-grid .extra-saraf-wrap:not([hidden]),
.shipment-cost-grid .shipment-cost-usd {
    grid-column: span 2;
}
.shipment-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
@media (max-width: 900px) {
    .shipment-cost-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .shipment-cost-grid .extra-saraf-wrap:not([hidden]),
    .shipment-cost-grid .shipment-cost-usd {
        grid-column: span 1;
    }
}
@media (max-width: 520px) {
    .shipment-cost-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Saraf detail + modals */
.saraf-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.saraf-stats-single {
    grid-template-columns: minmax(160px, 280px) !important;
}
.saraf-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.saraf-ledger-panel h3 {
    margin: 0 0 8px !important;
}
.saraf-ledger-table th,
.saraf-ledger-table td {
    padding: 6px 8px !important;
    font-size: 0.78rem;
    vertical-align: top;
}
.saraf-ledger-amt.is-credit { color: var(--teal); font-weight: 700; }
.saraf-ledger-amt.is-debit { color: #b45309; font-weight: 700; }
.saraf-ledger-sub {
    display: block;
    font-size: 0.68rem;
    margin-top: 2px;
}
.saraf-ledger-detail {
    max-width: 320px;
    line-height: 1.45;
    font-size: 0.76rem;
}
.saraf-ledger-balance .saraf-ledger-balance-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 1px;
}
.saraf-ledger-balance .saraf-ledger-balance-amt {
    font-weight: 700;
}
.saraf-ledger-balance.is-claim,
.supplier-stat.is-saraf-claim {
    color: #b91c1c !important;
}
.saraf-ledger-balance.is-claim .saraf-ledger-balance-label,
.supplier-stat.is-saraf-claim > span {
    color: #b91c1c !important;
}
.saraf-ledger-balance.is-claim .saraf-ledger-balance-amt,
.supplier-stat.is-saraf-claim > strong {
    color: #b91c1c !important;
}
.saraf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.saraf-form-grid .full { grid-column: 1 / -1; }
.saraf-form-grid label {
    display: grid;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}
.saraf-usd-preview {
    margin: 0;
    font-size: 0.72rem;
    min-height: 1.2em;
}
body.admin-modal-open { overflow: hidden; }
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.admin-modal[hidden] { display: none !important; }
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 20, 0.45);
}
.admin-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.admin-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.admin-modal-head h3 {
    margin: 0 !important;
    font-size: 0.95rem !important;
}
.admin-modal-close {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: 0 4px;
}
.admin-modal-body {
    padding: 12px 14px 0;
}
.admin-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px 14px;
    margin-top: 4px;
}
@media (max-width: 520px) {
    .saraf-form-grid { grid-template-columns: 1fr; }
    .saraf-detail-actions { width: 100%; }
    .saraf-detail-actions .btn { flex: 1 1 auto; }
}

/* Customer list */
.customer-list-page {
    display: grid;
    gap: 12px;
}
.customer-list-intro h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.customer-list-stats .stat-card-alert {
    border-color: #fecaca;
    background: #fff5f5;
}
.customer-list-stats .stat-card-alert strong {
    color: #b91c1c;
}
.customer-list-filters {
    flex-wrap: wrap;
}
.toolbar.toolbar-compact select.toolbar-select-sm {
    max-width: 132px;
}
.customer-list-filter-note {
    margin-top: -2px;
}
.customer-list-table .customer-list-name {
    font-weight: 700;
}
.customer-kind-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.customer-list-balance .customer-list-balance-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 1px;
}
.customer-list-balance .customer-list-balance-amt {
    font-weight: 700;
}
.customer-list-balance.is-claim,
.customer-row-claim .customer-list-balance {
    color: #b91c1c;
}
.customer-list-balance.is-claim .customer-list-balance-label,
.customer-list-balance.is-claim .customer-list-balance-amt {
    color: #b91c1c;
}
.customer-list-flag {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: middle;
}
.customer-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.badge-muted {
    background: #f1f5f9;
    color: #64748b;
}
@media (max-width: 900px) {
    .customer-list-actions .btn-small {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
}

/* —— Product chooser (EAGS / Cement) —— */
.product-chooser-page {
    min-height: 100vh;
    margin: 0;
    padding: 32px 20px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 420px at 12% 15%, rgba(232, 163, 23, 0.22), transparent 55%),
        radial-gradient(700px 380px at 88% 85%, rgba(15, 92, 86, 0.32), transparent 50%),
        linear-gradient(145deg, #0b3d36 0%, #124f46 48%, #1a2a32 100%);
    color: #fff;
}
.product-chooser {
    width: min(920px, 100%);
    animation: rise 0.55s ease both;
}
.product-chooser-header {
    text-align: center;
    margin-bottom: 28px;
}
.product-chooser-brand-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 6px;
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.product-chooser-header h1 {
    margin: 0 0 6px;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 800;
}
.product-chooser-sections {
    margin: 0 0 16px !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    opacity: 0.95 !important;
    letter-spacing: 0.02em;
}
.product-chooser-page .lang-switcher {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.product-chooser-page .lang-switcher a {
    color: #33403c;
    background: #fff;
    border: 1px solid #e5ebe8;
}
.product-chooser-page .lang-switcher a:hover {
    background: #f4f7f6;
    color: #0f5c56;
}
.product-chooser-page .lang-switcher a.active {
    background: #0f5c56;
    border-color: #0f5c56;
    color: #fff;
}
.product-chooser-header p {
    margin: 0 0 16px;
    opacity: 0.85;
    font-size: 1rem;
}
.product-chooser-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.product-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 28px 22px 24px;
    border-radius: 20px;
    background: rgba(255, 252, 246, 0.96);
    color: #1a1f1c;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.product-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.product-card strong {
    font-size: 1.45rem;
    font-weight: 800;
}
.product-card span {
    color: #5b6560;
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 28ch;
}
.product-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    margin-top: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    font-size: 0.95rem !important;
    font-weight: 800;
    color: #fff !important;
    background: linear-gradient(135deg, var(--teal-bright), var(--teal));
    box-shadow: 0 10px 24px rgba(26, 107, 99, 0.3);
    max-width: none !important;
}
.product-card-cement .product-card-btn {
    background: linear-gradient(135deg, #c4822a, #8a5a18);
    box-shadow: 0 10px 24px rgba(138, 90, 24, 0.35);
}
.product-card:hover .product-card-btn {
    filter: brightness(1.05);
}
.product-card em {
    margin-top: 6px;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f5c56;
}
.product-card-cement em { color: #8a5a18; }
.login-page-cement {
    background:
        radial-gradient(800px 400px at 15% 20%, rgba(196, 130, 42, 0.28), transparent 55%),
        radial-gradient(700px 380px at 90% 80%, rgba(44, 51, 56, 0.45), transparent 50%),
        linear-gradient(145deg, #2c3338 0%, #3d454c 48%, #1f2428 100%);
}
.login-page-cement .login-card button[type=submit] {
    background: linear-gradient(135deg, #c4822a, #8a5a18);
    box-shadow: 0 10px 24px rgba(138, 90, 24, 0.35);
}
.topbar-product-switch {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 92, 86, 0.25);
    background: rgba(15, 92, 86, 0.08);
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}
.topbar-product-switch:hover {
    background: rgba(15, 92, 86, 0.14);
}
body.cement-admin .topbar-product-switch {
    border-color: rgba(196, 130, 42, 0.35);
    background: rgba(196, 130, 42, 0.12);
}
body.cement-admin #admin-nav.nav-flat {
    display: grid;
    gap: 2px;
    padding-top: 4px;
    align-content: start;
    justify-items: stretch;
}
body.cement-admin #admin-nav.nav-flat > a {
    margin: 0;
    width: 100%;
}
@media (max-width: 720px) {
    .product-chooser-grid {
        grid-template-columns: 1fr;
    }
}