/**
 * ============================================
 * POS Design System - Bootstrap/Cork Overrides
 * ============================================
 *
 * Maps Bootstrap 4 and Cork template components to use
 * the design system tokens. This enables automatic theme
 * switching without modifying third-party CSS.
 *
 * Load AFTER Bootstrap and Cork CSS files.
 *
 * @version 1.0.0
 */

/* ============================================
 * GLOBAL / BODY
 * ============================================ */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-family-base);
}

/* ============================================
 * TYPOGRAPHY
 * ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-heading) !important;
}

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

a {
    color: var(--color-link);
    transition: color var(--duration-fast) var(--ease-in-out);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

/* ============================================
 * BUTTONS
 * ============================================ */
.btn {
    transition: all var(--duration-fast) var(--ease-in-out);
    border-radius: var(--radius-lg);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color) !important;
    outline: none;
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    box-shadow: var(--shadow-primary);
}

.btn-primary:active {
    background-color: var(--color-primary-active) !important;
    border-color: var(--color-primary-active) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-text-on-success) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
    box-shadow: var(--shadow-success);
}

.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-text-on-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
    box-shadow: var(--shadow-danger);
}

.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: var(--color-text-on-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--color-warning-hover) !important;
    border-color: var(--color-warning-hover) !important;
    box-shadow: var(--shadow-warning);
}

.btn-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: var(--color-text-on-info) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--color-info-hover) !important;
    border-color: var(--color-info-hover) !important;
    box-shadow: var(--shadow-info);
}

.btn-secondary {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-border-strong) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

.btn-outline-secondary {
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover {
    background-color: var(--color-surface-hover) !important;
    color: var(--color-text) !important;
}

.btn-link {
    color: var(--color-link) !important;
}

.btn-link:hover {
    color: var(--color-link-hover) !important;
}

/* ============================================
 * CARDS
 * ============================================ */
.card {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-card-border) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--color-card-header) !important;
    border-bottom-color: var(--color-card-border) !important;
}

.card-title {
    color: var(--color-card-title) !important;
}

.card-body {
    color: var(--color-text);
}

.card-footer {
    background-color: var(--color-surface) !important;
    border-top-color: var(--color-card-border) !important;
}

/* ============================================
 * FORMS
 * ============================================ */
.form-control {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-input-text) !important;
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-fast) var(--ease-in-out),
                box-shadow var(--duration-fast) var(--ease-in-out);
}

.form-control::placeholder {
    color: var(--color-input-placeholder) !important;
}

.form-control:hover {
    border-color: var(--color-input-border-hover) !important;
}

.form-control:focus {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border-focus) !important;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color) !important;
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--color-input-bg-disabled) !important;
    color: var(--color-text-disabled) !important;
}

.form-control.is-invalid {
    border-color: var(--color-border-error) !important;
    background-color: var(--color-input-error-bg) !important;
}

.form-control.is-valid {
    border-color: var(--color-border-success) !important;
    background-color: var(--color-input-success-bg) !important;
}

/* Labels */
.form-label,
label {
    color: var(--color-text);
}

/* Select2 overrides */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-input-text) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--color-input-text) !important;
}

.select2-dropdown {
    background-color: var(--color-dropdown-bg) !important;
    border-color: var(--color-border) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

/* ============================================
 * TABLES
 * ============================================ */
.table {
    color: var(--color-table-body-text);
}

.table thead th {
    background-color: var(--color-table-header-bg) !important;
    color: var(--color-table-header-text) !important;
    border-bottom-color: var(--color-table-border) !important;
}

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

.table tbody tr:hover {
    background-color: var(--color-table-row-hover) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-table-row-stripe) !important;
}

.table td,
.table th {
    border-color: var(--color-table-border) !important;
}

/* ============================================
 * MODALS
 * ============================================ */
.modal-content {
    background-color: var(--color-modal-bg) !important;
    border-color: var(--color-modal-border) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background-color: var(--color-modal-header-bg) !important;
    border-bottom-color: var(--color-modal-border) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title {
    color: var(--color-modal-header-text) !important;
}

.modal-body {
    background-color: var(--color-modal-body-bg) !important;
    color: var(--color-text);
}

.modal-footer {
    background-color: var(--color-modal-footer-bg) !important;
    border-top-color: var(--color-modal-border) !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.modal-backdrop {
    background-color: var(--palette-slate-900);
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* ============================================
 * ALERTS
 * ============================================ */
.alert {
    border-radius: var(--radius-lg);
}

.alert-primary {
    background-color: var(--color-primary-subtle) !important;
    border-color: var(--color-primary-muted) !important;
    color: var(--color-primary) !important;
}

.alert-success {
    background-color: var(--color-success-subtle) !important;
    border-color: var(--color-success-muted) !important;
    color: var(--color-success) !important;
}

.alert-warning {
    background-color: var(--color-warning-subtle) !important;
    border-color: var(--color-warning-muted) !important;
    color: var(--color-warning) !important;
}

.alert-danger {
    background-color: var(--color-danger-subtle) !important;
    border-color: var(--color-danger-muted) !important;
    color: var(--color-danger) !important;
}

.alert-info {
    background-color: var(--color-info-subtle) !important;
    border-color: var(--color-info-muted) !important;
    color: var(--color-info) !important;
}

/* ============================================
 * BADGES
 * ============================================ */
.badge {
    border-radius: var(--radius-full);
    padding: 0.35em 0.65em;
    font-weight: var(--font-weight-semibold);
}

.badge-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

.badge-success {
    background-color: var(--color-success) !important;
    color: var(--color-text-on-success) !important;
}

.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text-on-warning) !important;
}

.badge-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-text-on-danger) !important;
}

.badge-info {
    background-color: var(--color-info) !important;
    color: var(--color-text-on-info) !important;
}

.badge-secondary {
    background-color: var(--color-badge-default-bg) !important;
    color: var(--color-badge-default-text) !important;
}

/* ============================================
 * DROPDOWNS
 * ============================================ */
.dropdown-menu {
    background-color: var(--color-dropdown-bg) !important;
    border-color: var(--color-dropdown-border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    color: var(--color-dropdown-text) !important;
    transition: background-color var(--duration-fast) var(--ease-in-out);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-dropdown-hover) !important;
    color: var(--color-text) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-dropdown-active) !important;
    color: var(--color-text-on-primary) !important;
}

.dropdown-divider {
    border-top-color: var(--color-border) !important;
}

/* ============================================
 * NAVBAR (Cork)
 * ============================================ */
.navbar {
    background-color: var(--color-navbar-bg) !important;
    border-bottom: 1px solid var(--color-navbar-border);
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--color-navbar-text) !important;
}

.navbar .nav-link:hover {
    color: var(--color-primary) !important;
}

.header-container .sidebarCollapse {
    color: var(--color-primary) !important;
}

/* ============================================
 * SIDEBAR (Cork)
 * ============================================ */
.sidebar-theme #compactSidebar,
#sidebar {
    background-color: var(--color-sidebar-bg) !important;
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-icons svg,
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle i {
    color: var(--color-sidebar-icon) !important;
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-menu span {
    color: var(--color-sidebar-text) !important;
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle:hover {
    background-color: var(--color-sidebar-hover) !important;
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle.active {
    background-color: var(--color-sidebar-active) !important;
}

/* ============================================
 * PAGINATION
 * ============================================ */
.page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.page-link:hover {
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

.page-item.disabled .page-link {
    background-color: var(--color-surface) !important;
    color: var(--color-text-disabled) !important;
}

/* ============================================
 * LIST GROUPS
 * ============================================ */
.list-group-item {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.list-group-item:hover {
    background-color: var(--color-surface-hover) !important;
}

.list-group-item.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

/* ============================================
 * BORDERS & DIVIDERS
 * ============================================ */
hr {
    border-top-color: var(--color-border) !important;
}

.border {
    border-color: var(--color-border) !important;
}

.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--color-border) !important;
}

/* ============================================
 * PROGRESS BARS
 * ============================================ */
.progress {
    background-color: var(--color-surface-hover) !important;
    border-radius: var(--radius-full);
}

.progress-bar {
    background-color: var(--color-primary) !important;
}

/* ============================================
 * SPINNER / LOADER
 * ============================================ */
.spinner-border,
.spinner-grow {
    color: var(--color-primary);
}

#load_screen {
    background-color: var(--color-bg);
}

#load_screen .loader-content .spinner-grow {
    background-color: var(--color-primary);
}

/* ============================================
 * CODE / PRE
 * ============================================ */
code {
    color: var(--color-danger) !important;
    background-color: var(--color-danger-subtle);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-md);
}

pre {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
}

/* ============================================
 * TOOLTIPS
 * ============================================ */
.tooltip-inner {
    background-color: var(--palette-slate-900);
    color: var(--palette-slate-50);
    border-radius: var(--radius-md);
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--palette-slate-900);
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--palette-slate-900);
}

/* ============================================
 * POPOVERS
 * ============================================ */
.popover {
    background-color: var(--color-elevated) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.popover-header {
    background-color: var(--color-surface-hover) !important;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-heading);
}

.popover-body {
    color: var(--color-text);
}

/* ============================================
 * STATUS CLASSES
 * ============================================ */
.status-available {
    background-color: var(--color-status-available) !important;
    color: #ffffff !important;
}

.status-busy {
    background-color: var(--color-status-busy) !important;
    color: #ffffff !important;
}

.status-reserved {
    background-color: var(--color-status-reserved) !important;
    color: #ffffff !important;
}

.status-pending {
    background-color: var(--color-status-pending) !important;
    color: #ffffff !important;
}

.status-preparing {
    background-color: var(--color-status-preparing) !important;
    color: #ffffff !important;
}

.status-delivered {
    background-color: var(--color-status-delivered) !important;
    color: #ffffff !important;
}

.status-cancelled {
    background-color: var(--color-status-cancelled) !important;
    color: #ffffff !important;
}

/* Subtle backgrounds */
.bg-status-available {
    background-color: var(--color-status-available-bg) !important;
}

.bg-status-busy {
    background-color: var(--color-status-busy-bg) !important;
}

.bg-status-pending {
    background-color: var(--color-status-pending-bg) !important;
}

/* ============================================
 * CORK-SPECIFIC OVERRIDES
 * ============================================ */
/* Page title */
.page-title h3 {
    color: var(--color-heading) !important;
}

.page-title::before {
    background: var(--color-primary) !important;
}

/* Widget styles */
.widget {
    background-color: var(--color-card-bg) !important;
}

/* Content area */
#content {
    background-color: transparent;
}

.layout-px-spacing {
    background-color: transparent;
}

/* Main container */
.main-container {
    background-color: var(--color-bg);
}

/* Search forms */
.navbar .navbar-item .nav-item form.form-inline input.search-form-control {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-input-text) !important;
}

/* Media heading (from styles.blade.php) */
.media-heading {
    color: var(--color-heading) !important;
}