/* Documentation Styles - Quanlycuahang.cloud */

/* Reset & Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --primary-light: #d1fae5;
    --sidebar-width: 280px;
    --header-height: 60px;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --bg-light: #f9fafb;
}

/* Base */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: #fff;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 24px;
    z-index: 100;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 18px;
}

.header-logo img {
    height: 36px;
    width: 36px;
}

.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.header-nav a:hover {
    color: var(--primary);
}

.btn-login {
    background: var(--primary);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
}

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

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 24px 0;
    z-index: 50;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0 24px;
    margin-bottom: 8px;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sidebar-menu a:hover {
    background: #fff;
    color: var(--text-primary);
}

.sidebar-menu a.active {
    background: #fff;
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 500;
}

.sidebar-menu a i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
}

.sidebar-overlay.active {
    display: block;
}

/* Main Content */
.main {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

.content {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 48px 80px;
}

/* Wide content for report pages */
.content.content-wide {
    max-width: 1200px;
}

/* Typography */
.content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.content h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 48px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

.content h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 32px 0 12px;
    color: var(--text-primary);
}

.content h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: var(--text-primary);
}

.content p {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.content ul,
.content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.content li {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.content strong {
    color: var(--text-primary);
}

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

.content a:hover {
    text-decoration: underline;
}

.lead {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

/* Info Boxes */
.info-box {
    padding: 16px 20px;
    border-radius: 8px;
    margin: 24px 0;
    display: flex;
    gap: 12px;
}

.info-box i {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box.tip {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.info-box.warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.info-box.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.feature-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.feature-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Status List */
.status-list {
    margin: 24px 0;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 8px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge.pending {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.preparing {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.completed {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.paid {
    background: #e0e7ff;
    color: #4f46e5;
}

.status-badge.cancelled {
    background: #fee2e2;
    color: #dc2626;
}

/* Tables */
.table-wrapper {
    overflow-x: auto;
    margin: 24px 0;
}

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

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--text-primary);
}

td {
    color: var(--text-secondary);
}

/* Step List */
.step-list {
    margin: 24px 0;
}

.step-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 12px;
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.step-content p {
    margin: 0;
    font-size: 14px;
}

/* Shortcut List */
.shortcut-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 8px;
}

.shortcut-key {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.shortcut-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Quick Start Grid */
.quickstart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.quickstart-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.quickstart-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    text-decoration: none;
}

.quickstart-card-icon {
    width: 56px;
    height: 56px;
    background: var(--primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.quickstart-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.quickstart-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Images */
.doc-image {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin: 16px 0;
}

.doc-image.small {
    max-width: 400px;
}

.doc-image.medium {
    max-width: 600px;
}

/* Footer */
.doc-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-footer a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.doc-footer a:hover {
    text-decoration: underline;
}

/* Code */
code {
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
}

pre {
    background: var(--bg-light);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
}

pre code {
    padding: 0;
    background: none;
}

/* Category Card (Business Setup) */
.category-item {
    background: var(--bg-light);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.category-item:hover {
    border-color: var(--primary);
}

.category-item.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.category-icon {
    font-size: 28px;
}

.category-content {
    flex: 1;
}

.category-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.category-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.category-code {
    font-size: 11px;
    color: var(--text-secondary);
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

.category-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.2s;
}

.category-item.selected .category-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}

/* App Install - Platform Cards */
.platform-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

@media (max-width: 540px) {
    .platform-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.platform-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
}

.platform-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.platform-card h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.platform-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.platform-card-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 24px;
    flex-shrink: 0;
}

.platform-card-text {
    flex: 1;
}

/* Mobile: horizontal layout */
@media (max-width: 540px) {
    .platform-card {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }
    
    .platform-card-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        font-size: 22px;
    }
    
    .platform-card h4 {
        font-size: 15px;
    }
    
    .platform-card p {
        font-size: 13px;
    }
}

/* Scroll offset for anchor links */
h2[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.install-guide-image {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
    border: 1px solid var(--border-color);
}

/* Quick Links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
}

.quick-link:hover {
    border-color: var(--primary);
    text-decoration: none;
}

/* Checklist */
.checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.checklist li:last-child {
    border-bottom: none;
}

.checklist li::before {
    content: "✓";
    color: var(--primary);
    font-weight: bold;
    flex-shrink: 0;
}

/* Field List (Settings) */
.field-list {
    margin: 24px 0;
}

.field-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
}

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

.field-content {
    flex: 1;
}

.field-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.field-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.field-required {
    color: #dc2626;
    font-size: 12px;
}

/* Flow Diagram */
.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
    padding: 24px;
    background: var(--bg-light);
    border-radius: 12px;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.flow-step-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.flow-step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.flow-arrow {
    color: var(--text-secondary);
    font-size: 20px;
}

/* Settings Grid */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.settings-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    display: block;
}

.settings-card:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.settings-card-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--primary);
}

.settings-card h4 {
    margin: 0 0 4px 0;
}

.settings-card p {
    margin: 0;
    font-size: 14px;
}

/* Report Grid */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.report-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.report-card-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--primary);
}

.report-card h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.report-card p {
    margin: 0;
    font-size: 13px;
}

/* Role Grid */
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.role-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.role-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.role-card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.role-card h4 {
    margin: 0;
}

.role-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.role-permissions {
    font-size: 13px;
    color: var(--text-secondary);
}

.role-permissions li {
    margin-bottom: 4px;
}

/* User Card */
.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 600;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    font-size: 13px;
    color: var(--text-secondary);
}

.user-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.user-status.active {
    background: #dcfce7;
    color: #16a34a;
}

.user-status.inactive {
    background: #fee2e2;
    color: #dc2626;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 24px 0;
}

.pricing-card {
    background: var(--bg-light);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

.pricing-card.featured {
    border-color: var(--primary);
}

.pricing-card.featured::before {
    content: "Phổ biến";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.pricing-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pricing-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.pricing-price {
    margin-bottom: 16px;
}

.pricing-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.pricing-period {
    font-size: 14px;
    color: var(--text-secondary);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.pricing-features li::before {
    content: "✓";
    color: var(--primary);
    font-weight: bold;
}

.pricing-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.pricing-btn:hover {
    background: var(--primary-dark);
    text-decoration: none;
}

/* Status Card (Subscription) */
.status-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}

.status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.status-plan {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.status-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.status-item-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.status-item-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Payment Methods */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.payment-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.payment-name {
    font-weight: 600;
    color: var(--text-primary);
}

.payment-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Recipe Demo */
.recipe-demo {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.recipe-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.recipe-demo-title {
    font-weight: 600;
    color: var(--text-primary);
}

.recipe-demo-badge {
    padding: 4px 10px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.recipe-ingredients {
    padding: 16px 20px;
}

.recipe-ingredient {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.recipe-ingredient:last-child {
    border-bottom: none;
}

.recipe-ingredient-name {
    flex: 1;
    color: var(--text-primary);
}

.recipe-ingredient-qty {
    width: 80px;
    text-align: right;
    color: var(--text-secondary);
    font-size: 14px;
}

.recipe-ingredient-cost {
    width: 100px;
    text-align: right;
    font-weight: 500;
    color: var(--text-primary);
}

.recipe-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid var(--border-color);
}

.recipe-total-label {
    font-weight: 600;
    color: var(--text-primary);
}

.recipe-total-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

/* Profit Example */
.profit-example {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.profit-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.profit-row:last-child {
    border-bottom: none;
    padding-top: 16px;
    font-weight: 600;
}

.profit-label {
    color: var(--text-secondary);
}

.profit-value {
    font-weight: 500;
    color: var(--text-primary);
}

.profit-row:last-child .profit-value {
    color: var(--primary);
    font-size: 18px;
}

/* Product Types */
.product-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.product-type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.product-type-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
}

/* Print Preview */
.print-preview {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    max-width: 300px;
    margin: 24px auto;
    font-family: monospace;
    font-size: 12px;
    text-align: center;
}

.print-preview-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
}

.print-preview-logo {
    font-size: 24px;
    margin-bottom: 8px;
}

.print-preview-name {
    font-weight: bold;
    font-size: 14px;
}

.print-preview-address {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Group Demo (Expense Groups) */
.group-demo {
    background: var(--bg-light);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.group-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.group-info {
    flex: 1;
}

.group-name {
    font-weight: 600;
    color: var(--text-primary);
}

.group-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.group-items {
    padding: 12px 20px;
}

/* Book List (Accounting) */
.book-list {
    margin: 24px 0;
}

.book-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
}

.book-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.book-content {
    flex: 1;
}

.book-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.book-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.book-code {
    font-size: 12px;
    color: var(--text-secondary);
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Action Demo */
.action-demo {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
}

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

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

.action-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

/* Search Demo */
.search-demo {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

.search-hint {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Selected Tags Demo */
.selected-demo {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.selected-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 20px;
    font-size: 13px;
}

.selected-tag-code {
    font-size: 11px;
    opacity: 0.7;
}

.selected-tag-remove {
    cursor: pointer;
    opacity: 0.7;
}

.selected-tag-remove:hover {
    opacity: 1;
}

/* Setup Screen Demo */
.setup-screen {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin: 24px 0;
}

.setup-screen-header {
    margin-bottom: 24px;
}

.setup-screen-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.setup-screen-subtitle {
    color: var(--text-secondary);
}

/* Steps */
.steps {
    margin: 24px 0;
}

.step {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.step-content {
    flex: 1;
    padding-top: 4px;
}

.step-content h4 {
    margin: 0 0 4px 0;
}

.step-content p {
    margin: 0;
    font-size: 14px;
}

/* Security Items */
.security-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
}

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

.security-content {
    flex: 1;
}

.security-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.security-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Time Estimate */
.time-estimate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-light);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Tax Badge */
.tax-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Highlight */
.highlight {
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Role badges */
.admin, .manager, .staff {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.admin {
    background: #fee2e2;
    color: #dc2626;
}

.manager {
    background: #dbeafe;
    color: #2563eb;
}

.staff {
    background: #dcfce7;
    color: #16a34a;
}

/* Disabled state */
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Order Demo UI - Realistic Style */
.order-demo {
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    padding: 12px;
}

.order-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
}

.order-demo-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.order-demo-price {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

.order-demo-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-demo-section {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
}

.order-demo-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.order-demo-choices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.order-demo-choice {
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.order-demo-choice:hover {
    background: #e5e7eb;
}

.order-demo-choice.selected {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.order-demo-choice.selected-blue {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.order-demo-choice.selected-orange {
    background: #f97316;
    color: #fff;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.order-demo-choice.selected-purple {
    background: #8b5cf6;
    color: #fff;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.order-demo-qty {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-demo-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.order-demo-qty-btn.minus {
    background: #e5e7eb;
    color: var(--text-primary);
}

.order-demo-qty-btn.plus {
    background: var(--primary);
    color: #fff;
}

.order-demo-qty-btn:hover {
    transform: scale(1.05);
}

.order-demo-qty-value {
    width: 56px;
    height: 36px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-demo-weight-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-demo-input {
    width: 80px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.order-demo-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.order-demo-select {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    cursor: pointer;
}

.order-demo-select:focus {
    outline: none;
    border-color: var(--primary);
}

.order-demo-multiply {
    color: var(--text-secondary);
    font-size: 16px;
}

.order-demo-price-input {
    flex: 1;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

.order-demo-subtotal {
    text-align: center;
    color: #8b5cf6;
    font-size: 14px;
    margin-top: 8px;
}

.order-demo-footer {
    margin-top: 12px;
}

.order-demo-add-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* Category Demo UI - Realistic Style */
.category-demo {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 16px;
    margin: 24px 0;
}

/* Menu Management Page Styles */
.menu-tabs-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.menu-tabs-demo-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: #f9fafb;
}

.menu-tab-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.menu-tab-btn.active {
    color: var(--primary);
    background: #fff;
    border-bottom-color: var(--primary);
}

.menu-tabs-demo-content {
    padding: 16px 20px;
}

.menu-tabs-demo-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.menu-tabs-demo-desc:last-child {
    margin-bottom: 0;
}

/* Product Type Compare Cards */
.product-type-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

@media (max-width: 640px) {
    .product-type-compare {
        grid-template-columns: 1fr;
    }
}

.product-type-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid var(--border-color);
}

.product-type-card.purple {
    border-color: #e9d5ff;
    background: linear-gradient(to bottom, #faf5ff, #fff);
}

.product-type-card.blue {
    border-color: #bfdbfe;
    background: linear-gradient(to bottom, #eff6ff, #fff);
}

.product-type-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.product-type-card-icon {
    font-size: 24px;
}

.product-type-card-title {
    font-size: 16px;
    font-weight: 700;
}

.product-type-card.purple .product-type-card-title {
    color: #7c3aed;
}

.product-type-card.blue .product-type-card-title {
    color: #2563eb;
}

.product-type-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-type-card-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.product-type-card-list li:last-child {
    margin-bottom: 0;
}

.product-type-card-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Menu Form Demo - Realistic */
.menu-form-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.menu-form-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 16px;
}

.menu-form-demo-close {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 20px;
}

.menu-form-demo-body {
    padding: 20px;
}

.menu-form-demo-section {
    margin-bottom: 16px;
}

.menu-form-demo-section:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 640px) {
    .menu-form-demo-row {
        grid-template-columns: 1fr;
    }
}

.menu-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.menu-form-label .required {
    color: #ef4444;
}

.menu-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.menu-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.menu-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.menu-form-image-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: #fafafa;
}

.menu-form-image-icon {
    font-size: 40px;
    color: var(--text-secondary);
}

.menu-form-image-text {
    flex: 1;
}

.menu-form-image-text p {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.menu-form-image-text small {
    color: var(--text-secondary);
    font-size: 12px;
}

.menu-form-image-btn {
    padding: 8px 16px;
    background: #e5e7eb;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-form-image-btn:hover {
    background: #d1d5db;
}

.menu-form-demo-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.menu-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.menu-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.menu-form-checkbox.purple input[type="checkbox"] {
    accent-color: #8b5cf6;
}

.menu-form-explain {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 16px;
}

.menu-form-explain.purple {
    background: #f5f3ff;
    border: 1px solid #e9d5ff;
    color: #6b21a8;
}

.menu-form-explain.blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Ingredient Link Demo */
.menu-ingredient-link-demo {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.menu-ingredient-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.menu-ingredient-search i {
    color: var(--text-secondary);
}

.menu-ingredient-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.menu-ingredient-selected {
    margin-top: 12px;
    padding: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.menu-ingredient-selected-name {
    font-weight: 600;
    color: var(--text-primary);
}

.menu-ingredient-selected-stock {
    color: var(--text-secondary);
}

.menu-ingredient-dropdown {
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

.menu-ingredient-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.menu-ingredient-dropdown-item:last-child {
    border-bottom: none;
}

.menu-ingredient-dropdown-item:hover {
    background: #f3f4f6;
}

.menu-ingredient-dropdown-item.selected {
    background: #eff6ff;
}

.menu-ingredient-dropdown-item-name {
    font-weight: 500;
}

.menu-ingredient-dropdown-item-stock {
    font-size: 13px;
    color: var(--text-secondary);
}

.menu-ingredient-dropdown-item-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

.menu-ingredient-dropdown-item-badge.weight {
    background: #f3e8ff;
    color: #7c3aed;
}

.menu-ingredient-dropdown-item-badge.piece {
    background: #dbeafe;
    color: #2563eb;
}

/* Menu Custom Options Demo - Giống thực tế */
.menu-custom-options-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.menu-custom-options-title {
    font-weight: 600;
    font-size: 14px;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #9ca3af;
    padding: 2px 0;
    width: 80px;
    color: var(--text-primary);
}

.menu-custom-options-title:focus {
    outline: none;
    border-bottom-color: #2563eb;
}

.menu-custom-options-hint {
    font-size: 13px;
    color: var(--text-secondary);
}

.menu-custom-options-example {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.menu-custom-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.menu-custom-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #eff6ff;
    border-radius: 8px;
}

.menu-custom-option-name {
    font-weight: 600;
    color: var(--text-primary);
}

.menu-custom-option-price {
    color: var(--primary);
    margin-left: 12px;
}

.menu-custom-option-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
}

.menu-custom-options-add {
    display: flex;
    gap: 8px;
}

.menu-custom-options-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.menu-custom-options-input.small {
    flex: 0 0 100px;
}

.menu-custom-options-btn {
    padding: 10px 16px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-custom-options-btn:hover {
    background: #1d4ed8;
}

/* Custom Options Examples Grid */
.custom-options-examples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .custom-options-examples {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .custom-options-examples {
        grid-template-columns: 1fr;
    }
}

.custom-options-example-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.custom-options-example-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.custom-options-example-name {
    font-size: 15px;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 6px;
    padding: 4px 12px;
    background: #eff6ff;
    border-radius: 6px;
    display: inline-block;
}

.custom-options-example-items {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Menu Topping Grid - Giống thực tế */
.menu-topping-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .menu-topping-grid {
        grid-template-columns: 1fr;
    }
}

.menu-topping-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-topping-item:hover {
    background: #f9fafb;
}

.menu-topping-item.selected {
    background: #faf5ff;
    border-color: #a855f7;
}

.menu-topping-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #a855f7;
    margin-right: 10px;
}

.menu-topping-name {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

.menu-topping-price {
    font-size: 13px;
    color: var(--primary);
}

/* Category List Demo - Desktop */
.category-list-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.category-list-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.category-list-demo-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.category-list-demo-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.category-list-demo-table {
    width: 100%;
}

.category-list-demo-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 60px 70px 100px 120px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

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

.category-list-demo-row.header {
    background: #f9fafb;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.category-list-demo-row .col-icon {
    font-size: 24px;
}

.category-list-demo-row .col-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.category-list-demo-row .col-order {
    text-align: center;
}

.category-list-demo-row .col-actions {
    text-align: right;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.action-link {
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.action-link.blue {
    color: #2563eb;
}

.action-link.red {
    color: #ef4444;
}

/* Category Mobile Demo */
.category-mobile-demo {
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    max-width: 360px;
}

.category-mobile-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 15px;
}

.category-mobile-demo-header.bulk {
    background: var(--primary);
    color: #fff;
}

.bulk-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bulk-close {
    font-size: 18px;
    cursor: pointer;
}

.bulk-delete-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.category-mobile-demo-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.category-mobile-demo-hint {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}

.category-mobile-demo-list {
    background: #fff;
}

.category-mobile-demo-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.category-mobile-demo-item:last-child {
    border-bottom: none;
}

.category-mobile-demo-item.selected {
    background: #eff6ff;
}

.category-mobile-demo-item.hidden {
    opacity: 0.6;
}

.category-mobile-demo-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.category-mobile-demo-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}

.category-mobile-demo-icon {
    width: 40px;
    height: 40px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}

.category-mobile-demo-name {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
}

.category-mobile-demo-name small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: var(--text-secondary);
    margin-top: 2px;
}

.category-mobile-demo-arrow {
    color: #d1d5db;
}

.category-mobile-demo.bulk-mode .category-mobile-demo-item {
    padding-left: 12px;
}

/* Field Explain List */
.field-explain-list {
    margin: 20px 0;
}

.field-explain-item {
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 10px;
}

.field-explain-item:last-child {
    margin-bottom: 0;
}

.field-explain-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.field-explain-name .required {
    color: #ef4444;
}

.field-explain-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Menu Form Submit Button */
.menu-form-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
}

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

/* Category Suggestions */
.category-suggestions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

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

.category-suggestion-group {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
}

.category-suggestion-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.category-suggestion-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-suggestion-items span {
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
}

/* Keyboard shortcuts */
kbd {
    padding: 2px 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
}

/* Install Steps Grid */
.install-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}

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

@media (max-width: 540px) {
    .install-steps-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

.install-step-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.install-step-number {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.install-step-image {
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.install-step-image img {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 8px;
}

.install-step-desc {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    border-top: 1px solid var(--border-color);
    background: #fff;
}

/* ===== TABLES MANAGEMENT PAGE ===== */

/* Tables Demo Container */
.tables-demo {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.tables-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.tables-demo-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.tables-demo-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Tables Filter */
.tables-demo-filter {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.tables-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tables-filter-buttons {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.tables-filter-buttons button {
    padding: 8px 16px;
    background: #fff;
    border: none;
    border-right: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tables-filter-buttons button:last-child {
    border-right: none;
}

.tables-filter-buttons button:hover {
    background: #f3f4f6;
}

.tables-filter-buttons button.active {
    background: var(--primary);
    color: #fff;
}

.tables-filter-buttons button.red.active,
.tables-filter-buttons button.red:hover {
    background: #ef4444;
    color: #fff;
}

.tables-filter-buttons.standalone {
    display: inline-flex;
    margin: 16px 0;
}

/* Tables Grid */
.tables-demo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
}

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

/* Table Card */
.table-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.table-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.table-card-number {
    font-weight: 700;
    font-size: 15px;
}

.table-card-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-card-status {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.table-card-status.available {
    background: #dcfce7;
    color: #166534;
}

.table-card-status.occupied {
    background: #fee2e2;
    color: #991b1b;
}

.table-card-status.reserved {
    background: #fef3c7;
    color: #92400e;
}

.table-card-qr {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-placeholder {
    color: #9ca3af;
}

.table-card-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.table-card-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
}

.table-card-actions .btn-download {
    background: #2563eb;
}

.table-card-actions .btn-delete {
    background: #ef4444;
}

.btn-reset {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* Status Explain Grid */
.status-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

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

.status-explain-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: 10px;
}

.status-explain-card.green {
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.status-explain-card.red {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fef2f2, #fff);
}

.status-explain-card.yellow {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb, #fff);
}

.status-explain-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.status-explain-badge.available {
    background: #dcfce7;
    color: #166534;
}

.status-explain-badge.occupied {
    background: #fee2e2;
    color: #991b1b;
}

.status-explain-badge.reserved {
    background: #fef3c7;
    color: #92400e;
}

.status-explain-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.status-explain-text p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* QR Flow Demo */
.qr-flow-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: #f9fafb;
    border-radius: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.qr-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 140px;
}

.qr-flow-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.qr-flow-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.qr-flow-text p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.qr-flow-arrow {
    font-size: 24px;
    color: var(--primary);
    font-weight: bold;
}

@media (max-width: 600px) {
    .qr-flow-demo {
        flex-direction: column;
    }
    .qr-flow-arrow {
        transform: rotate(90deg);
    }
}

/* Tables Filter Demo */
.tables-filter-demo {
    margin: 16px 0;
}

/* Tables Mobile Demo */
.tables-mobile-demo {
    max-width: 320px;
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.tables-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 15px;
}

.tables-mobile-header-actions {
    display: flex;
    gap: 8px;
}

.tables-mobile-filter-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.tables-mobile-add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.tables-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
}

.table-card-mobile {
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.table-card-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.table-card-mobile-number {
    display: block;
    font-weight: 700;
    font-size: 13px;
}

.table-card-mobile-name {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
}

.table-card-mobile-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.table-card-mobile-status.available {
    background: #dcfce7;
    color: #166534;
}

.table-card-mobile-status.occupied {
    background: #fee2e2;
    color: #991b1b;
}

.table-card-mobile-qr {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.table-card-mobile-actions {
    display: flex;
    gap: 4px;
}

.table-card-mobile-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.table-card-mobile-actions button.blue {
    background: #2563eb;
}

.table-card-mobile-actions button.orange {
    background: #f97316;
}

.table-card-mobile-actions button.red {
    background: #ef4444;
}

/* Menu Form Hint */
.menu-form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.category-demo-header {
    text-align: center;
    margin-bottom: 16px;
}

.category-demo-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.category-demo-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.category-demo-search {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.category-demo-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}

.category-demo-search-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.category-demo-search-input i {
    color: var(--text-secondary);
}

.category-demo-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 13px;
    color: #2563eb;
}

.category-demo-selected {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.category-demo-selected-title {
    font-size: 14px;
    font-weight: 600;
    color: #065f46;
    margin-bottom: 8px;
}

.category-demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    font-size: 13px;
}

.category-demo-tag-code {
    font-weight: 600;
}

.category-demo-tag-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
}

.category-demo-tag-remove:hover {
    opacity: 1;
}

.category-demo-group {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.category-demo-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
}

.category-demo-group-header:hover {
    background: #f9fafb;
}

.category-demo-group-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-demo-group-icon {
    font-size: 20px;
}

.category-demo-group-name {
    font-weight: 600;
    color: var(--text-primary);
}

.category-demo-group-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.category-demo-group-items {
    padding: 0 16px 16px;
}

.category-demo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    background: #f9fafb;
    margin-bottom: 8px;
}

.category-demo-item:last-child {
    margin-bottom: 0;
}

.category-demo-item:hover {
    background: #f3f4f6;
}

.category-demo-item.selected {
    background: #ecfdf5;
    border-color: var(--primary);
}

.category-demo-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.category-demo-item.selected .category-demo-checkbox {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.category-demo-item-content {
    flex: 1;
    min-width: 0;
}

.category-demo-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.category-demo-item-icon {
    font-size: 18px;
}

.category-demo-item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.category-demo-item-code {
    font-size: 11px;
    color: var(--text-secondary);
    background: #e5e7eb;
    padding: 2px 6px;
    border-radius: 4px;
}

.category-demo-item-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.category-demo-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 16px auto 0;
    padding: 12px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

.category-demo-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Product Type Demo */
.product-type-demo {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 16px;
    margin: 24px 0;
}

.product-type-demo-header {
    margin-bottom: 12px;
}

.product-type-demo-title {
    font-weight: 600;
    color: var(--text-primary);
}

.product-type-demo-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.product-type-demo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
}

.product-type-demo-item.selected-purple {
    background: #faf5ff;
    border-color: #9333ea;
}

.product-type-demo-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
}

.product-type-demo-checkbox.checked {
    background: #9333ea;
    border-color: #9333ea;
    color: #fff;
}

.product-type-demo-name {
    font-weight: 600;
    color: var(--text-primary);
}

.product-type-demo-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.product-type-demo-explain {
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
}

.product-type-demo-explain.purple {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    color: #7c3aed;
}

.product-type-demo-explain.blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

/* Form Demo */
.form-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 24px 0;
    overflow: hidden;
}

.form-demo-header {
    padding: 12px 16px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.form-demo-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 13px;
}

.form-demo-body {
    padding: 16px;
}

.form-demo-group {
    margin-bottom: 16px;
}

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

.form-demo-label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 14px;
}

.form-demo-label .required {
    color: #ef4444;
}

.form-demo-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.form-demo-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.form-demo-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
}

.form-demo-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 8px;
}

.form-demo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.form-demo-checkbox .checkbox-box {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
}

.form-demo-checkbox.checked .checkbox-box {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.form-demo-checkbox.checked.purple .checkbox-box {
    background: #9333ea;
    border-color: #9333ea;
}

/* Size Demo */
.size-demo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.size-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #eff6ff;
    border-radius: 8px;
}

.size-demo-name {
    font-weight: 600;
}

.size-demo-price {
    color: var(--primary);
    font-weight: 500;
}

.size-demo-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
}

.size-demo-add {
    display: flex;
    gap: 8px;
}

.size-demo-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.size-demo-input.small {
    width: 100px;
    flex: none;
}

.size-demo-btn {
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
}

/* Topping Demo */
.topping-demo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.topping-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.topping-demo-item.selected {
    background: #fdf2f8;
    border-color: #ec4899;
}

.topping-demo-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    margin-right: 8px;
}

.topping-demo-item.selected .topping-demo-checkbox {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
}

.topping-demo-name {
    flex: 1;
    font-weight: 500;
}

.topping-demo-price {
    color: #ec4899;
    font-weight: 600;
    font-size: 13px;
}

/* Ingredient Search Demo */
.ingredient-search-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
}

.ingredient-search-demo i {
    color: var(--text-secondary);
}

.ingredient-search-demo input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.ingredient-selected-demo {
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.ingredient-selected-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ingredient-selected-stock {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Linked Product Demo */
.linked-product-demo {
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

.linked-product-demo.green {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.linked-product-demo.purple {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

.linked-product-demo.blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.linked-product-demo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.linked-product-demo-icon {
    font-size: 20px;
}

.linked-product-demo-title {
    font-weight: 600;
}

.linked-product-demo.green .linked-product-demo-title {
    color: #065f46;
}

.linked-product-demo.purple .linked-product-demo-title {
    color: #7c3aed;
}

.linked-product-demo.blue .linked-product-demo-title {
    color: #1d4ed8;
}

.linked-product-demo-stock {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
}

.linked-product-demo-stock strong {
    color: var(--primary);
}

.linked-product-demo-convert {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.linked-product-demo-note {
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 13px;
    color: #065f46;
    margin-bottom: 8px;
}

.linked-product-demo-info {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.linked-product-demo-info.blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Product List Demo */
.product-list-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 24px 0;
    overflow: hidden;
}

.product-list-demo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.product-list-demo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
}

.product-list-demo-search i {
    color: var(--text-secondary);
}

.product-list-demo-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}

.product-list-demo-filters {
    display: flex;
    gap: 8px;
}

.product-list-demo-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
}

.product-list-demo-add {
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
}

.product-list-demo-table {
    overflow-x: auto;
}

.product-list-demo-row {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1fr 1.5fr 100px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

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

.product-list-demo-row.header {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
}

.product-list-demo-row .col-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-list-demo-row .col-name img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.product-list-demo-row .col-name strong {
    display: block;
}

.product-list-demo-row .col-name small {
    color: #2563eb;
    font-size: 12px;
}

.product-list-demo-row .badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 12px;
}

.product-list-demo-row .price {
    color: var(--primary);
}

.product-list-demo-row .col-price small {
    color: var(--text-secondary);
    font-size: 11px;
}

.product-list-demo-row .type-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.product-list-demo-row .type-badge.purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.product-list-demo-row .type-badge.blue {
    background: #dbeafe;
    color: #2563eb;
}

.product-list-demo-row .col-type small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.product-list-demo-row .col-type .link-info {
    color: #f97316;
}

.product-list-demo-row .col-type .stock-info {
    color: var(--text-secondary);
}

.product-list-demo-row .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.product-list-demo-row .status-badge.active {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 768px) {
    .form-demo-row {
        grid-template-columns: 1fr;
    }
    
    .topping-demo-list {
        grid-template-columns: 1fr;
    }
    
    .product-list-demo-row {
        grid-template-columns: 30px 1fr 80px;
    }
    
    .product-list-demo-row .col-category,
    .product-list-demo-row .col-type {
        display: none;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
    }

    .content {
        padding: 32px 24px;
    }

    .menu-toggle {
        display: block;
    }
}

@media (max-width: 640px) {
    .content h1 {
        font-size: 28px;
    }

    .header-nav span {
        display: none;
    }
    
    /* Ẩn nút Dùng thử trên mobile nhỏ */
    .header-nav .btn-login {
        display: none;
    }

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

    .shortcut-list {
        grid-template-columns: 1fr;
    }

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

    .doc-footer {
        flex-direction: column;
        gap: 16px;
    }
}

/* Mobile header adjustments */
@media (max-width: 480px) {
    .header {
        padding: 0 12px;
    }
    
    .header-logo span {
        font-size: 15px;
    }
    
    .header-logo img {
        height: 32px;
        width: 32px;
    }
    
    .content {
        padding: 24px 16px;
    }
}

/* ===== CUSTOMER MANAGEMENT PAGE ===== */

/* Customers Demo Container */
.customers-demo {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.customers-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.customers-demo-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.customers-demo-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Customers Search */
.customers-demo-search {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.customers-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
}

.customers-search-input input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

.customers-filter-debt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.customers-filter-debt:hover {
    border-color: #f97316;
    background: #fff7ed;
    color: #ea580c;
}

/* Customers Table */
.customers-demo-table {
    overflow-x: auto;
    background: #fff;
}

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

.customers-demo-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.customers-demo-table th.sortable {
    cursor: pointer;
}

.customers-demo-table th.sortable:hover {
    color: var(--primary);
}

.customers-demo-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.customers-demo-table tr.has-debt {
    background: #fffbeb;
}

/* Customer Name Cell */
.customer-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.customer-avatar.green {
    background: #dcfce7;
    color: #16a34a;
}

.customer-avatar.orange {
    background: #ffedd5;
    color: #ea580c;
}

.customer-avatar.large {
    width: 48px;
    height: 48px;
}

.customer-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.customer-orders {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.discount-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #f3e8ff;
    color: #9333ea;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 6px;
}

/* Customer Contact */
.customer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.customer-contact span:first-child {
    color: var(--text-primary);
}

.customer-contact span:last-child {
    color: var(--text-secondary);
}

/* Text Colors */
.text-green {
    color: #16a34a;
    font-weight: 600;
}

.text-muted {
    color: #9ca3af;
}

/* Points Badge */
.points-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #fef3c7;
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

/* Debt Badge */
.debt-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #ffedd5;
    color: #ea580c;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.debt-badge:hover {
    background: #fed7aa;
}

.debt-badge.large {
    padding: 8px 16px;
    font-size: 14px;
}

/* Customer Actions */
.customer-actions {
    display: flex;
    gap: 6px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.btn-icon.blue:hover {
    background: #bfdbfe;
}

.btn-icon.yellow {
    background: #fef3c7;
    color: #d97706;
}

.btn-icon.yellow:hover {
    background: #fde68a;
}

.btn-icon.red {
    background: #fee2e2;
    color: #dc2626;
}

.btn-icon.red:hover {
    background: #fecaca;
}

/* Feature Grid 3 columns */
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0;
}

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

.feature-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.feature-card-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.feature-card-icon.yellow {
    background: #fef3c7;
    color: #d97706;
}

.feature-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.feature-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* Debt Demo Section */
.debt-demo-section {
    margin: 20px 0;
}

.debt-demo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 2px solid #fcd34d;
    border-radius: 12px;
    max-width: 400px;
}

.debt-demo-info {
    flex: 1;
}

.debt-demo-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
}

.debt-demo-phone {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Debt Customer Info in Modal */
.debt-customer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff7ed;
    border-radius: 8px;
    margin-bottom: 16px;
}

.debt-customer-name {
    display: block;
    font-weight: 600;
}

.debt-customer-total {
    display: block;
    font-size: 13px;
    color: #ea580c;
}

/* Debt Orders List */
.debt-orders-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.debt-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

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

.debt-order-item:hover {
    background: #f9fafb;
}

.debt-order-item.selected {
    background: #fff7ed;
}

.debt-order-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f97316;
}

.debt-order-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.debt-order-amount {
    font-weight: 600;
    color: #ea580c;
}

/* Payment Method Grid */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.payment-method-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-method-btn.active.cash {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #16a34a;
}

.payment-method-btn.transfer {
    color: var(--text-secondary);
}

/* Debt Quick Buttons */
.debt-quick-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.debt-quick-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #ffedd5;
    color: #ea580c;
}

.debt-quick-btn.outline {
    background: #f3f4f6;
    color: var(--text-secondary);
}

/* Discount Demo */
.discount-demo {
    padding: 16px 20px;
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 12px;
    max-width: 350px;
    margin: 20px 0;
}

.discount-demo-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.discount-demo-label {
    color: var(--text-secondary);
    font-size: 14px;
}

.discount-demo-value {
    font-weight: 600;
    font-size: 14px;
}

.discount-demo-value.highlight {
    color: #16a34a;
    font-size: 18px;
}

/* Order History Demo */
.order-history-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    max-width: 500px;
    margin: 20px 0;
}

.order-history-header {
    padding: 14px 20px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.order-history-stats {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
}

.stat-value.green {
    color: #16a34a;
}

.stat-value.yellow {
    color: #d97706;
}

.order-history-list {
    max-height: 200px;
    overflow-y: auto;
}

.order-history-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}

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

.order-history-item-left {
    display: flex;
    flex-direction: column;
}

.order-history-table {
    font-weight: 600;
    font-size: 14px;
}

.order-history-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.order-history-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.order-history-amount {
    font-weight: 600;
    color: var(--text-primary);
}

.order-history-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.order-history-status.paid {
    background: #f3f4f6;
    color: #6b7280;
}

/* Customers Mobile Demo */
.customers-mobile-demo {
    max-width: 340px;
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.customers-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 15px;
}

.customers-mobile-add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.customers-mobile-search {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
}

.customers-mobile-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.customers-mobile-filter {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.customers-mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    overflow-x: auto;
}

.customers-mobile-sort span {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.customers-mobile-sort button {
    padding: 4px 10px;
    background: #f3f4f6;
    border: none;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.customers-mobile-sort button.active {
    background: var(--primary);
    color: #fff;
}

.customers-mobile-list {
    background: #fff;
}

.customer-mobile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.customer-mobile-card.has-debt {
    background: #fffbeb;
}

.customer-mobile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.customer-mobile-avatar.green {
    background: #dcfce7;
    color: #16a34a;
}

.customer-mobile-avatar.orange {
    background: #ffedd5;
    color: #ea580c;
}

.customer-mobile-info {
    flex: 1;
    min-width: 0;
}

.customer-mobile-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-mobile-name {
    font-weight: 600;
    font-size: 13px;
}

.customer-mobile-debt-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #ffedd5;
    color: #ea580c;
    border-radius: 4px;
    font-weight: 600;
}

.customer-mobile-phone {
    font-size: 11px;
    color: var(--text-secondary);
}

.customer-mobile-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
}

.customer-mobile-orders {
    color: var(--text-secondary);
}

.customer-mobile-spent {
    font-weight: 600;
    color: #16a34a;
}

.customer-mobile-points {
    color: #d97706;
}

.customer-mobile-arrow {
    color: #d1d5db;
    flex-shrink: 0;
}

/* Form Row 2 Columns */
.form-row-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 500px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ===== DISCOUNTS PAGE ===== */

/* Discounts Demo Container */
.discounts-demo {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.discounts-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.discounts-demo-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.discounts-demo-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.discounts-demo-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Discount Card */
.discount-card {
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid #d1d5db;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.discount-card.active {
    border-left-color: #16a34a;
}

.discount-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.discount-card-info {
    flex: 1;
    min-width: 0;
}

.discount-card-name {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.discount-card-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.discount-card-actions {
    display: flex;
    gap: 4px;
}

.discount-card-actions .action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
}

.discount-card-actions .action-btn.active {
    color: #16a34a;
}

.discount-card-actions .action-btn.edit {
    color: #2563eb;
}

.discount-card-actions .action-btn.delete {
    color: #dc2626;
}

.discount-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.discount-percent {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
}

.discount-status {
    display: inline-block;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    border-radius: 20px;
}

.discount-status.active {
    background: #dcfce7;
    color: #16a34a;
}

.discount-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.discount-date,
.discount-categories {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Input with suffix */
.input-with-suffix {
    position: relative;
}

.input-with-suffix input {
    padding-right: 40px;
}

.input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
}

/* Category Checkbox List for Discounts */
.discount-category-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 120px;
    overflow-y: auto;
    background: #fff;
}

.discount-category-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 0;
}

.discount-category-item:hover {
    background: #f3f4f6;
}

.discount-category-item.checked {
    color: var(--text-primary);
    font-weight: 500;
}

.discount-category-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    accent-color: var(--primary);
    flex-shrink: 0;
    margin: 0;
}

.discount-category-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Activation checkbox */
.discount-activate-checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.discount-activate-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--primary);
    margin: 0;
}

/* Field Explain List */
.field-explain-list {
    margin: 20px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.field-explain-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
}

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

.field-explain-name {
    width: 180px;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    padding-right: 16px;
}

.field-explain-desc {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .field-explain-item {
        flex-direction: column;
        gap: 4px;
        padding: 12px 14px;
    }
    
    .field-explain-name {
        width: auto;
        padding-right: 0;
    }
}

/* Status Conditions */
.status-conditions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.status-condition {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.status-condition-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.status-condition-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.status-condition-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.status-condition-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.status-condition-text p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-condition-plus {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-secondary);
}

/* Toggle Demo */
.toggle-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    max-width: 300px;
}

.toggle-demo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.toggle-demo-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #9ca3af;
    background: #f3f4f6;
}

.toggle-demo-icon.active {
    color: #16a34a;
    background: #dcfce7;
}

.toggle-demo-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Apply Discount Demo */
.apply-discount-demo {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    max-width: 400px;
    margin: 20px 0;
}

.apply-discount-header {
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 14px;
}

.apply-discount-list {
    padding: 8px;
}

.apply-discount-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
}

.apply-discount-item:hover {
    background: #f9fafb;
}

.apply-discount-item.selected {
    background: #f0fdf4;
}

.apply-discount-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.apply-discount-info {
    display: flex;
    flex-direction: column;
}

.apply-discount-name {
    font-weight: 600;
    font-size: 14px;
}

.apply-discount-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Discounts Mobile Demo */
.discounts-mobile-demo {
    max-width: 340px;
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.discounts-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 15px;
}

.discounts-mobile-add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.discounts-mobile-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mobile Discount Card */
.discount-card-mobile {
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #d1d5db;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.discount-card-mobile.active {
    border-left-color: #16a34a;
}

.discount-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.discount-mobile-info {
    flex: 1;
    min-width: 0;
}

.discount-mobile-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
}

.discount-mobile-desc {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

.discount-mobile-actions {
    display: flex;
    gap: 2px;
}

.discount-mobile-actions .action-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.discount-mobile-actions .action-icon.active {
    color: #16a34a;
}

.discount-mobile-actions .action-icon.edit {
    color: #2563eb;
}

.discount-mobile-actions .action-icon.delete {
    color: #dc2626;
}

.discount-mobile-body {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.discount-mobile-percent {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
}

.discount-mobile-status {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    border-radius: 12px;
}

.discount-mobile-status.active {
    background: #dcfce7;
    color: #16a34a;
}

.discount-mobile-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}

.discount-mobile-footer span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ========================================
   SUPPLIES PAGE STYLES
   ======================================== */

/* Supplies Examples Grid */
.supplies-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.supplies-example-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.supplies-example-icon {
    font-size: 20px;
}

/* Unit Convert Text */
.unit-convert {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 4px;
}

/* Option Tags */
.option-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 4px;
}

.option-tag-sm {
    display: inline-block;
    padding: 2px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
}

/* Options List Demo */
.options-list-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fafafa;
}

.option-item-demo {
    display: flex;
    gap: 8px;
    align-items: center;
}

.option-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.option-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px dashed var(--border-color);
    background: transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.option-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Unit Types Demo */
.unit-types-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.unit-type-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.unit-type-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    font-size: 24px;
    border: 1px solid var(--border-color);
}

.unit-type-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.unit-type-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Options Example Demo */
.options-example-demo {
    max-width: 300px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.options-example-header {
    padding: 12px 16px;
    background: var(--bg-light);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.options-example-body {
    padding: 12px 16px;
}

.options-example-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.options-example-name {
    color: var(--text-secondary);
}

.options-example-qty {
    font-weight: 500;
}

.options-example-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
}

/* Supplies Mobile Demo */
.supplies-mobile-demo {
    max-width: 360px;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    border: 8px solid #1f2937;
}

.supplies-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 18px;
}

.supplies-mobile-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.supplies-mobile-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.supplies-mobile-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.supply-card-mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
}

.supply-card-mobile.warning {
    border-left: 3px solid #f59e0b;
}

.supply-mobile-info {
    flex: 1;
}

.supply-mobile-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.supply-mobile-details {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.supply-mobile-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.supply-mobile-actions {
    display: flex;
    gap: 4px;
}

.text-green {
    color: #16a34a;
}

.text-warning {
    color: #f59e0b;
}

/* ========================================
   INGREDIENTS PAGE STYLES
   ======================================== */

/* Ingredient Types Grid */
.ingredient-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.ingredient-type-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.ingredient-type-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.ingredient-type-icon.imported {
    background: #dbeafe;
    color: #2563eb;
}

.ingredient-type-icon.brewed {
    background: #fef3c7;
    color: #d97706;
}

.ingredient-type-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.ingredient-type-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Filter Tabs Demo */
.filter-tabs-demo {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

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

.filter-tab.warning {
    color: #f59e0b;
    border-color: #fbbf24;
}

.filter-tab.warning.active {
    background: #f59e0b;
    color: #fff;
}

/* Table Demo Actions */
.table-demo-actions {
    display: flex;
    gap: 8px;
}

.table-demo-brew-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

/* Brewed Badge */
.brewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 6px;
}

.brewed-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #fef3c7;
    color: #d97706;
    border-radius: 4px;
    margin-left: 4px;
}

.brewed-row {
    background: #fffbeb;
}

/* Conversion Input Demo */
.conversion-input-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.conversion-input-demo span {
    color: var(--text-secondary);
}

/* Unit Comparison */
.unit-comparison {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.unit-comparison-item {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.unit-comparison-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
}

.unit-comparison-header.packaging {
    background: #dbeafe;
    color: #2563eb;
}

.unit-comparison-header.measurement {
    background: #dcfce7;
    color: #16a34a;
}

.unit-comparison-body {
    padding: 16px;
}

.unit-comparison-body p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.unit-comparison-example {
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.unit-comparison-arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .unit-comparison {
        flex-direction: column;
    }
    .unit-comparison-arrow {
        transform: rotate(90deg);
    }
}

/* Recipe Select Demo */
.recipe-select-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.recipe-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.recipe-option.selected {
    background: #fef3c7;
    border-color: #f59e0b;
}

.recipe-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recipe-option-info strong {
    font-size: 14px;
}

.recipe-option-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Brewing Ingredients Needed */
.brewing-ingredients-needed {
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.brewing-ingredients-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.brewing-ingredient-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

.brewing-ingredient-row span:last-child {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Brewing Option Checkbox */
.brewing-option-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.brewing-option-checkbox input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
}

.brewing-option-checkbox strong {
    display: block;
    font-size: 14px;
}

.brewing-option-checkbox p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Brewing Logs Demo */
.brewing-logs-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
    max-width: 500px;
}

.brewing-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.brewing-log-info strong {
    display: block;
    font-size: 14px;
}

.brewing-log-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.brewing-log-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.brewing-log-amount {
    font-weight: 600;
    color: #16a34a;
    font-size: 14px;
}

.brewing-log-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.brewing-log-status.success {
    color: #16a34a;
}

/* Auto Deduct Demo */
.auto-deduct-demo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    margin: 20px 0;
    overflow-x: auto;
}

.auto-deduct-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

.auto-deduct-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auto-deduct-text strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.auto-deduct-text p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.auto-deduct-arrow {
    color: var(--text-secondary);
    font-size: 20px;
    flex-shrink: 0;
}

/* Ingredients Mobile Demo */
.ingredients-mobile-demo {
    max-width: 360px;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    border: 8px solid #1f2937;
}

.ingredients-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 18px;
}

.ingredients-mobile-header-actions {
    display: flex;
    gap: 8px;
}

.ingredients-mobile-brew-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #fef3c7;
    color: #d97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ingredients-mobile-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ingredients-mobile-tabs {
    display: flex;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.ing-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.ing-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 500;
}

.ingredients-mobile-filters {
    display: flex;
    gap: 6px;
    padding: 12px;
    overflow-x: auto;
}

.ing-filter {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.ing-filter.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.ing-filter.warning {
    color: #f59e0b;
    border-color: #fbbf24;
}

.ingredients-mobile-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ingredient-card-mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
}

.ingredient-card-mobile.warning {
    border-left: 3px solid #f59e0b;
}

.ingredient-card-mobile.brewed {
    background: #fffbeb;
}

.ingredient-mobile-info {
    flex: 1;
}

.ingredient-mobile-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ingredient-mobile-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.ingredient-mobile-unit {
    font-size: 11px;
    color: #9ca3af;
}

.ingredient-mobile-actions {
    display: flex;
    gap: 4px;
}

/* ========================================
   TABLE DEMO STYLES (Generic)
   ======================================== */

.table-demo {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    background: #fff;
}

.table-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #fafafa;
    gap: 12px;
    flex-wrap: wrap;
}

.table-demo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    min-width: 180px;
}

.table-demo-search i,
.table-demo-search svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.table-demo-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

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

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

.table-demo-table thead {
    background: #f9fafb;
}

.table-demo-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.table-demo-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.table-demo-table tbody tr:hover {
    background: #f9fafb;
}

.table-demo-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.success {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.error {
    background: #fee2e2;
    color: #dc2626;
}

/* Action icons */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.action-icon.edit {
    color: #3b82f6;
}

.action-icon.edit:hover {
    background: #dbeafe;
}

.action-icon.delete {
    color: #ef4444;
}

.action-icon.delete:hover {
    background: #fee2e2;
}

/* No data placeholder */
.no-data {
    color: #9ca3af;
}

@media (max-width: 768px) {
    .table-demo {
        overflow-x: auto;
    }
    
    .table-demo-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .table-demo-search {
        width: 100%;
    }
    
    .table-demo-add-btn {
        justify-content: center;
    }
    
    .table-demo-table {
        min-width: 600px;
    }
}

/* ========================================
   WASTED ITEMS PAGE STYLES
   ======================================== */

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.benefit-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.benefit-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.benefit-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Wasted Filters Demo */
.wasted-filters-demo {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

.wasted-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.wasted-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.wasted-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.wasted-summary-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.wasted-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
}

/* Type Badges */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.type-badge.ingredient {
    background: #dbeafe;
    color: #2563eb;
}

.type-badge.supply {
    background: #fef3c7;
    color: #d97706;
}

/* Reason Badges */
.reason-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.reason-badge.expired {
    background: #fee2e2;
    color: #dc2626;
}

.reason-badge.damaged {
    background: #ffedd5;
    color: #ea580c;
}

.reason-badge.end-of-day {
    background: #f3e8ff;
    color: #9333ea;
}

.reason-badge.quality {
    background: #fef9c3;
    color: #ca8a04;
}

.reason-badge.other {
    background: #f3f4f6;
    color: #6b7280;
}

.reason-badge-sm {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
}

.reason-badge-sm.expired {
    background: #fee2e2;
    color: #dc2626;
}

.reason-badge-sm.damaged {
    background: #ffedd5;
    color: #ea580c;
}

/* Wasted Type Toggle */
.wasted-type-toggle {
    display: flex;
    gap: 8px;
}

.wasted-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

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

/* Wasted Loss Preview */
.wasted-loss-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #fee2e2;
    border-radius: 8px;
    margin-bottom: 16px;
}

.wasted-loss-value {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
}

/* Reason List */
.reason-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.reason-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Auto Discard Flow */
.auto-discard-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    margin: 20px 0;
    overflow-x: auto;
}

.auto-discard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
}

.auto-discard-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auto-discard-text strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.auto-discard-text p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.auto-discard-arrow {
    color: var(--text-secondary);
    font-size: 20px;
    flex-shrink: 0;
}

/* Wasted Mobile Demo */
.wasted-mobile-demo {
    max-width: 360px;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    border: 8px solid #1f2937;
}

.wasted-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 18px;
}

.wasted-mobile-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wasted-mobile-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 13px;
}

.wasted-mobile-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wasted-card-mobile {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}

.wasted-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wasted-card-header strong {
    font-size: 14px;
}

.wasted-card-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.wasted-card-loss {
    color: #dc2626;
    font-weight: 600;
}

.wasted-card-time {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

/* ========================================
   EXPENSES PAGE STYLES
   ======================================== */

/* Expense Groups Demo */
.expense-groups-demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.expense-group-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 4px solid;
    border-radius: 8px;
}

.expense-group-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.expense-group-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Expense Filters Demo */
.expense-filters-demo {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

.expense-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.expense-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.expense-summary {
    display: flex;
    gap: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.expense-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expense-summary-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.expense-summary-value {
    font-size: 18px;
    font-weight: 700;
}

.expense-summary-value.negative {
    color: #dc2626;
}

/* Expense Group Badge */
.expense-group-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.expense-group-badge-sm {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
}

/* File Upload Demo */
.file-upload-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: center;
}

.file-upload-demo span {
    margin-top: 8px;
    font-size: 14px;
}

.file-upload-demo p {
    margin: 4px 0 0;
    font-size: 11px;
    color: #9ca3af;
}

/* File Types Demo */
.file-types-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.file-type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.file-type-icon {
    font-size: 24px;
}

.file-type-name {
    font-weight: 600;
    font-size: 14px;
}

.file-type-ext {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Expense Mobile Demo */
.expense-mobile-demo {
    max-width: 360px;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    border: 8px solid #1f2937;
}

.expense-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 18px;
}

.expense-mobile-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.expense-mobile-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

.expense-mobile-total strong {
    color: #dc2626;
}

.expense-mobile-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expense-card-mobile {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}

.expense-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.expense-card-header strong {
    font-size: 14px;
}

.expense-card-amount {
    font-weight: 600;
    color: #dc2626;
}

.expense-card-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.expense-card-time {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

/* ========================================
   SUPPLIERS PAGE STYLES
   ======================================== */

/* Phone Link */
.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
}

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

/* Supplier Link Demo */
.supplier-link-demo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    margin: 20px 0;
    overflow-x: auto;
}

.supplier-link-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

.supplier-link-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.supplier-link-text strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.supplier-link-text p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.supplier-link-arrow {
    color: var(--text-secondary);
    font-size: 20px;
    flex-shrink: 0;
}

/* Supplier Mobile Demo */
.supplier-mobile-demo {
    max-width: 360px;
    background: #f3f4f6;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    border: 8px solid #1f2937;
}

.supplier-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 18px;
}

.supplier-mobile-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.supplier-mobile-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.supplier-mobile-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.supplier-card-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
}

.supplier-card-info {
    flex: 1;
}

.supplier-card-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.supplier-card-details {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.supplier-card-note {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.supplier-card-actions {
    flex-shrink: 0;
}

.supplier-call-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    text-decoration: none;
}

/* ========================================
   STOCK IMPORT DEMO STYLES
   ======================================== */

/* Stock Import Items Demo */
.stock-import-items-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.stock-import-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.stock-import-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-import-item-name {
    font-weight: 500;
    font-size: 14px;
}

.stock-import-item-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
}

.stock-import-item-type.ingredient {
    background: #dbeafe;
    color: #2563eb;
}

.stock-import-item-type.supply {
    background: #fef3c7;
    color: #d97706;
}

.stock-import-item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.stock-import-item-qty strong {
    color: var(--text-primary);
}

.stock-import-add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.stock-import-add-item-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.stock-import-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #dbeafe;
    border-radius: 8px;
    margin-bottom: 16px;
}

.stock-import-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}

/* Responsive */
@media (max-width: 640px) {
    .stock-import-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stock-import-item-qty {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================
   REPORTS DOCUMENTATION STYLES
   ======================================== */

/* Report Period Demo */
.report-period-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.report-period-item {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    cursor: default;
    transition: all 0.2s;
}

.report-period-item.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Report Summary Grid */
.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 20px 0;
}

@media (min-width: 640px) {
    .report-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .report-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1100px) {
    .report-summary-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }
}

.report-summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-width: 0;
}

.report-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.report-summary-card.green .report-summary-icon { background: #10b981; }
.report-summary-card.orange .report-summary-icon { background: #f59e0b; }
.report-summary-card.blue .report-summary-icon { background: #3b82f6; }
.report-summary-card.purple .report-summary-icon { background: #8b5cf6; }
.report-summary-card.red .report-summary-icon { background: #ef4444; }
.report-summary-card.emerald .report-summary-icon { background: #059669; }
.report-summary-card.teal .report-summary-icon { background: #14b8a6; }

.report-summary-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.report-summary-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1100px) {
    .report-summary-value {
        font-size: 13px;
    }
}

.report-summary-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.report-summary-sub {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Report Chart Demo */
.report-chart-demo {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.report-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.report-chart-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.report-chart-body {
    padding: 20px;
}

.report-chart-placeholder {
    height: 200px;
    position: relative;
    background: linear-gradient(180deg, #f0fdf4 0%, white 100%);
    border-radius: 8px;
    overflow: hidden;
}

.chart-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.chart-area.revenue {
    height: 60%;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-top: 2px solid #10b981;
}

.chart-area.cost {
    height: 35%;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-top: 2px solid #ef4444;
}

.report-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.green { background: #10b981; }
.legend-color.red { background: #ef4444; }

/* Cost Breakdown Demo */
.cost-breakdown-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

@media (min-width: 640px) {
    .cost-breakdown-demo {
        flex-direction: row;
        align-items: center;
    }
}

.cost-pie-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #f59e0b 0% 42%,
        #3b82f6 42% 75%,
        #8b5cf6 75% 98%,
        #ef4444 98% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 auto;
}

.cost-pie-placeholder::after {
    content: '';
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
}

.cost-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.cost-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

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

.cost-legend-item span:last-of-type {
    flex: 1;
}

.cost-legend-item strong {
    color: var(--text-primary);
}

/* Hourly Chart Demo */
.hourly-chart-demo {
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

.hourly-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 150px;
    gap: 4px;
    padding-bottom: 8px;
}

.hourly-bar {
    flex: 1;
    background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 10px;
}

.hourly-bar.peak {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
}

.hourly-bar.peak::after {
    content: '★';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: #f59e0b;
    font-size: 14px;
}

.hourly-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Report Alert Demo */
.report-alert-demo {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    margin: 20px 0;
}

.report-alert-demo.warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

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

.report-alert-demo.warning .report-alert-icon {
    background: #ffedd5;
    color: #ea580c;
}

.report-alert-content h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #9a3412;
}

.alert-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #fed7aa;
    color: #9a3412;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.report-alert-content p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #c2410c;
}

.report-alert-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #9a3412;
}

.report-alert-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Report Filter Row */
.report-filter-row {
    display: flex;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.report-filter-select {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.report-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    flex: 1;
    max-width: 300px;
}

.report-filter-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

/* Report Product Summary */
.report-product-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

@media (min-width: 768px) {
    .report-product-summary {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-stat-item {
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.product-stat-item.green { background: #f0fdf4; }
.product-stat-item.blue { background: #eff6ff; }
.product-stat-item.orange { background: #fff7ed; }
.product-stat-item.emerald { background: #ecfdf5; }

.product-stat-item .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.product-stat-item.green .stat-value { color: #16a34a; }
.product-stat-item.blue .stat-value { color: #2563eb; }
.product-stat-item.orange .stat-value { color: #ea580c; }
.product-stat-item.emerald .stat-value { color: #059669; }

.product-stat-item .stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Product Cell */
.product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.product-category {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Margin Badge */
.margin-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.margin-badge.high {
    background: #dcfce7;
    color: #16a34a;
}

.margin-badge.medium {
    background: #fef3c7;
    color: #d97706;
}

.margin-badge.low {
    background: #fee2e2;
    color: #dc2626;
}

/* Product Detail Demo */
.product-detail-demo {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
}

.product-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    cursor: pointer;
}

.product-detail-body {
    padding: 0 16px 16px;
}

.table-demo-table.compact {
    font-size: 13px;
}

.table-demo-table.compact th,
.table-demo-table.compact td {
    padding: 8px 12px;
}

/* Slow Moving Demo */
.slow-moving-demo {
    padding: 16px;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 12px;
    margin: 20px 0;
}

.slow-moving-demo h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #854d0e;
}

.slow-moving-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slow-moving-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
}

.slow-moving-item .product-name {
    font-weight: 500;
}

.slow-badge {
    font-size: 12px;
    color: #a16207;
    background: #fef9c3;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Options Analysis Demo */
.options-analysis-demo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (min-width: 640px) {
    .options-analysis-demo {
        grid-template-columns: repeat(2, 1fr);
    }
}

.option-group {
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.option-group h5 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.option-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.option-bar .option-name {
    width: 100px;
    font-size: 13px;
    flex-shrink: 0;
}

.option-bar .option-progress {
    height: 8px;
    background: #3b82f6;
    border-radius: 4px;
}

.option-bar .option-percent {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    width: 40px;
    text-align: right;
}

/* Payment Stats Demo */
.payment-stats-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

@media (max-width: 640px) {
    .payment-stats-demo {
        grid-template-columns: 1fr;
    }
}

.payment-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

.payment-stat-card.cash {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
}

.payment-stat-card.transfer {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #93c5fd;
}

.payment-stat-card.debt {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid #fcd34d;
}

.payment-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-stat-card.cash .payment-stat-icon {
    background: #22c55e;
    color: white;
}

.payment-stat-card.transfer .payment-stat-icon {
    background: #3b82f6;
    color: white;
}

.payment-stat-card.debt .payment-stat-icon {
    background: #f59e0b;
    color: white;
}

.payment-stat-info {
    display: flex;
    flex-direction: column;
}

.payment-stat-value {
    font-size: 20px;
    font-weight: 700;
}

.payment-stat-label {
    font-size: 14px;
    font-weight: 500;
}

.payment-stat-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.payment-stat-percent {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    font-weight: 700;
    opacity: 0.3;
}

/* Payment Filter Demo */
.payment-filter-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.payment-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: white;
    font-size: 13px;
    cursor: default;
}

.payment-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Payment Badge */
.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.payment-badge.cash {
    background: #dcfce7;
    color: #16a34a;
}

.payment-badge.transfer {
    background: #dbeafe;
    color: #2563eb;
}

.payment-badge.debt {
    background: #fef3c7;
    color: #d97706;
}

/* Customer Stats Grid */
.customer-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}

@media (min-width: 768px) {
    .customer-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.customer-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
}

.customer-stat-card.blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.customer-stat-card.green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.customer-stat-card.purple {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

.customer-stat-card.orange {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.customer-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-stat-card.blue .customer-stat-icon {
    background: #3b82f6;
    color: white;
}

.customer-stat-card.green .customer-stat-icon {
    background: #22c55e;
    color: white;
}

.customer-stat-card.purple .customer-stat-icon {
    background: #a855f7;
    color: white;
}

.customer-stat-card.orange .customer-stat-icon {
    background: #f59e0b;
    color: white;
}

.customer-stat-info {
    display: flex;
    flex-direction: column;
}

.customer-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.customer-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.customer-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

@media (min-width: 768px) {
    .customer-stats-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.customer-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
}

.customer-stat-item .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.customer-stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.rank-badge.gold {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    color: white;
}

.rank-badge.silver {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: white;
}

.rank-badge.bronze {
    background: linear-gradient(135deg, #fdba74, #f97316);
    color: white;
}

.rank-badge-sm {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Customer Cell */
.customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.customer-avatar.debt {
    background: #fef3c7;
    color: #d97706;
}

.customer-phone {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Top Points Demo */
.top-points-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.top-point-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.point-info {
    flex: 1;
}

.point-info strong {
    display: block;
}

.points-earned {
    font-size: 14px;
    color: #a855f7;
    font-weight: 600;
}

.point-icon {
    color: #f59e0b;
}

/* Debt Summary Demo */
.debt-summary-demo {
    display: flex;
    gap: 20px;
    margin: 16px 0;
}

.debt-total, .debt-count {
    padding: 16px 24px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
}

.debt-total span, .debt-count span {
    display: block;
    font-size: 12px;
    color: #c2410c;
}

.debt-total strong, .debt-count strong {
    font-size: 20px;
    color: #ea580c;
}

/* Inventory Alerts Demo */
.inventory-alerts-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

@media (max-width: 640px) {
    .inventory-alerts-demo {
        grid-template-columns: 1fr;
    }
}

.inventory-alert-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
}

.inventory-alert-card.danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.inventory-alert-card.warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.inventory-alert-card.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.inventory-alert-card .alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-alert-card.danger .alert-icon {
    background: #ef4444;
    color: white;
}

.inventory-alert-card.warning .alert-icon {
    background: #f59e0b;
    color: white;
}

.inventory-alert-card.success .alert-icon {
    background: #22c55e;
    color: white;
}

.alert-info h4 {
    margin: 0;
    font-size: 14px;
}

.alert-count {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.success {
    background: #dcfce7;
    color: #16a34a;
}

/* Forecast Demo */
.forecast-demo {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.forecast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
}

.forecast-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.forecast-list {
    padding: 12px;
}

.forecast-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.forecast-item.danger {
    background: #fef2f2;
}

.forecast-item.warning {
    background: #fffbeb;
}

.forecast-item.success {
    background: #f0fdf4;
}

.forecast-item-info strong {
    display: block;
    font-size: 14px;
}

.forecast-item-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

.forecast-item-status {
    text-align: right;
}

.forecast-days {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.forecast-item.danger .forecast-days { color: #dc2626; }
.forecast-item.warning .forecast-days { color: #d97706; }
.forecast-item.success .forecast-days { color: #16a34a; }

.forecast-action {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Cost Trend Demo */
.cost-trend-demo {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.cost-trend-header {
    padding: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.cost-trend-chart {
    padding: 20px;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 150px;
    gap: 16px;
}

.trend-bar {
    flex: 1;
    max-width: 60px;
    background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
}

.trend-bar.current {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
}

.bar-value {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.trend-labels {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Wasted Stats Demo */
.wasted-stats-demo {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.wasted-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
}

.wasted-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasted-info {
    display: flex;
    flex-direction: column;
}

.wasted-value {
    font-size: 24px;
    font-weight: 700;
    color: #dc2626;
}

.wasted-label {
    font-size: 13px;
    color: #991b1b;
}

.wasted-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wasted-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.wasted-item .amount {
    font-weight: 600;
    color: #dc2626;
}

/* Reason Badge for wasted items */
.reason-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.reason-badge.expired {
    background: #fee2e2;
    color: #dc2626;
}

.reason-badge.damaged {
    background: #ffedd5;
    color: #ea580c;
}

.reason-badge.end-of-day {
    background: #f3e8ff;
    color: #9333ea;
}

/* Mobile Demos */
.payment-mobile-demo,
.customer-mobile-demo,
.inventory-mobile-demo {
    width: 280px;
    margin: 20px auto;
    border: 8px solid #1f2937;
    border-radius: 32px;
    overflow: hidden;
    background: white;
}

.payment-mobile-header,
.customer-mobile-header,
.inventory-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.payment-mobile-share-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 8px;
    border-radius: 8px;
    color: white;
    cursor: default;
}

.payment-mobile-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
}

.payment-mobile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.stat-icon.cash { background: #22c55e; }
.stat-icon.transfer { background: #3b82f6; }
.stat-icon.debt { background: #f59e0b; }

.payment-mobile-list {
    padding: 12px;
}

.payment-mobile-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.payment-mobile-item-left strong,
.payment-mobile-item-right strong {
    display: block;
    font-size: 14px;
}

.payment-mobile-item-left span,
.payment-mobile-item-right span {
    font-size: 12px;
    color: var(--text-secondary);
}

.payment-badge-sm {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.payment-badge-sm.cash {
    background: #dcfce7;
    color: #16a34a;
}

.payment-badge-sm.transfer {
    background: #dbeafe;
    color: #2563eb;
}

/* Customer Mobile Demo */
.customer-mobile-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f9fafb;
}

.mobile-stat {
    text-align: center;
}

.mobile-stat strong {
    display: block;
    font-size: 18px;
    color: var(--text-primary);
}

.mobile-stat span {
    font-size: 11px;
    color: var(--text-secondary);
}

.customer-mobile-section {
    padding: 12px;
}

.customer-mobile-section h5 {
    margin: 0 0 8px 0;
    font-size: 13px;
}

.customer-mobile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
}

.customer-mobile-item .name {
    flex: 1;
    font-size: 13px;
}

.customer-mobile-item .amount {
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
}

/* Inventory Mobile Demo */
.inventory-mobile-alerts {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
}

.mobile-alert {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.mobile-alert.danger {
    background: #fee2e2;
    color: #dc2626;
}

.mobile-alert.warning {
    background: #fef3c7;
    color: #d97706;
}

.inventory-mobile-list {
    padding: 12px;
}

.inventory-mobile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.inventory-mobile-item.danger {
    background: #fef2f2;
}

.inventory-mobile-item.warning {
    background: #fffbeb;
}

.inventory-mobile-item .item-info strong {
    display: block;
    font-size: 14px;
}

.inventory-mobile-item .item-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dot.danger { background: #ef4444; }
.status-dot.warning { background: #f59e0b; }

/* Share Options Demo */
.share-options-demo {
    display: flex;
    gap: 16px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 13px;
    cursor: default;
}

.share-option.zalo {
    background: #0068ff;
    color: white;
    border-color: #0068ff;
}

.zalo-icon {
    font-size: 20px;
    font-weight: 700;
}

/* Payment Pie Demo */
.payment-pie-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

@media (min-width: 640px) {
    .payment-pie-demo {
        flex-direction: row;
        justify-content: center;
    }
}

.pie-visual {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        #22c55e 0% 55%,
        #3b82f6 55% 92%,
        #f59e0b 92% 100%
    );
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pie-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.pie-legend-item .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.pie-legend-item .legend-color.cash { background: #22c55e; }
.pie-legend-item .legend-color.transfer { background: #3b82f6; }
.pie-legend-item .legend-color.debt { background: #f59e0b; }

.pie-legend-item strong {
    margin-left: auto;
}

/* ========================================
   SETTINGS DOCUMENTATION STYLES
   ======================================== */

/* Settings Toggle Demo */
.settings-toggle-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

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

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

.toggle-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3c7;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-info div strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
}

.toggle-info div span {
    font-size: 13px;
    color: var(--text-secondary);
}

.toggle-switch {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch.on {
    background: #22c55e;
}

.toggle-switch.on::after {
    transform: translateX(22px);
}

/* Settings Form Demo */
.settings-form-demo {
    margin: 16px 0;
}

.settings-form-demo label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.settings-form-demo select,
.settings-form-demo input {
    width: 100%;
    max-width: 300px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

/* Settings Group Demo */
.settings-group-demo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

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

.settings-field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-field input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    max-width: 200px;
}

.field-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Process Steps */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content {
    display: flex;
    flex-direction: column;
}

.step-content strong {
    font-size: 14px;
    color: var(--text-primary);
}

.step-content span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Paper Size Demo */
.paper-size-demo {
    display: flex;
    gap: 16px;
    margin: 20px 0;
}

.paper-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 32px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.paper-option.active {
    border-color: #22c55e;
    background: #f0fdf4;
}

.paper-icon {
    font-size: 32px;
}

.paper-option strong {
    font-size: 16px;
}

.paper-option span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Font Size Demo */
.font-size-demo {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.font-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.font-option.active {
    border-color: #22c55e;
    background: #f0fdf4;
}

.font-option strong {
    font-size: 13px;
}

/* Receipt Preview Demo */
.receipt-preview-demo {
    display: flex;
    justify-content: center;
    padding: 24px;
    background: #f3f4f6;
    border-radius: 12px;
    margin: 20px 0;
}

.receipt-paper {
    width: 240px;
    background: white;
    border: 1px solid #d1d5db;
    padding: 16px;
    font-size: 11px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.receipt-header {
    text-align: center;
    margin-bottom: 12px;
}

.receipt-logo {
    width: 40px;
    height: 40px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
}

.receipt-header strong {
    display: block;
    font-size: 14px;
}

.receipt-header span {
    color: #6b7280;
}

.receipt-divider {
    border-top: 1px dashed #9ca3af;
    margin: 10px 0;
}

.receipt-title {
    text-align: center;
    margin-bottom: 10px;
}

.receipt-title strong {
    display: block;
}

.receipt-title span {
    font-size: 10px;
    color: #6b7280;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.receipt-items {
    margin: 8px 0;
}

.receipt-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.receipt-total {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 13px;
    margin: 8px 0;
}

.receipt-qr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
}

.qr-placeholder {
    width: 50px;
    height: 50px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #6b7280;
}

.bank-info {
    display: flex;
    flex-direction: column;
    font-size: 9px;
}

.receipt-footer {
    text-align: center;
    font-style: italic;
    color: #6b7280;
    margin-top: 12px;
}

/* Import Section Demo */
.import-section-demo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    margin: 20px 0;
}

.import-icon {
    width: 56px;
    height: 56px;
    background: #3b82f6;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-info {
    flex: 1;
}

.import-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #1e40af;
}

.import-info p {
    margin: 0;
    font-size: 13px;
    color: #3b82f6;
}

.import-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* Danger Zone Demo */
.danger-zone-demo {
    border: 1px solid #fecaca;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.danger-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #fef2f2;
    color: #dc2626;
}

.danger-content {
    padding: 16px;
    background: white;
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.danger-info strong {
    display: block;
    font-size: 14px;
    color: #991b1b;
}

.danger-info p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #dc2626;
}

.danger-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

/* Confirm Steps Demo */
.confirm-steps-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.confirm-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.confirm-step .step-num {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.confirm-step span:last-child {
    font-size: 13px;
}

/* ========================================
   SETTINGS SHOP DOCUMENTATION STYLES
   ======================================== */

/* Shop Info Demo */
.shop-info-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 20px 0;
}

.shop-logo-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shop-logo-placeholder {
    width: 80px;
    height: 80px;
    background: #f3f4f6;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.shop-logo-upload {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-logo-upload .upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.shop-logo-upload span {
    font-size: 12px;
    color: var(--text-secondary);
}

.shop-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-row label {
    font-size: 14px;
    font-weight: 500;
}

.field-row input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

/* Business Category Demo */
.business-category-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.category-item.primary {
    background: #f3e8ff;
    border-color: #c4b5fd;
}

.category-name {
    font-size: 14px;
    font-weight: 500;
}

.category-badge {
    font-size: 12px;
    padding: 2px 8px;
    background: #8b5cf6;
    color: white;
    border-radius: 4px;
}

.add-category-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    width: fit-content;
}

/* Bank Accounts Demo */
.bank-accounts-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.bank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.bank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bank-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-header strong {
    font-size: 15px;
}

.default-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 4px;
}

.account-number {
    font-size: 14px;
    color: #4b5563;
}

.account-name {
    font-size: 13px;
    color: #9ca3af;
}

.bank-actions {
    display: flex;
    gap: 4px;
}

.action-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn.check {
    color: #16a34a;
}

.action-btn.check:hover {
    background: #dcfce7;
}

.action-btn.edit {
    color: #3b82f6;
}

.action-btn.edit:hover {
    background: #dbeafe;
}

.action-btn.delete {
    color: #dc2626;
}

.action-btn.delete:hover {
    background: #fee2e2;
}

.add-bank-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

/* Payment Providers Demo */
.payment-providers-demo {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.provider-option {
    flex: 1;
    padding: 16px;
    text-align: center;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.provider-option.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

.provider-option strong {
    font-size: 15px;
}

/* Accounting Templates Demo */
.accounting-templates-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.template-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-item:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.template-item.blue .template-icon {
    color: #3b82f6;
}

.template-item.green .template-icon {
    color: #22c55e;
}

.template-item.orange .template-icon {
    color: #f97316;
}

.template-item.purple .template-icon {
    color: #8b5cf6;
}

.template-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.template-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-info strong {
    font-size: 14px;
    color: var(--text-primary);
}

.template-info span {
    font-size: 13px;
    color: var(--text-secondary);
}

.template-download {
    color: #9ca3af;
    flex-shrink: 0;
}

/* ========================================
   SETTINGS ACCOUNTS DOCUMENTATION STYLES
   ======================================== */

/* Role Comparison Demo */
.role-comparison-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.role-box {
    padding: 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.role-box.admin {
    border-color: #bbf7d0;
    background: linear-gradient(to bottom, #f0fdf4, white);
}

.role-box.sales {
    border-color: #bfdbfe;
    background: linear-gradient(to bottom, #eff6ff, white);
}

.role-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.admin {
    background: #dcfce7;
    color: #16a34a;
}

.role-badge.sales {
    background: #dbeafe;
    color: #2563eb;
}

.role-box p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.role-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.role-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.role-features li:last-child {
    border-bottom: none;
}

.role-features li i {
    color: #22c55e;
    flex-shrink: 0;
}

.role-features li i.text-red {
    color: #dc2626;
}

/* Account List Demo */
.account-list-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.account-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.account-main {
    flex: 1;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.account-username {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.account-role {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.account-role.admin {
    background: #dcfce7;
    color: #16a34a;
}

.account-role.sales {
    background: #dbeafe;
    color: #2563eb;
}

.account-fullname {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 4px;
}

.account-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.account-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.account-meta {
    font-size: 11px;
    color: #9ca3af;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 640px) {
    .account-actions {
        flex-direction: row;
    }
}

.account-actions .action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: transparent;
}

.account-actions .action-btn.salary {
    color: #f97316;
}

.account-actions .action-btn.salary:hover {
    background: #fff7ed;
}

.account-actions .action-btn.edit {
    color: #22c55e;
}

.account-actions .action-btn.edit:hover {
    background: #f0fdf4;
}

.account-actions .action-btn.password {
    color: #3b82f6;
}

.account-actions .action-btn.password:hover {
    background: #eff6ff;
}

.account-actions .action-btn.delete {
    color: #dc2626;
}

.account-actions .action-btn.delete:hover {
    background: #fef2f2;
}