*,
*::before,
*::after {
    box-sizing: border-box;
}

#root {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

#root>* {
    height: calc(100% / var(--app-scale));
    transform: scale(var(--app-scale));
    transform-origin: top left;
    width: calc(100% / var(--app-scale));
}

:root {
    --dark-amethyst: #0f172a;
    --dark-amethyst-2: #1f2937;
    --indigo-ink: #3730a3;
    --indigo-velvet: #4f46e5;
    --royal-violet: #6366f1;
    --lavender-purple: #8b5cf6;
    --mauve-magic: #a78bfa;
    --mauve: #e0e7ff;
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --card: #ffffff;
    --card-alt: #f9fafb;
    --primary: var(--indigo-velvet);
    --accent: var(--royal-violet);
    --text: #0f172a;
    --muted: #6b7280;
    --border: rgba(148, 163, 184, 0.28);
    --success: #16a34a;
    --warning: #f59e0b;
    --error: #ef4444;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-scale: 0.75;

}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
}

.dashboard-body {
    zoom: var(--app-scale);
}

@supports not (zoom: 1) {

    .dashboard-body {
        transform: scale(var(--app-scale));
        transform-origin: top left;
        width: calc(100% / var(--app-scale));
        min-height: calc(100% / var(--app-scale));
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.5);
    /* Muted with opacity */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    /* Primary theme color on hover */
}

h1,
h2,
h3 {
    margin-top: 0;
    font-weight: 600;
    color: var(--text);
}

p {
    color: var(--muted);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--muted);
}

.auth-body {
    background:
        radial-gradient(circle at top, rgba(79, 70, 229, 0.09), transparent 42%),
        #f8fafc;
    color: var(--text);
    min-height: 100vh;
}

.auth-revamp {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem;
}

.auth-shell {
    width: min(420px, 100%);
}

.auth-card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.auth-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

.auth-right {
    display: none;
}

.auth-brand-compact {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.auth-brand-compact .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--primary);
    position: relative;
}

.auth-brand-compact .logo-mark::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
}

.auth-copy h1 {
    color: var(--text);
    font-size: 1.7rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.auth-copy p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-form label {
    gap: 0.45rem;
}

.auth-form label span {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-form input,
.password-field {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: var(--text);
    min-height: 48px;
    width: 100%;
}

.auth-form input {
    padding: 0 0.9rem;
}

.auth-form input::placeholder {
    color: #9ca3af;
}

.auth-form input:focus,
.password-field:focus-within {
    border-color: var(--primary);
    outline: 3px solid rgba(79, 70, 229, 0.14);
}

.password-field {
    display: flex;
    align-items: center;
    padding: 0 0.45rem 0 0.9rem;
}

.password-field input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-height: 46px;
    outline: none;
    padding: 0;
}

.password-field input:focus {
    outline: none;
}

.password-field .icon-btn {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #000000;
    flex: 0 0 36px;
    height: 36px;
    padding: 0;
    width: 36px;
}

.password-field .icon-btn:hover,
.password-field .icon-btn:active,
.password-field .icon-btn:focus {
    background: #e5e7eb;
    color: #000000;
}

.password-field .icon {
    color: #000000;
    height: 17px;
    width: 17px;
}

.password-field .icon.eye-off {
    color: #000000;
}

.auth-inline {
    align-items: center;
    display: flex;
    font-size: 0.88rem;
    justify-content: flex-end;
    margin: -0.15rem 0 0.15rem;
}

.auth-inline .muted {
    display: none;
}

.auth-form .btn.full {
    border-radius: 8px;
    font-weight: 600;
    min-height: 48px;
}

.link-button {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-button:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .auth-revamp {
        padding: 1.25rem;
    }

    .auth-shell {
        width: 100%;
    }

    .auth-left {
        padding: 1.5rem;
    }

    .auth-inline {
        justify-content: flex-start;
    }
}

.card {
    background: var(--card);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--border);
}

.section[data-section="sell"] .card+.card {
    margin-top: 1.5rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.92rem;
}

input,
select,
textarea {
    background: var(--card-alt);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.65rem 0.85rem;
    color: var(--text);
    font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.btn {
    border: none;
    border-radius: 0.9rem;
    /* Match sidebar nav-link */
    padding: 0.6rem 1rem;
    /* Closer to nav-link padding */
    font-weight: 500;
    /* Match nav-link weight more closely (was 600) */
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    box-shadow: none;
    font-size: 0.95rem;
    /* Standardize size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn.primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid rgba(79, 70, 229, 0.3);
    /* Match nav-link active border */
}

.btn .btn-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.btn.loading {
    cursor: wait;
    opacity: 0.9;
}

.btn.loading .btn-label {
    opacity: 0.75;
}

.btn.loading .btn-spinner {
    display: inline-block;
}

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

.btn.accent {
    background: var(--royal-violet);
    color: #fff;
}

.btn.ghost {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn.full {
    width: 100%;
}

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

.dashboard-body {
    min-height: 100vh;
}

.app-shell {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.sidebar {
    background: #ffffff;
    border-right: 1px solid rgba(148, 163, 184, 0.25);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.sidebar-brand strong {
    font-size: 1rem;
    display: block;
}

.sidebar-brand span {
    color: var(--muted);
    font-size: 0.75rem;
}

.sidebar-brand .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #4f46e5;
    position: relative;
    box-shadow: none;
}

.sidebar-brand .logo-mark::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-user p {
    margin: 0;
    font-weight: 600;
}

.sidebar-user span {
    color: var(--muted);
    font-size: 0.85rem;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.avatar.small {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    padding: 0.6rem 0.85rem;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
}

.nav-link.active {
    background: var(--primary);
    border-color: rgba(79, 70, 229, 0.3);
    color: #ffffff;
    box-shadow: none;
}

.nav-link:hover {
    background: rgba(79, 70, 229, 0.08);
    color: var(--text);
}

.nav-link.active:hover {
    background: var(--primary);
    color: #ffffff;
}

.nav-link .icon {
    color: #6b7280;
}

.nav-link.active .icon {
    color: #ffffff;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.logout-link {
    background: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    color: #ffffff;
    justify-content: center;
    text-decoration: none;
}

.logout-link:hover {
    background: #dc2626;
    color: #ffffff;
    text-decoration: none;
}

.logout-link .icon {
    color: #ffffff;
}

.main-panel {
    padding: 1.5rem;
    overflow-y: auto;
}

.flash-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 50;
}

.section {
    display: none;
    margin-bottom: 2rem;
}

.section.active {
    display: block;
}

.section-header {
    margin-bottom: 1.5rem;
}

.section-header.compact {
    margin-bottom: 0.75rem;
}

.section-header h2 {
    font-size: 1.4rem;
}

.section-header p {
    font-size: 0.95rem;
}

.overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.profile-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.profile-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.profile-form.compact {
    margin-top: 1.25rem;
    padding: 1rem;
    background: var(--card-alt);
    border-radius: 1rem;
    border: 1px solid var(--border);
}

.profile-metrics {
    display: flex;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}

.profile-metrics div {
    flex: 1;
    min-width: 140px;
    background: var(--card-alt);
    border-radius: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
}

.profile-metrics strong {
    display: block;
    font-size: 1.15rem;
}

.profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-list li {
    display: flex;
    justify-content: space-between;
}

.pill.subtle {
    background: rgba(90, 24, 154, 0.08);
    border: 1px solid rgba(90, 24, 154, 0.2);
    color: var(--muted);
    font-size: 0.75rem;
}

.profile-actions {
    margin-top: 0.5rem;
}

.records-table th,
.records-table td {
    white-space: nowrap;
}

.records-table td:nth-child(3) {
    white-space: normal;
}

.records-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.records-summary>div {
    background: #2563eb;
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(37, 99, 235, 0.4);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.records-summary>div:nth-child(2) {
    background: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.records-summary>div:nth-child(3) {
    background: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
}

.records-summary span {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.records-summary strong {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.25rem;
    color: #ffffff;
}

.records-summary-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.records-summary-value strong {
    margin-top: 0;
}

.balance-toggle-btn {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.balance-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.overview-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: var(--primary);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(90, 24, 154, 0.2);
    box-shadow: none;
    color: #ffffff;
}

.metric-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}

.metric-card strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.25rem;
    color: #ffffff;
}

.metric-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.metric-value strong {
    margin-top: 0;
}

.balance-toggle-dark {
    background: transparent;
    border-color: transparent;
    color: #111111;
}

.balance-toggle-dark:hover {
    background: transparent;
}

.metric-card.metric-profit {
    background: #16a34a;
    border-color: rgba(22, 163, 74, 0.5);
}

.metric-card.metric-warning {
    background: #f59e0b;
    border-color: rgba(245, 158, 11, 0.6);
}

.metric-card.metric-danger {
    background: #ef4444;
    border-color: rgba(239, 68, 68, 0.6);
}

.overview-chart {
    margin-top: 1rem;
}

.chart-controls {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 900px) {
    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}

.chart-toggle {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chart-toggle .btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    padding: 0.6rem 0.85rem;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-size: 0.92rem;
}

.chart-toggle .btn.active {
    background: var(--primary);
    border-color: rgba(79, 70, 229, 0.3);
    color: #ffffff;
    box-shadow: none;
}

.chart-toggle .btn:hover {
    background: rgba(79, 70, 229, 0.08);
    color: var(--text);
}

.chart-toggle .btn.active:hover {
    background: var(--primary);
    color: #ffffff;
}


.chart-range {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.chart-range label {
    min-width: 140px;
}

.chart-range input {
    min-width: 140px;
}

.chart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    background: var(--card-alt);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.chart-summary strong {
    font-size: 1.1rem;
    padding-left: 10px;
    color: var(--text);
}

.chart-shell {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(90, 24, 154, 0.18);
    padding: 1.5rem;
    box-shadow: none;
    overflow-x: hidden;
    position: relative;
}

.chart-grid {
    display: grid;
    gap: 0.6rem;
    align-items: end;
    min-height: 220px;
    background-image: none;
    padding-bottom: 0.5rem;
    min-width: 0;
}

.chart-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted);
    min-width: 0;
}

.chart-bar .bar {
    width: 100%;
    border-radius: 0.6rem;
    background: #6366f1;
    box-shadow: none;
    min-height: 6px;
    transition: height 0.3s ease;
}

.chart-bar span {
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-tooltip {
    position: absolute;
    background: #1f1b2f;
    color: #ffffff;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 5;
}

.chart-tooltip.show {
    display: flex;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    background: var(--card-alt);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
}

.payment-summary span {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.payment-summary strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.1rem;
    color: var(--text);
}

.edit-bill-table {
    width: 100%;
    border-collapse: collapse;
}

.edit-bill-table td {
    padding: 0.5rem;
    vertical-align: middle;
    overflow: visible !important;
    /* Ensure cells don't clip dropdown */
}

.edit-item-search-wrap {
    position: relative;
    overflow: visible !important;
}

.edit-table-wrapper {
    overflow: visible !important;
    max-height: none !important;
}

.edit-bill-row:focus-within {
    z-index: 100;
    position: relative;
}

.edit-item-search-wrap .product-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999 !important;
    width: 100%;
    min-width: 280px;
    max-height: 250px;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    border-radius: 0.8rem;
    overflow-y: auto;
}

.edit-item-search-wrap .product-suggestions.show {
    display: block !important;
}

.bill-edit-modal .modal-content {
    overflow-y: auto;
    overflow-x: visible !important;
}

.bill-edit-summary {
    position: relative;
    z-index: 1; /* Lower than suggestions */
}

.analytics-tab-btn.active {
    background: var(--primary) !important;
    color: white !important;
    font-weight: 600;
}

.records-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.records-toolbar input {
    max-width: 320px;
    width: 100%;
}

.records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    /* Smaller font */
}

.records-table thead th {
    background: #f9fafb;
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    text-transform: uppercase;
    font-size: 0.7rem;
    /* Smaller header font */
    letter-spacing: 0.05em;
    padding: 0.6rem 0.6rem;
    /* Reduced padding */
    white-space: nowrap;
    /* Prevent header wrapping */
}

.records-table th,
.records-table td {
    padding: 0.5rem 0.6rem;
    /* Compact cell padding */
    white-space: nowrap;
    /* Prevent content wrapping */
    vertical-align: middle;
}

.records-table tbody tr {
    transition: background 0.2s ease;
}

.records-table tbody tr:hover {
    background: rgba(90, 24, 154, 0.06);
}



.records-table .action-cell {
    justify-content: center;
}

.action-cell span {
    color: #0f172a;
}

.products-table th,
.products-table td {
    vertical-align: middle;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(46, 31, 88, 0.25);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 20;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    width: min(960px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: none;
}

.modal-content .form-grid {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.modal-content .variant-wrapper {
    background: #ffffff;
}

.modal-content .variant-row {
    background: var(--bg-elevated);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
}

.modal-content .variant-row .btn {
    align-self: center;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 21, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    width: min(440px, 90vw);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1.1rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s ease;
}

.modal-overlay.show .modal-card {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem 0 1rem;

}

.modal-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

.modal-body {
    margin: 0 0 1.4rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-actions {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.print-area {
    display: none;
}

.print-sheet {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f1b2f;
    padding: 1.5rem;
}

.print-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.print-totals {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: 1rem;
}

.print-totals span {
    color: #6f6886;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

@media print {
    body.print-shopkeeper * {
        visibility: hidden;
    }

    body.print-shopkeeper .print-area,
    body.print-shopkeeper .print-area * {
        visibility: visible;
    }

    body.print-shopkeeper .print-area {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
    }
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.image-modal {
    width: min(860px, 100%);
}

.image-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.zoom-label {
    font-weight: 600;
    color: var(--muted);
}

.image-stage {
    background: var(--bg-elevated);
    border-radius: 1rem;
    border: 1px solid var(--border);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
}

.image-stage img {
    max-width: 100%;
    max-height: 60vh;
    transition: transform 0.2s ease;
    will-change: transform;
}

.view-grid {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 1.5rem;
}

.view-image {
    background: var(--card-alt);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.view-image img {
    max-width: 100%;
    border-radius: 0.8rem;
}

.view-image.placeholder {
    color: var(--muted);
}

.view-details p {
    margin: 0 0 0.6rem;
    color: var(--muted);
}

.view-details strong {
    color: var(--text);
}

.view-details ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
}

@media (max-width: 800px) {
    .view-grid {
        grid-template-columns: 1fr;
    }
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 2rem;
    gap: 1.5rem;
}

.top-title h1 {
    margin: 0 0 0.3rem;
    font-size: 1.6rem;
}

.top-title p {
    margin: 0;
    color: var(--muted);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0.4rem 0;
    min-width: min(320px, 100%);
    box-shadow: none;
}

.search-box input {
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
    width: 100%;
}

.top-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.top-user strong {
    display: block;
    font-size: 0.95rem;
}

.top-user span {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .nav-link {
        flex: 1 1 45%;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .top-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .search-box {
        min-width: 100%;
    }

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

    .flash-stack {
        left: 16px;
        right: 16px;
        top: 16px;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sell-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sell-item-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(200px, 1.2fr) minmax(140px, 0.9fr) minmax(120px, 0.7fr) auto;
    gap: 1rem;
    align-items: center;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(90, 24, 154, 0.18);
    box-shadow: none;
}

.stock-indicator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-radius: 0.8rem;
    border: 1px solid var(--border);
    background: var(--card-alt);
    font-weight: 600;
    color: var(--text);
}

.stock-indicator.in {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.35);
    color: #166534;
}

.stock-indicator.out {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #991b1b;
}

.stock-indicator .stock-count {
    font-weight: 700;
}

.sell-item-row .btn {
    justify-self: end;
}

.sell-product-search {
    margin-bottom: 0.4rem;
}

.sell-item-row label span {
    font-weight: 600;
    color: var(--text);
}

.sell-item-row input,
.sell-item-row select {
    background: #ffffff;
}

.stock-hint {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.sell-item-row .remove-row {
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .sell-item-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .sell-item-row .btn {
        justify-self: stretch;
    }
}

.sell-item-row label {
    position: relative;
}

.sell-meta label {
    position: relative;
}

.product-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    box-shadow: 0 12px 24px rgba(36, 0, 70, 0.15);
    padding: 0.4rem;
    display: none;
    flex-direction: column;
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-suggestions.show {
    display: flex;
}

.product-suggestion {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    cursor: pointer;
    color: var(--text);
}

.product-suggestion:hover {
    background: var(--card-alt);
}

.shopkeeper-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    box-shadow: 0 12px 24px rgba(36, 0, 70, 0.12);
    padding: 0.4rem;
    display: none;
    z-index: 5;
    max-height: 240px;
    overflow-y: auto;
}

.shopkeeper-suggestions.show {
    display: block;
}

.shopkeeper-suggestion {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    cursor: pointer;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.shopkeeper-suggestion:hover {
    background: var(--card-alt);
}

.shopkeeper-suggestion-name {
    font-weight: 600;
}

.shopkeeper-suggestion-meta {
    color: var(--muted);
    font-size: 0.8rem;
}

.sell-meta {
    margin-top: 1rem;
}

.shopkeeper-new {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.shopkeeper-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--card-alt);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    margin-top: 1rem;
    flex-wrap: wrap;
}

.shopkeeper-history {
    margin-top: 1.5rem;
}

.shopkeeper-history-toolbar {
    margin: 0.75rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.shopkeeper-history-toolbar input {
    width: 100%;
    max-width: 360px;
}

.shopkeeper-history-table {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.shopkeeper-history-table table {
    min-width: 520px;
}

.shopkeeper-history-table thead th {
    position: sticky;
    top: 0;
    background: var(--card-alt);
    z-index: 1;
}

.shopkeeper-history-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}


.icon-input {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-alt);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    padding: 0.6rem 0.9rem;
}

.icon-input input {
    border: none;
    padding: 0;
    background: transparent;
    flex: 1;
}

.icon-input input:focus {
    outline: none;
}

.form-grid .span-2 {
    grid-column: span 2;
}

.variant-wrapper {
    background: var(--card-alt);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.variant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.variant-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.variant-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    align-items: end;
}

.variant-row .btn {
    justify-self: end;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.search-wrap {
    flex: 1 1 280px;
}

.search-wrap input {
    width: 100%;
}

.filter-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn.small {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
}


.btn.danger {
    border-color: rgba(255, 107, 107, 0.45);
    color: #ffb3b3;
}

.action-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
}

.action-cell .icon-btn,
.action-cell .btn {
    margin: 0;
}

.product-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-thumb {
    width: 36px;
    height: 36px;
    border-radius: 0.6rem;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--card-alt);
}

.product-thumb.product-preview {
    cursor: zoom-in;
}

.product-thumb.placeholder {
    background: #f3f4f6;
}

.icon-btn {
    width: 28px;
    /* Smaller button */
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    font-size: 0.9rem;
}

.records-summary-item span {
    color: white;
}

.icon-btn svg,
.icon-btn .icon {
    pointer-events: none;
}

/* Badge Styles */
.badge {
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.02em;
}

.badge.status-in_stock {
    background: rgba(22, 163, 74, 0.1);
    color: var(--success);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.badge.status-out_of_stock {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.icon-btn.danger {
    border-color: rgba(199, 75, 75, 0.35);
}

.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    color: white;
}

.icon.eye {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='black' d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='black' d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z'/%3E%3C/svg%3E");
}

.icon.eye-off {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='black' d='M644-428 586-486q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-144.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q146 0 266 81.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-146 0-266-81.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 144.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='black' d='M644-428 586-486q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-144.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q146 0 266 81.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-146 0-266-81.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 144.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z'/%3E%3C/svg%3E");
    color: #000000;
}

.icon.edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 17.3V19h1.7L16.4 9.3l-1.7-1.7L5 17.3Zm13.7-9.6a.99.99 0 0 0 0-1.4l-1-1a.99.99 0 0 0-1.4 0l-1.1 1.1 2.4 2.4 1.1-1.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 17.3V19h1.7L16.4 9.3l-1.7-1.7L5 17.3Zm13.7-9.6a.99.99 0 0 0 0-1.4l-1-1a.99.99 0 0 0-1.4 0l-1.1 1.1 2.4 2.4 1.1-1.1Z'/%3E%3C/svg%3E");
}

.icon.trash {
    color: #c74b4b;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12l-1 14H7L6 7Zm3-3h6l1 2H8l1-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12l-1 14H7L6 7Zm3-3h6l1 2H8l1-2Z'/%3E%3C/svg%3E");
}

.icon.plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E");
}

.icon.search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm7.7 13.3 2.9 2.9-1.4 1.4-2.9-2.9 1.4-1.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm7.7 13.3 2.9 2.9-1.4 1.4-2.9-2.9 1.4-1.4Z'/%3E%3C/svg%3E");
}

.icon.logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 16.9999L21 11.9999M21 11.9999L16 6.99994M21 11.9999H9M12 16.9999C12 17.2955 12 17.4433 11.989 17.5713C11.8748 18.9019 10.8949 19.9968 9.58503 20.2572C9.45903 20.2823 9.31202 20.2986 9.01835 20.3312L7.99694 20.4447C6.46248 20.6152 5.69521 20.7005 5.08566 20.5054C4.27293 20.2453 3.60942 19.6515 3.26118 18.8724C3 18.2881 3 17.5162 3 15.9722V8.02764C3 6.4837 3 5.71174 3.26118 5.12746C3.60942 4.34842 4.27293 3.75454 5.08566 3.49447C5.69521 3.29941 6.46246 3.38466 7.99694 3.55516L9.01835 3.66865C9.31212 3.70129 9.45901 3.71761 9.58503 3.74267C10.8949 4.0031 11.8748 5.09798 11.989 6.42855C12 6.55657 12 6.70436 12 6.99994' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 16.9999L21 11.9999M21 11.9999L16 6.99994M21 11.9999H9M12 16.9999C12 17.2955 12 17.4433 11.989 17.5713C11.8748 18.9019 10.8949 19.9968 9.58503 20.2572C9.45903 20.2823 9.31202 20.2986 9.01835 20.3312L7.99694 20.4447C6.46248 20.6152 5.69521 20.7005 5.08566 20.5054C4.27293 20.2453 3.60942 19.6515 3.26118 18.8724C3 18.2881 3 17.5162 3 15.9722V8.02764C3 6.4837 3 5.71174 3.26118 5.12746C3.60942 4.34842 4.27293 3.75454 5.08566 3.49447C5.69521 3.29941 6.46246 3.38466 7.99694 3.55516L9.01835 3.66865C9.31212 3.70129 9.45901 3.71761 9.58503 3.74267C10.8949 4.0031 11.8748 5.09798 11.989 6.42855C12 6.55657 12 6.70436 12 6.99994' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.nav-overview {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 21V13.6C9 13.0399 9 12.7599 9.109 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75993 12 10.04 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V21M2 9.5L11.04 2.72C11.3843 2.46181 11.5564 2.33271 11.7454 2.28294C11.9123 2.23902 12.0877 2.23902 12.2546 2.28295C12.4436 2.33271 12.6157 2.46181 12.96 2.72L22 9.5M4 8V17.8C4 18.9201 4 19.4802 4.21799 19.908C4.40974 20.2843 4.7157 20.5903 5.09202 20.782C5.51985 21 6.0799 21 7.2 21H16.8C17.9201 21 18.4802 21 18.908 20.782C19.2843 20.5903 19.5903 20.2843 19.782 19.908C20 19.4802 20 18.9201 20 17.8V8L13.92 3.44C13.2315 2.92361 12.8872 2.66542 12.5091 2.56589C12.1754 2.47804 11.8246 2.47804 11.4909 2.56589C11.1128 2.66542 10.7685 2.92361 10.08 3.44L4 8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 21V13.6C9 13.0399 9 12.7599 9.109 12.546C9.20487 12.3578 9.35785 12.2049 9.54601 12.109C9.75993 12 10.04 12 10.6 12H13.4C13.9601 12 14.2401 12 14.454 12.109C14.6422 12.2049 14.7951 12.3578 14.891 12.546C15 12.7599 15 13.0399 15 13.6V21M2 9.5L11.04 2.72C11.3843 2.46181 11.5564 2.33271 11.7454 2.28294C11.9123 2.23902 12.0877 2.23902 12.2546 2.28295C12.4436 2.33271 12.6157 2.46181 12.96 2.72L22 9.5M4 8V17.8C4 18.9201 4 19.4802 4.21799 19.908C4.40974 20.2843 4.7157 20.5903 5.09202 20.782C5.51985 21 6.0799 21 7.2 21H16.8C17.9201 21 18.4802 21 18.908 20.782C19.2843 20.5903 19.5903 20.2843 19.782 19.908C20 19.4802 20 18.9201 20 17.8V8L13.92 3.44C13.2315 2.92361 12.8872 2.66542 12.5091 2.56589C12.1754 2.47804 11.8246 2.47804 11.4909 2.56589C11.1128 2.66542 10.7685 2.92361 10.08 3.44L4 8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.nav-products {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.0004 9V6C16.0004 3.79086 14.2095 2 12.0004 2C9.79123 2 8.00037 3.79086 8.00037 6V9M3.59237 10.352L2.99237 16.752C2.82178 18.5717 2.73648 19.4815 3.03842 20.1843C3.30367 20.8016 3.76849 21.3121 4.35839 21.6338C5.0299 22 5.94374 22 7.77142 22H16.2293C18.057 22 18.9708 22 19.6423 21.6338C20.2322 21.3121 20.6971 20.8016 20.9623 20.1843C21.2643 19.4815 21.179 18.5717 21.0084 16.752L20.4084 10.352C20.2643 8.81535 20.1923 8.04704 19.8467 7.46616C19.5424 6.95458 19.0927 6.54511 18.555 6.28984C17.9444 6 17.1727 6 15.6293 6L8.37142 6C6.82806 6 6.05638 6 5.44579 6.28984C4.90803 6.54511 4.45838 6.95458 4.15403 7.46616C3.80846 8.04704 3.73643 8.81534 3.59237 10.352Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.0004 9V6C16.0004 3.79086 14.2095 2 12.0004 2C9.79123 2 8.00037 3.79086 8.00037 6V9M3.59237 10.352L2.99237 16.752C2.82178 18.5717 2.73648 19.4815 3.03842 20.1843C3.30367 20.8016 3.76849 21.3121 4.35839 21.6338C5.0299 22 5.94374 22 7.77142 22H16.2293C18.057 22 18.9708 22 19.6423 21.6338C20.2322 21.3121 20.6971 20.8016 20.9623 20.1843C21.2643 19.4815 21.179 18.5717 21.0084 16.752L20.4084 10.352C20.2643 8.81535 20.1923 8.04704 19.8467 7.46616C19.5424 6.95458 19.0927 6.54511 18.555 6.28984C17.9444 6 17.1727 6 15.6293 6L8.37142 6C6.82806 6 6.05638 6 5.44579 6.28984C4.90803 6.54511 4.45838 6.95458 4.15403 7.46616C3.80846 8.04704 3.73643 8.81534 3.59237 10.352Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.nav-sell {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 9H9.01M15 15H15.01M16 8L8 16M9.2019 20.6009C9.52965 20.5575 9.86073 20.6464 10.1218 20.8475L11.3251 21.7708C11.7228 22.0764 12.2761 22.0764 12.6727 21.7708L13.9215 20.812C14.1548 20.6331 14.4492 20.5542 14.7403 20.5931L16.3024 20.7986C16.799 20.8642 17.2779 20.5875 17.4701 20.1242L18.0712 18.6709C18.1834 18.3987 18.3989 18.1832 18.6711 18.0709L20.1243 17.4698C20.5876 17.2787 20.8643 16.7988 20.7987 16.3021L20.601 14.7966C20.5576 14.4688 20.6465 14.1377 20.8476 13.8766L21.7709 12.6733C22.0764 12.2755 22.0764 11.7222 21.7709 11.3256L20.812 10.0767C20.6332 9.84339 20.5543 9.54896 20.5932 9.25785L20.7987 7.69568C20.8643 7.19902 20.5876 6.72015 20.1243 6.52793L18.6711 5.92684C18.3989 5.81462 18.1834 5.59907 18.0712 5.32685L17.4701 3.87356C17.279 3.41024 16.799 3.13358 16.3024 3.19913L14.7403 3.40468C14.4492 3.44468 14.1548 3.36579 13.9226 3.18802L12.6738 2.22916C12.2761 1.92361 11.7228 1.92361 11.3262 2.22916L10.0774 3.18802C9.84407 3.36579 9.54965 3.44468 9.25856 3.40691L7.69647 3.20136C7.19984 3.1358 6.721 3.41246 6.52879 3.87578L5.92884 5.32907C5.81552 5.60018 5.59998 5.81573 5.32889 5.92906L3.87568 6.52904C3.41238 6.72126 3.13574 7.20013 3.20129 7.69679L3.40683 9.25897C3.4446 9.55007 3.36572 9.8445 3.18796 10.0767L2.22915 11.3256C1.92362 11.7233 1.92362 12.2767 2.22915 12.6733L3.18796 13.9222C3.36683 14.1555 3.44571 14.4499 3.40683 14.741L3.20129 16.3032C3.13574 16.7999 3.41238 17.2787 3.87568 17.471L5.32889 18.0721C5.60109 18.1843 5.81663 18.3998 5.92884 18.672L6.5299 20.1253C6.721 20.5887 7.20096 20.8653 7.69758 20.7998L9.2019 20.6009ZM9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9ZM15.5 15C15.5 15.2761 15.2761 15.5 15 15.5C14.7239 15.5 14.5 15.2761 14.5 15C14.5 14.7239 14.7239 14.5 15 14.5C15.2761 14.5 15.5 14.7239 15.5 15Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 9H9.01M15 15H15.01M16 8L8 16M9.2019 20.6009C9.52965 20.5575 9.86073 20.6464 10.1218 20.8475L11.3251 21.7708C11.7228 22.0764 12.2761 22.0764 12.6727 21.7708L13.9215 20.812C14.1548 20.6331 14.4492 20.5542 14.7403 20.5931L16.3024 20.7986C16.799 20.8642 17.2779 20.5875 17.4701 20.1242L18.0712 18.6709C18.1834 18.3987 18.3989 18.1832 18.6711 18.0709L20.1243 17.4698C20.5876 17.2787 20.8643 16.7988 20.7987 16.3021L20.601 14.7966C20.5576 14.4688 20.6465 14.1377 20.8476 13.8766L21.7709 12.6733C22.0764 12.2755 22.0764 11.7222 21.7709 11.3256L20.812 10.0767C20.6332 9.84339 20.5543 9.54896 20.5932 9.25785L20.7987 7.69568C20.8643 7.19902 20.5876 6.72015 20.1243 6.52793L18.6711 5.92684C18.3989 5.81462 18.1834 5.59907 18.0712 5.32685L17.4701 3.87356C17.279 3.41024 16.799 3.13358 16.3024 3.19913L14.7403 3.40468C14.4492 3.44468 14.1548 3.36579 13.9226 3.18802L12.6738 2.22916C12.2761 1.92361 11.7228 1.92361 11.3262 2.22916L10.0774 3.18802C9.84407 3.36579 9.54965 3.44468 9.25856 3.40691L7.69647 3.20136C7.19984 3.1358 6.721 3.41246 6.52879 3.87578L5.92884 5.32907C5.81552 5.60018 5.59998 5.81573 5.32889 5.92906L3.87568 6.52904C3.41238 6.72126 3.13574 7.20013 3.20129 7.69679L3.40683 9.25897C3.4446 9.55007 3.36572 9.8445 3.18796 10.0767L2.22915 11.3256C1.92362 11.7233 1.92362 12.2767 2.22915 12.6733L3.18796 13.9222C3.36683 14.1555 3.44571 14.4499 3.40683 14.741L3.20129 16.3032C3.13574 16.7999 3.41238 17.2787 3.87568 17.471L5.32889 18.0721C5.60109 18.1843 5.81663 18.3998 5.92884 18.672L6.5299 20.1253C6.721 20.5887 7.20096 20.8653 7.69758 20.7998L9.2019 20.6009ZM9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9ZM15.5 15C15.5 15.2761 15.2761 15.5 15 15.5C14.7239 15.5 14.5 15.2761 14.5 15C14.5 14.7239 14.7239 14.5 15 14.5C15.2761 14.5 15.5 14.7239 15.5 15Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.nav-records {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 14V18M16 12V18M12 8V18M20 6.8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H15.2C16.8802 2 17.7202 2 18.362 2.32698C18.9265 2.6146 19.3854 3.07354 19.673 3.63803C20 4.27976 20 5.11984 20 6.8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 14V18M16 12V18M12 8V18M20 6.8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H15.2C16.8802 2 17.7202 2 18.362 2.32698C18.9265 2.6146 19.3854 3.07354 19.673 3.63803C20 4.27976 20 5.11984 20 6.8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.nav-profile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.00002 21.8174C4.6026 22 5.41649 22 6.8 22H17.2C18.5835 22 19.3974 22 20 21.8174M4.00002 21.8174C3.87082 21.7783 3.75133 21.7308 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H17.2C18.8802 2 19.7202 2 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C22 4.27976 22 5.11984 22 6.8V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C20.2487 21.7308 20.1292 21.7783 20 21.8174M4.00002 21.8174C4.00035 21.0081 4.00521 20.5799 4.07686 20.2196C4.39249 18.6329 5.63288 17.3925 7.21964 17.0769C7.60603 17 8.07069 17 9 17H15C15.9293 17 16.394 17 16.7804 17.0769C18.3671 17.3925 19.6075 18.6329 19.9231 20.2196C19.9948 20.5799 19.9996 21.0081 20 21.8174M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.00002 21.8174C4.6026 22 5.41649 22 6.8 22H17.2C18.5835 22 19.3974 22 20 21.8174M4.00002 21.8174C3.87082 21.7783 3.75133 21.7308 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H17.2C18.8802 2 19.7202 2 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C22 4.27976 22 5.11984 22 6.8V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C20.2487 21.7308 20.1292 21.7783 20 21.8174M4.00002 21.8174C4.00035 21.0081 4.00521 20.5799 4.07686 20.2196C4.39249 18.6329 5.63288 17.3925 7.21964 17.0769C7.60603 17 8.07069 17 9 17H15C15.9293 17 16.394 17 16.7804 17.0769C18.3671 17.3925 19.6075 18.6329 19.9231 20.2196C19.9948 20.5799 19.9996 21.0081 20 21.8174M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon.user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E");
}

.icon.phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2 11.4 11.4 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.2a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .6 3.6 1 1 0 0 1-.2 1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2 11.4 11.4 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.2a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .6 3.6 1 1 0 0 1-.2 1Z'/%3E%3C/svg%3E");
}

.icon-btn.add-icon {
    background: var(--indigo-velvet);
    border: none;
}

.icon-btn.add-icon .icon {
    color: #ffffff;
}

.empty-cell {
    text-align: center;
    padding: 1rem;
    color: var(--muted);
}

.stats {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.stats div {
    background: var(--card);
    padding: 1rem;
    border-radius: 0.9rem;
    flex: 1;
    border: 1px solid var(--border);
}

.stats strong {
    font-size: 1.4rem;
}

.brand-pill {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(90, 24, 154, 0.08);
    border-radius: 0.9rem;
    border: 1px solid rgba(90, 24, 154, 0.2);
}

.sale-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    background: var(--card);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(90, 24, 154, 0.3);
    margin: 1rem 0;
}

.table-wrapper {
    overflow-x: auto;
}

.records-table-scroll {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.records-table-scroll .records-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.products-table-scroll {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    width: 100%;
    padding-bottom: 0.5rem;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.products-table-scroll table {
    min-width: 0;
    width: 100%;
}

.products-table-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--card-alt);
    z-index: 2;
    box-shadow: 0 1px 0 rgba(90, 24, 154, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.6rem;
    border-bottom: 1px solid rgba(90, 24, 154, 0.1);
    text-align: left;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: rgba(90, 24, 154, 0.08);
    font-size: 0.85rem;
    margin: 0.1rem;
}

.pill.success {
    background: rgba(43, 138, 91, 0.18);
    color: #2b8a5b;
}

.pill.warning {
    background: rgba(208, 123, 0, 0.15);
    color: var(--warning);
}

.empty-state {
    color: var(--muted);
    font-style: italic;
}

.bill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bill-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(90, 24, 154, 0.1);
}

.bill-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.bill-card {
    background: var(--card);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
}

.bill-card header,
.bill-card footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--muted);
}

.bill-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bill-card li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.record-items {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.highlight {
    border: 1px solid rgba(90, 24, 154, 0.25);
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    font-size: 0.92rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid transparent;
}

.alert-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.alert-content p {
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}

.alert.fade-out {
    opacity: 0;
    transform: translateY(-6px);
}

.alert-success {
    background: #ffffff;
    border-color: rgba(79, 70, 229, 0.2);
    color: var(--primary);
}

.alert-success .alert-icon {
    color: var(--primary);
}

.alert-error {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.alert-error .alert-icon {
    color: var(--error);
}

.sub {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}

/* Profile Redesign Styles */
.profile-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
        margin-bottom: 2rem;
    }
}

.profile-sidebar {
    position: sticky;
    top: 2rem;
}

.profile-sidebar h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    /* Matches demo styling */
    color: var(--text-dark);
}

.profile-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-tab-btn {
    appearance: none;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    /* Match nav-link font size */
    color: var(--muted);
    border-radius: 0.75rem;
    /* Match nav-link border-radius */
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Match nav-link gap */
    width: 100%;
}

.profile-tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-tab-btn:not(:disabled):hover {
    background: rgba(79, 70, 229, 0.08);
    /* Match nav-link hover */
    color: var(--text);
}

.profile-tab-btn.active {
    background: var(--primary);
    /* Match nav-link active */
    color: #ffffff;
    box-shadow: none;
}

.profile-tab-btn.active:hover {
    background: var(--primary);
    color: #ffffff;
}

.custom-icon {
    display: inline-block;
    width: 1.25rem;
    /* Match .icon size */
    height: 1.25rem;
    color: #6b7280;
    /* Match default icon color */
    transition: color 0.2s ease;
}

.profile-tab-btn.active .custom-icon {
    color: #ffffff;
    /* Match active icon color */
}

.profile-tab-btn:hover .custom-icon {
    color: var(--text);
    /* Optional: match hover behavior if needed, usually inherits text color or stays specific */
}

.profile-tab-btn.active:hover .custom-icon {
    color: #ffffff;
}

.profile-tab-btn.danger {
    color: var(--error);
    margin-top: 1rem;
}

.profile-tab-btn.danger:hover {
    background: rgba(199, 75, 75, 0.08);
    /* var(--error) with opacity */
}

/* Content Area */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-tab-section {
    display: none;
    flex-direction: column;
    gap: 2rem;
    animation: fadeIn 0.3s ease;
}

.profile-tab-section.active {
    display: flex;
}

.tab-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Profile Cards */
.profile-section-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.profile-section-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-dark);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

/* Identity Card Specifics */
.identity-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.avatar.big {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 50%;
    background: var(--primary-light);
    /* Assuming this var exists or will fallback */
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Form Grid */
.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

@media (max-width: 600px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
}

.profile-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-form-grid .span-2 {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .profile-form-grid .span-2 {
        grid-column: span 1;
    }
}

.profile-form-grid label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
}

.profile-form-grid input {
    padding: 0.75rem 0;
    /* Minimalist underline style or box? Demo has invisible borders mostly? No, demo has standard inputs */
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    width: 100%;
    color: var(--text-dark);
}

.profile-form-grid input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.profile-form-grid .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.password-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 2.8rem;
    /* Make room for the button */
}

.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    width: 1.8rem;
    height: 1.8rem;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    transition: color 0.2s, background 0.2s;
}

.password-toggle-btn:hover {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
    /* faint primary bg */
}

.btn.danger-custom {
    background: var(--error);
    color: #ffffff;
    border: none;
    padding: 0.6rem 1rem;
    gap: 0.5rem;
    font-weight: 500;
}

.btn.danger-custom:hover {
    background: #dc2626;
    /* Darker red */
    color: #ffffff;
    transform: translateY(-1px);
}

.btn.danger-custom .icon {
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.btn.danger-custom.remove-row {
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* Adjust grid layout to accommodate the smaller button if necessary */
.sell-item-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(200px, 1.2fr) minmax(140px, 0.9fr) minmax(120px, 0.7fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* Professional Bill Styles & Print Layout */
.btn-menu-style {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s;
    height: auto;
}

.btn-menu-style:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.btn-menu-style .icon {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    color: currentColor;
}

.print-area {
    display: none;
}

.print-sheet {
    background: #ffffff;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
    /* display: none; - Removed to show in Modal */
}

@media print {
    body.print-mode * {
        visibility: hidden;
    }

    body.print-mode .print-sheet,
    body.print-mode .print-sheet * {
        visibility: visible;
    }

    body.print-mode {
        background: #fff;
    }

    body.print-mode .print-sheet {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 100vh;
        padding: 12mm;
    }

    @page {
        margin: 10mm;
        size: auto;
    }
}

.professional-bill .print-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.professional-bill .brand h1 {
    font-size: 2rem;
    color: #0f172a;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.professional-bill .brand p {
    color: #64748b;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.professional-bill .brand .brand-line {
    margin-bottom: 0.2rem;
    display: none;
}

/* .professional-bill .bill-info {
} */

.professional-bill .bill-info h2 {
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.professional-bill .client-info {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.professional-bill .client-line {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.professional-bill .client-label {
    color: black;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    font-weight: 500;
}

.professional-bill .client-value {
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
}

.professional-bill .table-container {
    position: relative;
    z-index: 1;
}

.professional-bill .bill-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.professional-bill .bill-table th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid #0f172a;
}

.professional-bill .bill-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}

.professional-bill .bill-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.professional-bill .notes {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: auto;
}

.professional-bill .notes .terms {
    margin-top: 2rem;
    border-top: 1px solid #cbd5e1;
    display: inline-block;
    padding-top: 0.5rem;
    color: #0f172a;
}

.professional-bill .totals {
    width: 300px;
}

.professional-bill .total-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1rem;
    color: #64748b;
}

.professional-bill .total-row.highlight {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1rem;
    border-top: 2px solid #0f172a;
    margin-top: 0.5rem;
}

/* Watermark */
.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 8rem;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.04);
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    z-index: 0;
}

@media print {

    .app-shell,
    .modal.show {
        display: none !important;
    }

    body {
        background: #fff;
        height: auto;
        overflow: visible;
    }

    .print-area {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: 9999;
    }

    .print-sheet {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 12mm;
    }

    @page {
        margin: 10mm;
        size: auto;
    }
}

/* Compact Products Table Styles */
.products-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}

.products-table th,
.products-table td {
    padding: 0.5rem 0.6rem !important;
    /* Force compact padding */
    font-size: 0.85rem !important;
    /* Smaller font size */
    white-space: nowrap;
}

.products-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    /* Even smaller for headers */
    letter-spacing: 0.05em;
}

.products-table .action-cell {
    display: flex !important;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row !important;
    margin-top: 1.3rem;

}

.new-tb {
    margin-top: 2rem;
    border: none;
}

.products-table .icon-btn {
    width: 2rem;
    height: 2rem;
    /* Compact buttons */
}

.products-table .icon-btn .icon {
    width: 1.1rem;
    height: 1.1rem;
}