/* ========================================
   ENTERPRISE PORTAL STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

:root {
    --primary-500: #1e40af;
    /* blue — matches main app */
    --primary-600: #1d4ed8;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;

    --neutral-50: #ffffff;
    --neutral-100: #f8fafc;
    --neutral-200: #f1f5f9;
    --neutral-300: #e2e8f0;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    --success-500: #22c55e;
    --success-600: #16a34a;
    --warning-500: #f59e0b;
    --danger-500: #ef4444;
    --danger-600: #dc2626;

    --sidebar-width: 240px;
    --header-height: 64px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--neutral-100);
    color: var(--neutral-800);
    line-height: 1.5;
}

/* ========== LOADER ========== */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: var(--neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s;
}

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

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, .15);
    border-top-color: var(--primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

.loader-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
}

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

/* ========== LOGIN SCREEN (UNIFORM DESIGN) ========== */
.login-split-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.login-branding {
    flex: 1;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.login-branding::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.branding-content {
    width: 100%;
    max-width: 480px;
    text-align: center;
    z-index: 1;
}

.branding-content h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -2px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.branding-subtitle {
    font-size: 17px;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.4;
    margin-bottom: 32px;
    color: #ffffff;
}

.branding-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.feature-item {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(10px) translateY(-2px);
}

.feature-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.feature-text span {
    font-size: 13.5px;
    opacity: 0.85;
    color: #ffffff;
    line-height: 1.4;
}

.login-form-panel {
    flex: 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

.login-form-wrapper {
    width: 100%;
    max-width: 400px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--neutral-700);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: 1.5px solid var(--neutral-300);
    border-radius: 8px;
    font-size: 14px;
    color: var(--neutral-900);
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231d4ed8' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

.form-group input::placeholder {
    color: var(--neutral-400);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group select:hover {
    border-color: var(--primary-500);
    background-color: var(--primary-50);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-primary {
    background: var(--primary-600);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--neutral-200);
    border-color: var(--neutral-400);
}

.error-message {
    color: var(--danger-500);
    font-size: .85rem;
    margin-top: 6px;
    min-height: 20px;
}

.login-footer-link {
    text-align: center;
    margin-top: 20px;
    font-size: .85rem;
    color: var(--neutral-500);
}

/* ========== DASHBOARD LAYOUT ========== */
.dashboard-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* SIDEBAR */
.sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--neutral-200);
    color: var(--neutral-800);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar-logo {
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--neutral-200);
}

.sidebar-logo h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neutral-800);
}

.sidebar-logo span {
    font-size: .75rem;
    color: var(--neutral-500);
}

.sidebar-nav {
    padding: 12px 0;
    flex: 1;
}

.nav-section-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--neutral-500);
    letter-spacing: 1.2px;
    padding: 24px 20px 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.nav-section-label:hover {
    color: var(--primary-600);
}

.nav-section-label.always-visible {
    cursor: default;
}

.nav-section-label.always-visible:hover {
    color: var(--neutral-500);
}

.section-arrow {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.nav-section-label.expanded .section-arrow {
    transform: rotate(180deg);
}

/* Decongestion — sparser rhythm */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

.collapsible-content.expanded {
    max-height: 500px; /* arbitrary large value */
    opacity: 1;
}

.sidebar-nav div:first-child.nav-section-label {
    padding-top: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: var(--neutral-600);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: left;
}

.nav-item:hover {
    background: var(--primary-50);
    color: var(--primary-600);
}

.nav-item.active {
    background: var(--primary-50);
    color: var(--primary-600);
    border-left-color: var(--primary-500);
    font-weight: 600;
}

.nav-icon {
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--neutral-200);
}

.admin-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-avatar {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
}

.admin-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-details span:first-child {
    font-size: .875rem;
    font-weight: 600;
    color: var(--neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-details span:last-child {
    font-size: .75rem;
    color: var(--neutral-500);
}

.btn-logout {
    width: 100%;
    padding: 8px;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: 6px;
    color: var(--neutral-600);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.btn-logout:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: var(--neutral-100);
}

.content-section {
    display: none;
    padding: 32px;
}

.content-section.active {
    display: block;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.section-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.section-subtitle {
    color: var(--neutral-500);
    font-size: .875rem;
    margin-top: 2px;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ========== OVERVIEW BANNER ========== */
.overview-banner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: linear-gradient(120deg, var(--primary-700) 0%, var(--primary-900) 100%);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
}

.overview-greeting {
    font-size: .85rem;
    font-weight: 500;
    opacity: .8;
    margin-bottom: 4px;
}

.overview-enterprise-name {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
}

.overview-meta {
    font-size: .8rem;
    opacity: .75;
    display: flex;
    align-items: center;
    gap: 0;
}

.overview-meta-sep {
    margin: 0 8px;
    opacity: .5;
}

.btn-refresh {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-refresh:hover {
    background: rgba(255, 255, 255, .25);
}

/* ========== KPI CARDS ========== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--neutral-200);
    border-left: 4px solid var(--kpi-c, #1d4ed8);
    padding: 18px 18px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    transition: box-shadow .2s, transform .15s;
}

.kpi-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.kpi-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-body {
    flex: 1;
    min-width: 0;
}

.kpi-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.2;
}

/* ========== TOP PERFORMER BAR ========== */
.top-performer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: .875rem;
    font-weight: 500;
    color: #92400e;
}

/* ========== TABLE ENHANCEMENTS ========== */
.shop-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sales-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sales-bar-track {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    width: 100px;
    overflow: hidden;
}

.sales-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
}

/* ========== LEGACY STAT CARDS (kept for fallback) ========== */
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--neutral-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.stat-label {
    font-size: .8rem;
    color: var(--neutral-500);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--neutral-900);
}

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

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

/* ========== BUSINESS CARDS ========== */
.business-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.business-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--neutral-200);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: box-shadow .2s, transform .2s;
}

.business-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.business-card-accent {
    height: 5px;
}

.business-card-body {
    padding: 18px 20px 16px;
}

.business-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.shop-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
}

.shop-identity {
    flex: 1;
    min-width: 0;
}

.business-card-name {
    font-weight: 700;
    font-size: .975rem;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.tier-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tier-badge.tier-premium {
    background: #fef3c7;
    color: #92400e;
}

.tier-badge.tier-enterprise {
    background: #ede9fe;
    color: #5b21b6;
}

.tier-badge.tier-free {
    background: #f1f5f9;
    color: #64748b;
}

.card-metric-section {
    margin-bottom: 12px;
}

.card-section-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.today-metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.today-sales-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
}

.today-tx-count {
    font-size: .8rem;
    color: #94a3b8;
}

.month-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.metric-item .metric-label {
    font-size: .75rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

.metric-item .metric-val {
    font-size: .95rem;
    font-weight: 600;
    color: #0f172a;
}

.metric-item .metric-val.profit-val {
    color: #16a34a;
}

.month-tx-note {
    font-size: .75rem;
    color: #94a3b8;
    margin-top: 6px;
}

.card-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 12px 0;
}

.business-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.footer-col-right {
    text-align: right;
}

.footer-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #94a3b8;
    margin-bottom: 2px;
}

.footer-val {
    font-size: .9rem;
    font-weight: 600;
    color: #334155;
}

/* ========== TABLES ========== */
.table-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--neutral-200);
    overflow: hidden;
}

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

.data-table th {
    background: var(--neutral-100);
    padding: 12px 16px;
    text-align: left;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--neutral-500);
    border-bottom: 1px solid var(--neutral-200);
}

.data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--neutral-100);
    font-size: .9rem;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--neutral-50);
}

.empty-state {
    text-align: center;
    color: var(--neutral-400);
    padding: 40px;
    font-size: .9rem;
}

/* ========== STATUS BADGES ========== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}

.status-active {
    background: #dcfce7;
    color: #15803d;
}

.status-suspended {
    background: #fee2e2;
    color: #991b1b;
}

.status-completed {
    background: #dcfce7;
    color: #15803d;
}

.status-cancelled {
    background: #f3f4f6;
    color: #6b7280;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

/* ========== CHARTS ========== */
.comparison-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: #475569;
    font-weight: 500;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.chart-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--neutral-200);
    padding: 20px 20px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.chart-card h3 {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.chart-wrapper {
    position: relative;
    height: 280px;
}

/* ========== MODALS ========== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--neutral-200);
}

.modal-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--neutral-400);
    line-height: 1;
}

.modal-close:hover {
    color: var(--neutral-700);
}

.modal-body {
    padding: 24px 28px;
}

/* ========== TOASTS ========== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    animation: slideIn .2s ease;
    max-width: 360px;
}

.toast.success {
    background: var(--success-600);
}

.toast.error {
    background: var(--danger-600);
}

.toast.info {
    background: var(--primary-700);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========== CONFIRM OVERLAY ========== */
.custom-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.custom-confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}

.custom-confirm-message {
    font-size: .95rem;
    margin-bottom: 20px;
    color: var(--neutral-700);
    line-height: 1.5;
}

.custom-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-confirm-cancel {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-cancel:hover {
    background: var(--neutral-200);
    border-color: var(--neutral-400);
}

.btn-confirm-ok {
    background: var(--primary-600);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(30, 64, 175, .2);
}

.btn-confirm-ok:hover {
    background: var(--primary-700);
    box-shadow: 0 4px 12px rgba(30, 64, 175, .25);
}

.btn-confirm-ok.danger {
    background: var(--danger-600);
    box-shadow: 0 2px 6px rgba(220, 38, 38, .2);
}

.btn-confirm-ok.danger:hover {
    background: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .3);
}

/* ========== TRANSFER ITEMS LIST IN TABLE ========== */
.transfer-items-cell {
    vertical-align: top;
}

.transfer-item-pill {
    display: inline-block;
    margin: 2px 3px 2px 0;
    padding: 2px 8px;
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    border-radius: 20px;
    font-size: .78rem;
    color: var(--primary-800);
    white-space: nowrap;
}

.transfer-item-pill em {
    font-style: normal;
    color: var(--primary-600);
    font-weight: 600;
}

.transfer-item-more {
    display: inline-block;
    margin: 2px 0;
    font-size: .75rem;
    color: var(--neutral-400);
    font-style: italic;
}

[data-theme="dark"] .transfer-item-pill {
    background: #1e3259;
    border-color: #2d4a7a;
    color: #93c5fd;
}

[data-theme="dark"] .transfer-item-pill em {
    color: #60a5fa;
}

[data-theme="dark"] .transfer-item-more {
    color: #64748b;
}

/* ========== TRANSFER FORM ========== */
.transfer-step {
    display: none;
}

.transfer-step.active {
    display: block;
}

.inventory-picker {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--neutral-300);
    border-radius: 8px;
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--neutral-100);
    cursor: pointer;
}

.inventory-item:last-child {
    border-bottom: none;
}

.inventory-item:hover {
    background: var(--primary-50);
}

.inventory-item.selected {
    background: var(--primary-100);
}

.inventory-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-700);
    cursor: pointer;
}

.item-name {
    flex: 1;
    font-size: .9rem;
    font-weight: 500;
}

.item-qty {
    font-size: .8rem;
    color: var(--neutral-500);
}

.item-qty-input {
    width: 80px;
    padding: 4px 8px;
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    font-size: .85rem;
    text-align: center;
}

/* ========== PERIOD SELECT DROPDOWN ========== */
.period-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 9px 40px 9px 14px;
    border: 2px solid var(--neutral-200);
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231d4ed8' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    color: var(--neutral-800);
    cursor: pointer;
    transition: all .18s;
    min-width: 140px;
}

.period-select:hover {
    border-color: var(--primary-500);
    background-color: var(--primary-50);
}

.period-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
    background-color: #fff;
}

[data-theme="dark"] .period-select {
    background-color: #1e293b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2393c5fd' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .period-select:hover {
    border-color: #93c5fd;
    background-color: #263044;
}

[data-theme="dark"] .period-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, .15);
}

/* ========== CUSTOM DATE RANGE ========== */
.custom-date-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn .15s ease;
}

.date-input {
    padding: 9px 10px;
    border: 2px solid var(--neutral-200);
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--neutral-800);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s;
}

.date-input:hover {
    border-color: var(--primary-400);
}

.date-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
}

.date-sep {
    font-size: .8rem;
    color: var(--neutral-400);
    font-weight: 500;
}

[data-theme="dark"] .date-input {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
    color-scheme: dark;
}

[data-theme="dark"] .date-input:hover {
    border-color: #93c5fd;
}

[data-theme="dark"] .date-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, .15);
}

[data-theme="dark"] .date-sep {
    color: #64748b;
}

/* ========== SUB-NAVIGATION TABS ========== */
.sub-nav-tabs {
    display: inline-flex;
    background: #fff;
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 24px;
    gap: 6px;
    border: 1px solid var(--neutral-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    flex-wrap: wrap;
}

.sub-nav-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: .5rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--neutral-500);
    cursor: pointer;
    border-radius: 8px;
    transition: all .18s;
    white-space: nowrap;
}

.sub-nav-btn:hover {
    color: var(--primary-700);
    background: var(--primary-50);
}

.sub-nav-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
    box-shadow: 0 3px 10px rgba(37, 99, 235, .2);
}

/* ========== COMPARISON PRODUCT PANELS ========== */
.comp-tab-panel {
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.comp-panel-header {
    margin-bottom: 20px;
}

.comp-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neutral-800);
    margin: 0 0 4px;
}

.comp-panel-desc {
    font-size: .85rem;
    color: var(--neutral-500);
    margin: 0;
}

/* ── Shop picker dropdown ── */
.comp-shop-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.comp-shop-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--neutral-600);
    white-space: nowrap;
}

.comp-shop-select {
    padding: 8px 14px;
    border: 1.5px solid var(--neutral-300);
    border-radius: 8px;
    font-size: .875rem;
    color: var(--neutral-800);
    background: var(--neutral-50);
    cursor: pointer;
    min-width: 200px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231d4ed8' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.comp-shop-select:focus {
    outline: none;
    border-color: var(--primary-600);
}

/* ── Full-page product comparison table ── */
.comp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--neutral-200);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    background: var(--neutral-50);
}

.comp-full-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 480px;
    table-layout: fixed;
}

/* Head */
.comp-full-table thead th {
    padding: 11px 16px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--neutral-500);
    background: var(--neutral-50);
    border-bottom: 2px solid var(--neutral-200);
    white-space: nowrap;
}

.comp-rank-head {
    width: 5%;
    text-align: center;
}

.comp-sku-head {
    width: 15%;
    text-align: left;
}

.comp-product-head {
    width: 40%;
    text-align: left;
}

.comp-value-head {
    width: 20%;
    text-align: right;
}

.comp-shop-col {
    text-align: right !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: var(--neutral-700) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    min-width: 148px;
}

/* Body */
.comp-full-table tbody tr {
    transition: background .12s;
}

.comp-full-table tbody tr:hover {
    background: var(--primary-50);
}

.comp-full-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--neutral-100);
    vertical-align: middle;
}

.comp-full-table tbody tr:last-child td {
    border-bottom: none;
}

.comp-rank-cell {
    text-align: center;
    font-weight: 700;
    color: var(--neutral-400);
    font-size: .78rem;
}

.comp-product-cell {
    font-weight: 500;
    color: var(--neutral-800);
    text-align: left;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-sku-cell {
    font-family: monospace;
    font-size: .8rem;
    color: var(--neutral-500);
    text-align: left;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-metric-cell {
    text-align: right;
    white-space: nowrap;
}

.comp-metric-cell strong {
    color: var(--primary-700);
}

.comp-nil {
    color: var(--neutral-300);
}

.comp-empty-row {
    text-align: center;
    padding: 36px 16px !important;
    color: var(--neutral-400);
    font-style: italic;
}

/* Footer totals */
.comp-full-table tfoot td {
    padding: 11px 16px;
    background: var(--neutral-50);
    border-top: 2px solid var(--neutral-200);
    font-size: .8rem;
    color: var(--neutral-600);
    white-space: nowrap;
}

.comp-total-label {
    font-weight: 600;
    color: var(--neutral-700);
    text-align: left !important;
}

.comp-total-cell {
    text-align: right;
}

.comp-total-cell strong {
    color: var(--primary-700);
}

/* Profit margin badge */
.margin-badge {
    display: inline-block;
    margin-left: 6px;
    background: #dcfce7;
    color: #166534;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .sub-nav-tabs {
        display: flex;
        width: 100%;
    }

    .sub-nav-btn {
        flex: 1;
        text-align: center;
        padding: .5rem .6rem;
        font-size: .8rem;
    }
}

/* ========== ACTION DROPDOWN ========== */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-btn {
    background: var(--neutral-100);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-200);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.action-dropdown-btn:hover {
    background: var(--neutral-200);
}

.action-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #ffffff;
    min-width: 140px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    z-index: 100;
    padding: 4px 0;
    border: 1px solid var(--neutral-200);
}

.action-dropdown:hover .action-dropdown-content,
.action-dropdown:focus-within .action-dropdown-content {
    display: block;
}

.action-dropdown-content button {
    color: var(--neutral-700);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
}

.action-dropdown-content button:hover {
    background-color: var(--neutral-100);
    color: var(--primary-600);
}

.action-dropdown-content button.text-danger {
    color: var(--danger-600);
}

.action-dropdown-content button.text-danger:hover {
    background-color: var(--danger-50);
    color: var(--danger-700);
}

.action-dropdown-content button.text-success {
    color: var(--success-600);
}

.action-dropdown-content button.text-success:hover {
    background-color: var(--success-50);
    color: var(--success-700);
}

/* ========== PERIOD SELECTOR ========== */
.period-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.period-tab {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--neutral-300);
    background: none;
    font-size: .85rem;
    cursor: pointer;
    color: var(--neutral-600);
    transition: all .15s;
}

.period-tab.active {
    background: var(--primary-700);
    border-color: var(--primary-700);
    color: #fff;
}

/* ========== NAV BADGE (alert count) ========== */
.nav-item {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: #dc2626;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ========== FILTER BAR ========== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-input {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    border: 1.5px solid var(--neutral-300);
    border-radius: 8px;
    font-size: .875rem;
    color: var(--neutral-800);
    background: var(--neutral-50);
    outline: none;
    transition: border-color .15s;
}

.filter-input:focus {
    border-color: var(--primary-600);
}

.filter-select {
    padding: 9px 14px;
    border: 1.5px solid var(--neutral-300);
    border-radius: 8px;
    font-size: .875rem;
    color: var(--neutral-700);
    background: var(--neutral-50);
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231d4ed8' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.filter-select:focus {
    border-color: var(--primary-600);
}

/* ========== STATS PILLS ========== */
.stats-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.stats-pill {
    padding: 4px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: #475569;
}

.stats-pill.danger {
    background: #fee2e2;
    color: #991b1b;
}

.stats-pill.warning {
    background: #fef3c7;
    color: #92400e;
}

/* ========== INVENTORY STATUS BADGES ========== */
.inv-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.inv-status-ok {
    background: #dcfce7;
    color: #15803d;
}

.inv-status-low {
    background: #fef3c7;
    color: #92400e;
}

.inv-status-out {
    background: #fee2e2;
    color: #991b1b;
}

/* Inventory row highlights */
.row-danger td {
    background: #fff8f8 !important;
}

.row-warning td {
    background: #fffbeb !important;
}

/* ========== ALERTS SECTION ========== */
.alerts-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
}

.alert-summary-item {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 500;
    color: #7c2d12;
}

.alert-summary-total {
    background: #fff;
    border: 1px solid #fed7aa;
}

.alert-summary-out {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.alert-summary-low {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

.alert-summary-branch {
    color: #64748b;
    font-weight: 400;
}

.alert-severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 700;
}

.alert-severity-out {
    background: #fee2e2;
    color: #991b1b;
}

.alert-severity-low {
    background: #fef3c7;
    color: #92400e;
}

/* ========== REPORTS SECTION ========== */
.report-controls-card {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.report-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.report-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.report-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #94a3b8;
    font-size: .9rem;
    text-align: center;
}

.report-empty-box p strong {
    color: var(--neutral-700);
}

.report-totals-row td {
    background: var(--neutral-100) !important;
    border-top: 2px solid var(--neutral-200) !important;
}

.report-tab-btn {
    padding: 8px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    font-size: .875rem;
    font-weight: 500;
    color: var(--neutral-500);
    cursor: pointer;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.report-tab-btn:hover { color: var(--neutral-800); }
.report-tab-btn.active {
    color: var(--primary-700);
    border-bottom-color: var(--primary-700);
}

/* ── Compact controls bar (post-generate) ── */
.report-controls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 20px;
}
.report-period-badge { font-weight: 600; font-size: .9rem; color: var(--text-primary); }
.btn-link {
    background: none; border: none; color: var(--primary-600);
    font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 0;
}
.btn-link:hover { color: var(--primary-800); }
.report-controls-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.rpt-pdf-btn { background: #dc2626 !important; border-color: #dc2626 !important; }
.rpt-pdf-btn:hover { background: #b91c1c !important; border-color: #b91c1c !important; }

/* ── Hero ── */
.report-hero {
    position: relative;
    text-align: center;
    padding: 36px 20px 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}
.report-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1d4ed8, #7c3aed, #dc2626);
}
.report-hero-eyebrow {
    font-size: .65rem; font-weight: 900; letter-spacing: .14em;
    text-transform: uppercase; color: var(--neutral-400); margin-bottom: 10px;
}
.report-hero-value {
    font-size: 2.8rem; font-weight: 900; line-height: 1; margin-bottom: 24px;
}
.report-hero-meta {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
    border-top: 1px solid var(--border-color); padding-top: 18px;
}
.report-hero-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 20px;
}
.report-hero-stat + .report-hero-stat { border-left: 1px solid var(--border-color); }
.rhs-label {
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--neutral-400); margin-bottom: 4px;
}
.rhs-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); }

/* ── Insight callout ── */
.report-insight {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: #fef9ec; border: 1px solid #fde68a;
    border-radius: 8px; font-size: .875rem; color: #78350f; margin-bottom: 4px;
}

/* ── Sticky section nav ── */
.rpt-sticky-nav {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg-primary);
    display: flex; gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin: 8px 0 0;
}
.rpt-nav-link {
    padding: 11px 22px; font-size: .875rem; font-weight: 600;
    color: var(--neutral-500); text-decoration: none;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.rpt-nav-link:hover { color: var(--text-primary); }
.rpt-nav-link.active { color: var(--primary-700); border-bottom-color: var(--primary-700); }

/* ── Report sections ── */
.rpt-section { padding: 28px 0 8px; border-bottom: 1px solid var(--border-color); }
.rpt-section:last-child { border-bottom: none; }
.rpt-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rpt-section-number {
    font-size: .6rem; font-weight: 900; letter-spacing: .06em;
    color: var(--primary-700); background: #eff6ff;
    border: 1.5px solid #bfdbfe; border-radius: 5px; padding: 3px 7px;
}
.rpt-section-label { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.rpt-subsection-label {
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--neutral-500); margin: 14px 0 8px;
}

/* ── Two-column layout ── */
.rpt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .rpt-two-col { grid-template-columns: 1fr; } }

/* ── Chart containers ── */
.rpt-chart-wrap {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 14px; min-height: 220px;
    position: relative;
}
.rpt-chart-wrap--sm { min-height: 180px; }
.rpt-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ── Dark mode additions ── */
[data-theme="dark"] .report-controls-bar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .report-hero { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .report-insight { background: #1c1207; border-color: #78350f; color: #fde68a; }
[data-theme="dark"] .rpt-section-number { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
[data-theme="dark"] .rpt-chart-wrap { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .rpt-nav-link { color: #64748b; }
[data-theme="dark"] .rpt-nav-link:hover { color: #cbd5e1; }
[data-theme="dark"] .rpt-nav-link.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ─────────────────────────────────────────────────── */
.section-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-subheader h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--neutral-700);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .login-branding {
        display: none;
    }

    .login-form-panel {
        width: 100%;
    }

    .sidebar {
        width: 60px;
        border-right: 1px solid var(--neutral-200);
    }

    .sidebar-logo,
    .nav-section-label,
    .nav-item span,
    .admin-details {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 12px;
        border-left: none;
    }

    .content-section {
        padding: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

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

    .overview-banner {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }

    .sales-bar-track {
        width: 60px;
    }

    .report-date-row {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   DARK MODE — data-theme="dark"
   ======================================== */

/* ── CSS variable overrides — auto-flips all var()-based styles ── */
[data-theme="dark"] {
    --primary-50:  #0f172a;
    --primary-100: #1e3a8a;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    --neutral-50:  #0f172a;
    --neutral-100: #1e293b;
    --neutral-200: #334155;
    --neutral-300: #475569;
    --neutral-400: #64748b;
    --neutral-500: #94a3b8;
    --neutral-600: #cbd5e1;
    --neutral-700: #e2e8f0;
    --neutral-800: #f1f5f9;
    --neutral-900: #f8fafc;
}

/* ── Button dark mode tweaks not covered by variable overrides ── */
[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

[data-theme="dark"] .btn-secondary {
    border-color: #475569;
}

[data-theme="dark"] .btn-confirm-ok {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .btn-confirm-ok.danger {
    background: #dc2626;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

[data-theme="dark"] .btn-confirm-ok.danger:hover {
    background: #b91c1c;
}

[data-theme="dark"] .btn-link {
    color: #60a5fa;
}

[data-theme="dark"] .btn-link:hover {
    color: #93c5fd;
}

/* Smooth transitions */
body,
.sidebar,
.main-content,
.modal-content,
.kpi-card,
.business-card,
.table-container,
.chart-card,
.report-controls-card,
.custom-confirm-box,
.form-group input,
.form-group select,
.form-group textarea,
.filter-input,
.filter-select,
.stat-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Sidebar */
[data-theme="dark"] .sidebar {
    background: #1e293b;
    border-right-color: #334155;
}

[data-theme="dark"] .sidebar-logo {
    border-bottom-color: #334155;
}

[data-theme="dark"] .sidebar-logo h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .sidebar-logo span {
    color: #94a3b8;
}

[data-theme="dark"] .nav-section-label {
    color: #64748b;
}

[data-theme="dark"] .nav-item {
    color: #cbd5e1;
}

[data-theme="dark"] .nav-item:hover {
    background: #263044;
    color: #93c5fd;
}

[data-theme="dark"] .nav-item.active {
    background: #1e3a5f;
    color: #93c5fd;
    border-left-color: #3b82f6;
}

[data-theme="dark"] .sidebar-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .admin-details span:first-child {
    color: #f1f5f9;
}

[data-theme="dark"] .admin-details span:last-child {
    color: #94a3b8;
}

[data-theme="dark"] .btn-logout {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-logout:hover {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* Main content + sections */
[data-theme="dark"] .main-content {
    background: #0f172a;
}

[data-theme="dark"] .content-section {
    background: #0f172a;
}

[data-theme="dark"] .section-header h1 {
    color: #f8fafc;
}

[data-theme="dark"] .section-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .section-subheader h3 {
    color: #cbd5e1;
}

/* KPI cards */
[data-theme="dark"] .kpi-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .kpi-label {
    color: #64748b;
}

[data-theme="dark"] .kpi-value {
    color: #f8fafc;
}

/* Top performer bar */
[data-theme="dark"] .top-performer-bar {
    background: #1e293b;
    border-color: #334155;
    color: #fcd34d;
}

/* Stat cards (legacy) */
[data-theme="dark"] .stat-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .stat-value {
    color: #f8fafc;
}

/* Business cards */
[data-theme="dark"] .business-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .business-card-name {
    color: #f1f5f9;
}

[data-theme="dark"] .card-divider {
    background: #334155;
}

[data-theme="dark"] .business-card-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .today-sales-val {
    color: #f1f5f9;
}

[data-theme="dark"] .metric-item .metric-val {
    color: #f1f5f9;
}

[data-theme="dark"] .footer-val {
    color: #cbd5e1;
}

/* Tables */
[data-theme="dark"] .table-container {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .data-table th {
    background: #151e2e;
    color: #94a3b8;
    border-bottom-color: #2d3a4d;
}

[data-theme="dark"] .data-table td {
    color: #cbd5e1;
    border-bottom-color: #2d3a4d;
}

[data-theme="dark"] .data-table tbody tr {
    background: #1e293b;
}

[data-theme="dark"] .data-table tr:hover td {
    background: #263044;
}

[data-theme="dark"] .empty-state {
    color: #64748b;
}

[data-theme="dark"] .report-totals-row td {
    background: #263044 !important;
    border-top-color: #334155 !important;
}

[data-theme="dark"] .row-danger td {
    background: #2d1515 !important;
}

[data-theme="dark"] .row-warning td {
    background: #2a2010 !important;
}

/* Chart cards */
[data-theme="dark"] .chart-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .chart-card h3 {
    color: #64748b;
}

[data-theme="dark"] .comparison-legend {
    background: #263044;
    border-color: #334155;
}

[data-theme="dark"] .legend-item {
    color: #cbd5e1;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background: #1e293b;
    border: 1px solid #334155;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .6);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .modal-header h2 {
    color: #f8fafc;
}

[data-theme="dark"] .modal-close {
    color: #64748b;
}

[data-theme="dark"] .modal-close:hover {
    color: #cbd5e1;
}

/* Confirm overlay */
[data-theme="dark"] .custom-confirm-box {
    background: #1e293b;
    border: 1px solid #334155;
}

[data-theme="dark"] .custom-confirm-message {
    color: #cbd5e1;
}

[data-theme="dark"] .btn-confirm-cancel {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

/* Forms */
[data-theme="dark"] .form-group label {
    color: #cbd5e1;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2393c5fd' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-group select:hover {
    border-color: #60a5fa;
    background-color: #1e293b;
}

[data-theme="dark"] .form-group input::placeholder {
    color: #64748b;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}

/* Filter inputs */
[data-theme="dark"] .filter-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .filter-input:focus {
    border-color: #3b82f6;
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .comp-shop-select {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2393c5fd' d='M3.22 5.22a.75.75 0 0 1 1.06 0L7 7.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] .comp-shop-select:focus {
    border-color: #3b82f6;
}

/* Period tabs */
[data-theme="dark"] .period-tab {
    border-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .period-tab:hover {
    background: #263044;
    color: #cbd5e1;
}

[data-theme="dark"] .report-tab-btn { color: #64748b; }
[data-theme="dark"] .report-tab-btn:hover { color: #cbd5e1; }
[data-theme="dark"] .report-tab-btn.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* Sub-nav tabs */
[data-theme="dark"] .sub-nav-tabs {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .sub-nav-btn {
    color: #94a3b8;
}

[data-theme="dark"] .sub-nav-btn:hover {
    background: #263044;
    color: #cbd5e1;
}

/* Product comparison cards */
[data-theme="dark"] .shop-product-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .shop-card-header {
    background: #1e3259;
    border-color: #334155;
}

[data-theme="dark"] .shop-card-name {
    color: #93c5fd;
}

[data-theme="dark"] .shop-card-period {
    background: #263044;
    border-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .product-rank-table thead th {
    background: #263044;
    color: #64748b;
    border-color: #334155;
}

[data-theme="dark"] .product-rank-table tbody td {
    border-color: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .product-rank-table tbody tr:hover {
    background: #1e3259;
}

[data-theme="dark"] .product-name-cell {
    color: #e2e8f0;
}

[data-theme="dark"] .metric-cell strong {
    color: #93c5fd;
}

[data-theme="dark"] .margin-badge {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .shop-card-summary {
    background: #263044;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .shop-card-summary strong {
    color: #93c5fd;
}

[data-theme="dark"] .comp-panel-title {
    color: #e2e8f0;
}

[data-theme="dark"] .comp-panel-desc {
    color: #64748b;
}

/* Report controls */
[data-theme="dark"] .report-controls-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .report-empty-box {
    color: #64748b;
}

[data-theme="dark"] .report-empty-box p strong {
    color: #cbd5e1;
}

/* Stats pills */
[data-theme="dark"] .stats-pill {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .stats-pill.danger {
    background: #450a0a;
    color: #fca5a5;
}

[data-theme="dark"] .stats-pill.warning {
    background: #451a03;
    color: #fcd34d;
}

/* Alerts summary strip */
[data-theme="dark"] .alerts-summary-strip {
    background: #2a1a08;
    border-color: #92400e;
}

[data-theme="dark"] .alert-summary-total {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

/* Transfer / inventory picker */
[data-theme="dark"] .inventory-picker {
    border-color: #334155;
}

[data-theme="dark"] .inventory-item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .inventory-item:hover {
    background: #263044;
}

[data-theme="dark"] .inventory-item.selected {
    background: #1e3a5f;
}

[data-theme="dark"] .item-name {
    color: #f8fafc;
}

[data-theme="dark"] .item-qty {
    color: #94a3b8;
}

[data-theme="dark"] .item-qty-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

/* Theme toggle button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--neutral-600);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--neutral-200);
    color: var(--neutral-800);
    transform: scale(1.05);
}

.theme-icon-sun {
    display: none;
}

.theme-icon-moon {
    display: block;
}

[data-theme="dark"] .theme-icon-sun {
    display: block;
}

[data-theme="dark"] .theme-icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: #475569;
    color: #f8fafc;
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-200);
}

.theme-toggle-label {
    font-size: .8rem;
    color: var(--neutral-500);
    font-weight: 500;
}

[data-theme="dark"] .theme-toggle-wrapper {
    border-top-color: #334155;
}

[data-theme="dark"] .theme-toggle-label {
    color: #64748b;
}


/* ==========================================
   SUBSCRIPTION STATUS BADGES (on shop cards)
   ========================================== */
.sub-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.sub-ok {
    background: #dcfce7;
    color: #15803d;
}

.sub-warning {
    background: #fef9c3;
    color: #92400e;
}

.sub-overdue {
    background: #fee2e2;
    color: #dc2626;
}

.sub-free {
    background: #ede9fe;
    color: #7c3aed;
}

.sub-unknown {
    background: #f1f5f9;
    color: #64748b;
}

[data-theme="dark"] .sub-ok {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .sub-warning {
    background: #78350f;
    color: #fde68a;
}

[data-theme="dark"] .sub-overdue {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .sub-free {
    background: #2e1065;
    color: #c4b5fd;
}

[data-theme="dark"] .sub-unknown {
    background: #1e293b;
    color: #94a3b8;
}

/* Role badge */
.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}

.role-admin {
    background: #dbeafe;
    color: #1d4ed8;
}

.role-staff {
    background: #f0fdf4;
    color: #15803d;
}

.role-cashier {
    background: #fef3c7;
    color: #92400e;
}

[data-theme="dark"] .role-admin {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-theme="dark"] .role-staff {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .role-cashier {
    background: #78350f;
    color: #fde68a;
}

/* ==========================================
   STAFF SECTION
   ========================================== */
.staff-summary-bar {
    background: var(--neutral-100);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: .875rem;
    color: var(--neutral-600);
    margin-bottom: 16px;
}

[data-theme="dark"] .staff-summary-bar {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* Small action buttons */
.btn-small {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.btn-danger-sm {
    background: #fee2e2;
    color: #dc2626;
}

.btn-danger-sm:hover {
    background: #fecaca;
    transform: translateY(-1px);
}

.btn-success-sm {
    background: #dcfce7;
    color: #15803d;
}

.btn-success-sm:hover {
    background: #bbf7d0;
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-danger-sm {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .btn-danger-sm:hover {
    background: #991b1b;
}

[data-theme="dark"] .btn-success-sm {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .btn-success-sm:hover {
    background: #166534;
}

/* ==========================================
   STORE DETAIL MODAL
   ========================================== */
.store-detail-alert-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.store-detail-section {
    margin-bottom: 24px;
}

.store-detail-section-title {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--neutral-500);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .store-detail-section-title {
    color: #64748b;
    border-bottom-color: #334155;
}

/* ==========================================
   TRANSFER AUDIT BAR
   ========================================== */
.transfer-audit-bar {
    background: var(--neutral-50);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 4px;
}

.audit-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.audit-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--neutral-400);
}

.audit-val {
    font-size: .875rem;
    color: var(--neutral-700);
}

[data-theme="dark"] .transfer-audit-bar {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .audit-label {
    color: #64748b;
}

[data-theme="dark"] .audit-val {
    color: #cbd5e1;
}

/* Compare Shops Table */
[data-theme="dark"] .comp-table-wrap {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .comp-full-table thead th {
    background: #151e2e;
    color: #94a3b8;
    border-bottom-color: #2d3a4d;
}

[data-theme="dark"] .comp-full-table tbody tr:hover {
    background: #263044;
}

[data-theme="dark"] .comp-full-table tbody td {
    border-bottom-color: #2d3a4d;
}

[data-theme="dark"] .comp-product-cell {
    color: #e2e8f0;
}

[data-theme="dark"] .comp-sku-cell {
    color: #64748b;
}

[data-theme="dark"] .comp-metric-cell strong,
[data-theme="dark"] .comp-total-cell strong {
    color: #93c5fd;
}

[data-theme="dark"] .comp-full-table tfoot td {
    background: #151e2e;
    border-top-color: #2d3a4d;
    color: #cbd5e1;
}

[data-theme="dark"] .comp-total-label {
    color: #f1f5f9;
}

[data-theme="dark"] .comp-empty-row {
    color: #64748b;
}

/* ========== CLICKABLE ROWS ========== */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.clickable-row:hover {
    background-color: var(--neutral-50) !important;
}

[data-theme="dark"] .clickable-row:hover {
    background-color: #1e293b !important;
}

.clickable-row:active {
    background-color: var(--neutral-100) !important;
}

[data-theme="dark"] .clickable-row:active {
    background-color: #334155 !important;
}