/* Luarco Theme */

/* Typography and base smoothing */
html,
body,
button,
input,
select,
textarea {
  font-family: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light theme variables */
:root {
  --primary-color: #0a84ff; /* iOS/macOS accent blue */
  --secondary-color: #8e8e93; /* iOS secondary label */
  --success-color: #34c759; /* iOS green */
  --info-color: #64d2ff; /* iOS cyan */
  --warning-color: #ffd60a; /* iOS yellow */
  --danger-color: #ff3b30; /* iOS red */

  --bg-light: #f5f5f7; /* Light grey background */
  --text-light: #1d1d1f; /* Primary text color */
  --card-bg-light: rgba(255, 255, 255, 0.72);
  --border-light: rgba(60, 60, 67, 0.12);
  --navbar-bg-light: rgba(255, 255, 255, 0.7);

  --border-radius: 12px;
  --transition: all 0.25s ease;

  /* Semantic aliases (light by default) */
  --bg: var(--bg-light);
  --text: var(--text-light);
  --card-bg: var(--card-bg-light);
  --border: var(--border-light);
  --navbar-bg: var(--navbar-bg-light);
}

/* Dark theme variables applied when body has .dark-theme */
body.dark-theme {
  --bg-dark: #1c1c1e;
  --text-dark: #f2f2f7;
  --card-bg-dark: rgba(28, 28, 30, 0.72);
  --border-dark: rgba(255, 255, 255, 0.12);
  --navbar-bg-dark: rgba(28, 28, 30, 0.7);

  /* Semantic aliases (overrides in dark) */
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --card-bg: var(--card-bg-dark);
  --border: var(--border-dark);
  --navbar-bg: var(--navbar-bg-dark);

  /* Remap legacy 'light' variables so page CSS using them adapts in dark */
  --bg-light: var(--bg-dark);
  --text-light: var(--text-dark);
  --card-bg-light: var(--card-bg-dark);
  --border-light: var(--border-dark);
  --navbar-bg-light: var(--navbar-bg-dark);
}

/* Backgrounds */
body {
  background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
  color-scheme: light dark;
  /* Ensure base text color follows theme vars */
  color: var(--text-light);
}

body.dark-theme {
  background: linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
  color: var(--text-dark);
}

/* Navbar - glassy feel */
.navbar {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background-color: var(--navbar-bg-light) !important;
  border-bottom: 1px solid var(--border-light);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dark-theme .navbar {
  background-color: var(--navbar-bg-dark) !important;
  border-bottom: 1px solid var(--border-dark);
}

/* Elevated navbar on scroll */
.navbar.is-scrolled {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.dark-theme .navbar.is-scrolled {
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.navbar .nav-link {
  color: #5f5f62;
}

.navbar .nav-link:hover {
  color: var(--primary-color);
  background-color: rgba(10, 132, 255, 0.08);
}

.navbar .nav-link.active {
  color: var(--primary-color);
  background-color: rgba(10, 132, 255, 0.12);
}

/* Improve navbar link contrast in dark mode */
.dark-theme .navbar .nav-link {
  color: #c7c7cc;
}
.dark-theme .navbar .nav-link:hover,
.dark-theme .navbar .nav-link.active {
  color: var(--primary-color);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Cards and panels with subtle glass look */
.card,
.pricing-card,
.table-container,
.sync-logs-filters,
.sync-logs-toolbar,
.sync-logs-list {
  background-color: var(--card-bg-light);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius);
}

.dark-theme .card,
.dark-theme .pricing-card,
.dark-theme .table-container,
.dark-theme .sync-logs-filters,
.dark-theme .sync-logs-toolbar,
.dark-theme .sync-logs-list {
  background-color: var(--card-bg-dark);
  border: 1px solid var(--border-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Force theme friendliness for Bootstrap contextual classes when used explicitly */
.card.text-bg-dark {
  background-color: var(--card-bg-light) !important;
  color: var(--text-light) !important;
}
.dark-theme .card.text-bg-dark {
  background-color: var(--card-bg-dark) !important;
  color: var(--text-dark) !important;
}

/* Buttons */
.btn {
  border-radius: var(--border-radius);
  font-weight: 600;
}

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

.btn-primary:hover {
  background-color: #0874e8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.25);
}

.btn-outline-secondary {
  color: var(--secondary-color);
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.4);
}

.dark-theme .btn-outline-secondary {
  color: #d1d1d6;
  border-color: var(--border-dark);
  background: rgba(28, 28, 30, 0.4);
}

/* Forms */
.form-control {
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
  background-color: rgba(255, 255, 255, 0.9);
}

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
  border-color: #0a84ff;
}

.dark-theme .form-control {
  background-color: rgba(28, 28, 30, 0.9);
  border-color: var(--border-dark);
}

/* Tables */
.table-standard th,
.table-standard td {
  border-bottom: 1px solid var(--border-light);
}

.table-standard thead {
  background: rgba(60, 60, 67, 0.04);
}

.dark-theme .table-standard thead {
  background: rgba(255, 255, 255, 0.04);
}

/* Dividers and hr */
hr,
.sidebar-divider,
.submenu-divider {
  border-color: var(--border-light) !important;
}

.dark-theme hr,
.dark-theme .sidebar-divider,
.dark-theme .submenu-divider {
  border-color: var(--border-dark) !important;
}

/* Badges and alerts with subtle styling */
.alert {
  border: 1px solid var(--border-light);
}

.dark-theme .alert {
  border: 1px solid var(--border-dark);
}

/* Alerts: theme-aware backgrounds and text contrast in dark mode */
.dark-theme .alert-success { background-color: rgba(52, 199, 89, 0.18); color: #d7fbe5; }
.dark-theme .alert-danger { background-color: rgba(255, 69, 58, 0.18); color: #ffd7d5; }
.dark-theme .alert-warning { background-color: rgba(255, 214, 10, 0.22); color: #fff3bf; }
.dark-theme .alert-info { background-color: rgba(100, 210, 255, 0.18); color: #cbeeff; }
.dark-theme .alert-primary { background-color: rgba(10, 132, 255, 0.18); color: #cfe7ff; }
.dark-theme .alert-secondary { background-color: rgba(142, 142, 147, 0.18); color: #d9d9dc; }
.dark-theme .alert-light { background-color: rgba(242, 242, 247, 0.18); color: #f2f2f7; }
.dark-theme .alert-dark { background-color: rgba(28, 28, 30, 0.35); color: #f2f2f7; }

.badge {
    font-weight: 500;
    letter-spacing: 0.025em;
}

.dark-theme .badge {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .badge.bg-danger {
    background-color: #ff453a !important;
    color: #ffffff !important;
}

.dark-theme .badge.bg-success {
    background-color: #32d74b !important;
    color: #ffffff !important;
}

.dark-theme .badge.bg-warning {
    background-color: #ff9f0a !important;
    color: #000000 !important;
}

.dark-theme .badge.bg-info {
    background-color: #64d2ff !important;
    color: #000000 !important;
}

.dark-theme .badge.bg-primary {
    background-color: #0a84ff !important;
    color: #ffffff !important;
}

.dark-theme .badge.bg-light.text-dark {
    background-color: #f2f2f7 !important;
    color: #1c1c1e !important;
}

/* Products page: filters and chips */
.products-card .form-label {
  margin-bottom: 0.25rem;
}

/* Interactive filter chips */
.products-card .badge.bg-light.text-dark.border,
.products-card button.badge.bg-light.text-dark.border {
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.products-card .badge.bg-light.text-dark.border:hover,
.products-card button.badge.bg-light.text-dark.border:hover {
  background-color: rgba(10,132,255,0.08) !important;
  border-color: rgba(10,132,255,0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10,132,255,0.15);
}
.products-card button.badge.bg-light.text-dark.border:focus-visible {
  outline: 2px solid rgba(10,132,255,0.6);
  outline-offset: 2px;
}
.dark-theme .products-card .badge.bg-light.text-dark.border,
.dark-theme .products-card button.badge.bg-light.text-dark.border {
  background-color: var(--card-bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}
.dark-theme .products-card .badge.bg-light.text-dark.border:hover,
.dark-theme .products-card button.badge.bg-light.text-dark.border:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Soft badges */
.badge-soft-primary { background-color: rgba(10,132,255,0.15); color: #0a84ff; }
.badge-soft-success { background-color: rgba(52,199,89,0.15); color: #34c759; }
.badge-soft-warning { background-color: rgba(255,214,10,0.2); color: #b88600; }
.badge-soft-danger { background-color: rgba(255,59,48,0.15); color: #ff3b30; }
.badge-soft-info { background-color: rgba(100,210,255,0.15); color: #64d2ff; }
.badge-soft-secondary { background-color: rgba(142,142,147,0.15); color: #8e8e93; }

.dark-theme .badge-soft-primary { background-color: rgba(10,132,255,0.25); color: #64b5ff; }
.dark-theme .badge-soft-success { background-color: rgba(52,199,89,0.25); color: #7ee2a2; }
.dark-theme .badge-soft-warning { background-color: rgba(255,214,10,0.25); color: #ffdf70; }
.dark-theme .badge-soft-danger { background-color: rgba(255,59,48,0.25); color: #ff8a80; }
.dark-theme .badge-soft-info { background-color: rgba(100,210,255,0.25); color: #a5e8ff; }
.dark-theme .badge-soft-secondary { background-color: rgba(142,142,147,0.25); color: #aeaeb2; }

/* Sidebar nav hover for subtle emphasis */
.nav-link:hover,
.submenu-link:hover {
  background-color: rgba(10, 132, 255, 0.08);
}

.submenu-link.active,
.nav-link.active {
  background-color: rgba(10, 132, 255, 0.12);
}

/* Footer */
footer-dois {
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--border-light);
}

.dark-theme footer-dois {
  background-color: rgba(28, 28, 30, 0.6);
  border-top: 1px solid var(--border-dark);
}

/* Footer text contrast adjustments */
.dark-theme footer-dois p,
.dark-theme footer-dois a,
.dark-theme footer-dois span {
  color: var(--text-dark) !important;
}

/* Skip to content (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 16px;
  top: 8px;
  width: auto;
  height: auto;
  z-index: 1100;
  background: var(--primary-color);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  outline: none;
}

/* Tooltip standardization */
.tooltip .tooltip-inner {
  background-color: rgba(0,0,0,0.85);
  border-radius: 8px;
  padding: 8px 10px;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: rgba(0,0,0,0.85); }
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(0,0,0,0.85); }
.dark-theme .tooltip .tooltip-inner { background-color: rgba(255,255,255,0.12); color: var(--text-dark); }
.dark-theme .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: rgba(255,255,255,0.12); }
.dark-theme .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(255,255,255,0.12); }

/* Improved text-muted contrast in dark theme */
.dark-theme .text-muted {
    color: #aeaeb2 !important;
}

.dark-theme .text-muted.small {
    color: #8e8e93 !important;
}

.dark-theme .form-text.text-muted {
    color: #8e8e93 !important;
}

/* bg-light fix in dark */
.dark-theme .bg-light { background-color: var(--card-bg-dark) !important; color: var(--text-dark) !important; }

/* Common utilities fixes in dark mode */
.dark-theme .bg-white { background-color: var(--card-bg-dark) !important; color: var(--text-dark) !important; }
.dark-theme .text-dark { color: var(--text-dark) !important; }
.dark-theme .text-body { color: var(--text-dark) !important; }
.dark-theme .border, .dark-theme .border-top, .dark-theme .border-end, .dark-theme .border-bottom, .dark-theme .border-start { border-color: var(--border-dark) !important; }

/* Dropdown menu adjustments in dark */
.dark-theme .dropdown-menu { background-color: var(--card-bg-dark); border-color: var(--border-dark); color: var(--text-dark); }

/* Tables (Bootstrap) */
.dark-theme .table { color: var(--text-dark); }
.dark-theme .table thead th { background-color: rgba(255,255,255,0.04); border-color: var(--border-dark); color: var(--text-dark); }
.dark-theme .table tbody td, 
.dark-theme .table tbody th { border-color: var(--border-dark); }
.dark-theme .table-striped>tbody>tr:nth-of-type(odd)>* { background-color: rgba(255,255,255,0.03); }
.dark-theme .table-hover>tbody>tr:hover>* { background-color: rgba(255,255,255,0.06); }

/* List group */
.dark-theme .list-group { --bs-list-group-color: var(--text-dark); --bs-list-group-bg: var(--card-bg-dark); --bs-list-group-border-color: var(--border-dark); }
.dark-theme .list-group-item { background-color: var(--card-bg-dark); color: var(--text-dark); border-color: var(--border-dark); }
.dark-theme .list-group-item.active { background-color: rgba(10,132,255,0.25); border-color: rgba(10,132,255,0.35); color: #e6f0ff; }
.dark-theme .list-group-item-action:hover, 
.dark-theme .list-group-item-action:focus { background-color: rgba(255,255,255,0.06); color: var(--text-dark); }

/* Modal */
.dark-theme .modal-content { background-color: var(--card-bg-dark); color: var(--text-dark); border: 1px solid var(--border-dark); }
.dark-theme .modal-header { border-bottom-color: var(--border-dark); }
.dark-theme .modal-footer { border-top-color: var(--border-dark); }
.dark-theme .modal-backdrop.show { background-color: rgba(0,0,0,0.6); }

/* Popover */
.dark-theme .popover { background-color: var(--card-bg-dark); border-color: var(--border-dark); color: var(--text-dark); }
.dark-theme .popover-header { background-color: rgba(255,255,255,0.06); border-bottom-color: var(--border-dark); color: var(--text-dark); }
.dark-theme .popover-body { color: var(--text-dark); }
.dark-theme .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, 
.dark-theme .bs-popover-top>.popover-arrow::after { border-top-color: var(--card-bg-dark); }

/* Offcanvas */
.dark-theme .offcanvas, 
.dark-theme .offcanvas-body { background-color: var(--card-bg-dark); color: var(--text-dark); }
.dark-theme .offcanvas-header { border-bottom: 1px solid var(--border-dark); }

/* Breadcrumbs */
.breadcrumb { --bs-breadcrumb-divider-color: var(--secondary-color); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--secondary-color); }

/* Global overlays/spinners should invert background in dark mode */
.dark-theme #global-spinner,
.dark-theme #processing-overlay,
.dark-theme .theme-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
}

/* Select2 (if present) dark adjustments */
.dark-theme .select2-container--default .select2-selection--single {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}
.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-dark);
}
.dark-theme .select2-dropdown {
  background-color: var(--card-bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}