/* ==========================================================================
   The Gause Clan (TGC) Brand Theme for Tandoor Recipes
   Brand Palette:
     - TGC Azure / Primary : #02a4f7  (rgb: 2, 164, 247)
     - TGC Purple / Indigo : #5215b9  (rgb: 82, 21, 185)
     - TGC Orange / Warm   : #f67300  (rgb: 246, 115, 0)
     - TGC Pink / Accent   : #fe0084  (rgb: 254, 0, 132)
     - TGC Lime / Fresh    : #72ba00  (rgb: 114, 186, 0)
     - Dark Slate / Navbar : #18181b
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root Variables (Bootstrap 4 & Vuetify 3 compatibility)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Core */
  --tgc-blue: #02a4f7;
  --tgc-blue-dark: #008cd6;
  --tgc-purple: #5215b9;
  --tgc-purple-dark: #410fa0;
  --tgc-orange: #f67300;
  --tgc-orange-dark: #d96200;
  --tgc-pink: #fe0084;
  --tgc-green: #72ba00;
  --tgc-green-dark: #5e9c00;

  /* Bootstrap Variables */
  --primary: #02a4f7;
  --secondary: #5215b9;
  --success: #72ba00;
  --info: #02a4f7;
  --warning: #f67300;
  --danger: #fe0084;

  /* Vuetify Theme RGB Variables */
  --v-theme-primary: 2, 164, 247;
  --v-theme-primary-darken-1: 0, 140, 214;
  --v-theme-secondary: 82, 21, 185;
  --v-theme-secondary-darken-1: 65, 15, 160;
  --v-theme-success: 114, 186, 0;
  --v-theme-warning: 246, 115, 0;
  --v-theme-error: 254, 0, 132;
  --v-theme-info: 2, 164, 247;
  --v-theme-tandoor: 2, 164, 247;
  --v-theme-save: 114, 186, 0;
  --v-theme-create: 114, 186, 0;
  --v-theme-edit: 2, 164, 247;
  --v-theme-delete: 254, 0, 132;
  --v-theme-cancel: 246, 115, 0;
}

/* --------------------------------------------------------------------------
   2. Modern Navbar & Brand Header
   -------------------------------------------------------------------------- */
#id_main_nav.navbar {
  background-color: #18181b !important;
  border-bottom: 2px solid rgba(2, 164, 247, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0.35rem 1rem;
  transition: all 0.25s ease-in-out;
}

#id_main_nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 1.25rem;
}

#id_main_nav .navbar-brand .brand-icon {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease-in-out;
}

#id_main_nav .navbar-brand .brand-icon:hover {
  transform: scale(1.03);
}

#id_main_nav .nav-link {
  color: #e4e4e7 !important;
  font-weight: 500;
  font-size: 0.925rem;
  padding: 0.5rem 0.85rem !important;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#id_main_nav .nav-link:hover,
#id_main_nav .nav-item.active .nav-link {
  color: #ffffff !important;
  background-color: rgba(2, 164, 247, 0.15);
}

/* --------------------------------------------------------------------------
   3. Buttons & Interactive Controls
   -------------------------------------------------------------------------- */
/* Primary Buttons */
.btn-primary,
.v-btn--variant-flat.bg-primary,
.v-btn--variant-elevated.bg-primary {
  background-color: var(--tgc-blue) !important;
  border-color: var(--tgc-blue) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.v-btn--variant-flat.bg-primary:hover {
  background-color: var(--tgc-blue-dark) !important;
  border-color: var(--tgc-blue-dark) !important;
  box-shadow: 0 4px 12px rgba(2, 164, 247, 0.35) !important;
}

/* Secondary Buttons */
.btn-secondary,
.v-btn--variant-flat.bg-secondary {
  background-color: var(--tgc-purple) !important;
  border-color: var(--tgc-purple) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

.btn-secondary:hover {
  background-color: var(--tgc-purple-dark) !important;
  border-color: var(--tgc-purple-dark) !important;
  box-shadow: 0 4px 12px rgba(82, 21, 185, 0.35) !important;
}

/* Success / Save Buttons */
.btn-success,
.v-btn.bg-success,
.v-btn.bg-save,
.v-btn.bg-create {
  background-color: var(--tgc-green) !important;
  border-color: var(--tgc-green) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

.btn-success:hover {
  background-color: var(--tgc-green-dark) !important;
  border-color: var(--tgc-green-dark) !important;
  box-shadow: 0 4px 12px rgba(114, 186, 0, 0.35) !important;
}

/* Warning / Accent Buttons */
.btn-warning,
.v-btn.bg-warning,
.v-btn.bg-cancel {
  background-color: var(--tgc-orange) !important;
  border-color: var(--tgc-orange) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

/* Danger / Delete Buttons */
.btn-danger,
.v-btn.bg-danger,
.v-btn.bg-error,
.v-btn.bg-delete {
  background-color: var(--tgc-pink) !important;
  border-color: var(--tgc-pink) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

/* Focus Ring */
.btn:focus,
.form-control:focus,
.v-field--focused {
  box-shadow: 0 0 0 0.2rem rgba(2, 164, 247, 0.25) !important;
  border-color: var(--tgc-blue) !important;
}

/* --------------------------------------------------------------------------
   4. Links & Accents
   -------------------------------------------------------------------------- */
a {
  color: var(--tgc-blue);
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: var(--tgc-blue-dark);
  text-decoration: none;
}

.text-primary,
.v-theme--light .text-primary,
.v-theme--dark .text-primary {
  color: var(--tgc-blue) !important;
}

/* --------------------------------------------------------------------------
   5. Badges & Chips
   -------------------------------------------------------------------------- */
.badge-primary,
.v-chip.bg-primary {
  background-color: var(--tgc-blue) !important;
  color: #ffffff !important;
}

.badge-secondary,
.v-chip.bg-secondary {
  background-color: var(--tgc-purple) !important;
  color: #ffffff !important;
}

.badge-success,
.v-chip.bg-success {
  background-color: var(--tgc-green) !important;
  color: #ffffff !important;
}

.badge-warning,
.v-chip.bg-warning {
  background-color: var(--tgc-orange) !important;
  color: #ffffff !important;
}

.badge-danger,
.v-chip.bg-danger {
  background-color: var(--tgc-pink) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. Recipe Cards & Elevation
   -------------------------------------------------------------------------- */
.card,
.v-card {
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.card:hover,
.v-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   7. AI & Special Badges
   -------------------------------------------------------------------------- */
.ai-action-btn,
button[aria-label*="AI"] {
  background: linear-gradient(135deg, var(--tgc-blue) 0%, var(--tgc-purple) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}