/* ============================================================
   BH MSME — Design Tokens + Component Styles
   Scoped under .msme-app to avoid leaking into existing pages
   Illustrations: Storyset (https://storyset.com) — free for commercial use
   ============================================================ */

.msme-app {
    /* Palette — Premium Indigo + Warm Amber */
    --msme-bg: #f8fafc;
    --msme-surface: #ffffff;
    --msme-border: #e5e7eb;
    --msme-border-strong: #cbd5e1;

    --msme-text: #0f172a;
    --msme-text-body: #334155;
    --msme-text-muted: #64748b;
    --msme-text-faint: #94a3b8;

    --msme-primary: #4F46E5;
    --msme-primary-hover: #4338CA;
    --msme-primary-soft: #EEF2FF;
    --msme-primary-soft-2: #E0E7FF;

    --msme-accent: #F59E0B;
    --msme-accent-soft: #FEF3C7;

    --msme-success: #10b981;
    --msme-success-soft: #ecfdf5;
    --msme-danger: #ef4444;
    --msme-danger-soft: #fef2f2;
    --msme-warning: #f59e0b;
    --msme-warning-soft: #fffbeb;
    --msme-warning-soft-2: #fef3c7;
    --msme-purple: #7C3AED;
    --msme-purple-soft: #f5f3ff;

    /* Gradients */
    --msme-gradient-start: #4F46E5;
    --msme-gradient-end: #7C3AED;
    --msme-gradient: linear-gradient(135deg, var(--msme-gradient-start), var(--msme-gradient-end));
    --msme-gradient-accent: linear-gradient(135deg, #F59E0B, #F97316);

    /* Radii / Shadows / Spacing */
    --msme-radius-sm: 8px;
    --msme-radius: 12px;
    --msme-radius-lg: 16px;
    --msme-radius-xl: 24px;

    --msme-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --msme-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --msme-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --msme-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --msme-card-shadow: 0 1px 3px rgba(79, 70, 229, 0.06), 0 1px 2px rgba(79, 70, 229, 0.04);
    --msme-glow: 0 0 20px rgba(79, 70, 229, 0.15);
    --msme-glow-accent: 0 0 20px rgba(245, 158, 11, 0.2);

    /* Transitions */
    --msme-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --msme-transition-fast: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --msme-transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    --msme-sidebar-w: 256px;
    --msme-topbar-h: 64px;

    /* Typography */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--msme-text-body);
    background-color: var(--msme-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Reset for our scope */
    .msme-app *, .msme-app *::before, .msme-app *::after {
        box-sizing: border-box;
    }

    .msme-app a {
        color: inherit;
        text-decoration: none;
    }

    .msme-app button {
        font: inherit;
        cursor: pointer;
    }

/* ============================================================
   Layout shell
   ============================================================ */
.msme-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--msme-bg);
}

.msme-sidebar {
    width: var(--msme-sidebar-w);
    flex-shrink: 0;
    background-color: var(--msme-surface);
    border-right: 1px solid var(--msme-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 50;
}

[dir="rtl"] .msme-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--msme-border);
}

.msme-sidebar-header {
    height: calc(var(--msme-topbar-h) + var(--safe-area-top, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--safe-area-top, 0px) 20px 0;
    border-bottom: 1px solid var(--msme-border);
}

.msme-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--msme-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--msme-transition);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.msme-brand-mark:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.msme-brand-text {
    font-weight: 800;
    font-size: 16px;
    color: var(--msme-text);
    letter-spacing: 0.2px;
}

.msme-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.msme-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--msme-text-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 2px;
    user-select: none;
    transition: var(--msme-transition);
    position: relative;
}

    .msme-nav-item:hover {
        background-color: #f1f5f9;
        color: var(--msme-text);
    }

    .msme-nav-item.active {
        background-color: var(--msme-primary-soft);
        color: var(--msme-primary);
        font-weight: 600;
    }

    .msme-nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--msme-gradient);
    }

    [dir="rtl"] .msme-nav-item.active::before {
        left: auto;
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    .msme-nav-item .msme-nav-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .msme-nav-item .msme-nav-caret {
        margin-left: auto;
        opacity: 0.5;
    }

    [dir="rtl"] .msme-nav-item .msme-nav-caret {
        margin-left: 0;
        margin-right: auto;
        transform: rotate(180deg);
    }

.msme-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--msme-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.msme-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--msme-primary-soft);
    color: var(--msme-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.msme-user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--msme-text);
    line-height: 1.2;
}

.msme-user-role {
    font-size: 12px;
    color: var(--msme-text-muted);
}

/* Topbar */
.msme-main {
    margin-left: var(--msme-sidebar-w);
    flex: 1;
    min-width: 0; /* allow this flex child to shrink below content width (prevents page-wide overflow) */
    min-height: 100vh;
}

[dir="rtl"] .msme-main {
    margin-left: 0;
    margin-right: var(--msme-sidebar-w);
}

.msme-topbar {
    height: calc(var(--msme-topbar-h) + var(--safe-area-top, 0px));
    background-color: var(--msme-surface);
    border-bottom: 1px solid var(--msme-border);
    display: flex;
    align-items: center;
    padding: var(--safe-area-top, 0px) 28px 0;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 40;
}

.msme-search {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--msme-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--msme-text-muted);
    font-size: 14px;
}

    .msme-search input {
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--msme-text);
        font-size: 14px;
    }

        .msme-search input::placeholder {
            color: var(--msme-text-faint);
        }

.msme-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--msme-text-body);
    position: relative;
}

    .msme-icon-btn:hover {
        background-color: var(--msme-bg);
    }

    .msme-icon-btn .msme-dot {
        position: absolute;
        top: 8px;
        right: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--msme-danger);
        border: 2px solid var(--msme-surface);
    }

    [dir="rtl"] .msme-icon-btn .msme-dot {
        right: auto;
        left: 9px;
    }

.msme-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 10px;
    cursor: pointer;
}

    .msme-topbar-user:hover {
        background-color: var(--msme-bg);
    }

    .msme-topbar-user .msme-user-name {
        font-size: 14px;
    }

.msme-content {
    padding: 28px 32px 40px;
    flex: 1;
}

/* ============================================================
   Page headers
   ============================================================ */
.msme-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.msme-page-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--msme-text);
    margin: 0 0 4px;
    letter-spacing: -0.4px;
}

.msme-page-subtitle {
    color: var(--msme-text-muted);
    font-size: 14px;
    margin: 0;
}

.msme-page-actions {
    display: flex;
    gap: 10px;
}

/* ============================================================
   Buttons
   ============================================================ */
.msme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: var(--msme-transition);
    white-space: nowrap;
}

.msme-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.msme-btn-primary {
    background: var(--msme-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

    .msme-btn-primary:hover {
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
        transform: translateY(-1px);
    }

.msme-btn-outline {
    background-color: var(--msme-surface);
    color: var(--msme-text);
    border-color: var(--msme-border);
}

    .msme-btn-outline:hover {
        background-color: var(--msme-bg);
        border-color: var(--msme-primary-soft-2);
    }

.msme-btn-ghost {
    background-color: transparent;
    color: var(--msme-text-body);
}

    .msme-btn-ghost:hover {
        background-color: var(--msme-bg);
    }

.msme-btn-disabled,
.msme-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Card primitive
   ============================================================ */
.msme-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 20px 24px;
    box-shadow: var(--msme-shadow-sm);
    transition: var(--msme-transition);
}

.msme-card.msme-card-hover:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow-md), 0 0 0 1px rgba(79, 70, 229, 0.05);
    transform: translateY(-2px);
}

.msme-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.msme-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--msme-text);
    margin: 0;
}

.msme-card-subtitle {
    font-size: 13px;
    color: var(--msme-text-muted);
    margin: 0 0 16px;
}

/* ============================================================
   Stat tile (Revenue / Expenses / Profit / Inventory)
   ============================================================ */
.msme-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .msme-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.msme-stat-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 18px 20px 16px;
    box-shadow: var(--msme-shadow-sm);
    transition: var(--msme-transition);
}

.msme-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--msme-shadow-md);
}

.msme-stat-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.msme-stat-label {
    font-size: 13px;
    color: var(--msme-text-muted);
    font-weight: 500;
    margin-bottom: 6px;
}

.msme-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--msme-text);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.msme-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .msme-stat-icon.green { background-color: var(--msme-success-soft); color: var(--msme-success); }
    .msme-stat-icon.red { background-color: var(--msme-danger-soft); color: var(--msme-danger); }
    .msme-stat-icon.blue { background-color: var(--msme-primary-soft); color: var(--msme-primary); }
    .msme-stat-icon.purple { background-color: var(--msme-purple-soft); color: var(--msme-purple); }
    .msme-stat-icon.amber { background-color: var(--msme-warning-soft); color: var(--msme-warning); }

.msme-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
}

    .msme-delta.up { color: var(--msme-success); }
    .msme-delta.down { color: var(--msme-danger); }

    .msme-delta .msme-delta-note {
        color: var(--msme-text-muted);
        font-weight: 500;
        margin-left: 4px;
    }

    [dir="rtl"] .msme-delta .msme-delta-note {
        margin-left: 0;
        margin-right: 4px;
    }

/* ============================================================
   Alerts panel
   ============================================================ */
.msme-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--msme-radius);
    margin-bottom: 12px;
}

    .msme-alert:last-child { margin-bottom: 0; }

    .msme-alert.warn { background-color: var(--msme-warning-soft); }
    .msme-alert.danger { background-color: var(--msme-danger-soft); }

.msme-alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.msme-alert.warn .msme-alert-icon { color: var(--msme-warning); }
.msme-alert.danger .msme-alert-icon { color: var(--msme-danger); }

.msme-alert-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--msme-text);
    margin: 0 0 2px;
}

.msme-alert-body {
    font-size: 13px;
    color: var(--msme-text-body);
    margin: 0 0 4px;
}

.msme-alert-time {
    font-size: 12px;
    color: var(--msme-text-muted);
}

/* ============================================================
   Dashboard row layout (chart + alerts)
   ============================================================ */
.msme-row-chart {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .msme-row-chart {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   POS: product grid + cart panel
   ============================================================ */
.msme-pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 1100px) {
    .msme-pos-layout {
        grid-template-columns: 1fr;
    }
}

.msme-pos-search {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    box-shadow: var(--msme-shadow-sm);
}

    .msme-pos-search input {
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 14px;
        color: var(--msme-text);
    }

        .msme-pos-search input::placeholder {
            color: var(--msme-text-faint);
        }

.msme-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 900px) {
    .msme-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.msme-product-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 16px;
    box-shadow: var(--msme-shadow-sm);
    cursor: pointer;
    transition: var(--msme-transition);
}

    .msme-product-card:hover {
        border-color: var(--msme-primary-soft-2);
        box-shadow: var(--msme-shadow-md);
        transform: translateY(-2px);
    }

.msme-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--msme-text-faint);
    margin-bottom: 14px;
}

.msme-product-name {
    font-weight: 600;
    color: var(--msme-text);
    font-size: 15px;
    margin: 0 0 4px;
}

.msme-product-sku {
    font-size: 11px;
    color: var(--msme-text-muted);
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.msme-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msme-product-price {
    font-weight: 800;
    font-size: 18px;
    color: var(--msme-text);
    letter-spacing: -0.3px;
}

.msme-stock-pill {
    font-size: 12px;
    color: var(--msme-text-muted);
    background-color: var(--msme-bg);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 500;
}

/* Cart panel */
.msme-cart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--msme-topbar-h) + 20px);
}

.msme-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--msme-text-faint);
}

    .msme-cart-empty .msme-cart-empty-icon {
        font-size: 56px;
        opacity: 0.4;
        margin-bottom: 10px;
    }

.msme-cart-totals .msme-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--msme-text-body);
}

.msme-cart-totals .msme-cart-row.total {
    border-top: 1px solid var(--msme-border);
    padding-top: 14px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--msme-text);
}

    .msme-cart-totals .msme-cart-row.total .msme-cart-total-value {
        color: var(--msme-primary);
        font-size: 22px;
        letter-spacing: -0.3px;
    }

.msme-cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.msme-items-pill {
    background-color: var(--msme-bg);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--msme-text-muted);
}

.msme-pos-qty-input {
    width: 50px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius-sm);
    background-color: var(--msme-bg);
    color: var(--msme-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.msme-pos-qty-input:focus {
    border-color: var(--msme-primary);
    box-shadow: 0 0 0 2px var(--msme-primary-soft);
    background-color: var(--msme-surface);
}

/* Hide spin buttons for Chrome, Safari, Edge, Opera */
.msme-pos-qty-input::-webkit-outer-spin-button,
.msme-pos-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spin buttons for Firefox */
.msme-pos-qty-input[type=number] {
    -moz-appearance: textfield;
}

/* ============================================================
   Data table (Sales History)
   ============================================================ */
.msme-table-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    overflow: hidden;
    box-shadow: var(--msme-shadow-sm);
}

.msme-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .msme-table thead th {
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: var(--msme-text-muted);
        padding: 16px 20px;
        background-color: var(--msme-bg);
        border-bottom: 1px solid var(--msme-border);
    }

    .msme-table tbody td {
        padding: 18px 20px;
        border-bottom: 1px solid var(--msme-border);
        color: var(--msme-text);
    }

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

    .msme-table tbody tr:hover {
        background-color: var(--msme-bg);
    }

.msme-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--msme-bg);
    border: 1px solid var(--msme-border);
    color: var(--msme-text-body);
    font-size: 12px;
    font-weight: 500;
}

.msme-link {
    color: var(--msme-primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

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

/* ============================================================
   Helpers
   ============================================================ */
.msme-section { margin-bottom: 20px; }
.msme-mb-0 { margin-bottom: 0 !important; }
.msme-flex-between { display: flex; align-items: center; justify-content: space-between; }
.msme-mt-12 { margin-top: 12px; }
.msme-mt-16 { margin-top: 16px; }

/* Category Pills Bar */
.msme-category-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}

.msme-category-bar::-webkit-scrollbar {
    height: 4px;
}
.msme-category-bar::-webkit-scrollbar-thumb {
    background-color: var(--msme-border);
    border-radius: 4px;
}

.msme-category-pill {
    padding: 8px 16px;
    border-radius: 999px;
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    color: var(--msme-text-body);
    font-size: 13px;
    font-weight: 600;
    transition: all 150ms ease;
    white-space: nowrap;
    user-select: none;
    box-shadow: var(--msme-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.msme-category-pill:hover {
    border-color: var(--msme-border-strong);
    color: var(--msme-text);
    transform: translateY(-1px);
}

.msme-category-pill.active {
    background: var(--msme-gradient);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

/* Common Catalog Styles */
.msme-catalog-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .msme-catalog-layout {
        grid-template-columns: 1fr;
    }
}

.msme-catalog-cat-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msme-catalog-cat-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 16px;
    box-shadow: var(--msme-shadow-sm);
    transition: all 120ms ease;
}

.msme-catalog-cat-card:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow-md);
}

.msme-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.msme-catalog-card {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 16px;
    box-shadow: var(--msme-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--msme-transition);
    min-height: 280px;
}

.msme-catalog-card:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow-md);
    transform: translateY(-1px);
}

/* In-app boot splash (MainLayout, shown while !_isReady). Visually identical to the host-page
   splash in App.razor / index.html so the handover between them is invisible. The host copy is
   inlined there on purpose — it must paint before this stylesheet has loaded. */
.app-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: #f8fafc;
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
}

.app-boot-splash .spl-badge {
    width: 108px;
    height: 108px;
    border-radius: 28px;
    background: linear-gradient(135deg, #6D4AE0, #3B1F9E);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px rgba(59, 31, 158, .28);
    animation: spl-float 2.4s ease-in-out infinite;
}

.app-boot-splash .spl-badge svg { width: 62px; height: 62px; display: block; }

.app-boot-splash .spl-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #1e1b4b;
}

.app-boot-splash .spl-track {
    width: 168px;
    height: 4px;
    border-radius: 999px;
    background: rgba(59, 31, 158, .14);
    overflow: hidden;
}

.app-boot-splash .spl-track i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6D4AE0, #F5B301);
    animation: spl-slide 1.15s ease-in-out infinite;
}

@keyframes spl-float {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-9px) }
}

@keyframes spl-slide {
    0%   { transform: translateX(-105%) }
    100% { transform: translateX(320%) }
}

/* Locked (out-of-package) action placeholder — inert stand-in for a gated button. */
.pkg-locked-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pkg-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--msme-radius);
    border: 1px dashed var(--msme-border);
    background: var(--msme-surface-2, rgba(0,0,0,0.03));
    color: var(--msme-text-faint);
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
}

.pkg-locked-hint {
    font-size: 11px;
    color: var(--msme-text-faint);
    padding-left: 2px;
}

/* Compact list item (announcements, notices) — NOT the tall 280px catalog tile. */
.edu-ann-item {
    background-color: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    padding: 12px 14px;
    box-shadow: var(--msme-shadow-sm);
}

.edu-ann-item .edu-ann-body {
    color: var(--msme-text-body);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Impersonation Banner */
.msme-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 1100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.msme-impersonation-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* allow the label to shrink so the Exit button is never pushed off-screen */
}

    /* Truncate the "Viewing as…" label instead of overflowing the fixed banner. */
    .msme-impersonation-content > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.msme-impersonation-exit-btn {
    flex-shrink: 0;
}

.msme-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: msme-pulse 1.6s infinite;
}

@keyframes msme-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.msme-impersonation-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.msme-impersonation-exit-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.msme-impersonation-exit-btn:active {
    transform: translateY(0);
}

/* Adjustments when impersonating */
.msme-app.with-impersonation {
    padding-top: 44px;
}

.msme-app.with-impersonation .msme-sidebar {
    top: 44px;
    height: calc(100vh - 44px);
}

.msme-app.with-impersonation .msme-topbar {
    top: 44px;
}

.msme-nav-card {
    border-radius: var(--msme-radius);
    padding: 10px;
    margin-bottom: 16px;
    background-color: var(--msme-surface);
    box-shadow: var(--msme-shadow-sm);
    border: 1px solid var(--msme-border);
}

.msme-nav-card.student-theme {
    border-color: var(--msme-purple);
    background-color: var(--msme-purple-soft);
}

.msme-nav-card.teacher-theme {
    border-color: var(--msme-warning);
    background-color: var(--msme-warning-soft);
}

.msme-nav-card.admin-theme {
    border-color: var(--msme-border-strong);
    background-color: var(--msme-bg);
}

.msme-nav-card-header {
    padding: 4px 8px 8px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
}

[dir="rtl"] .msme-nav-card-header {
    text-align: right;
}

.msme-nav-card-title {
    color: var(--msme-text-muted);
}

.msme-nav-card-title.purple-text {
    color: var(--msme-purple);
}

.msme-nav-card-title.amber-text {
    color: var(--msme-warning);
}

/* ============================================================
   Mobile responsiveness — off-canvas sidebar + content reflow
   ============================================================ */

/* Hamburger + overlay are hidden on desktop. */
.msme-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: var(--msme-text);
    cursor: pointer;
    flex-shrink: 0;
}

    .msme-hamburger:hover {
        background-color: var(--msme-bg);
    }

/* Brand shown in the top bar on mobile (the sidebar brand is off-canvas there). */
.msme-topbar-brand {
    display: none;
    font-weight: 800;
    font-size: 16px;
    color: var(--msme-text);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.msme-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 45;
}

@media (max-width: 768px) {
    .msme-hamburger {
        display: inline-flex;
    }

    /* Hamburger + brand sit together at the top-left; right-side icons pushed to the edge. */
    .msme-topbar-brand {
        display: inline-block;
        margin-right: auto;
    }

    [dir="rtl"] .msme-topbar-brand {
        margin-right: 0;
        margin-left: auto;
    }

    /* Sidebar becomes an off-canvas drawer, collapsed by default. */
    .msme-sidebar {
        width: min(286px, 86vw);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 60;
    }

        .msme-sidebar.open {
            transform: translateX(0);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        }

    [dir="rtl"] .msme-sidebar {
        transform: translateX(100%);
    }

        [dir="rtl"] .msme-sidebar.open {
            transform: translateX(0);
        }

    .msme-sidebar-overlay.show {
        display: block;
    }

    /* Content spans full width once the drawer is off-canvas. */
    .msme-main {
        margin-left: 0 !important;
    }

    [dir="rtl"] .msme-main {
        margin-right: 0 !important;
    }

    /* Tighter top bar; the placeholder search and name label are dropped to save room. */
    .msme-topbar {
        padding: 0 12px;
        gap: 8px;
    }

    .msme-search {
        display: none;
    }

    .msme-topbar-user .msme-user-name {
        display: none;
    }

    /* Page padding + headers. */
    .msme-content {
        padding: 16px 14px 32px;
    }

    .msme-page-head {
        margin-bottom: 16px;
    }

    .msme-page-title {
        font-size: 22px;
    }

    /* Tables scroll horizontally instead of overflowing the viewport. */
    .msme-table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    /* Grids collapse to a single column (Assignments drops under Courses, etc.). */
    .msme-action-grid,
    .msme-product-grid,
    .msme-module-grid {
        grid-template-columns: 1fr !important;
    }

    /* Never let anything spill horizontally / clip on the right. */
    .msme-app {
        /* overflow-x: hidden removed to prevent breaking position: sticky on child headers */
    }

    /* The Home dashboard wraps its content in a MudContainer — drop its extra gutters
       so cards use the full mobile width. (The container has both .msme-app and
       .mud-container on the same element, so target it inside the content area.) */
    .msme-content .mud-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Compact impersonation banner: tighter padding, icon-only Exit so it always fits. */
    .msme-impersonation-banner {
        padding: 0 12px;
    }

        .msme-impersonation-exit-btn span {
            display: none;
        }
}

@media (max-width: 420px) {
    .msme-sidebar {
        width: 88vw;
    }

    .msme-content {
        padding: 12px 10px 28px;
    }
}

/* ============================================================
   UI Refresh — Utility Classes & Animations
   ============================================================ */

/* Gradient text */
.msme-gradient-text {
    background: var(--msme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glassmorphism card */
.msme-card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--msme-radius-lg);
    box-shadow: var(--msme-shadow-md);
}

/* Page enter animation */
.msme-page-enter {
    animation: msme-fadeSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes msme-fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Float animation for illustrations */
@keyframes msme-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.msme-illustration {
    animation: msme-float 4s ease-in-out infinite;
    max-width: 100%;
    height: auto;
}

.msme-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

/* Empty state */
.msme-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.msme-empty-state img {
    max-width: 240px;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.85;
}

.msme-empty-state-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--msme-text);
    margin-bottom: 6px;
}

.msme-empty-state-text {
    font-size: 14px;
    color: var(--msme-text-muted);
    max-width: 320px;
}

/* Hero section */
.msme-hero-section {
    background: var(--msme-gradient);
    border-radius: var(--msme-radius-xl);
    padding: calc(48px + var(--safe-area-top, 0px)) 40px 48px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.msme-hero-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.msme-hero-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* Auth two-column layout */
.msme-auth-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    gap: 0;
}

.msme-auth-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--msme-gradient);
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.msme-auth-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.msme-auth-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.msme-auth-hero-illustration {
    max-width: 360px;
    width: 100%;
    height: auto;
    animation: msme-float 4s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
    margin-bottom: 32px;
}

.msme-auth-hero-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    max-width: 360px;
}

.msme-auth-hero-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.msme-auth-hero-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.msme-auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background-color: var(--msme-bg);
}

.msme-auth-form-inner {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 900px) {
    .msme-auth-layout {
        grid-template-columns: 1fr;
    }

    .msme-auth-hero {
        display: none;
    }

    .msme-auth-form {
        padding: calc(32px + var(--safe-area-top, 0px)) 20px 32px;
    }
}

/* Enhanced module card (for Home page) */
.msme-module-card-enhanced {
    background: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius-lg);
    padding: 24px;
    min-height: 180px;
    box-shadow: var(--msme-shadow-sm);
    cursor: pointer;
    transition: var(--msme-transition);
    position: relative;
    overflow: hidden;
}

.msme-module-card-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--msme-gradient);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.msme-module-card-enhanced:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow-lg);
    transform: translateY(-4px);
}

.msme-module-card-enhanced:hover::after {
    opacity: 1;
}

/* Enhanced icon wrapper with gradient */
.msme-icon-wrapper-gradient {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--msme-gradient);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.msme-icon-wrapper-gradient.amber {
    background: var(--msme-gradient-accent);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.msme-icon-wrapper-gradient.green {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.msme-icon-wrapper-gradient.purple {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.msme-icon-wrapper-gradient.pink {
    background: linear-gradient(135deg, #EC4899, #DB2777);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
}

.msme-icon-wrapper-gradient.cyan {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

/* Subject badge pill */
.msme-subject-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--msme-primary-soft);
    color: var(--msme-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Welcome card with illustration */
.msme-welcome-card {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--msme-gradient);
    border-radius: var(--msme-radius-xl);
    padding: 32px 40px;
    margin-bottom: 32px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.msme-welcome-card::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.msme-welcome-card-text {
    flex: 1;
    min-width: 0;
}

.msme-welcome-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
}

.msme-welcome-subtitle {
    font-size: 15px;
    opacity: 0.8;
}

.msme-welcome-illustration {
    width: 180px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
    animation: msme-float 4s ease-in-out infinite;
}

@media (max-width: 768px) {
    .msme-welcome-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }

    .msme-welcome-illustration {
        width: 140px;
        order: -1;
    }

    .msme-hero-section {
        padding: calc(32px + var(--safe-area-top, 0px)) 20px 32px;
    }

    .msme-illustration {
        animation: none;
    }
}

/* Join code card enhanced */
.msme-join-code-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px;
    background: var(--msme-primary-soft);
    border: 1px solid var(--msme-primary-soft-2);
    border-radius: var(--msme-radius-lg);
    margin-bottom: 32px;
}

.msme-join-code-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    background: var(--msme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 6px 16px;
    border: 2px dashed var(--msme-primary-soft-2);
    border-radius: 10px;
}

/* Enhanced subscription tier card */
.msme-tier-card {
    background: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius-lg);
    padding: 0;
    overflow: hidden;
    transition: var(--msme-transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.msme-tier-card:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow-lg);
    transform: translateY(-4px);
}

.msme-tier-card.featured {
    border-color: var(--msme-primary);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

.msme-tier-header {
    padding: 24px 24px 16px;
    background: var(--msme-primary-soft);
    text-align: center;
}

.msme-tier-card.featured .msme-tier-header {
    background: var(--msme-gradient);
    color: #ffffff;
}

.msme-tier-price {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    margin: 8px 0;
}

.msme-tier-price-suffix {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.7;
}

.msme-tier-body {
    padding: 24px;
    flex: 1;
}

.msme-tier-footer {
    padding: 0 24px 24px;
}

/* Schedule day header */
.msme-day-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--msme-primary-soft);
    color: var(--msme-primary);
    font-size: 13px;
    font-weight: 700;
    margin: 18px 0 10px;
}

/* Schedule slot enhanced */
.msme-schedule-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--msme-surface);
    border: 1px solid var(--msme-border);
    border-radius: var(--msme-radius);
    margin-bottom: 8px;
    transition: var(--msme-transition);
    position: relative;
    overflow: hidden;
}

.msme-schedule-slot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--msme-gradient);
}

[dir="rtl"] .msme-schedule-slot::before {
    left: auto;
    right: 0;
}

.msme-schedule-slot:hover {
    border-color: var(--msme-primary-soft-2);
    box-shadow: var(--msme-shadow);
}

/* Score/progress display */
.msme-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.msme-score-badge.excellent {
    background: var(--msme-success-soft);
    color: var(--msme-success);
}

.msme-score-badge.good {
    background: var(--msme-primary-soft);
    color: var(--msme-primary);
}

.msme-score-badge.needs-work {
    background: var(--msme-warning-soft);
    color: var(--msme-warning);
}

/* Topbar subtle gradient shadow */
.msme-topbar-shadow {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(79, 70, 229, 0.03);
}

/* Feature highlight cards (landing page) */
.msme-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.msme-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--msme-radius-lg);
    backdrop-filter: blur(8px);
    transition: var(--msme-transition);
}

.msme-feature-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.msme-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #ffffff;
}

.msme-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.msme-feature-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .msme-feature-grid {
        grid-template-columns: 1fr;
    }

    .msme-welcome-card {
        gap: 20px;
    }

    .msme-join-code-card {
        justify-content: center;
        text-align: center;
    }

    .msme-join-code-value {
        font-size: 22px;
    }
}

/* ============================================================
   Finishing touches — focus, selection, scrollbars, motion, skeletons
   ============================================================ */

/* Brand-tinted text selection */
.msme-app ::selection { background: var(--msme-primary-soft-2); color: var(--msme-primary-hover); }

/* Keyboard focus rings — shown only on keyboard nav, never on mouse click,
   so they polish accessibility without adding visual noise for mouse users. */
.msme-app a:focus-visible,
.msme-app button:focus-visible,
.msme-app input:focus-visible,
.msme-app select:focus-visible,
.msme-app textarea:focus-visible,
.msme-app [tabindex]:focus-visible,
.msme-btn:focus-visible,
.msme-nav-item:focus-visible,
.msme-icon-btn:focus-visible,
.msme-action-card:focus-visible,
.msme-card:focus-visible {
    outline: 2px solid var(--msme-primary);
    outline-offset: 2px;
    border-radius: var(--msme-radius-sm);
}
.msme-app :focus:not(:focus-visible) { outline: none; }

/* Inputs get a soft brand focus ring instead of the browser default */
.msme-app input:focus-visible,
.msme-app select:focus-visible,
.msme-app textarea:focus-visible {
    outline: none;
    border-color: var(--msme-primary);
    box-shadow: 0 0 0 3px var(--msme-primary-soft-2);
}

/* Thin, branded scrollbars across the app */
/* Custom scrollbars only on mouse/desktop — touch devices keep native overlay scrollbars
   (forcing classic 10px bars on mobile reserves width and breaks narrow layouts). */
@media (pointer: fine) {
    .msme-app * {
        scrollbar-width: thin;
        scrollbar-color: var(--msme-border-strong) transparent;
    }
    .msme-app *::-webkit-scrollbar { width: 10px; height: 10px; }
    .msme-app *::-webkit-scrollbar-track { background: transparent; }
    .msme-app *::-webkit-scrollbar-thumb {
        background: var(--msme-border-strong);
        border-radius: 999px;
        border: 3px solid transparent;
        background-clip: content-box;
    }
    .msme-app *::-webkit-scrollbar-thumb:hover {
        background: var(--msme-text-faint);
        background-clip: content-box;
    }
}

/* Reusable skeleton-loading shimmer (use in place of spinners for lists/cards) */
.msme-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--msme-border);
    border-radius: var(--msme-radius-sm);
}
.msme-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: msme-shimmer 1.4s infinite;
}
@keyframes msme-shimmer { 100% { transform: translateX(100%); } }
.msme-skeleton-text { height: 12px; margin: 6px 0; }
.msme-skeleton-title { height: 18px; width: 40%; margin-bottom: 12px; }
.msme-skeleton-circle { border-radius: 50%; }

/* Respect users who prefer reduced motion (disables the infinite float/pulse, etc.) */
@media (prefers-reduced-motion: reduce) {
    .msme-app *,
    .msme-app *::before,
    .msme-app *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .msme-illustration { animation: none !important; }
}

/* Table footer: result count + pager */
.msme-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--msme-border);
    flex-wrap: wrap;
}
.msme-table-foot-count { font-size: 13px; color: var(--msme-text-muted); font-weight: 600; }
.msme-pager { display: flex; align-items: center; gap: 8px; }
.msme-pager-btn { height: 32px; width: 32px; padding: 0; }
.msme-pager-info { font-size: 13px; color: var(--msme-text-body); min-width: 56px; text-align: center; }

/* ============================================================
   Phase 2 polish — typography, stat trends, snackbars
   ============================================================ */

/* Crisper, tighter heading typography */
.msme-app .msme-page-title,
.msme-app .msme-card-title,
.msme-app h1,
.msme-app h2,
.msme-app h3 {
    letter-spacing: -0.015em;
}

/* Stat-card trend chip (pair with .msme-stat-card) */
.msme-trend-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}
.msme-trend-up { background: var(--msme-success-soft); color: var(--msme-success); }
.msme-trend-down { background: var(--msme-danger-soft); color: var(--msme-danger); }
.msme-trend-flat { background: var(--msme-bg); color: var(--msme-text-muted); }

/* MudBlazor snackbars render outside .msme-app — theme them to match the system.
   Fallback literals are used because the design tokens are scoped to .msme-app. */
.mud-snackbar {
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .05) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}


/* ============================================================
   Dashboard polish — hero depth + richer module cards
   ============================================================ */

/* Decorative light blooms inside the gradient welcome hero for depth. */
.msme-welcome-card::before {
    content: '';
    position: absolute;
    top: -45%;
    right: -8%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.msme-welcome-card::after {
    content: '';
    position: absolute;
    bottom: -70%;
    left: 18%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.msme-welcome-card-text { position: relative; z-index: 1; }
.msme-welcome-illustration { width: 210px; }

/* Module cards: lift + animated accent bar on hover. */
.msme-module-card-enhanced::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--msme-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.msme-module-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: var(--msme-shadow-lg);
    border-color: var(--msme-primary-soft-2);
}
.msme-module-card-enhanced:hover::after { transform: scaleX(1); }
.msme-module-card-enhanced:hover .msme-icon-wrapper-gradient { transform: scale(1.06); }
.msme-icon-wrapper-gradient { transition: transform 0.2s ease; }

@media (max-width: 640px) {
    .msme-welcome-illustration { display: none; }  /* keep the mobile hero clean */
}

/* Home landing page container for unauthenticated views */
.msme-home-unauth-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
}

@media (max-width: 768px) {
    .msme-home-unauth-container {
        margin: 0 auto;
        padding: 0;
    }
    .msme-home-unauth-container .msme-hero-section {
        border-radius: 0 0 var(--msme-radius-xl) var(--msme-radius-xl);
    }
}