/* Mobile light theme (BOD-1615)

   Gives phones the Dashboard look - white surfaces, violet accents, grey/black text - on the
   management pages that are dark on desktop. The file is linked with media="(max-width: 768px)"
   so nothing here reaches desktop; page level <style> blocks come after the layout links, so the
   colour overrides need !important to win.
   Most of site.css is driven by the variables below, so the bulk of the theme is the :root block. */

:root {
    --dark-bg: #f8f9fa;
    --dark-surface: #ffffff;
    --dark-border: #e2e8f0;
    --light-text: #333333;
    --muted-text: #6c757d;
    /* Primary actions (.btn-red and friends) become the Dashboard violet; hardcoded #dc3545
       delete buttons stay red so destructive actions still read as destructive. */
    --accent-red: #6c5ce7;
    --accent-red-hover: #5a4fcf;
}

/* management-light.css keeps the kiosk's red accent, so phones re-point it at the violet.
   The extra element in the selector beats that file's .management-light block whatever the order. */
body.management-light {
    --accent-red: #6c5ce7;
    --accent-red-hover: #5a4fcf;
}

/* The navbar keeps its purple gradient, so its links can't follow --light-text (now dark grey);
   this covers the slide in drawer on phones, where every entry sits on the purple panel. */
.dark-navbar .navbar-brand,
.dark-navbar .nav-link,
.dark-navbar .nav-link i,
.navbar-chat-btn,
.navbar-chat-btn i {
    color: #ffffff !important;
}

.dark-navbar .nav-link:hover,
.dark-navbar .nav-link:focus {
    color: rgba(255,255,255,0.75) !important;
}

/* Login keeps its violet gradient, so it opts out of the light page background. */
body:not(.login-body) {
    background-color: #f8f9fa !important;
    color: #333333 !important;
}

/* Page shells, lists, cards and other surfaces */
.stores-container,
.store-list,
.stores-table,
.settings-section,
.info-section,
.help-section,
.support-card,
.store-view-container,
.promo-card,
.manual-card,
.catalog-card,
.cat-card,
.inv-card,
.detail-identity,
.detail-section,
.category-defaults,
.tax-box,
.upc-item,
.catalog-item,
.catalog-filter-panel,
.inv-filter-panel,
.modal-content {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #333333 !important;
}

.stores-container {
    background-color: #f8f9fa !important;
}

/* Primary text */
h1, h2, h3, h4, h5, h6,
.stores-title,
.store-name,
.section-title,
.setting-title,
.setting-value,
.info-value,
.store-address,
.promo-card-name,
.manual-card-name,
.catalog-card-name,
.cat-card-name,
.cat-card-value,
.inv-card-name,
.detail-value,
.detail-product-name,
.form-check-label,
.modal-title {
    color: #333333 !important;
}

/* Secondary text */
.text-muted,
.text-body-secondary,
label,
small,
.info-label,
.setting-label,
.setting-description-text,
.promo-card-desc,
.promo-card-detail,
.promo-card-label,
.manual-card-meta,
.catalog-card-meta,
.cat-card-label,
.inv-card-meta,
.detail-label,
.empty-state,
.character-count {
    color: #6c757d !important;
}

/* Tables render as grids/cards on most mobile pages, but the ones that stay tabular need
   readable rows too. */
.stores-table table,
.table,
.table-dark,
.reports-table,
.transactions-table {
    color: #333333 !important;
    border-color: #e2e8f0 !important;
}

.stores-table th,
.table th,
.table-dark th,
.reports-table th,
.transactions-table th {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-color: #e2e8f0 !important;
}

.stores-table td,
.stores-table tr.store-row,
.table td,
.table-dark td,
.table-dark tbody tr,
.reports-table td,
.transactions-table td {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #e2e8f0 !important;
}

/* Inputs */
.form-control,
.form-select,
.search-input,
.filter-dropdown summary,
.inv-filter-dropdown summary {
    background-color: #ffffff !important;
    border-color: #ced4da !important;
    color: #333333 !important;
}

.form-control::placeholder,
.search-input::placeholder {
    color: #adb5bd !important;
}

.search-clear-btn,
.password-reveal-btn {
    color: #6c757d !important;
}

/* Buttons: outline buttons were light-on-dark, primaries follow --accent-red (now violet) */
.btn-outline-light {
    background-color: #ffffff !important;
    border-color: #6c757d !important;
    color: #333333 !important;
}

.btn-outline-light:hover {
    background-color: #f1f3f5 !important;
    color: #333333 !important;
}

.btn-red {
    background-color: #6c5ce7 !important;
    color: #ffffff !important;
}

.btn-red:hover {
    background-color: #5a4fcf !important;
}

/* Modals and dropdowns */
.modal-footer,
.edit-store-settings-modal-body,
.edit-store-settings-modal-footer {
    background-color: #ffffff !important;
    border-color: #e9ecef !important;
    color: #333333 !important;
}

/* Every popup header keeps the purple gradient, so its title, icons and close button are white.
   Some modals set the gradient themselves in site.css, so the two cases are unified here rather
   than chasing each modal; the management-light selector is spelled out because that sheet loads
   after this one and would otherwise win on specificity. */
.modal .modal-header,
body.management-light .modal .modal-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-secondary) 50%, var(--purple-tertiary) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.modal .modal-header,
.modal .modal-header .modal-title,
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header i,
body.management-light .modal .modal-header,
body.management-light .modal .modal-header .modal-title {
    color: #ffffff !important;
}

.modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.dropdown-menu {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

.dropdown-item {
    color: #333333 !important;
}

.dropdown-item:hover {
    background-color: #f1f3f5 !important;
    color: #333333 !important;
}

hr,
.section-header,
.store-badges {
    border-color: #e9ecef !important;
}

/* Manage menu: dark hover becomes a light one, current page keeps the purple highlight. */
.mgmt-menu-item:hover {
    background: #f1f3f5 !important;
    color: #333333 !important;
}

.mgmt-menu-item.active,
.mgmt-menu-item.active:hover {
    background: #6c5ce7 !important;
    color: #ffffff !important;
}

.mgmt-menu-panel {
    box-shadow: 0 12px 28px rgba(0,0,0,.15) !important;
}

/* Inventory hardcodes light-on-dark greys and a dark hover, which vanish on a white card. */
.inv-store-link,
.inv-card-meta,
.inv-page-size,
.inv-search-label,
.inv-filter-clear-btn,
.inv-card-chevron,
.global-search label,
.add-field label,
#inventoryPage .form-text {
    color: #6c757d !important;
}

.inv-card:hover,
.inv-card:focus-visible {
    background: #f1f3f5 !important;
}

/* The release notes pages hardcode white/light text, which disappears on the white mobile page. */
.release-note-item,
.release-note-version,
.release-note-heading,
.release-note-subheading {
    color: #333333 !important;
}

.release-note-date-label {
    color: #6c757d !important;
}

/* .stores-container is min-width:1200px, so without this the release notes pages pan sideways and their text never wraps. */
.release-notes-page {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 12px !important;
}

.release-notes-page .stores-title {
    font-size: 1.4rem !important;
}

.release-notes-page .stores-header {
    margin-bottom: 12px !important;
}

/* Both release notes pages style their header row and note text for desktop widths, so phones get cards with a wrapping header. */
.release-note-section {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.release-note-header {
    flex-wrap: wrap !important;
    gap: 0.1rem 0.5rem !important;
    padding-bottom: 0.35rem !important;
    margin-bottom: 0.5rem !important;
}

.release-note-version,
.release-note-date {
    font-size: 1.05rem !important;
    flex: 1 1 auto !important;
}

.release-note-date-label {
    font-size: 0.8rem !important;
    white-space: normal !important;
    flex: 1 1 100% !important;
    order: 3 !important;
}

.release-note-actions {
    margin-left: auto !important;
}

.release-note-item {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    padding: 0.15rem 0 !important;
    overflow-wrap: anywhere !important;
}

.release-note-bullet {
    padding-left: 1rem !important;
}

.release-note-bullet::before {
    left: 0.15rem !important;
}

.release-note-h1 { font-size: 1rem !important; }
.release-note-h2 { font-size: 0.95rem !important; }
.release-note-h3,
.release-note-subheading { font-size: 0.9rem !important; }

.tab-count {
    background: #e9ecef !important;
    color: #495057 !important;
}

#inventoryPage .input-group-text,
#inventoryPage .form-control:focus {
    color: #333333 !important;
}

#inventoryPage .input-group-text {
    background: #f8f9fa !important;
}

/* Add Store - Demo Store tab: darker amber so the demo notes stay readable on white */
.add-store-modal .store-mode-note.is-demo,
.add-store-modal .demo-store-hint {
    color: #b45309 !important;
}