@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 {
    /* Tajer logo palette: forest green + gold + cream */
    --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.94);
    --text: #0b3d36;
    --muted: #5a6f6a;
    --border: rgba(11, 61, 54, 0.12);
    --success: #0f5c56;
    --warning: #c4890f;
    --danger: #b91c1c;
    --shadow: 0 18px 40px rgba(11, 61, 54, 0.1);
    --radius: 18px;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", system-ui, sans-serif;
    /* 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);
    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; }

.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.68rem;
    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.5);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 10px 12px 6px;
    cursor: pointer;
    text-align: left;
}

.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: 0.92rem;
    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: 24px;
}

.topbar h1 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.5vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.topbar p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    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: 1.85rem;
    margin: 8px 0 4px;
    letter-spacing: -0.03em;
}

.stat-label, .stat-card small { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.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: 1.2rem;
    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-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: 10px;
}
.dashboard-compact-top {
    padding: 10px 12px;
    display: grid;
    gap: 8px;
}
.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-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.dashboard-kpi-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-kpi-section {
    min-width: 0;
    padding: 6px 10px 4px;
    border: 1px solid rgba(15, 92, 86, 0.12);
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.03);
}
.dashboard-kpi-section h3 {
    margin: 0 0 2px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(15, 92, 86, 0.12);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--teal);
}
.dashboard-kpi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(15, 92, 86, 0.12);
    font-size: 0.8rem;
    line-height: 1.35;
}
.dashboard-kpi:last-child {
    border-bottom: 0;
}
.dashboard-kpi-label {
    color: var(--muted);
    font-weight: 600;
    min-width: 0;
}
.dashboard-kpi-value {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dashboard-kpi-value small {
    margin-inline-start: 4px;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--muted);
}
.dashboard-kpi.is-profit .dashboard-kpi-value {
    color: #15803d;
}
.dashboard-kpi.is-loss .dashboard-kpi-value,
.dashboard-kpi.is-alert .dashboard-kpi-value {
    color: var(--danger);
}
@media (max-width: 900px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }
}
@media (max-width: 560px) {
    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }
}
.dashboard-compact-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.85fr;
    gap: 10px;
    min-height: 0;
}
.dashboard-compact-chart {
    padding: 10px 12px;
    min-height: 0;
}
.dashboard-compact-chart h3 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ink-soft);
}
.dashboard-compact-chart-wrap {
    position: relative;
    height: 160px;
}
.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 show (full width, dense) —— */
.purchase-show-page {
    display: grid;
    gap: 6px;
    width: 100%;
}
.purchase-show-page .panel {
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(11, 61, 54, 0.06);
}
.purchase-show-page .panel h2 {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    font-family: inherit;
}
.purchase-show-toolbar {
    margin: 0 0 6px;
    gap: 6px;
    padding: 0;
}
.purchase-show-toolbar .back-link a {
    font-size: 0.78rem;
}
.purchase-show-summary {
    display: grid;
    gap: 4px;
}
.purchase-show-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 252, 246, 0.65);
}
.purchase-show-fact {
    display: grid;
    gap: 1px;
    flex: 1 1 0;
    min-width: 88px;
    padding: 5px 10px;
    border-inline-end: 1px solid var(--border);
}
.purchase-show-fact:last-child {
    border-inline-end: none;
}
.purchase-show-fact > span {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.purchase-show-fact > strong {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.purchase-show-fact > strong a {
    color: inherit;
    text-decoration: none;
}
.purchase-show-fact > strong a:hover {
    color: var(--teal);
}
.purchase-show-fact.is-alert {
    background: rgba(180, 120, 20, 0.08);
}
.purchase-show-fact.is-alert > strong {
    color: #8a5a20;
}
.purchase-show-fact .badge {
    padding: 1px 5px;
    font-size: 0.68rem;
}
.purchase-show-meta,
.purchase-show-notes {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
}
.purchase-show-panel .panel-toolbar-compact {
    margin-bottom: 4px;
}
.purchase-show-page .table-wrap.table-compact th,
.purchase-show-page .table-wrap.table-compact td {
    padding: 4px 6px;
    font-size: 0.78rem;
}
.purchase-show-page .table-wrap.table-compact th {
    font-size: 0.6rem;
    padding-top: 5px;
    padding-bottom: 5px;
}
.purchase-show-page .table-wrap.table-compact .empty {
    padding: 10px 6px !important;
}
.purchase-show-page .table-wrap.table-compact table {
    min-width: 0;
}
.purchase-show-tfoot td {
    padding-top: 4px;
    padding-bottom: 4px;
}
.purchase-receive-inline {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin: 0;
    padding: 2px;
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.06);
    border: 1px solid rgba(15, 92, 86, 0.12);
}
.purchase-receive-inline select {
    min-width: 96px;
    max-width: 140px;
    min-height: 28px;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font: inherit;
    font-size: 0.76rem;
    background: #fff;
}
.purchase-totals-label {
    text-align: end;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.72rem;
}
.purchase-totals-final td {
    border-top: 1px solid var(--border);
}
.purchase-show-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}
.purchase-show-split.is-single {
    grid-template-columns: 1fr;
}
.purchase-show-split > .panel { min-width: 0; }
.purchase-show-page .purchase-pay-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 6px;
    align-items: end;
}
.purchase-return-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 6px;
}
.purchase-pay-form label {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 0.6rem;
    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: 28px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.purchase-pay-submit {
    display: flex;
    align-items: end;
    margin: 0;
}
.purchase-return-line {
    font-size: 0.76rem;
    line-height: 1.25;
}
html[dir="rtl"] .purchase-totals-label { text-align: start; }

@media (max-width: 1100px) {
    .purchase-show-page .purchase-pay-grid,
    .purchase-return-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .purchase-pay-submit {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 900px) {
    .purchase-show-split {
        grid-template-columns: 1fr;
    }
    .purchase-show-fact {
        flex: 1 1 calc(50% - 1px);
        min-width: 0;
        border-inline-end: none;
        border-bottom: 1px solid var(--border);
    }
    .purchase-show-fact:nth-child(odd) {
        border-inline-end: 1px solid var(--border);
    }
    .purchase-show-toolbar .toolbar {
        width: 100%;
    }
    .purchase-receive-inline {
        width: 100%;
        flex-wrap: wrap;
    }
    .purchase-receive-inline select {
        flex: 1;
        max-width: none;
    }
    .purchase-show-page .purchase-pay-grid,
    .purchase-return-meta {
        grid-template-columns: 1fr;
    }
}

/* Legacy purchase-detail aliases (kept for cached views) */
.purchase-detail { display: grid; gap: 6px; width: 100%; }

/* —— 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-warning, .alert.warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.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-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;
}

.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; }
.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-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: 14px;
    font-weight: 700;
    line-height: 1.3;
    box-sizing: border-box;
    border: 1.5px solid #111;
    border-radius: 0;
    background: #fff;
}
.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: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
}
.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.84rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}
.sale-receipt.is-thermal-compact .sale-receipt-business-meta {
    text-align: center;
    justify-content: center;
}
.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: start;
    justify-content: flex-start;
}
.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: 6px 0;
    border-radius: 0;
    border: 0;
    background: transparent;
}
.sale-receipt.is-thermal-compact .sale-receipt-table table {
    font-size: 0.9rem;
    font-weight: 700;
}
.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.9rem;
    font-weight: 700;
}
.sale-receipt.is-thermal-compact .sale-receipt-grand {
    font-size: 1rem;
    font-weight: 800;
}
.sale-receipt.is-thermal-compact .sale-receipt-grand strong {
    font-size: 1.12rem;
    font-weight: 800;
}
.sale-receipt-items {
    display: grid;
    gap: 0;
    margin: 0 0 10px;
    width: 100%;
}
.sale-receipt-items-head,
.sale-receipt-item {
    display: grid;
    grid-template-columns: minmax(28mm, 1fr) max-content max-content;
    align-items: center;
    column-gap: 2mm;
    padding: 6px 0;
    width: 100%;
    box-sizing: border-box;
}
.sale-receipt-items-head {
    padding-top: 0;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(20, 36, 40, 0.3);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
}
.sale-receipt-items-head span:first-child,
.sale-receipt-item-name {
    text-align: start;
    min-width: 24mm;
    overflow-wrap: break-word;
    word-break: normal;
}
.sale-receipt-items-head span:nth-child(2),
.sale-receipt-item-qty {
    text-align: center;
    white-space: nowrap;
}
.sale-receipt-items-head span:nth-child(3),
.sale-receipt-item-total {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
.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.94rem;
    font-weight: 800;
    line-height: 1.25;
}
.sale-receipt-item-qty {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 700;
}
.sale-receipt-item-total {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 800;
}
.sale-receipt-detail-line {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 2mm;
    align-items: baseline;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}
.sale-receipt-detail-line span {
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
    text-align: start;
}
.sale-receipt-detail-line strong {
    font-weight: 800;
    text-align: start;
    min-width: 0;
}
.sale-receipt-code {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    font-variant-numeric: tabular-nums;
}
.sale-receipt-watermark {
    display: none;
}
.sale-receipt > *:not(.sale-receipt-watermark) {
    position: relative;
    z-index: 1;
}
.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;
    font-weight: 800;
    color: var(--ink);
}
.sale-receipt-head .muted { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.sale-receipt-business-meta {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}
.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(--ink); font-weight: 700; }
.sale-receipt-number {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    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;
    font-weight: 700;
    color: var(--ink);
}
.sale-receipt-party > strong {
    display: block;
    font-size: 1.12rem;
    font-weight: 800;
    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.92rem;
    font-weight: 700;
}
.sale-receipt-facts span { color: var(--ink); font-weight: 700; }
.sale-receipt-facts strong { font-weight: 800; }
.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: 4px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}
.sale-receipt-totals > div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 3mm;
    align-items: baseline;
    width: 100%;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}
.sale-receipt-totals span {
    text-align: start;
    white-space: nowrap;
}
.sale-receipt-totals strong {
    color: var(--ink);
    font-weight: 800;
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
.sale-receipt-grand {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 1.08rem;
    font-weight: 800;
}
.sale-receipt-grand span,
.sale-receipt-grand strong { color: var(--teal); }
.sale-receipt-grand strong {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
}

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-actions {
    margin-top: 12px;
}
.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;
    }
    body::before { display: none !important; }

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

    .admin-shell,
    .content,
    .sale-show-page,
    .sale-show-layout,
    .sale-show-receipt-rail {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !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 {
        position: relative !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 2.5mm !important;
        border: 0.5mm solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
        line-height: 1.28 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sale-receipt-watermark {
        display: none !important;
    }

    .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: 12pt;
        font-weight: 800;
        line-height: 1.2;
    }
    .sale-receipt-head .muted,
    .sale-receipt-business-meta {
        margin: 1px 0 0;
        font-size: 8.5pt;
        font-weight: 700;
        line-height: 1.28;
        gap: 2px 6px;
        justify-content: center;
        color: #000 !important;
    }
    .sale-receipt-number {
        margin: 0 0 1px;
        font-size: 10.5pt;
        font-weight: 800;
        color: #000 !important;
        line-height: 1.2;
    }
    .sale-receipt-meta {
        text-align: center;
        font-size: 8pt;
        font-weight: 700;
        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: 7.5pt;
        font-weight: 700;
        border-radius: 3px;
    }

    .sale-receipt-parties {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 1.5mm;
        margin: 0 0 2mm;
    }
    .sale-receipt-party {
        padding: 0 !important;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        text-align: start !important;
    }
    .sale-receipt-party .stat-label {
        margin-bottom: 1px;
        font-size: 8pt;
        font-weight: 700;
        color: #000 !important;
    }
    .sale-receipt-party > strong {
        margin-bottom: 1px;
        font-size: 9.5pt;
        font-weight: 800;
        line-height: 1.2;
    }
    .sale-receipt-facts {
        gap: 1px;
    }
    .sale-receipt-facts > div,
    .sale-receipt-party .muted {
        font-size: 8.5pt;
        font-weight: 700;
        line-height: 1.28;
        color: #000 !important;
    }

    .sale-receipt-table {
        overflow: visible !important;
        margin: 0 0 2mm !important;
    }
    .sale-receipt-items {
        display: grid !important;
        gap: 0;
        margin: 0 0 1.5mm;
        width: 100%;
    }
    .sale-receipt-items-head,
    .sale-receipt-item {
        display: grid !important;
        grid-template-columns: minmax(28mm, 1fr) max-content max-content !important;
        column-gap: 1.5mm !important;
        align-items: center;
        width: 100%;
        padding: 0.8mm 0;
        border-bottom: 1px dashed #ddd;
    }
    .sale-receipt-items-head {
        gap: 1.5mm;
        font-size: 8pt;
        font-weight: 800;
        padding-bottom: 0.6mm;
        color: #000 !important;
        border-bottom: 1px solid #333;
    }
    .sale-receipt-items-head span:first-child,
    .sale-receipt-item-name {
        text-align: start !important;
        min-width: 24mm;
        overflow-wrap: break-word;
        word-break: normal;
    }
    .sale-receipt-items-head span:nth-child(2),
    .sale-receipt-item-qty {
        text-align: center !important;
        white-space: nowrap !important;
    }
    .sale-receipt-items-head span:nth-child(3),
    .sale-receipt-item-total {
        text-align: end !important;
        white-space: nowrap !important;
        direction: ltr;
        unicode-bidi: isolate;
    }
    .sale-receipt-item-name {
        font-size: 9pt;
        font-weight: 800;
    }
    .sale-receipt-item-qty {
        font-size: 8pt;
        font-weight: 700;
        color: #000 !important;
    }
    .sale-receipt-item-total {
        font-size: 8.5pt;
        font-weight: 800;
        color: #000 !important;
    }
    .sale-receipt-detail-line {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 1.5mm !important;
        align-items: baseline;
        width: 100%;
        font-size: 8.5pt;
        font-weight: 700;
        color: #000 !important;
    }
    .sale-receipt-detail-line span {
        white-space: nowrap;
        text-align: start;
    }
    .sale-receipt-detail-line strong {
        text-align: start;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .sale-receipt-code {
        direction: ltr !important;
        unicode-bidi: isolate;
        text-align: start !important;
    }
    .sale-receipt-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
        font-weight: 700;
    }
    .sale-receipt-table th,
    .sale-receipt-table td {
        padding: 0.8mm 0.9mm;
        border-bottom: 1px dotted #ddd;
        line-height: 1.25;
        font-weight: 700;
    }
    .sale-receipt-table thead th {
        border-bottom: 1px solid #333;
        background: transparent !important;
        font-size: 8pt;
        font-weight: 800;
    }
    .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: 8.5pt;
        font-weight: 700;
        max-width: none;
        line-height: 1.3;
        color: #000 !important;
    }
    .sale-receipt-totals {
        padding: 1mm 0;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        gap: 0.4mm;
        font-size: 8.5pt;
        font-weight: 700;
        width: 100%;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .sale-receipt-totals > div {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 2mm !important;
        align-items: baseline;
        width: 100%;
        gap: 2mm;
        color: #000 !important;
    }
    .sale-receipt-totals span {
        text-align: start;
        white-space: nowrap;
    }
    .sale-receipt-totals strong {
        text-align: end !important;
        white-space: nowrap !important;
        direction: ltr;
        unicode-bidi: isolate;
        font-variant-numeric: tabular-nums;
    }
    .sale-receipt-grand {
        margin-top: 0.5mm;
        padding-top: 1mm;
        font-size: 10pt;
        font-weight: 800;
        border-top: 1px solid #333;
    }
    .sale-receipt-grand span,
    .sale-receipt-grand strong { color: #000 !important; }
    .sale-receipt-grand strong { font-size: 11pt; font-weight: 800; }

    .sale-receipt.is-thermal-compact .sale-receipt-head h2 {
        font-size: 12pt !important;
        font-weight: 800 !important;
    }
    .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: 8.5pt !important;
        font-weight: 700 !important;
        color: #000 !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-detail-line {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        text-align: start !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-table table {
        font-size: 8.5pt !important;
        font-weight: 700 !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-item-name {
        font-size: 9pt !important;
        font-weight: 800 !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-totals > div {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-grand {
        font-size: 10pt !important;
        font-weight: 800 !important;
    }
    .sale-receipt.is-thermal-compact .sale-receipt-grand strong {
        font-size: 11pt !important;
        font-weight: 800 !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: "Noto Naskh Arabic", "Manrope", Tahoma, sans-serif;
}

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: 14px;
}
.pos-page .pos-hero {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 255, 255, 0.92));
}
.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-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-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: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}
.pos-page .pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.pos-page .pos-cart-head h2 {
    margin: 0;
    font-size: 1rem;
}
.pos-page .pos-cols,
.pos-page .pos-line {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 108px 138px 118px 108px 38px;
    gap: 10px;
    align-items: center;
}
.pos-page .pos-cols {
    padding: 0 4px 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pos-page .pos-line {
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.7);
}
.pos-page .pos-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.pos-page .pos-field-label {
    display: none;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pos-page .pos-input {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(15, 92, 86, 0.22);
    border-radius: 10px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    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-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-name {
    font-weight: 700;
    line-height: 1.35;
}
.pos-page .pos-product-sku {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
}
.pos-page .pos-line-total {
    font-weight: 800;
    text-align: end;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(15, 92, 86, 0.06);
}
.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: 46px;
    padding: 10px 22px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #0b3d36;
    background: #f5b41a;
    border: 1px solid #c4890f;
    border-radius: 10px;
    box-shadow: 0 2px 0 #c4890f, 0 6px 14px rgba(196, 137, 15, 0.28);
    filter: none;
}
.pos-page #pos-pay:hover {
    transform: translateY(-1px);
    filter: none;
    background: #ffc02e;
    color: #0b3d36;
}
.pos-page .btn-pos-sales-link {
    font-weight: 800;
    color: #0b3d36;
    background: #f5b41a;
    border: 1px solid #c4890f;
    box-shadow: 0 2px 0 #c4890f, 0 4px 10px rgba(196, 137, 15, 0.22);
}
.pos-page .btn-pos-sales-link:hover {
    transform: translateY(-1px);
    filter: none;
    background: #ffc02e;
    color: #0b3d36;
}
@media (max-width: 900px) {
    .pos-page .pos-cols { display: none; }
    .pos-page .pos-line {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .pos-page .pos-product-cell { grid-column: 1 / -1; }
    .pos-page .pos-field-label { display: block; }
    .pos-page .pos-field-unit { grid-column: 1 / -1; }
    .pos-page .pos-line-total { grid-column: 1 / -1; }
    .pos-page .pos-remove-line { grid-column: 1 / -1; width: 100%; }
}

/* —— Supplier detail (compact) —— */
.supplier-detail {
    display: grid;
    gap: 10px;
}
.supplier-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.supplier-back {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
}
.supplier-back:hover {
    text-decoration: underline;
}
.supplier-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.supplier-detail .panel {
    padding: 12px 14px;
}
.supplier-detail .panel h2 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.supplier-hero {
    display: grid;
    gap: 10px;
}
.supplier-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.supplier-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(15, 92, 86, 0.16);
    background: rgba(15, 92, 86, 0.06);
    color: var(--teal);
}
.supplier-icon svg {
    width: 22px;
    height: 22px;
}
.supplier-meta {
    flex: 1;
    min-width: 0;
}
.supplier-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.supplier-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;
}
.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: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
}
.supplier-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.supplier-stat {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 252, 246, 0.8);
}
.supplier-stat span {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.supplier-stat strong {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
.supplier-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.supplier-form-panel {
    min-width: 0;
}
.supplier-form-panel h2 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.supplier-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
.supplier-form-grid-payment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.supplier-form-grid-adjust {
    grid-template-columns: 1fr 1fr;
}
.supplier-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;
}
.supplier-form input,
.supplier-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;
}
.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-wide {
    grid-column: 1 / -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: 10px;
}
.supplier-table-panel {
    min-width: 0;
}
.supplier-detail .pagination-wrap {
    margin-top: 8px;
}
.supplier-detail .pagination-wrap.pagination-compact {
    margin-top: 6px;
}
@media (max-width: 1100px) {
    .supplier-tables {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .supplier-stats,
    .supplier-forms,
    .supplier-form-grid,
    .supplier-form-grid-adjust,
    .supplier-form-grid-payment {
        grid-template-columns: 1fr;
    }
    .supplier-form-submit {
        justify-content: stretch;
    }
    .supplier-form-submit .btn {
        width: 100%;
    }
}

/* —— 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;
}
.content:has(.product-show-page) {
    padding-top: 16px;
    padding-bottom: 24px;
}
.content:has(.product-show-page) .topbar {
    margin-bottom: 8px;
    gap: 10px;
}
.content:has(.product-show-page) .topbar h1 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}
.content:has(.product-show-page) .topbar p {
    display: none;
}
.product-show-page .btn-small {
    padding: 4px 9px;
    font-size: 0.76rem;
}
.product-show-page {
    display: grid;
    gap: 8px;
}
.product-show-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.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;
    border-radius: 12px;
}
.product-show-hero {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    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);
}
.product-show-hero-grid {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(150px, 0.85fr);
    gap: 10px;
    align-items: start;
}
.product-show-media { width: 72px; }
.product-show-image,
.product-show-image-fallback {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px 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.5rem;
    font-weight: 700;
}
.product-show-hero-copy { min-width: 0; }
.product-show-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.product-show-page .badge {
    padding: 1px 7px;
    font-size: 0.68rem;
    line-height: 1.4;
}
.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-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.76rem;
}
.product-show-desc {
    margin: 6px 0 0;
    color: var(--muted);
    max-width: 40rem;
    font-size: 0.8rem;
    line-height: 1.4;
}
.product-show-stock-card {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    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.05rem;
    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;
}
.product-show-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}
.product-price-chip {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 252, 246, 0.9);
}
.product-price-chip span {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.product-price-chip strong {
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.2;
}
.product-price-chip em {
    font-style: normal;
    font-size: 0.68rem;
    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));
}
.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: 3px 9px;
    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;
    font-size: 0.88rem;
}
.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; }
.product-show-page .panel-toolbar {
    margin-bottom: 6px;
}
.product-movement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    padding: 0;
}
.product-movement-item {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 252, 246, 0.8);
}
.product-movement-item span {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--muted);
}
.product-movement-item strong {
    font-size: 0.88rem;
    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: 4px 0;
}
.product-show-empty p { margin: 0; }
.product-show-page .table-wrap.table-compact th,
.product-show-page .table-wrap.table-compact td {
    padding: 6px 8px;
    font-size: 0.8rem;
}
.product-danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    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: 1px;
    font-size: 0.82rem;
}
.product-danger-copy .muted {
    margin: 0;
    font-size: 0.74rem;
}
.product-form-page .panel-product-form {
    max-width: none;
}
@media (max-width: 900px) {
    .product-show-hero-grid {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .product-show-stock-card { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .product-show-hero-grid { grid-template-columns: 1fr; }
    .product-show-media,
    .product-show-image,
    .product-show-image-fallback {
        width: 64px;
        height: 64px;
        max-width: 64px;
    }
}