/* Sky Theme CSS - Alternative color scheme */

/* ── Override Tailwind brand color utilities ───────────────────── */
.bg-brand-500,
.bg-brand-500\/10,
.bg-brand-500\/15,
.bg-brand-500\/20,
.bg-brand-500\/30,
.bg-brand-500\/40,
.bg-brand-500\/50 {
  background-color: #0ea5e9 !important;
}

.bg-brand-600 {
  background-color: #0284c7 !important;
}

.bg-brand-400 {
  background-color: #38bdf8 !important;
}

.bg-brand-900 {
  background-color: #0c4a6e !important;
}

/* Text color - include both formats for Tailwind compatibility */
.text-brand-500 {
  color: #0ea5e9 !important;
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
}

.text-brand-400 {
  color: #38bdf8 !important;
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1)) !important;
}

.text-brand-600 {
  color: #0284c7 !important;
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1)) !important;
}

.text-brand-500\/50 {
  color: rgba(14, 165, 233, 0.5) !important;
}

.border-brand-500 {
  border-color: #0ea5e9 !important;
}

.border-brand-400 {
  border-color: #38bdf8 !important;
}

.border-brand-600 {
  border-color: #0284c7 !important;
}

.border-brand-500\/20 {
  border-color: rgba(14, 165, 233, 0.2) !important;
}

.border-brand-500\/30 {
  border-color: rgba(14, 165, 233, 0.3) !important;
}

.ring-brand-500 {
  --tw-ring-color: #0ea5e9 !important;
}

.ring-brand-400 {
  --tw-ring-color: #38bdf8 !important;
}

/* Brand-500 with opacity */
.bg-brand-500\/5 {
  background-color: rgba(14, 165, 233, 0.05) !important;
}
.bg-brand-500\/10 {
  background-color: rgba(14, 165, 233, 0.1) !important;
}

.bg-brand-500\/15 {
  background-color: rgba(14, 165, 233, 0.15) !important;
}

.bg-brand-500\/20 {
  background-color: rgba(14, 165, 233, 0.2) !important;
}

.bg-brand-500\/30 {
  background-color: rgba(14, 165, 233, 0.3) !important;
}

.bg-brand-500\/40 {
  background-color: rgba(14, 165, 233, 0.4) !important;
}

/* Gradient overrides - from/via/to brand colors */
.from-brand-500 {
  --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(59,130,246, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-brand-500 {
  --tw-gradient-to: rgba(59,130,246, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgba(59,130,246, 1) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-brand-500 {
  --tw-gradient-to: #0ea5e9 !important;
}

.from-brand-500\/5 {
  --tw-gradient-from: rgba(14, 165, 233, 0.05) !important;
}

.from-brand-500\/10 {
  --tw-gradient-from: rgba(14, 165, 233, 0.1) !important;
}

.from-brand-500\/20 {
  --tw-gradient-from: rgba(14, 165, 233, 0.2) !important;
}

/* Additional gradient overrides */
.from-brand-400 {
  --tw-gradient-from: #38bdf8 !important;
}

.to-brand-600 {
  --tw-gradient-to: #0284c7 !important;
}

.from-brand-400\/5 {
  --tw-gradient-from: rgba(96, 165, 250, 0.05) !important;
}

.to-brand-400 {
  --tw-gradient-to: #38bdf8 !important;
}

.via-brand-400 {
  --tw-gradient-via: #38bdf8 !important;
}

/* Border with opacity */
.border-brand-500\/50 {
  border-color: rgba(14, 165, 233, 0.5) !important;
}

/* Shadow overrides */
.shadow-brand-500\/25 {
  --tw-shadow-color: rgba(14, 165, 233, 0.25) !important;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-brand-500\/50 {
  --tw-shadow-color: rgba(14, 165, 233, 0.5) !important;
  --tw-shadow: var(--tw-shadow-colored);
}

/* Group hover states */
.group:hover .group-hover\\:text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
}

.group:hover .group-hover\\:text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1)) !important;
}

/* Custom color theme support using CSS variables */
.theme-custom .bg-brand-500,
.theme-custom.bg-brand-500 {
  background-color: var(--brand-500) !important;
}

.theme-custom .text-brand-500,
.theme-custom.text-brand-500 {
  color: var(--brand-500) !important;
}

.theme-custom .border-brand-500,
.theme-custom.border-brand-500 {
  border-color: var(--brand-500) !important;
}

.theme-custom .toggle-switch .indicator {
  background-color: var(--brand-500) !important;
}

.theme-custom .toggle-switch.active {
  background-color: var(--brand-500) !important;
}

/* ── Brand color override (CSS variable) ─────────────────────── */
:root {
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-900: #0c4a6e;
  --brand-500-rgb: 14, 165, 233;
  --brand-600-rgb: 2, 132, 199;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: #0ea5e9;
}

::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* ── Glass Panel ─────────────────────────────────────────────── */
.glass-panel,
.product-card,
.swal2-popup,
.server-card {
  border-color: rgba(14, 165, 233, 0.2);
}

.glass-panel:hover {
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.15) 0%,
    rgba(24, 24, 27, 0.8) 100%
  );
}

/* ── Nav Items ─────────────────────────────────────────────── */
.nav-item.active i {
  color: #0ea5e9 !important;
}

.nav-item.active .icon-container::before {
  background: #0ea5e9;
}

/* ── Buttons ───────────────────────────────────────────────── */
.button-primary:hover,
.btn-primary:hover {
  background-color: #0284c7 !important;
}

.search-focus:focus-within {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.5);
  border-color: #0ea5e9;
}

/* ── Active Tab Styles ─────────────────────────────────────── */
.tab-btn.active,
.bg-brand-600 {
  background-color: #0ea5e9 !important;
}

/* ── Progress Bars ─────────────────────────────────────────── */
.bg-gradient-to-r.from-amber-500.to-brand-500 {
  background: linear-gradient(to right, #f59e0b, #0ea5e9);
}

/* Toggle Switch ─────────────────────────────────────────── */
.toggle-switch.active {
  background-color: #0ea5e9 !important;
  border-color: #0284c7 !important;
}

.toggle-switch .indicator {
  background-color: #0ea5e9 !important;
}

/* ── Body Glow Effects ─────────────────────────────────────── */
body::before {
    box-shadow:
    50vw 5vh 120px 48px rgba(14, 165, 233, 0.6),
    15vw 90vh 80px 30px rgba(14, 165, 233, 0.4),
    85vw 50vh 55px 18px rgba(14, 165, 233, 0.28);
}

/* ── Shimmer Animation ─────────────────────────────────────── */
.nav-item.active::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(14, 165, 233, 0.15),
    transparent
  );
}

/* ── Missing Tailwind opacity variants ─────────────────────── */
.border-brand-500\/15 {
  border-color: rgba(14, 165, 233, 0.15) !important;
}
.border-brand-500\/40 {
  border-color: rgba(14, 165, 233, 0.4) !important;
}
.border-brand-500\/60 {
  border-color: rgba(14, 165, 233, 0.6) !important;
}
.border-brand-400\/30 {
  border-color: rgba(96, 165, 250, 0.3) !important;
}
.border-brand-400\/20 {
  border-color: rgba(96, 165, 250, 0.2) !important;
}

.text-brand-400\/60 {
  color: rgba(96, 165, 250, 0.6) !important;
}
.text-brand-500\/60 {
  color: rgba(14, 165, 233, 0.6) !important;
}
.text-brand-500\/80 {
  color: rgba(14, 165, 233, 0.8) !important;
}

.bg-brand-500\/3 {
  background-color: rgba(14, 165, 233, 0.03) !important;
}
.bg-brand-500\/8 {
  background-color: rgba(14, 165, 233, 0.08) !important;
}
.bg-brand-500\/25 {
  background-color: rgba(14, 165, 233, 0.25) !important;
}
.bg-brand-500\/50 {
  background-color: rgba(14, 165, 233, 0.5) !important;
}
.bg-brand-600\/20 {
  background-color: rgba(2, 132, 199, 0.2) !important;
}
.bg-brand-900\/20 {
  background-color: rgba(30, 58, 138, 0.2) !important;
}
.bg-brand-950\/20 {
  background-color: rgba(23, 37, 84, 0.2) !important;
}

.shadow-brand-500\/10 {
  --tw-shadow-color: rgba(14, 165, 233, 0.1) !important;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-500\/20 {
  --tw-shadow-color: rgba(14, 165, 233, 0.2) !important;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-900\/20 {
  --tw-shadow-color: rgba(30, 58, 138, 0.2) !important;
  --tw-shadow: var(--tw-shadow-colored);
}

/* Gradient with opacity */
.from-brand-500\/5 {
  --tw-gradient-from: rgba(14, 165, 233, 0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(14, 165, 233, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-500\/10 {
  --tw-gradient-from: rgba(14, 165, 233, 0.1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(14, 165, 233, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-500\/15 {
  --tw-gradient-from: rgba(14, 165, 233, 0.15) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(14, 165, 233, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-950\/20 {
  --tw-gradient-from: rgba(23, 37, 84, 0.2) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(23, 37, 84, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-400\/5 {
  --tw-gradient-from: rgba(96, 165, 250, 0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(96, 165, 250, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-brand-500\/50 {
  --tw-gradient-to: rgba(59,130,246, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgba(59,130,246, 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
/* Hover border variants */
.hover\:border-brand-500\/30:hover {
  border-color: rgba(14, 165, 233, 0.3) !important;
}
.hover\:border-brand-500\/20:hover {
  border-color: rgba(14, 165, 233, 0.2) !important;
}
.group:hover .group-hover\:border-brand-500\/30 {
  border-color: rgba(14, 165, 233, 0.3) !important;
}

/* ── Tab / pill active states (page-specific custom classes) ── */
.tab-active {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: white !important;
}

.tab-btn.active {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.95) 0%,
    rgba(2, 132, 199, 0.95) 100%
  ) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  box-shadow:
    0 6px 25px -4px rgba(14, 165, 233, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.time-pill.active,
.time-pill:hover {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.25) 0%,
    rgba(14, 165, 233, 0.15) 100%
  ) !important;
  border-color: rgba(14, 165, 233, 0.6) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.35) !important;
}

/* ── Section divider lines ─────────────────────────────────── */
.sec-div::before,
.sec-div::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(14, 165, 233, 0.3),
    transparent
  ) !important;
}

/* ── Brand-tinted card border top line (inline gradient) ───── */
/* Overrides hardcoded via-brand-500/50 in inline style gradients */
[class*="via-brand-500"] {
  --tw-gradient-via: rgba(14, 165, 233, 0.5) !important;
}
[class*="from-brand-500"] {
  --tw-gradient-from: #0ea5e9 !important;
}

/* ── Inline bg-gradient-to-br from-brand-500/5 ─────────────── */
.bg-gradient-to-br.from-brand-500\/5 {
  --tw-gradient-from: rgba(14, 165, 233, 0.05) !important;
}

/* Missing utilities block 2 */

/* Transparent gradient endpoints (from-brand-500/0, to-brand-500/0) */
.from-brand-500\/0 {
  --tw-gradient-from: rgba(14, 165, 233, 0) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(14, 165, 233, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-brand-500\/0 {
  --tw-gradient-to: rgba(14, 165, 233, 0) var(--tw-gradient-to-position) !important;
}
.to-brand-400\/0 {
  --tw-gradient-to: rgba(96, 165, 250, 0) var(--tw-gradient-to-position) !important;
}
.to-brand-500\/10 {
  --tw-gradient-to: rgba(14, 165, 233, 0.1) var(--tw-gradient-to-position) !important;
}
.to-brand-500\/20 {
  --tw-gradient-to: rgba(14, 165, 233, 0.2) var(--tw-gradient-to-position) !important;
}

/* Divide colour utilities */
.divide-brand-500\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(14, 165, 233, 0.05) !important;
}
.divide-brand-500\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(14, 165, 233, 0.1) !important;
}
.divide-brand-500\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(14, 165, 233, 0.2) !important;
}
.divide-brand-500\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(14, 165, 233, 0.3) !important;
}

/* Hover background opacity variants */
.hover\:bg-brand-500\/5:hover {
  background-color: rgba(14, 165, 233, 0.05) !important;
}
.hover\:bg-brand-500\/10:hover {
  background-color: rgba(14, 165, 233, 0.1) !important;
}
.hover\:bg-brand-500\/20:hover {
  background-color: rgba(14, 165, 233, 0.2) !important;
}
.hover\:bg-brand-500\/30:hover {
  background-color: rgba(14, 165, 233, 0.3) !important;
}

/* Hover text variants */
.hover\:text-brand-400:hover {
  color: rgba(96, 165, 250, 1) !important;
}
.hover\:text-brand-500:hover {
  color: rgba(14, 165, 233, 1) !important;
}

/* Hover border variants */
.hover\:border-brand-500\/40:hover {
  border-color: rgba(14, 165, 233, 0.4) !important;
}
.hover\:border-brand-500\/60:hover {
  border-color: rgba(14, 165, 233, 0.6) !important;
}

/* Focus ring */
.focus\:ring-brand-500:focus {
  --tw-ring-color: rgba(14, 165, 233, 1) !important;
}
.focus\:border-brand-500:focus {
  border-color: rgba(14, 165, 233, 1) !important;
}

/* Ring opacity variants */
.ring-brand-500\/20 {
  --tw-ring-color: rgba(14, 165, 233, 0.2) !important;
}
.ring-brand-500\/30 {
  --tw-ring-color: rgba(14, 165, 233, 0.3) !important;
}
.ring-brand-500\/50 {
  --tw-ring-color: rgba(14, 165, 233, 0.5) !important;
}

/* Additional bg-brand-600 opacity variants */
.bg-brand-600\/10 {
  background-color: rgba(2, 132, 199, 0.1) !important;
}
.bg-brand-600\/30 {
  background-color: rgba(2, 132, 199, 0.3) !important;
}
.hover\:bg-brand-600:hover {
  background-color: rgba(2, 132, 199, 1) !important;
}
.hover\:bg-brand-600\/80:hover {
  background-color: rgba(2, 132, 199, 0.8) !important;
}

/* Active state bg */
.active\:bg-brand-600:active {
  background-color: rgba(2, 132, 199, 1) !important;
}

/* Group hover text */
.group:hover .group-hover\:text-brand-500 {
  color: rgba(14, 165, 233, 1) !important;
}
.group:hover .group-hover\:via-brand-500 {
  --tw-gradient-via: rgba(14, 165, 233, 1) !important;
}

/* ── Sidebar brand tint ────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg, rgba(14,165,233,0.05) 0%, transparent 60%) !important;
}