/* ==========================================================================
   SukiStop - Shared Portal Stylesheet
   Design tokens mirror /design-system.html - keep both in sync.

   DESIGN SYSTEM GUIDE:
   ====================

   USAGE:
   1. All Admin and Franchisee views MUST use these shared classes
   2. Do NOT use Bootstrap utility classes (.d-flex, .mb-4, .gap-3, etc.)
   3. Do NOT inline styles unless absolutely temporary
   4. Color/spacing/typography ALWAYS use CSS variables

   COMPONENTS & CLASSES:

   CONTAINERS & LAYOUT:
   - .app-shell: Main flex container (sidebar + content)
   - .main-col: Main content column
   - .content: Main content area
   - .supplier-details-container: Detail view wrapper (flex column, gap 1.5rem)
   - .container-fluid: Use SPARINGLY (prefer custom widths)

   HEADERS & CARDS:
   - .topbar: Top navigation bar
   - .welcome-title, .welcome-eyebrow: Header typography
   - .supplier-header-card: Profile header (2-column layout)
     └─ .supplier-header-left: Logo + name (flex, gap 1.5rem)
     └─ .supplier-header-right: Contact info
   - .supplier-meta-section: Metadata & actions
   - .supplier-banner-card: Image banner
   - .supplier-products-card: Product table container

   BUTTONS:
   - .btn: Base button
     └─ .btn-primary, .btn-secondary, .btn-outline: Variants
   - .btn-action: Icon + text button (padding 0.5rem 1rem)
     └─ .btn-action.btn-primary, .btn-warning, .btn-secondary: Colors
   - .btn-icon: Square icon button (30x30px)

   TABLES:
   - .products-table: Modern table styling
     └─ thead th: Gray header (padding 1rem 0.75rem, uppercase)
     └─ tbody td: Uniform padding (1rem 0.75rem)
   - .products-table-wrapper: Overflow container
   - .products-controls: Filter & info bar

   TABLE CELL STYLES:
   - .category-badge: Category label (inline-flex, bg-neutral-100)
   - .sku-cell: Monospace SKU (font-family: Courier New)
   - .price-cell: Bold primary color price
   - .product-thumbnail: 50x50px image thumbnail
   - .product-thumbnail-placeholder: 50x50px placeholder

   PAGINATION:
   - .pagination-controls: Flex center, gap 0.5rem
   - .page-number: Individual page button
     └─ .page-number.active: Blue background

   FORMS & INPUTS:
   - .fh-field: Form field wrapper (flex column, gap 6px)
   - .fh-input, .fh-select, .fh-textarea: Form elements
   - .form-group: Legacy form group
   - .form-control: Legacy form input
   - .filter-select: Table filter dropdown

   BADGES & LABELS:
   - .badge: Small label (padding 4px 10px)
     └─ .badge-processing, .badge-shipped, .badge-delivered, .badge-cancelled
   - .product-count-badge: Blue badge (min-width 28px, height 28px)
   - .category-badge: Inline category label

   UTILITIES:
   - .fh-toolbar: Flex space-between (margin-bottom 14px)
   - .fh-form-grid: 2-column grid (gap 14px, responsive)
   - .fh-empty: Empty state (padding 18px, dashed border)
   - .fh-actions: Button group (margin-top 18px, flex gap 10px)
   - .info-section: Info block (h6 + p, gray text)
   - .action-buttons: Flex gap 0.5rem, justify-end
   - .announce: Announcement card (flex gap 12px)

   SPACING SCALE:
   Use these spacing values consistently:
   - 0.25rem (4px), 0.5rem (8px), 0.75rem (12px), 1rem (16px)
   - 1.25rem, 1.5rem, 2rem, 2.5rem, 3rem
   - Buttons: padding 0.5rem 1rem (default), 0.75rem 1.75rem (large)
   - Cards: padding 1.5rem to 2rem
   - Table cells: padding 1rem 0.75rem
   - Gaps: 0.5rem (tight), 1rem (normal), 1.5rem (spacious), 2rem (large)

   RESPONSIVE BREAKPOINTS:
   - @media (max-width: 1024px): Tablet/laptop adjustments
   - @media (max-width: 768px): Tablet refinements
   - @media (max-width: 512px): Mobile customization

   COLORS (CSS Variables):
   - --primary: #E60000 (Red)
   - --primary-dark: #B30000
   - --primary-light: #FFE5E5
   - --neutral-900: #111827 (Dark text)
   - --neutral-600: #4B5563 (Medium gray)
   - --neutral-200: #E5E7E8 (Light border)
   - --neutral-100: #F5F6F7 (Light background)
   - --neutral-0: #FFFFFF (White)
   - --success, --warning, --info: Status colors

   ========================================================================== */
:root {
    --primary: #E60000;
    --primary-dark: #B30000;
    --primary-light: #FFE5E5;
    --neutral-900: #111827;
    --neutral-600: #4B5563;
    --neutral-200: #E5E7E8;
    --neutral-100: #F5F6F7;
    --neutral-0: #FFFFFF;
    --success: #16A34A;
    --success-bg: #E7F7ED;
    --warning: #F59E0B;
    --warning-bg: #FEF3DD;
    --info: #3B82F6;
    --info-bg: #E8F0FE;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.08);
    --sidebar-w: 248px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background: var(--neutral-100);
    color: var(--neutral-900);
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--neutral-0);
    border-right: 1px solid var(--neutral-200);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
}

    .sidebar.admin-sidebar {
        background: var(--neutral-900);
        color: #fff;
        border-right: none;
    }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 20px;
}

    .sidebar-logo img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .sidebar-logo span {
        font-weight: 700;
        font-size: 16px;
    }

.admin-sidebar .sidebar-logo span {
    color: #fff;
}

.nav-group {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

    .nav-group li + li {
        margin-top: 2px;
    }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
}

.form-inline {
    margin: 0;
}

.form-inline .nav-link {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font-family: var(--font);
}

    .nav-link svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .nav-link:hover {
        background: var(--neutral-100);
        color: var(--neutral-900);
    }

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

.admin-sidebar .nav-link {
    color: #9CA3AF;
}

    .admin-sidebar .nav-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .admin-sidebar .nav-link.active {
        background: var(--primary);
        color: #fff;
    }

/* ---------- Main column ---------- */
.main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-200);
}

    .topbar .welcome-eyebrow {
        font-size: 12px;
        color: var(--neutral-600);
        margin: 0;
    }

    .topbar .welcome-title {
        font-size: 18px;
        font-weight: 700;
        margin: 2px 0 0;
    }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bell {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .bell svg {
        width: 18px;
        height: 18px;
        color: var(--neutral-600);
    }

    .bell .dot {
        position: absolute;
        top: 6px;
        right: 7px;
        width: 8px;
        height: 8px;
        background: var(--primary);
        border-radius: 50%;
        border: 2px solid #fff;
    }

.profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .profile img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
    }

    .profile .name {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .profile .role {
        font-size: 11px;
        color: var(--neutral-600);
    }

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

    .content h1.page-title {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 20px;
    }

/* ---------- Grid / cards ---------- */
.grid {
    display: grid;
    gap: 18px;
}

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

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

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

@media (max-width:1100px) {
    .grid-4 {
        grid-template-columns: repeat(2,1fr);
    }

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

.card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

    .card h3 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 14px;
    }

    .card .card-link {
        font-size: 12px;
        font-weight: 600;
        color: var(--primary);
    }

.stat-card {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px;
}

    .stat-card .label {
        font-size: 12px;
        color: var(--neutral-600);
        margin-bottom: 8px;
    }

    .stat-card .value {
        font-size: 22px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .stat-card .value svg {
            width: 18px;
            height: 18px;
            color: var(--primary);
        }

    .stat-card .foot-link {
        display: inline-block;
        margin-top: 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary);
    }

/* ---------- Lists ---------- */
.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-200);
}

    .order-row:last-child {
        border-bottom: none;
    }

    .order-row .oid {
        font-size: 13px;
        font-weight: 600;
    }

    .order-row .odate {
        font-size: 12px;
        color: var(--neutral-600);
    }

    .order-row .left {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .order-row .ico {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--neutral-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--neutral-600);
    }

        .order-row .ico svg {
            width: 16px;
            height: 16px;
        }

.list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-200);
    font-size: 13px;
}

    .list-row:last-child {
        border-bottom: none;
    }

    .list-row .rank {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--neutral-100);
        color: var(--neutral-600);
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
    }

    .list-row .amt {
        font-weight: 700;
        color: var(--primary);
    }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-processing {
    background: var(--warning-bg);
    color: #B45309;
}

.badge-shipped {
    background: var(--info-bg);
    color: #1D4ED8;
}

.badge-delivered {
    background: var(--success-bg);
    color: #15803D;
}

.badge-cancelled {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--primary-dark);
    }

.btn-outline {
    background: #fff;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--neutral-200);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon.approve {
        color: var(--success);
        border-color: var(--success);
    }

    .btn-icon.reject {
        color: var(--primary);
        border-color: var(--primary);
    }

/* ---------- Table ---------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    table.data th {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--neutral-600);
        padding: 10px 8px;
        border-bottom: 1px solid var(--neutral-200);
    }

    table.data td {
        padding: 12px 8px;
        border-bottom: 1px solid var(--neutral-200);
    }

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

/* ---------- Simple bar chart (CSS only, no JS dependency) ---------- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    height: 180px;
    padding-top: 10px;
}

    .bar-chart .bar-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex: 1;
        height: 100%;
        justify-content: flex-end;
    }

    .bar-chart .bar {
        width: 26px;
        background: var(--primary);
        border-radius: 4px 4px 0 0;
    }

    .bar-chart .bar-label {
        font-size: 11px;
        color: var(--neutral-600);
    }

.announce {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .announce .ico {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .announce .ico svg {
            width: 16px;
            height: 16px;
        }

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

.fh-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fh-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .fh-field label {
        font-size: 12px;
        color: var(--neutral-600);
        font-weight: 600;
    }

.fh-input,
.fh-select,
.fh-textarea {
    width: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--neutral-900);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13px;
}

.fh-textarea {
    min-height: 110px;
    resize: vertical;
}

.fh-input:focus,
.fh-select:focus,
.fh-textarea:focus {
    outline: 2px solid rgba(230, 0, 0, 0.18);
    border-color: var(--primary);
}

.fh-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.fh-empty {
    text-align: center;
    padding: 18px;
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-md);
    color: var(--neutral-600);
    font-size: 13px;
}

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

/* ---------- Admin view alignment (legacy class mapping) ---------- */
.card h2 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--neutral-900);
}

.card p {
    color: var(--neutral-600);
}

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

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

.form-control {
    width: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--neutral-900);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13px;
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-control:focus {
    outline: 2px solid rgba(230, 0, 0, 0.18);
    border-color: var(--primary);
}

.btn-secondary {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.text-danger {
    color: var(--primary);
    font-size: 12px;
    margin-top: 4px;
}

.card form .btn + .btn,
.card form .btn + .btn-secondary,
.card form .btn-secondary + .btn,
.card form .btn-secondary + .btn-secondary {
    margin-left: 8px;
}

table.data td a {
    color: var(--primary);
    font-weight: 600;
}

/* ========== SHARED DETAIL VIEW STYLES ========== */
/* DOCUMENTATION: CSS Classes & Usage Guide
 *
 * Detail View Layout Structure (used in both Admin and Franchisee areas):
 * - .supplier-details-container: Main flex container wrapping all sections
 * - .supplier-header-card: Header section with logo (left) & info (right)
 *   - .supplier-header-left: Left column (logo + name/description)
 *   - .supplier-header-logo: Logo image container (120x120px)
 *   - .supplier-header-name: Name and description text
 *   - .supplier-header-right: Right column (address, contact info)
 * - .supplier-meta-section: Meta info & actions section
 *   - .meta-left: Timestamps and metadata
 *   - .meta-right: Action buttons
 *   - .action-buttons, .btn-action: Button styling
 * - .supplier-banner-card: Optional banner image
 *
 * Products Table & Controls:
 * - .products-controls: Filter & pagination info row
 * - .products-table, .products-table-wrapper: Table styling
 * - .category-badge, .sku-cell, .price-cell: Cell-specific styling
 * - .pagination-controls: Pagination button container
 * - .page-number, .page-number.active: Page button styling
 *
 * Responsive Breakpoints (mobile-first):
 * - Base: Mobile (< 512px)
 * - @media (max-width: 768px): Tablet
 * - @media (max-width: 1024px): Desktop adjustments
 * - @media (max-width: 512px): Mobile refinements
 *
 * Usage Notes:
 * 1. All details views (Admin & Franchisee) should use these shared classes
 * 2. Portal-specific actions/content go in .meta-right or dedicated sections
 * 3. Color tokens use CSS variables (--primary, --neutral-*, etc.)
 * 4. DO NOT duplicate these styles in view-specific <style> tags
 */

/* Supplier Details Container */
.supplier-details-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header Card (Logo + Name vs Address + Contact) */
.supplier-header-card {
    display: flex;
    gap: 3rem;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 2rem;
    align-items: flex-start;
}

.supplier-header-left {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    align-items: flex-start;
}

.supplier-header-logo {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.supplier-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.supplier-header-name {
    flex: 1;
}

.supplier-header-name h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--neutral-900);
}

.supplier-header-description {
    margin: 0.5rem 0 0;
    color: var(--neutral-600);
    font-size: 0.95rem;
}

.supplier-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-section h6 {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--neutral-900);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-section p {
    margin: 0;
    color: var(--neutral-700, #374151);
    font-size: 0.9rem;
    line-height: 1.5;
}

.info-section a {
    color: var(--primary);
    text-decoration: none;
}

.info-section a:hover {
    text-decoration: underline;
}

/* Meta Section: Dates + Actions */
.supplier-meta-section {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.meta-left {
    display: flex;
    gap: 2rem;
    flex: 1;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-item label {
    font-size: 0.8rem;
    color: var(--neutral-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-item span {
    font-size: 0.9rem;
    color: var(--neutral-900);
    font-weight: 500;
}

.meta-right {
    flex: 1;
    text-align: right;
}

.meta-right h6 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-action.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-action.btn-secondary {
    background: var(--neutral-200);
    color: var(--neutral-900);
}

.btn-action.btn-secondary:hover {
    background: var(--neutral-300, #d1d5db);
}

.btn-action.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-action.btn-warning:hover {
    background: #d97706;
}

.btn-action i {
    font-size: 0.7rem;
}

/* Banner Section */
.supplier-banner-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-200);
    background: var(--neutral-100);
}

.supplier-banner-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* Products Table Styles */
.products-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.products-filter {
    min-width: 280px;
}

.products-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.products-info .info-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.products-info .info-value {
    font-size: 0.9rem;
    color: var(--neutral-900);
    font-weight: 500;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.products-table thead th {
    background: var(--neutral-100);
    padding: 1rem 0.75rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--neutral-200);
}

.products-table tbody td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--neutral-200);
    font-size: 0.85rem;
}

.products-table tbody tr:hover {
    background: var(--neutral-100);
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--neutral-100);
    color: var(--neutral-900);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.75rem;
}

.sku-cell {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--neutral-900);
}

.price-cell {
    font-weight: 700;
    color: var(--primary);
}

.product-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-200);
}

.product-thumbnail-placeholder {
    width: 50px;
    height: 50px;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400);
    font-size: 0.8rem;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
}

.page-number {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
    color: var(--neutral-900);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-number:hover:not(:disabled) {
    background: var(--neutral-100);
    border-color: var(--primary);
}

.page-number.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.page-number:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 0.75rem;
    color: var(--neutral-600);
    white-space: nowrap;
}

/* ========== BRIDGE CLASSES: Bootstrap → Design System ========== */
/* Use these when transitioning Franchisee views to design system */

/* Layout Utilities */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Spacing Utilities */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.px-2 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }

/* Text Utilities */
.text-muted { color: var(--neutral-600); }
.text-center { text-align: center; }
.text-start { text-align: start; }
.small { font-size: 0.875rem; }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }

/* Card Classes */
.card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

/* Form Controls (Bootstrap → Design System) */
.form-select {
    width: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--neutral-900);
    padding: 0.5rem 0.75rem;
    font-family: var(--font);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.1);
}

.form-select:hover {
    border-color: var(--primary-light);
}

/* Container Utilities */
.container-fluid {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Header & Navigation */
.page-header-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0;
}

.page-header-description {
    color: var(--neutral-600);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

/* Supplier Card Grid */
.supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.supplier-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
}

.supplier-card:hover {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.1);
    border-color: var(--primary);
}

.supplier-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.supplier-card-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supplier-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.supplier-card-name {
    margin: 1rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neutral-900);
}

.supplier-card-badge {
    display: inline-block;
    background: var(--info);
    color: white;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

/* Filter Section */
.supplier-select-card {
    margin-bottom: 2rem;
}

.supplier-select-card .card-body h4 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neutral-900);
}

.supplier-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--neutral-600);
}

.supplier-empty {
    text-align: center;
    padding: 2rem;
    color: var(--neutral-600);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-900);
}

.filter-select {
    width: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--neutral-900);
    padding: 0.75rem;
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.1);
}

.filter-select:hover {
    border-color: var(--primary-light);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .supplier-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }

    .supplier-card {
        padding: 1rem;
    }

    .supplier-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
}

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

/* Empty State */
.fh-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--neutral-600);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .supplier-header-card {
        flex-direction: column;
        gap: 1.5rem;
    }

    .supplier-header-left {
        flex-direction: column;
    }

    .supplier-header-right {
        flex-direction: row;
        width: 100%;
    }

    .info-section {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .supplier-meta-section {
        flex-direction: column;
        gap: 1.5rem;
    }

    .meta-right {
        text-align: left;
    }

    .action-buttons {
        justify-content: flex-start;
    }

    .supplier-banner-image {
        height: 200px;
    }

    .products-controls {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .products-table {
        font-size: 0.75rem;
    }

    .products-table thead th,
    .products-table tbody td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 512px) {
    .supplier-details-container {
        gap: 1rem;
    }

    .supplier-header-card {
        padding: 1rem;
    }

    .supplier-header-name h1 {
        font-size: 1.25rem;
    }

    .supplier-header-logo {
        width: 80px;
        height: 80px;
    }

    .supplier-meta-section {
        padding: 1rem;
    }

    .supplier-banner-image {
        height: 150px;
    }

    .meta-left {
        flex-direction: column;
        gap: 1rem;
    }

    .action-buttons {
        width: 100%;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   WALLET & TOP-UP COMPONENTS
   ========================================================================== */

.wallet-balance-card {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
}

.wallet-balance-card .balance-amount {
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-item {
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

/* ==========================================================================
   Bootstrap-to-Tailwind Compatibility Layer
   Used temporarily while Identity pages and legacy views are being migrated
   ========================================================================== */

/* Grid System */
.row { @apply flex flex-wrap -mx-3; }
.col-md-1 { @apply md:w-8.333% px-3; }
.col-md-2 { @apply md:w-16.666% px-3; }
.col-md-3 { @apply md:w-3/12 px-3; }
.col-md-4 { @apply md:w-4/12 px-3; }
.col-md-5 { @apply md:w-5/12 px-3; }
.col-md-6 { @apply md:w-1/2 px-3; }
.col-md-7 { @apply md:w-7/12 px-3; }
.col-md-8 { @apply md:w-2/3 px-3; }
.col-md-9 { @apply md:w-3/4 px-3; }
.col-md-10 { @apply md:w-5/6 px-3; }
.col-md-11 { @apply md:w-11/12 px-3; }
.col-md-12 { @apply w-full px-3; }
.col-md-offset-2 { @apply md:ml-4/12; }

/* Form Elements */
.form-floating > label { @apply absolute left-3 top-4 text-gray-500 text-sm; }
.form-floating > .form-control { @apply pt-6 pb-2; }
.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label { @apply -translate-y-2 text-xs text-gray-700; }
.form-control { @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500; }
.form-check-input { @apply w-4 h-4 border border-gray-300 rounded; }
.form-label { @apply block text-sm font-medium text-gray-700; }

/* Buttons */
.btn { @apply inline-flex items-center px-4 py-2 border border-transparent rounded-lg font-medium transition; }
.btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700; }
.btn-secondary { @apply bg-gray-200 text-gray-900 hover:bg-gray-300; }
.btn-link { @apply text-blue-600 hover:text-blue-800 underline; }
.btn-lg { @apply px-6 py-3 text-lg; }
.w-100 { @apply w-full; }

/* Text Utilities */
.text-dark { @apply text-gray-900; }
.text-muted { @apply text-gray-500; }
.text-danger { @apply text-red-600; }
.text-center { @apply text-center; }

/* Spacing */
.mb-3 { @apply mb-3; }
.mt-3 { @apply mt-3; }
.mx-auto { @apply mx-auto; }

/* Layout */
.container-fluid { @apply w-full px-4; }
.box-shadow { @apply shadow; }
.border-bottom { @apply border-b; }
.border-top { @apply border-t; }
.navbar { @apply flex items-center bg-white border-b; }
.navbar-expand-sm { @apply flex; }
.navbar-brand { @apply text-lg font-bold text-gray-900; }
.navbar-toggler { @apply inline-flex items-center justify-center p-2 rounded md:hidden; }
.navbar-collapse { @apply flex-1; }
.nav-item { @apply; }
.nav-link { @apply px-3 py-2 text-gray-700 hover:text-gray-900; }
.navbar-nav { @apply flex space-x-3; }
.justify-content-between { @apply flex justify-between; }
.d-sm-inline-flex { @apply inline-flex; }
.footer { @apply border-t py-8 bg-gray-50; }