/**
 * Show Floor — copied from ui-mockups/color-options.html [data-palette="show-floor"]
 * Enabled via Settings → Show floor (data-theme="dark").
 */
html[data-theme="dark"] {
    --sf-bg: #111113;
    --sf-surface: #1c1c1f;
    --sf-surface-2: #27272a;
    --sf-text: #f4f4f5;
    --sf-text-secondary: #d4d4d8;
    --sf-text-muted: #a1a1aa;
    --sf-border: #3f3f46;
    --sf-accent: #22c55e;
    --sf-accent-soft: #14532d;
    --sf-accent-text: #052e16;
    --sf-success-bg: #14532d;
    --sf-success-text: #bbf7d0;
    --sf-success-border: #22c55e;
    --sf-role-bg: #422006;
    --sf-role-text: #fde68a;
    --sf-role-border: #d97706;
    --sf-btn-secondary-bg: #27272a;
    --sf-btn-secondary-text: #f4f4f5;
    --sf-btn-secondary-border: #52525b;
    --sf-input-bg: #27272a;
    --sf-input-placeholder: #a1a1aa;
    --sf-heading: #fafafa;
    --sf-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sf-accent-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);

    --app-bg: var(--sf-bg);
    --app-surface: var(--sf-surface);
    --app-border: var(--sf-border);
    --app-text: var(--sf-text);
    --app-muted: var(--sf-text-muted);
    --app-accent: var(--sf-accent);
    --app-accent-soft: var(--sf-accent-soft);
    --app-accent-gradient: var(--sf-accent-gradient);
    --app-surface-2: var(--sf-surface-2);
    --invin-card-bg: var(--sf-surface);
    --invin-card-shadow: var(--sf-shadow);
    --invin-input-bg: var(--sf-input-bg);
    --invin-input-border: var(--sf-border);
    --invin-panel-muted-bg: var(--sf-surface);
    --invin-stats-gradient: linear-gradient(135deg, #166534 0%, #14532d 100%);
    --invin-heading: var(--sf-heading);
    --invin-text-secondary: var(--sf-text-secondary);
    --invin-status-bg: var(--sf-success-bg);
    --invin-status-text: var(--sf-success-text);
    --invin-status-border: var(--sf-success-border);
    --invin-item-bg: var(--sf-surface-2);
    --invin-item-border: var(--sf-border);
    --invin-btn-secondary-bg: var(--sf-btn-secondary-bg);
    --invin-btn-secondary-text: var(--sf-btn-secondary-text);
    --invin-btn-secondary-border: var(--sf-btn-secondary-border);
    --invin-btn-shadow: rgba(34, 197, 94, 0.35);

    color-scheme: dark;
}

/* ── Page + chrome (demo: mock-main on --bg) ─────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] body.app-shell-enabled {
    background: #111113 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .app-container {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .app-main {
    background: #111113;
}

html[data-theme="dark"] .app-sidebar {
    background: #1c1c1f !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .app-logo-mark {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

html[data-theme="dark"] .app-logo-text {
    color: #fafafa;
}

html[data-theme="dark"] .app-nav-btn {
    color: #a1a1aa;
}

html[data-theme="dark"] .app-nav-btn:hover {
    background: #27272a;
    color: #f4f4f5;
}

html[data-theme="dark"] .app-nav-btn.active {
    background: #14532d !important;
    color: #22c55e !important;
}

html[data-theme="dark"] .app-user-avatar {
    background: #27272a;
    color: #a1a1aa;
}

html[data-theme="dark"] .app-user-name {
    color: #f4f4f5;
}

/* ── Header (demo: text on --bg, not a white card) ───────────────────────── */
html[data-theme="dark"] body.app-shell-enabled .header {
    background: #111113 !important;
    border: 1px solid #3f3f46 !important;
    color: #f4f4f5 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] body.app-shell-enabled .header h1 {
    color: #fafafa !important;
    text-shadow: none !important;
}

html[data-theme="dark"] body.app-shell-enabled .header p {
    color: #d4d4d8 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .app-view-title {
    color: #fafafa !important;
}

html[data-theme="dark"] .user-role-display,
html[data-theme="dark"] .user-role-display.premium {
    background: #422006 !important;
    color: #fde68a !important;
    border: 1px solid #d97706 !important;
}

/* ── AWS status (demo: mock-status) ──────────────────────────────────────── */
html[data-theme="dark"] body.app-shell-enabled .aws-status {
    background: #18181b !important;
    color: #a1a1aa !important;
    border: 1px solid #3f3f46 !important;
}

html[data-theme="dark"] body.app-shell-enabled .aws-status.connected {
    background: #14532d !important;
    color: #bbf7d0 !important;
    border: 1px solid #22c55e !important;
}

html[data-theme="dark"] body.app-shell-enabled .aws-status.error {
    background: #450a0a !important;
    color: #fecaca !important;
    border: 1px solid #f87171 !important;
}

/* ── Cards (demo: mock-card on --surface) ────────────────────────────────── */
html[data-theme="dark"] .card {
    background: #1c1c1f !important;
    color: #f4f4f5 !important;
    border: 1px solid #3f3f46 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .card h2 {
    color: #22c55e !important;
    border-bottom-color: #3f3f46 !important;
}

/* ── Inventory search / filters (demo: inside card, no white panels) ─────── */
html[data-theme="dark"] .inventory-search-controls,
html[data-theme="dark"] .inventory-filter-controls,
html[data-theme="dark"] .inventory-pagination {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-search-controls label,
html[data-theme="dark"] .inventory-filter-controls .filter-group label,
html[data-theme="dark"] .inventory-pagination__per-page label,
html[data-theme="dark"] #paginationInfo {
    color: #d4d4d8 !important;
}

html[data-theme="dark"] .inventory-search-controls input[type="text"],
html[data-theme="dark"] .inventory-filter-controls select,
html[data-theme="dark"] .inventory-pagination__per-page select {
    background: #27272a !important;
    border: 1px solid #3f3f46 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .inventory-search-controls input[type="text"]::placeholder {
    color: #a1a1aa !important;
}

html[data-theme="dark"] .inventory-filter-controls select option {
    background: #27272a;
    color: #f4f4f5;
}

html[data-theme="dark"] .inventory-item {
    background: #27272a !important;
    border: 1px solid #3f3f46 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .inventory-grid .item-name {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .inventory-grid .item-details {
    color: #a1a1aa !important;
    background: transparent !important;
    border: none !important;
}

/* ── Buttons (demo: mock-btn-*) ────────────────────────────────────────── */
html[data-theme="dark"] .btn {
    background: #22c55e !important;
    color: #052e16 !important;
    border: none !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .inventory-filter-controls .btn-clear-filters {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border: 1px solid #52525b !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-controls .btn-scan-inventory {
    background: #0ea5e9 !important;
    color: #0c1929 !important;
    border: none !important;
}

html[data-theme="dark"] .btn-info {
    background: #0ea5e9 !important;
    color: #0c1929 !important;
}

html[data-theme="dark"] .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-group label {
    color: #d4d4d8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a1a1aa !important;
}

/* ── Settings / scan / admin tabs ────────────────────────────────────────── */
html[data-theme="dark"] .user-welcome {
    background: #1c1c1f !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .user-welcome h3 {
    color: #fafafa !important;
}

html[data-theme="dark"] .settings-appearance-row {
    background: #111113 !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .settings-appearance-label {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .theme-segmented {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .theme-segment {
    color: #a1a1aa;
}

html[data-theme="dark"] .theme-segment:hover {
    color: #f4f4f5;
}

html[data-theme="dark"] .theme-segment.active {
    background: #14532d !important;
    color: #22c55e !important;
    box-shadow: none;
}

html[data-theme="dark"] .scan-mode-tab,
html[data-theme="dark"] .settings-mode-tab {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
}

html[data-theme="dark"] .scan-mode-tab.active,
html[data-theme="dark"] .settings-mode-tab.active {
    background: #14532d !important;
    color: #22c55e !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] .tab-btn {
    background: #27272a;
    color: #a1a1aa;
    border-color: #3f3f46;
}

html[data-theme="dark"] .tab-btn.active {
    background: #14532d !important;
    color: #22c55e !important;
}

html[data-theme="dark"] .inventory-stats {
    background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
    color: #bbf7d0 !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .scanner-modal-content {
    background: #1c1c1f !important;
    color: #f4f4f5 !important;
    border: 1px solid #3f3f46 !important;
}

html[data-theme="dark"] .app-bottom-nav {
    background: #1c1c1f !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .app-bottom-nav-btn.active {
    color: #22c55e !important;
}

html[data-theme="dark"] .app-fab {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
}

html[data-theme="dark"] .app-more-drawer {
    background: #1c1c1f !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .clear-search-btn {
    color: #a1a1aa !important;
}

html[data-theme="dark"] .clear-search-btn:hover {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .notification {
    background: #1c1c1f !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .data-table th {
    background: #27272a !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .data-table td {
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

/* Transaction history modal — match inventory card contrast in dark mode */
html[data-theme="dark"] #transactionHistoryModal .filter-group label,
html[data-theme="dark"] #transactionHistoryModal label[for="transactionExportFormat"] {
    color: #e4e4e7 !important;
}

html[data-theme="dark"] #transactionHistoryModal .filter-group select,
html[data-theme="dark"] #transactionHistoryModal #transactionExportFormat {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] #transactionHistoryModal .filter-group select option {
    background: #27272a !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .transaction-record {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .transaction-header {
    border-bottom-color: #3f3f46 !important;
}

html[data-theme="dark"] .transaction-date {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] .transaction-amount {
    color: #4ade80 !important;
}

html[data-theme="dark"] .transaction-item-record {
    background: #18181b !important;
    border-left-color: #3b82f6 !important;
    color: #d4d4d8 !important;
}

html[data-theme="dark"] .transaction-item-record strong {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #transactionHistoryModal .modal-header h3,
html[data-theme="dark"] #transactionHistoryModal .close-btn {
    color: #f4f4f5 !important;
}

/* Payment codes — My Images upload + QR upload panels in dark mode */
html[data-theme="dark"] #myImagesSection .image-upload-section,
html[data-theme="dark"] #uploadQRSection .upload-instructions {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] #uploadQRSection .upload-instructions p {
    color: #d4d4d8 !important;
}

html[data-theme="dark"] #myImagesSection h3,
html[data-theme="dark"] #myImagesSection h4,
html[data-theme="dark"] #uploadQRSection h2,
html[data-theme="dark"] #uploadQRSection h4 {
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #myImagesSection .form-hint,
html[data-theme="dark"] #uploadQRSection .form-hint,
html[data-theme="dark"] #myImagesSection .upload-hint,
html[data-theme="dark"] #uploadQRSection .upload-hint {
    color: #a1a1aa !important;
}

html[data-theme="dark"] #myImagesSection .upload-area,
html[data-theme="dark"] #uploadQRSection .upload-area {
    background: #18181b !important;
    border-color: #52525b !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #myImagesSection .upload-area:hover,
html[data-theme="dark"] #uploadQRSection .upload-area:hover {
    background: #27272a !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] #myImagesSection .upload-area.dragover,
html[data-theme="dark"] #uploadQRSection .upload-area.dragover {
    background: #14532d !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] #myImagesSection .upload-placeholder p,
html[data-theme="dark"] #uploadQRSection .upload-placeholder p {
    color: #d4d4d8 !important;
}

html[data-theme="dark"] #myImagesSection .upload-preview,
html[data-theme="dark"] #uploadQRSection .upload-preview {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #imagePreviewContainer > div {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] #myImagesGallery p,
html[data-theme="dark"] #myImagesGallery .gallery-placeholder {
    color: #a1a1aa !important;
}

html[data-theme="dark"] #myImagesGallery .image-gallery-item {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] #myImagesGallery .image-gallery-item .category-label {
    background: #18181b !important;
    color: #f4f4f5 !important;
}

html[data-theme="dark"] #myImagesGallery .image-gallery-file-info {
    background: #18181b !important;
    color: #a1a1aa !important;
}

html[data-theme="dark"] #myImagesSection #imageGalleryCategory,
html[data-theme="dark"] #myImagesSection #imageCategory,
html[data-theme="dark"] #uploadQRSection #qrPaymentMethod {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .payment-mode-tab {
    background: #27272a !important;
    color: #a1a1aa !important;
    border-color: #3f3f46 !important;
}

html[data-theme="dark"] .payment-mode-tab:hover {
    color: #f4f4f5 !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] .payment-mode-tab.active {
    background: #14532d !important;
    color: #22c55e !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] .payment-status {
    color: #a1a1aa !important;
}