/* ================================================================
   OrderSync Centralized Theme File
   ================================================================
   
   This is the MAIN THEME FILE for the entire OrderSync application.
   
   All color variables, spacing, typography scales, and component 
   styles are defined here. This ensures consistent branding and 
   makes it easy to update the entire application's look and feel 
   in one place.
   
   USAGE:
   - Import this file FIRST in your HTML/layout template
   - All other CSS files (site.css, app.css, page-specific CSS) 
     inherit these variables automatically
   - Use CSS custom properties (--bs-primary, --color-text, etc.) 
     instead of hardcoding colors
   
   PRIMARY BRAND COLOR: #0891B2 (Cyan 600)
   
   For updates to the theme, modify variables in the :root section below.
   No need to update individual files!
   
   ================================================================ */

/* OrderSync Branding Theme - Central Theme File */
:root {
  /* OrderSync Primary Brand Color */
  --bs-primary: #0891B2;
  --bs-primary-rgb: 8, 145, 178;
  --bs-primary-dark: #067a8e;
  --bs-primary-dark-rgb: 6, 122, 142;

  /* Secondary Colors - Use for complementary elements */
  --bs-secondary: #4B5563;
  --bs-secondary-rgb: 75, 85, 99;

  /* Semantic Colors - Status & Intent */
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: #06B6D4;
  --bs-info-rgb: 6, 182, 212;

  /* Sync-Specific Colors */
  --kitchen-sync-primary: #DC2626;
  --kitchen-sync-primary-rgb: 220, 38, 38;
  --table-sync-primary: #0891B2;
  --customer-sync-primary: #F59E0B;
  --booking-sync-primary: #F59E0B;
  --admin-sync-primary: #10B981;

  /* Neutral Colors - Text & Backgrounds */
  --bs-dark: #111827;
  --bs-dark-rgb: 17, 24, 39;
  --bs-darker: #0F172A;
  --color-text-strong: #111827;
  --color-text: #4B5563;
  --color-disabled: #9CA3AF;

  /* Light Theme Colors */
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --color-bg-subtle: #F9FAFB;
  --color-bg-subtle-rgb: 249, 250, 251;
  --bs-body-color: #4B5563;
  --bs-body-color-rgb: 75, 85, 99;

  /* Border and Background Overlays */
  --color-border: #F3F4F6;
  --bs-border-color: #F3F4F6;
  --bs-border-color-translucent: rgba(8, 145, 178, 0.08);

  /* Card & Component Backgrounds */
  --bs-card-bg: #FFFFFF;
  --bs-card-border-color: #F3F4F6;

  /* Link Colors */
  --bs-link-color: #0891B2;
  --bs-link-hover-color: #067a8e;

  /* Shadows - Based on primary cyan */
  --bs-box-shadow: 0 10px 30px rgba(8, 145, 178, 0.16);
  --bs-box-shadow-sm: 0 2px 8px rgba(8, 145, 178, 0.12);
  --bs-box-shadow-lg: 0 25px 50px rgba(8, 145, 178, 0.2);

  /* Border Radius */
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 20px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
}

/* Body Background */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}

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

/* Button Overrides */
.btn-primary {
  background: var(--bs-primary);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(8, 145, 178, 0.35);
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--bs-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.45);
  color: #ffffff;
}

.btn-secondary {
  background: var(--bs-secondary);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(75, 85, 99, 0.35);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: #3a4452;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75, 85, 99, 0.45);
  color: #ffffff;
}

.btn-success {
  background: var(--bs-success);
  border: none;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.btn-success:hover {
  background: #059669;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.btn-danger {
  background: var(--bs-danger);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35);
}

.btn-danger:hover {
  background: #b91c1c;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

.btn-warning {
  background: var(--bs-warning);
  border: none;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}

.btn-warning:hover {
  background: #d97706;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

.btn-info {
  background: var(--bs-info);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35);
}

.btn-info:hover {
  background: #0891B2;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45);
}

.btn {
  border-radius: var(--bs-border-radius-sm);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

/* Card Overrides */
.card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border-color);
  border-radius: var(--bs-border-radius-lg);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow);
}

.card-header {
  background: rgba(8, 145, 178, 0.08);
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-dark);
  font-weight: 600;
}

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

/* Modal Overrides */
.modal-content {
  background: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  color: var(--bs-body-color);
}

.modal-header {
  border-bottom-color: var(--bs-border-color);
  background: rgba(8, 145, 178, 0.05);
}

.modal-footer {
  border-top-color: var(--bs-border-color);
  background: rgba(8, 145, 178, 0.02);
}

.modal-backdrop {
  background-color: rgba(17, 24, 39, 0.45);
}

/* Form Control Overrides */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-dark);
  border-radius: var(--bs-border-radius-sm);
}

.form-control:focus,
.form-select:focus {
  background: #ffffff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(8, 145, 178, 0.25);
  color: var(--bs-dark);
}

.form-control::placeholder {
  color: var(--color-disabled);
}

.form-label {
  color: var(--bs-dark);
  font-weight: 500;
}

/* Alert Overrides */
.alert {
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
}

.alert-primary {
  background: rgba(8, 145, 178, 0.12);
  color: #0891B2;
  border-color: rgba(8, 145, 178, 0.4);
}

.alert-success {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.4);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.4);
}

.alert-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.4);
}

.alert-info {
  background: rgba(6, 182, 212, 0.15);
  color: #06B6D4;
  border-color: rgba(6, 182, 212, 0.4);
}

/* Badge Overrides */
.badge {
  border-radius: var(--bs-border-radius-sm);
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.badge.bg-primary {
  background: var(--bs-primary) !important;
}

.badge.bg-secondary {
  background: var(--bs-secondary) !important;
}

.badge.bg-success {
  background: var(--bs-success) !important;
}

.badge.bg-danger {
  background: var(--bs-danger) !important;
}

.badge.bg-warning {
  background: var(--bs-warning) !important;
}

.badge.bg-info {
  background: var(--bs-info) !important;
}

/* Table Overrides */
.table {
  color: var(--bs-body-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--color-bg-subtle);
}

.table-hover > tbody > tr:hover {
  background: rgba(8, 145, 178, 0.08);
}

.table-dark {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: var(--color-bg-subtle);
  --bs-table-hover-bg: rgba(8, 145, 178, 0.12);
  --bs-table-border-color: var(--color-border);
}

/* Dropdown Overrides */
.dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

.dropdown-item {
  color: var(--bs-dark);
  transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(8, 145, 178, 0.12);
  color: var(--bs-dark);
}

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

/* Pagination Overrides */
.pagination {
  --bs-pagination-bg: rgba(255, 255, 255, 0.9);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-hover-bg: rgba(8, 145, 178, 0.2);
  --bs-pagination-hover-border-color: rgba(8, 145, 178, 0.35);
  --bs-pagination-focus-bg: rgba(8, 145, 178, 0.2);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-bg: rgba(248, 250, 252, 0.95);
  --bs-pagination-disabled-border-color: var(--color-border);
}

.page-link {
  color: var(--bs-dark);
  border-radius: var(--bs-border-radius-sm);
}

.page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35);
}

/* Nav & Navbar Overrides */
.navbar-dark {
  --bs-navbar-color: var(--color-text);
  --bs-navbar-hover-color: var(--color-text-strong);
  --bs-navbar-brand-color: var(--color-text-strong);
  --bs-navbar-brand-hover-color: var(--bs-primary);
}

.nav-link {
  color: var(--color-text);
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: var(--bs-primary);
}

/* Text Colors */
.text-primary {
  color: var(--bs-primary) !important;
}

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

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

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

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

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

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

/* Background Colors */
.bg-primary {
  background: var(--bs-primary) !important;
  color: #ffffff;
}

.bg-secondary {
  background: var(--bs-secondary) !important;
  color: #ffffff;
}

.bg-success {
  background: var(--bs-success) !important;
  color: #ffffff;
}

.bg-danger {
  background: var(--bs-danger) !important;
  color: #ffffff;
}

.bg-warning {
  background: var(--bs-warning) !important;
  color: #ffffff;
}

.bg-info {
  background: var(--bs-info) !important;
  color: #ffffff;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
  color: #ffffff;
}

/* Border Colors */
.border-primary {
  border-color: var(--bs-primary) !important;
}

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

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

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

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

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

/* Progress Bar */
.progress {
  background-color: var(--color-bg-subtle);
  border-radius: var(--bs-border-radius);
}

.progress-bar {
  background: var(--bs-primary);
}

/* Accordion */
.accordion-item {
  background: var(--bs-card-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.accordion-button {
  background: rgba(8, 145, 178, 0.1);
  color: var(--bs-dark);
}

.accordion-button:not(.collapsed) {
  background: rgba(8, 145, 178, 0.2);
  color: var(--bs-dark);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Tooltip & Popover */
.tooltip-inner {
  background: var(--color-bg-subtle);
  color: var(--bs-dark);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--bs-box-shadow);
}

.popover {
  background: #ffffff;
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
}

.popover-header {
  background: rgba(8, 145, 178, 0.05);
  border-color: var(--bs-border-color);
  color: var(--bs-dark);
}

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