/* ════════════════════════════════════════════════════════════ */
/* Design Tokens — Auto-generated by css_standardize.py       */
/* ════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css?family=Iceberg&display=swap");
:root {
    /* Font Size Scale */
    --fs-2xs: 0.65rem;
    --fs-xs: 0.7rem;
    --fs-sm: 0.75rem;
    --fs-body-sm: 0.8rem;
    --fs-body: 0.85rem;
    --fs-body-lg: 0.9rem;
    --fs-md: 1rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2rem;
    --fs-5xl: 3rem;

    /* Border Radius Scale */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;

    /* Glass/Overlay Opacity Scale */
    --glass-white-3: rgba(255, 255, 255, 0.03);
    --glass-white-5: rgba(255, 255, 255, 0.05);
    --glass-white-8: rgba(255, 255, 255, 0.08);
    --glass-white-10: rgba(255, 255, 255, 0.1);
    --glass-white-20: rgba(255, 255, 255, 0.2);
    --glass-white-30: rgba(255, 255, 255, 0.3);
    --glass-black-2: rgba(0, 0, 0, 0.02);
    --glass-black-3: rgba(0, 0, 0, 0.03);
    --glass-black-4: rgba(0, 0, 0, 0.04);
    --glass-black-5: rgba(0, 0, 0, 0.05);
    --glass-black-8: rgba(0, 0, 0, 0.08);
    --glass-black-10: rgba(0, 0, 0, 0.1);
    --glass-black-15: rgba(0, 0, 0, 0.15);
    --glass-black-20: rgba(0, 0, 0, 0.2);
    --glass-black-30: rgba(0, 0, 0, 0.3);

    /* Macro Nutrition Pill Colors */
    --bg-calories: rgba(245, 162, 68, 0.15);
    --bg-calories-text: #b5701a;
    --bg-protein: rgba(126, 128, 229, 0.15);
    --bg-protein-text: #4a4cb8;
    --bg-carbs: rgba(42, 166, 207, 0.15);
    --bg-carbs-text: #1a7a99;
    --bg-fat: rgba(255, 185, 7, 0.15);
    --bg-fat-text: #9a7000;
}

:root,
[data-bs-theme="light"] {
  --bs-blue: #3860a8;
  --bs-indigo: #676999;
  --bs-purple: #614cd3;
  --bs-primary: #3860a8;
  --bs-code-color: #224e9f;
  --list-group-active-bg: #4276d7;
  /* Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-dark: rgba(30, 30, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-blur: blur(20px);
    --glass-hover-bg: rgba(255, 255, 255, 0.15);
    --glass-hover-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-backdrop: rgba(255, 255, 255, 0.1);
    /* Card Specific Variables */
    --card-glass-bg: rgba(0, 0, 0, 0.08);
    --card-glass-bg-dark: rgba(30, 30, 30, 0.6);
    --card-border: rgba(255, 255, 255, 0.15);
    --card-border-dark: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    --card-shadow-dark: 0 12px 28px rgba(0, 0, 0, 0.3);
    --card-hover-transform: translateY(-1px);
    --card-hover-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    --card-hover-shadow-dark: 0 0 5px rgba(255, 255, 255, 0.5);
  
    /* Glow Effects */
    --glow-primary: 0 0 5px rgba(13, 110, 253, 0.3);
    --glow-primary-dark: 0 0 5px rgba(13, 110, 253, 0.4);
    --glow-success: 0 0 25px rgba(25, 135, 84, 0.3);
    --glow-warning: 0 0 25px rgba(255, 193, 7, 0.3);
    --glow-danger: 0 0 25px rgba(220, 53, 69, 0.3);
    --glow-info: 0 0 25px rgba(13, 202, 240, 0.3);
    --glow-teal: 0 0 25px rgba(32, 201, 151, 0.3);
    --glow-purple: 0 0 25px rgba(111, 66, 193, 0.3);
  
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-text: linear-gradient(90deg, #0d6efd, #0dcaf0);
    --gradient-overlay: linear-gradient(135deg,
          rgba(0, 0, 0, 0.05) 0%,
          transparent 50%,
          rgba(0, 0, 0, 0.02) 100%);
    
  
    /* Nutrition Colors */
    --nutrient-teal: #20c997;
    --nutrient-purple: #6f42c1;
    --meal-breakfast: #ffc107;
    --meal-lunch: #0d6efd;
    --meal-dinner: #198754;
    --meal-snack: #dc3545;
    --meal-purple: #6f42c1;
}

[data-bs-theme="dark"] {
  --bs-blue: #4c7bd2;
  --bs-indigo: #8689d1;
  --bs-purple: #7361d9;
  --bs-primary: #4c7bd2;
  --bs-code-color: #308be0;
  --list-group-active-bg: #8394e6;
  --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);
    --glass-shadow: var(--glass-shadow-dark);
    --glass-hover-bg: var(--glass-hover-bg-dark);
    --card-glass-bg: var(--card-glass-bg-dark);
    --card-border: var(--card-border-dark);
    --card-shadow: var(--card-shadow-dark);
    --card-hover-shadow: var(--card-hover-shadow-dark);
    --glow-primary: var(--glow-primary-dark);
    --gradient-overlay: linear-gradient(135deg,
          rgba(255, 255, 255, 0.05) 0%,
          transparent 50%,
          rgba(255, 255, 255, 0.02) 100%);

    /* Macro Nutrition Pill Colors - Dark */
    --bg-calories: rgba(245, 162, 68, 0.2);
    --bg-calories-text: #f5a244;
    --bg-protein: rgba(126, 128, 229, 0.2);
    --bg-protein-text: #a5a6f0;
    --bg-carbs: rgba(42, 166, 207, 0.2);
    --bg-carbs-text: #5ec4e0;
    --bg-fat: rgba(255, 185, 7, 0.2);
    --bg-fat-text: #ffca44;
}

.mdi {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

#select2-foodItemSearch-container,
#select2-editFoodItemSearch-container {
  display: flex;
  align-items: center;
}

#logoSvg {
  font-family: "Iceberg";
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Logo sizing - see also .navbar-logo below */
#logoOpen {
  width: 75px !important;
  height: auto;
}

#navbarNavDropdown {
  order: 3;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.navbar-nav .dropdown-menu .active .bi {
  display: block !important;
}

.navbar-nav .nav-item {
  margin: 1.5rem 0.25rem 0.25rem 0.25rem;
}

.cookie-alert {
  bottom: 30px;
  z-index: 1000;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
  overflow-x: hidden;
  min-height: 100vh;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

@media (max-width: 990px) {
  html {
    font-size: 16px;
  }

  #divZaNav {
    align-content: center;
    clear: both;
    text-align: center;
    float: left;
    width: 100%;
    display: inline-flex;
    margin-left: 10%;
    margin-right: 15%;
  }

  .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    border-radius: 5px;
  }

  #itemNav {
    border: 1px solid #879d9e;
    border-radius: var(--radius-md);
  }

  [data-bs-theme="dark"] .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    color: #cacacade !important;
    background-color: #3a3e47de !important;
  }

  [data-bs-theme="light"] .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    color: #3a3e47de !important;
    background-color: #cacacade !important;
  }

  #logoLink {
    clear: both;
    margin-left: 5%;
    margin-right: 5%;
  }

  .navbar-nav .nav-item {
    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
  }

  .cookie-alert {
    left: 5%;
    right: 5%;
    transform: none;
  }

  #navbarNavDropdown {
    order: 4;
  }
}

.navbar {
  padding: 0 0 0 0 !important;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

/* Custom CSS for navbar toggle icon animation */


.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.navbar-toggler span {
  display: block;
  background-color: black;
  height: 3px;
  width: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
  border-radius: 1.5px;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    left: -2rem;
  }
}

[data-bs-theme="dark"] .navbar-toggler span {
  background-color: var(--bs-teal);
}

[data-bs-theme="light"] .navbar-toggler span {
  background-color: var(--bs-indigo);
}

/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
  margin-top: 0.3em;
}

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
  transform: translate(15%, -33%) rotate(45deg);
}

/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}

/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: translate(15%, 33%) rotate(-45deg);
}

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler.collapsed span:nth-child(1) {
  transform: translate(0%, 0%) rotate(0deg);
}

/* middle line goes back to regular color and opacity */
.navbar-toggler.collapsed span:nth-child(2) {
  opacity: 1;
}

/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler.collapsed span:nth-child(3) {
  transform: translate(0%, 0%) rotate(0deg);
}
/* Modern Navbar Styles */
#header {
  position: relative;
  z-index: 1030;
}

.navbar {
  padding: 0.5rem 1rem !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
}

[data-bs-theme="dark"] .navbar {
  box-shadow: 0 4px 10px var(--glass-black-15);
}

/* Logo styling */
.navbar-logo {
  width: 110px !important;
  height: auto;
  transition: transform 0.3s ease;
}

.navbar-brand:hover .navbar-logo {
  transform: scale(1.05);
}

/* Remove the order properties since we're not using the closing logo anymore */
#navbarNavDropdown {
  order: initial;
}

/* Clean up nav items */
.navbar-nav .nav-item {
  margin: 0.5rem 0.25rem;
}

/* Nav links styling */
.navbar-nav .nav-link {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all 0.2s ease-out;
}

/* Dark theme active/hover states */
[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  background-color: rgba(32, 201, 151, 0.1);
  color: var(--bs-teal) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active {
  background-color: rgba(32, 201, 151, 0.15);
  color: var(--bs-teal) !important;
  font-weight: 500;
}

/* Light theme active/hover states */
[data-bs-theme="light"] .navbar-nav .nav-link:hover {
  background-color: rgba(70, 145, 202, 0.1);
  color: var(--bs-blue) !important;
}

[data-bs-theme="light"] .navbar-nav .nav-link.active {
  background-color: rgba(70, 145, 202, 0.15);
  color: var(--bs-blue) !important;
  font-weight: 500;
}

/* Dropdown menu styling */
.dropdown-menu {
  min-width: 150px;
  padding: 0.75rem 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 15px var(--glass-black-10);
  border: none;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bs-dark);
  box-shadow: 0 5px 15px var(--glass-black-15);
}

.dropdown-item {
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.dropdown-header {
  color: var(--bs-secondary);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: rgba(32, 201, 151, 0.1);
}

[data-bs-theme="light"] .dropdown-item:hover {
  background-color: rgba(70, 145, 202, 0.1);
}

.dropdown-item i {
  transition: transform 0.2s ease;
}

.dropdown-item:hover i {
  transform: translateX(3px);
}

/* Theme toggler styling */
.theme-toggle-desktop,
.theme-toggle-mobile {
  margin-left: 0.5rem;
}

#bd-theme,
#bd-theme-mobile {
  border-radius: var(--radius-md);
  padding: 0.5rem !important;
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] #bd-theme:hover,
[data-bs-theme="dark"] #bd-theme-mobile:hover {
  background-color: rgba(32, 201, 151, 0.1);
}

[data-bs-theme="light"] #bd-theme:hover,
[data-bs-theme="light"] #bd-theme-mobile:hover {
  background-color: rgba(70, 145, 202, 0.1);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 1rem 0;
    overflow-y: auto;
  }

  .navbar-nav .nav-item {
    margin: 0.25rem 0;
  }

  .dropdown-menu {
    border: none;
    box-shadow: none;
    padding: 0 0 0.5rem 1rem;
    margin-top: 0;
  }

  .dropdown-item {
    padding: 0.5rem 1rem;
  }

  .dropdown-divider {
    margin: 0.5rem 0;
  }

  /* Improved hamburger animation */
  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
  }

  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
  }
}
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  background-color: var(--bs-body-bg);
}

.text-color-grey-nav {
  color: #f0f8ff;
}

body {
  min-height: 100vh;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

browser {
  background-color: var(--bs-body-bg) !important;
}

tabbrowser tabpanels {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="light"] body {
  background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bs-teal) !important;
}

[data-bs-theme="light"] .navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bs-blue) !important;
}

main {
  min-height: 100vh;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 40px;
  /* Vertically center the text there */
}

[data-bs-theme="light"] .footer {
  color: var(--bs-dark);
  background-color: var(--bs-light);
}

[data-bs-theme="dark"] .footer {
  color: var(--bs-light);
  background-color: var(--bs-dark);
}

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

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

[data-bs-theme="dark"] .text-light-dark {
  color: var(--bs-light) !important;
}

[data-bs-theme="light"] .text-light-dark {
  color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .border-light-dark {
  border-color: var(--bs-light) !important;
}

[data-bs-theme="light"] .border-light-dark {
  border-color: var(--bs-dark) !important;
}

.text-color-white {
  color: white;
}

.border-transparent {
  border-color: transparent;
}

.border-radius-15px {
  border-radius: 15px;
}

.background-color-transparent {
  background-color: transparent;
}

.font-color-light-blue {
  color: #7cc7ff;
}

.font-color-black {
  color: #000000;
}

.font-color-white {
  color: #ffffff;
}

.font-color-blue-linkedin {
  color: #0a66c2;
}

.font-color-blue-facebook {
  color: #2d88ff;
}

.background-color-dark-grey {
  background-color: #585858;
}

.margin-top-30 {
  margin-top: 30%;
}

margin-left-30 {
  margin-left: 30%;
}

.input-convert {
  border-radius: 5px;
  line-height: 2;
  border-color: #1b6ec2;
  background-color: transparent;
  color: #d6dde5;
}

.border-bottom-white-1px {
  border-bottom: 1px solid white;
}

.border-left-white-1px {
  border-left: 1px solid white;
}

.border-bottom-white-2px {
  border-bottom: 2px solid white;
}

.border-bottom-white-3px {
  border-bottom: 3px solid white;
}

.border-dark-2px-radius-5px {
  border: 2px solid #343a40 !important;
  border-radius: 5px !important;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.show-project-description {
  line-height: 1.5em;
  height: auto;
}

[data-bs-theme="dark"] .text-light-gray {
  color: #cacaca !important;
}

[data-bs-theme="light"] .text-light-gray {
  color: var(--bs-secondary) !important;
}


[data-bs-theme="dark"] .show-more-btn {
  color: var(--bs-teal);
  border: 1px solid var(--bs-teal) !important;
}

[data-bs-theme="dark"] .show-more-btn:hover {
  color: var(--bs-dark);
  background-color: var(--bs-teal);
  border: 1px solid var(--bs-dark) !important;
}

[data-bs-theme="light"] .show-more-btn {
  color: var(--bs-blue);
  border: 1px solid var(--bs-blue) !important;
}

[data-bs-theme="light"] .show-more-btn:hover {
  color: var(--bs-light);
  background-color: var(--bs-blue);
  border: 1px solid var(--bs-light) !important;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 10px;
  bottom: 10px;
  z-index: 99999;
  background: transparent;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 20px;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

[data-bs-theme="light"] .back-to-top.active {
  visibility: visible;
  opacity: 1;
  color: var(--bs-purple) !important;
  background-color: var(--bs-light) !important;
  border: 1px solid var(--bs-purple) !important;
}

[data-bs-theme="light"] .back-to-top.active:hover {
  color: var(--bs-light) !important;
  background-color: var(--bs-purple) !important;
  border: 1px solid var(--bs-light) !important;
}

[data-bs-theme="dark"] .back-to-top.active {
  visibility: visible;
  opacity: 1;
  color: var(--bs-teal) !important;
  background-color: var(--bs-dark) !important;
  border: 1px solid var(--bs-teal) !important;
}

[data-bs-theme="dark"] .back-to-top.active:hover {
  color: var(--bs-dark) !important;
  background-color: var(--bs-teal) !important;
  border: 1px solid var(--bs-dark) !important;
}

[data-bs-theme="dark"] .section-header h2 {
  color: var(--bs-teal) !important;
}

[data-bs-theme="dark"] .section-header p {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .section-header h2 {
  color: var(--bs-blue) !important;
}

[data-bs-theme="light"] .section-header p {
  color: var(--bs-secondary) !important;
}

[data-bs-theme="light"] .navbar-toggler {
  color: var(--bs-blue) !important;
  border-color: var(--bs-blue) !important;
}

[data-bs-theme="dark"] .navbar-toggler {
  color: var(--bs-teal) !important;
  border-color: var(--bs-teal) !important;
}

/*hero*/
[data-bs-theme="dark"] .hero h1 {
  color: var(--bs-teal);
  text-shadow: 2.5px 2.5px 5px var(--bs-black);
}

[data-bs-theme="light"] .hero h1 {
  color: var(--bs-blue);
  text-shadow: 2.5px 2.5px 5px var(--bs-dark-border-subtle);
}

[data-bs-theme="dark"] .hero .btn-get-started {
  color: var(--bs-dark);
  background-color: var(--bs-teal);
  box-shadow: 0px 5px 10px rgba(13, 202, 240, 0.4);
}

[data-bs-theme="light"] .hero .btn-get-started {
  color: var(--bs-light);
  background-color: var(--bs-blue);
  box-shadow: 0px 5px 10px rgba(102, 16, 242, 0.4);
}

[data-bs-theme="dark"] .section-background {
  background-color: rgba(var(--bs-dark-rgb), 0.9) !important;
}

[data-bs-theme="light"] .section-background {
  background-color: rgba(var(--bs-light-rgb), 0.9) !important;
}

/*about*/
[data-bs-theme="dark"] .about h2 {
  color: var(--bs-teal);
}

[data-bs-theme="light"] .about h2 {
  color: var(--bs-blue);
}

[data-bs-theme="dark"] .about h3 {
  color: var(--bs-light);
}

[data-bs-theme="light"] .about h3 {
  color: var(--bs-dark);
}

[data-bs-theme="dark"] .about p {
  color: var(--bs-secondary);
}

[data-bs-theme="light"] .about p {
  color: var(--bs-secondary);
}

[data-bs-theme="dark"] .about .btn-read-more {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  box-shadow: 0px 5px 25px rgba(var(--bs-info-rgb), 0.3);
}

[data-bs-theme="light"] .about .btn-read-more {
  color: var(--bs-light);
  background-color: var(--bs-blue);
  box-shadow: 0px 5px 25px rgba(var(--bs-dark-rgb), 0.3);
}

/*features*/
[data-bs-theme="dark"] .features .feature-box {
  box-shadow: 0px 0 30px rgba(var(--bs-info-rgb), 0.1) !important;
}

[data-bs-theme="dark"] .features .feature-box h3 {
  color: var(--bs-info) !important;
}

[data-bs-theme="dark"] .features .feature-box i {
  background-color: var(--bs-dark) !important;
  color: var(--bs-info) !important;
}

[data-bs-theme="dark"] .features .feature-box:hover {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme="light"] .features .feature-box {
  box-shadow: 0px 0 30px rgba(var(--bs-primary-rgb), 0.1) !important;
}

[data-bs-theme="light"] .features .feature-box h3 {
  color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .features .feature-box i {
  background-color: var(--bs-light) !important;
  color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .features .feature-box:hover {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme="dark"] .services .service-box {
  border-bottom: 3px solid var(--bs-teal) !important;
}

[data-bs-theme="dark"] .services .service-box h3 {
  color: var(--bs-teal) !important;
}

[data-bs-theme="dark"] .services .service-box p {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .services .service-box svg {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .services .service-box svg:hover {
  color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .services .service-box .read-more {
  color: var(--bs-teal) !important;
}

[data-bs-theme="dark"] .services .service-box:hover {
  background-color: var(--bs-teal) !important;
  color: var(--bs-dark) !important;
  transition: 0.2s all ease-out;
}

[data-bs-theme="dark"] .services .service-box:hover > a {
  color: var(--bs-primary-border-subtle) !important;
}

[data-bs-theme="dark"] .services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more,
.services .service-box:hover svg {
  color: var(--bs-dark) !important;
}

[data-bs-theme="light"] .services .service-box {
  border-bottom: 3px solid var(--bs-indigo) !important;
}

[data-bs-theme="light"] .services .service-box h3 {
  color: var(--bs-indigo) !important;
}

[data-bs-theme="light"] .services .service-box p {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .services .service-box svg {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .services .service-box svg:hover {
  color: var(--bs-light) !important;
}

[data-bs-theme="light"] .services .service-box .read-more {
  color: var(--bs-indigo) !important;
}

[data-bs-theme="light"] .services .service-box:hover {
  background-color: var(--bs-indigo) !important;
  color: var(--bs-light) !important;
  transition: 0.2s all ease-out;
}

[data-bs-theme="light"] .services .service-box:hover > a {
  color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme="light"] .services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more,
.services .service-box:hover svg {
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .border-circle-color {
  border: 1px solid var(--bs-light) !important;
}

[data-bs-theme="light"] .border-circle-color {
  border: 1px solid var(--bs-dark) !important;
}

[data-bs-theme="dark"] .btn-alcohol-type {
  border: 1px solid var(--bs-info) !important;
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

[data-bs-theme="dark"] .btn-alcohol-type:hover {
  border: 1px solid var(--bs-light) !important;
  background-color: var(--bs-dark);
  color: var(--bs-info);
}

[data-bs-theme="light"] .btn-alcohol-type {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

[data-bs-theme="light"] .btn-alcohol-type:hover {
  border: 1px solid var(--bs-dark) !important;
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

[data-bs-theme="dark"] .btn-drink-type {
  border: 1px solid var(--bs-teal) !important;
  background-color: var(--bs-dark);
  color: var(--bs-teal);
}

[data-bs-theme="dark"] .btn-drink-type:hover {
  border: 1px solid var(--bs-light) !important;
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

[data-bs-theme="light"] .btn-drink-type {
  border: 1px solid var(--bs-indigo) !important;
  background-color: var(--bs-light);
  color: var(--bs-indigo);
}

[data-bs-theme="light"] .btn-drink-type:hover {
  border: 1px solid var(--bs-dark) !important;
  background-color: var(--bs-indigo);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-my-drinks {
  border: 1px solid var(--bs-info) !important;
  background-color: var(--bs-dark);
  color: var(--bs-info);
}

[data-bs-theme="dark"] .btn-my-drinks:hover {
  border: 1px solid var(--bs-light) !important;
  background-color: var(--bs-info);
  color: var(--bs-dark);
}

[data-bs-theme="light"] .btn-my-drinks {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

[data-bs-theme="light"] .btn-my-drinks:hover {
  border: 1px solid var(--bs-dark) !important;
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-sort {
  border: 1px solid var(--bs-teal) !important;
  background-color: var(--bs-dark);
  color: var(--bs-teal);
}

[data-bs-theme="dark"] .btn-sort:hover {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-teal);
  color: var(--bs-dark);
}

[data-bs-theme="light"] .btn-sort {
  border: 1px solid var(--bs-indigo) !important;
  background-color: var(--bs-light);
  color: var(--bs-indigo);
}

[data-bs-theme="light"] .btn-sort:hover {
  border: 1px solid var(--bs-light) !important;
  background-color: var(--bs-indigo);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-outline-info-primary {
  border: 1px solid var(--bs-info) !important;
  background-color: var(--bs-dark);
  color: var(--bs-info);
}

[data-bs-theme="dark"] .btn-outline-info-primary:hover {
  border: 1px solid var(--bs-dark) !important;
  background-color: var(--bs-info);
  color: var(--bs-dark);
}

[data-bs-theme="light"] .btn-outline-info-primary {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

[data-bs-theme="light"] .btn-outline-info-primary:hover {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .btn-info-primary {
  border: 1px solid var(--bs-light) !important;
  background-color: var(--bs-info);
  color: var(--bs-dark);
}

[data-bs-theme="dark"] .btn-info-primary:hover {
  border: 1px solid var(--bs-info) !important;
  background-color: var(--bs-dark);
  color: var(--bs-info);
}

[data-bs-theme="light"] .btn-info-primary {
  border: 1px solid var(--bs-dark) !important;
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

[data-bs-theme="light"] .btn-info-primary:hover {
  border: 1px solid var(--bs-primary) !important;
  background-color: var(--bs-light);
  color: var(--bs-primary);
}

[data-bs-theme="dark"] .contact .info-box {
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg-subtle);
}

[data-bs-theme="dark"] .contact .info-box h3 {
  color: var(--bs-teal);
}

[data-bs-theme="light"] .contact .info-box {
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg-subtle);
}

[data-bs-theme="light"] .contact .info-box h3 {
  color: var(--bs-indigo);
}

.facebook-icon {
  color: #2e89ff !important;
}

.instagram-icon {
  color: #f49800 !important;
}

.linkedin-icon {
  color: #0a66c2 !important;
}

.twitter-icon {
  color: #1d9bf0 !important;
}

[data-bs-theme="dark"] .github-icon {
  color: var(--bs-light) !important;
}

[data-bs-theme="light"] .github-icon {
  color: var(--bs-dark) !important;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

/*textarea.form-control {
    height: 100px !important;
}*/
.btn {
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-modern {
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px var(--glass-black-20);
}

.btn-primary {
  background: rgba(var(--bs-primary-rgb), 0.3) !important;
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary:hover {
  background: rgba(var(--bs-primary-rgb), 0.5) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.3) !important;
  color: #fff;
}
.btn-outline-primary {
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-outline-primary:hover {
  background: rgba(var(--bs-primary-rgb), 0.5) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.3) !important;
  color: var(--bs-primary-text-emphasis);
}
.btn-details {
  background: rgba(var(--bs-sky-rgb), 0.3) !important;
  border-color: var(--bs-sky-border-subtle);
  color: var(--bs-secondary-text-emphasis);
}
[data-bs-theme="dark"] .btn-details {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="light"] .btn-details {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
.btn-details:hover {
  background: rgba(var(--bs-sky-rgb), 0.5) !important;
  border-color: rgba(var(--bs-sky-rgb), 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-sky-rgb), 0.3) !important;
  color: var(--bs-body-color);
}
.btn-duplicate {
  background: rgba(var(--bs-secondary-rgb), 0.3) !important;
  border-color: var(--bs-secondary-border-subtle);
  color: var(--bs-secondary-text-emphasis);
}

[data-bs-theme="dark"] .btn-duplicate {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="light"] .btn-duplicate {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-duplicate:hover {
  background: rgba(var(--bs-secondary-rgb), 0.5) !important;
  border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-secondary-rgb), 0.3) !important;
  color: var(--bs-body-color);
}
.buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--bs-border-radius);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.25rem;
  box-shadow: 0 1px 3px var(--glass-black-10);
}

.btn-hero {
  padding: 0.75rem 1.5rem;
  border-radius: 0.35rem;
  font-weight: 600;
  border: 2px solid var(--glass-white-30);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin-right: 0.5rem;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px var(--glass-black-20);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-secondary {
  background: var(--glass-backdrop);
  border-color: var(--glass-border);
  color: var(--bs-body-color);
}

.btn-outline-secondary:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-white-30);
  color: var(--bs-body-color);
  transform: translateY(-2px);
}
[data-bs-theme="dark"] .btn-default {
  border-color: var(--bs-teal) !important;
  background-color: transparent !important;
  color: var(--bs-teal) !important;
}

[data-bs-theme="dark"] .btn-default:hover {
  border-color: transparent !important;
  background-color: rgba(32, 201, 151, 0.15) !important;
}

[data-bs-theme="light"] .btn-default {
  border-color: var(--bs-purple) !important;
  background-color: transparent !important;
  color: var(--bs-purple);
}

[data-bs-theme="light"] .btn-default:hover {
  border-color: var(--bs-light) !important;
  background-color: var(--bs-purple) !important;
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .text-info-primary {
  color: var(--bs-info) !important;
}

[data-bs-theme="light"] .text-info-primary {
  color: var(--bs-primary) !important;
}

.page-link {
  border-radius: 0.25rem !important;
}

[data-bs-theme="light"] .page-link {
  border-color: var(--bs-indigo) !important;
  color: #62488c !important;
}

[data-bs-theme="dark"] .page-link {
  border-color: var(--bs-teal) !important;
  color: #5da686 !important;
}

[data-bs-theme="light"] .active > .page-link,
.page-link.active {
  background-color: #62488c !important;
  color: var(--bs-light) !important;
  font-weight: 600;
  box-shadow: 0 0.25rem 0.5rem rgb(98 72 140 / 40%) !important;
}

[data-bs-theme="dark"] .active > .page-link,
.page-link.active {
  background-color: #5da686 !important;
  color: var(--bs-dark) !important;
  font-weight: 600;
  box-shadow: 0 0.25rem 0.5rem rgb(94 166 134 / 40%) !important;
}

[data-bs-theme="light"] .dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-light) !important;
  background-color: var(--bs-indigo) !important;
}

[data-bs-theme="dark"] .dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dark) !important;
  background-color: var(--bs-teal) !important;
}

[data-bs-theme="light"] .btn-edit {
  border-color: var(--bs-primary-text-emphasis) !important;
  background-color: transparent !important;
  color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="light"] .btn-edit:hover {
  border-color: var(--bs-light) !important;
  background-color: var(--bs-primary-text-emphasis) !important;
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .btn-edit {
  border-color: var(--bs-primary-text-emphasis) !important;
  background-color: transparent !important;
  color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme="dark"] .btn-edit:hover {
  border-color: var(--bs-dark) !important;
  background-color: var(--bs-primary-text-emphasis) !important;
  color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .btn-copy {
  border-color: var(--bs-info-text-emphasis) !important;
  background-color: transparent !important;
  color: var(--bs-info-text-emphasis) !important;
}

[data-bs-theme="dark"] .btn-copy:hover {
  border-color: var(--bs-dark) !important;
  background-color: var(--bs-info-text-emphasis) !important;
  color: var(--bs-dark) !important;
}

[data-bs-theme="light"] .btn-copy {
  border-color: var(--bs-light) !important;
  background-color: var(--bs-info-text-emphasis) !important;
  color: var(--bs-light) !important;
}

[data-bs-theme="light"] .btn-copy:hover {
  border-color: var(--bs-info-text-emphasis) !important;
  background-color: var(--bs-light) !important;
  color: var(--bs-info-text-emphasis) !important;
}

.recipe-instructions {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-xs);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.recipe-instructions h5 {
  font-weight: 500;
  font-size: var(--fs-2xl);
}

.recipe-instructions p {
  padding: 0.5rem 1.5rem;
}

.link-inside-list-group {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-align: center;
}
 .btn-create {
  background: rgba(var(--bs-success-rgb), 0.3) !important;
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}
[data-bs-theme="dark"] .btn-create {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="light"] .btn-create {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-create:hover {
  background: rgba(var(--bs-success-rgb), 0.5) !important;
  border-color: rgba(var(--bs-success-rgb), 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-success-rgb), 0.3) !important;
}

[data-bs-theme="dark"] .btn-delete {
  border-color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .btn-delete:hover {
  border-color: var(--bs-danger-bg-subtle) !important;
  background-color: var(--bs-danger-text-emphasis) !important;
  color: var(--bs-danger-bg-subtle) !important;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--glass-black-10);
}

[data-bs-theme="light"] .btn-delete {
  border-color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="light"] .btn-delete:hover {
  border-color: var(--bs-danger-bg-subtle) !important;
  background-color: var(--bs-danger-text-emphasis) !important;
  color: var(--bs-danger-bg-subtle) !important;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--glass-black-10);
}


[data-bs-theme="dark"] .btn-favorite {
  border-color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .btn-favorite:hover {
  border-color: var(--bs-danger-bg-subtle) !important;
  background-color: var(--bs-danger-text-emphasis) !important;
  color: var(--bs-danger-bg-subtle) !important;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--glass-black-10);
}

[data-bs-theme="dark"] .btn-favorite.active {
  border-color: var(--bs-danger) !important;
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

[data-bs-theme="light"] .btn-favorite {
  border-color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="light"] .btn-favorite:hover {
  border-color: var(--bs-danger-bg-subtle) !important;
  background-color: var(--bs-danger-text-emphasis) !important;
  color: var(--bs-danger-bg-subtle) !important;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--glass-black-10);
}

[data-bs-theme="light"] .btn-favorite.active {
  border-color: var(--bs-danger) !important;
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23272e39' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #81c7b1;
  border-color: #272e39;
}
.border-radius-0 {
  border-radius: 0 !important;
}

[data-bs-theme="light"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2381c7b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="light"] .form-check-input:checked {
  background-color: #5a6d8b;
  border-color: #272e39;
}

[data-bs-theme="light"] .pagination {
  --pagination-bg: #ffffff;
  --pagination-hover: #dedede;
  --pagination-active: #1a94f1;
  --pagination-border: #d1d1d1;
  --pagination-shadow: rgba(0, 0, 0, 0.05);

  padding: 0.5rem;
  background: var(--pagination-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 0.25rem 0.375rem var(--pagination-shadow);
}

[data-bs-theme="dark"] .pagination {
  --pagination-bg: var(--bs-body-bg);
  --pagination-hover: #464646;
  --pagination-active: #1a94f1;
  --pagination-border: #b7b7b7;
  --pagination-shadow: rgba(255, 255, 255, 0.05);

  padding: 0.5rem;
  background: var(--pagination-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 0.25rem 0.375rem var(--pagination-shadow);
}

.pagination .page-item {
  margin: 0 0.125rem;
}

.pagination .page-link {
  border: 0.0625rem solid var(--pagination-border);
  background-color: transparent;
  color: #495057;
  min-width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem !important;
  padding: 0;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.pagination .page-link:hover:not(.active) {
  background-color: var(--pagination-hover);
  color: var(--pagination-active);
  border-color: var(--pagination-border);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem var(--pagination-shadow);
}

.pagination .page-item.active .page-link {
  background-color: var(--pagination-active);
  border-color: var(--pagination-active);
  color: white;
  font-weight: 600;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem rgba(13, 110, 253, 0.4);
  position: relative;
  z-index: 2;
  scale: 1.1;
}

.pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f8f9fa;
}

.pagination .dots {
  letter-spacing: 0.125rem;
  color: #6c757d;
  padding: 0 0.5rem;
  line-height: 2.5rem;
}

.pagination .page-link i {
  font-size: var(--fs-body);
}

.pagination .fa-circle-arrow-left,
.pagination .fa-circle-arrow-right,
.pagination .fa-backward-fast,
.pagination .fa-forward-fast {
  transition: transform 0.2s ease;
}

.pagination .page-link:hover:not(.disabled) i {
  transform: scale(1.2);
}

@media (max-width: 36rem) {
  .pagination {
    padding: 0.25rem;
  }

  .pagination .page-link {
    min-width: 2.188rem;
    height: 2.188rem;
    font-size: var(--fs-body);
  }

  .pagination .first-last {
    display: none;
  }

  .pagination-goto {
    display: none;
  }
}

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.pagination-info {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.pagination-info-separator {
  margin: 0 0.15rem;
}

.pagination-goto {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.pagination-goto-label {
  font-size: 0.8125rem;
}

.pagination-goto-input {
  width: 3.75rem;
  text-align: center;
  padding: 0.2rem 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
}

.pagination-goto-input::-webkit-inner-spin-button,
.pagination-goto-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  [data-content]:before {
    content: attr(data-content);
  }

  /* Force table to not be like tables anymore */
  .table-mobile-responsive,
  .table-mobile-responsive thead,
  .table-mobile-responsive tbody,
  .table-mobile-responsive th,
  .table-mobile-responsive td,
  .table-mobile-responsive tr {
    display: block;
  }

  .table-mobile-responsive.text-center {
    text-align: left !important;
  }

  .table-mobile-responsive caption {
    width: max-content;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .table-mobile-responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .table-mobile-responsive > :not(:first-child) {
    border-top: none;
  }

  .table-mobile-responsive > :not(caption) > * > * {
    border-color: var(--bs-border-color);
  }

  .table-mobile-responsive tr:not(.bg-light-blue) {
    border-bottom: 2px solid var(--bs-primary-border-subtle);
  }

  /* Default layout */
  .table-mobile-responsive td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .table-mobile-responsive td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    color: var(--bs-secondary);
  }

  /* Sided layout */
  .table-mobile-responsive.table-mobile-sided > :not(:first-child) {
    border-top: none;
  }

  .table-mobile-responsive.table-mobile-sided > :not(caption) > * > * {
    border-color: var(--bs-table-border-color);
  }

  .table-mobile-responsive.table-mobile-sided td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
    padding-left: 50%;
    padding-top: 0px !important;
    display: flex;
    justify-content: flex-end;
  }

  .table-mobile-responsive.table-mobile-sided td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    color: var(--bs-secondary);
  }

  /* Styleless */
  .table-mobile-responsive.table-mobile-styleless tr:not(.bg-light-blue) {
    border-bottom: none !important;
  }

  /* Stripped rows */
  .table-mobile-responsive.table-mobile-striped
    > tbody
    > tr:nth-of-type(odd)
    > * {
    background-color: var(--bs-secondary-bg-subtle) !important;
  }
}

.ingredients-table-item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 2rem;
  align-items: center;
  padding: 0.5rem 1rem 0.75rem 1rem;
  outline-offset: -0.35rem;
  outline: 0.15rem outset rgb(77, 120, 165);
}
.log-recipe-badge {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.log-snack-badge {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning);
}

.log-quick-badge {
  background-color: var(--bs-lime-bg-subtle);
  color: var(--bs-lime);
}

.log-drink-badge {
  background-color: var(--bs-sky-bg-subtle);
  color: var(--bs-sky);
}
#offcanvasNotifications {
  width: 100%;
  max-width: 400px;
}
/* Notification Bell Button */
.notification-bell-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
}

.notification-bell-btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.notification-bell-icon {
  font-size: var(--fs-2xl);
  color: var(--bs-body-color);
  transition: transform 0.3s ease;
}

.notification-bell-icon.ring {
  animation: bellRing 0.8s ease-in-out;
}

@keyframes bellRing {

  0%,
  100% {
    transform: rotate(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-10deg);
  }

  20%,
  40%,
  60%,
  80% {
    transform: rotate(10deg);
  }
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-danger);
  color: white;
  border-radius: var(--radius-md);
  border: 2px solid var(--bs-body-bg);
  transition: transform 0.2s ease;
}

.notification-badge.pulse {
  animation: badgePulse 0.5s ease-in-out;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }
}

/* Notification Offcanvas */
.notification-offcanvas {
  width: 420px !important;
  border-left: none;
}

[data-bs-theme="light"] .notification-offcanvas {
  background-color: #fafbfc;
  box-shadow: -4px 0 24px var(--glass-black-8);
}

[data-bs-theme="dark"] .notification-offcanvas {
  background-color: #1a1d21;
  box-shadow: -4px 0 24px var(--glass-black-30);
}

.notification-offcanvas-header {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.notification-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.notification-offcanvas-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
}

.notification-offcanvas-title i {
  color: var(--bs-primary);
}

/* Filter Row */
.notification-filter-row {
  margin-bottom: 0.75rem;
}

/* Notification Tabs */
.notification-tabs {
  display: flex;
  gap: 0.5rem;
}

.notification-tab {
  padding: 0.4rem 1rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-2xl);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.notification-tab:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
}

.notification-tab.active {
  background-color: var(--bs-primary);
  color: white;
}

.notification-tab-count {
  font-size: var(--fs-xs);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--glass-white-20);
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
}

.notification-tab:not(.active) .notification-tab-count {
  background-color: var(--bs-danger);
  color: white;
}

/* Type Filter */
.notification-type-select {
  font-size: var(--fs-body);
  border-radius: var(--radius-md);
}

[data-bs-theme="light"] .notification-type-select {
  background-color: #f0f2f5;
  border-color: transparent;
}

[data-bs-theme="dark"] .notification-type-select {
  background-color: #2a2d32;
  border-color: transparent;
}

.notification-type-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.notification-header-actions {
  display: flex;
  justify-content: flex-end;
}

.notification-mark-all {
  font-size: var(--fs-body-sm);
  color: var(--bs-primary);
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.notification-mark-all:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Notification Body */
.notification-offcanvas-body {
  padding: 0;
  height: calc(100% - 200px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notifications-list {
  padding: 0.5rem 0;
  flex: 1;
}

/* Date Headers */
.notification-date-header {
  padding: 0.75rem 1.25rem 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}

/* Notification Item */
.notification-item {
  position: relative;
  overflow: hidden;
  animation: slideIn 0.3s ease forwards;
  opacity: 0;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-item-inner {
  display: flex;
  padding: 1rem 1.25rem;
  gap: 0.875rem;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: transparent;
}

[data-bs-theme="light"] .notification-item-inner:hover {
  background-color: var(--glass-black-2);
}

[data-bs-theme="dark"] .notification-item-inner:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.notification-item.unread .notification-item-inner {
  background-color: rgba(var(--bs-primary-rgb), 0.04);
}

[data-bs-theme="dark"] .notification-item.unread .notification-item-inner {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* Notification Indicator */
.notification-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background-color: var(--notification-color, var(--bs-primary));
  border-radius: 0 3px 3px 0;
  transition: height 0.2s ease;
}

.notification-item.unread .notification-indicator {
  height: 60%;
}

/* Notification Icon */
.notification-icon-wrapper {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  --notification-color: var(--bs-primary);
}

.notification-icon-wrapper i {
  font-size: var(--fs-lg);
  color: var(--notification-color);
}

/* Notification Content */
.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.notification-title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.3;
}

.notification-item.unread .notification-title {
  font-weight: 700;
}

.notification-time {
  font-size: var(--fs-sm);
  color: var(--bs-secondary-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.notification-message {
  font-size: var(--fs-body);
  color: var(--bs-secondary-color);
  margin: 0 0 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Notification Actions */
.notification-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-link {
  font-size: var(--fs-body-sm);
  color: var(--bs-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.notification-link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.notification-buttons {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.notification-item-inner:hover .notification-buttons {
  opacity: 1;
}

.notification-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-action-btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

.notification-action-btn.delete-notification-btn:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
  color: var(--bs-danger);
}

/* Swipe Action */
.notification-swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background-color: var(--bs-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--fs-xl);
  transform: translateX(100%);
}

.notification-item.swiping .notification-swipe-action {
  transform: translateX(0);
}

/* Delete Animation */
.notification-item.deleting {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(-100%);
    height: 0;
    padding: 0;
    margin: 0;
  }
}

/* Read Animation */
.notification-item.read-animation .notification-indicator {
  animation: indicatorFade 0.3s ease forwards;
}

@keyframes indicatorFade {
  to {
    height: 0;
  }
}

/* Load More Button */
.notification-load-more {
  padding: 1rem 1.25rem;
  text-align: center;
}

.notification-load-more-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-bs-theme="light"] .notification-load-more-btn {
  background-color: #f0f2f5;
  border: none;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .notification-load-more-btn {
  background-color: #2a2d32;
  border: none;
  color: var(--bs-body-color);
}

.notification-load-more-btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

/* Empty State */
.notification-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  flex: 1;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

[data-bs-theme="light"] .empty-state-icon {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

[data-bs-theme="dark"] .empty-state-icon {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.empty-state-icon i {
  font-size: 2.5rem;
  color: var(--bs-primary);
}

.empty-state-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--bs-body-color);
}

.empty-state-text {
  font-size: var(--fs-body);
  color: var(--bs-secondary-color);
  margin: 0;
}

/* Loading Skeleton */
.notification-skeleton {
  display: flex;
  padding: 1rem 1.25rem;
  gap: 0.875rem;
}

.skeleton-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
}

.skeleton-title {
  height: 14px;
  width: 60%;
  border-radius: var(--radius-xs);
  margin-bottom: 0.75rem;
}

.skeleton-message {
  height: 12px;
  width: 100%;
  border-radius: var(--radius-xs);
  margin-bottom: 0.5rem;
}

.skeleton-message.short {
  width: 40%;
}

[data-bs-theme="light"] .skeleton-icon,
[data-bs-theme="light"] .skeleton-title,
[data-bs-theme="light"] .skeleton-message {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

[data-bs-theme="dark"] .skeleton-icon,
[data-bs-theme="dark"] .skeleton-title,
[data-bs-theme="dark"] .skeleton-message {
  background: linear-gradient(90deg, #2a2d32 25%, #3a3d42 50%, #2a2d32 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .notification-offcanvas {
    width: 100% !important;
  }

  .notification-buttons {
    opacity: 1;
  }

  .notification-item-inner {
    padding: 0.875rem 1rem;
  }

  .notification-icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .notification-title {
    font-size: var(--fs-body);
  }

  .notification-message {
    font-size: var(--fs-body-sm);
  }

  .notification-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .notification-tab {
    flex-shrink: 0;
  }
}

/* Scrollbar Styling */
.notification-offcanvas-body::-webkit-scrollbar {
  width: 6px;
}

.notification-offcanvas-body::-webkit-scrollbar-track {
  background: transparent;
}

[data-bs-theme="light"] .notification-offcanvas-body::-webkit-scrollbar-thumb {
  background-color: var(--glass-black-15);
  border-radius: 3px;
}

[data-bs-theme="dark"] .notification-offcanvas-body::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.notification-offcanvas-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.3);
}
.glass-card {
  background: var(--card-glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.glass-card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-shadow), var(--glow-primary);
  border-color: rgba(13, 110, 253, 0.3);
}

.glass-card:hover::before {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.05) 100%);
}

/* Card Image Section */
.glass-card .card-img-top {
  height: 15rem;
  min-height: 15rem;
  object-fit: contain;
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
  transition: transform 0.3s ease;
}

/* Image Overlay */
.glass-card .image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 1rem;
  z-index: 3;
  border-radius: 0 0 0.5rem 0.5rem;
}

.glass-card .image-overlay .badge {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--glass-white-20);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px var(--glass-black-20);
}

.nutrition-pills .badge {
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-white-20);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px var(--glass-black-20);
}

/* Type Badge */
.glass-card .type-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  backdrop-filter: blur(10px);
  background: var(--glass-white-20);
  border: 1px solid var(--glass-white-30);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  box-shadow: 0 4px 15px var(--glass-black-10);
  font-size: var(--fs-sm);
}

/* Card Body */
.glass-card .card-body {
  background: transparent;
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.glass-card .card-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Macro Badges */
.glass-card .macro-badges {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.glass-card .macro-badge .badge {
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-white-10);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-body);
  flex: 1;
  text-align: center;
  transition: all 0.3s ease;
}

.glass-card .macro-badge .badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--glass-black-15);
}

/* Time and Servings Info */
.glass-card .food-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-body-lg);
  color: var(--bs-body-color);
  opacity: 0.8;
  margin-bottom: 1rem;
}

.glass-card .food-meta i {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Contextual Alerts */
.glass-card .contextual-alert {
  background: rgba(25, 135, 84, 0.1);
  border: 1px solid rgba(25, 135, 84, 0.2);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-size: var(--fs-body);
  margin-top: auto;
  margin-bottom: 1rem;
  backdrop-filter: blur(5px);
}

/* Card Footer */
.glass-card .card-footer {
  background: var(--glass-white-3);
  border: none;
  border-top: 1px solid var(--glass-white-10);
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(5px);
}

.glass-card .card-footer .btn {
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.glass-card .card-footer .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.5s ease;
}

.glass-card .card-footer .btn:hover::before {
  left: 100%;
}

.glass-card .card-footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--glass-black-20);
}

.glass-card .card-footer .btn-sm {
  backdrop-filter: blur(10px);
  padding: 0.25rem 0.5rem;
  border-radius: 0.425rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
/* CSS-only fix for dropdown visibility in glass cards */
.glass-card:has(.dropdown-menu.show) {
  overflow: visible;
}

/* Fallback for browsers without :has() support */
.glass-card .dropdown-menu.show {
  position: fixed !important;
  z-index: 1050;
}

/* Alternative approach - target when dropdown button has 'show' class */
.glass-card:has(.dropdown .btn.show) {
  overflow: visible;
}

/* More specific targeting for the card containing an open dropdown */
.card.glass-card:has([aria-expanded="true"]) {
  overflow: visible;
}

/* Ensure dropdown menu styling matches glass theme */
.glass-card .dropdown-menu {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--glass-white-20);
  box-shadow: 0 8px 32px var(--glass-black-15);
  z-index: 1050;
}

/* Dark theme dropdown */
[data-bs-theme="dark"] .glass-card .dropdown-menu {
  background: rgba(30, 30, 30, 0.95);
  border-color: var(--glass-white-10);
}
/* Complete solution for dropdown visibility in grid layouts */
.list-item-card .dropdown-menu {
  position: fixed !important;
  z-index: 999999 !important;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--glass-white-20);
  box-shadow: 0 8px 32px var(--glass-black-15);
  pointer-events: auto !important;
  transform: none !important;
  will-change: transform;
}

/* Override Bootstrap's positioning */
.list-item-card .dropdown-menu.show {
  position: fixed !important;
  z-index: 999999 !important;
  margin: 0 !important;
}

/* Ensure dropdown items are clickable */
.list-item-card .dropdown-menu .dropdown-item {
  pointer-events: auto !important;
  position: relative;
  z-index: 999999;
}

/* Make sure the dropdown container doesn't clip */
.list-item-card .dropdown {
  position: static !important;
  z-index: 999999;
}

/* Override any Bootstrap column constraints */
.col-lg-6:has(.dropdown-menu.show) {
  z-index: 999999 !important;
  position: relative !important;
}

/* Alternative approach if :has() doesn't work */
.col-lg-6 .dropdown-menu.show {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Dark theme support */
[data-bs-theme="dark"] .list-item-card .dropdown-menu {
  background: rgba(30, 30, 30, 0.95) !important;
  border-color: var(--glass-white-10);
}

/* File Attachment Styles */
.file-attachment-container {
  position: relative;
}

.file-upload-area.drag-over {
  border-color: var(--bs-success);
  background-color: var(--bs-success-bg-subtle);
  transform: scale(1.02);
}

.file-upload-area.drag-drop-enabled {
  cursor: pointer;
}

.upload-content {
  pointer-events: none;
}

.upload-content .btn {
  pointer-events: all;
}

.file-upload-progress {
  margin-top: 1rem;
}

.file-preview-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  background-color: var(--bs-body-bg);
}

.file-preview-item {
  background-color: var(--bs-secondary-bg);
  transition: all 0.2s ease;
}

.file-preview-item:hover {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-primary) !important;
}

.file-icon {
  width: 32px;
  text-align: center;
  font-size: var(--fs-xl);
}

.file-info {
  overflow: hidden;
}

.file-name {
  font-weight: 500;
  font-size: var(--fs-body);
}

.file-actions {
  display: flex;
  gap: 0.25rem;
}

.file-remove-btn {
  opacity: 0.7;
}

.file-remove-btn:hover {
  opacity: 1;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .file-upload-area.drag-over {
  border-color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

[data-bs-theme="dark"] .file-preview-container {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .file-preview-item {
  background-color: rgba(var(--bs-light-rgb), 0.05);
}

[data-bs-theme="dark"] .file-preview-item:hover {
  background-color: rgba(var(--bs-light-rgb), 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .file-preview-container {
    max-height: 200px;
  }
}

/* Accessibility improvements */
.file-remove-btn:focus,
.file-actions .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Loading states */
.file-attachment-container.loading .file-upload-area {
  pointer-events: none;
  opacity: 0.6;
}

.file-attachment-container.loading .upload-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-primary);
  border-top: 2px solid transparent;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Comment attachments in task details */
.comment-attachments {
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

/* Time entry attachments */
.time-entry-attachments {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
}

.time-entry-attachments .file-attachment-item {
  padding: 0.5rem;
  font-size: var(--fs-body);
}

/* Markdown editor integration */
.markdown-editor-container+.file-attachment-container {
  margin-top: 0.75rem;
}

/* Task creation modal adjustments */
.modal-body .file-attachment-container {
  background-color: var(--bs-secondary-bg);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.modal-body .file-upload-area {
  border-style: solid;
  border-width: 1px;
  padding: 1.5rem 1rem;
}

/* Progress bar enhancements */
.file-upload-progress .progress {
  height: 0.5rem;
}

.file-upload-progress .progress-bar {
  transition: width 0.3s ease;
}

/* File type specific icons */
.file-icon .fa-file-pdf {
  color: #dc3545;
}

.file-icon .fa-file-word {
  color: #0d6efd;
}

.file-icon .fa-file-excel {
  color: #198754;
}

.file-icon .fa-file-powerpoint {
  color: #fd7e14;
}

.file-icon .fa-file-image {
  color: #0dcaf0;
}

.file-icon .fa-file-archive {
  color: #ffc107;
}

.file-icon .fa-markdown {
  color: #6f42c1;
}

/* Empty state styling */
.file-preview-container .text-muted {
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* Drag and drop visual feedback */
.file-upload-area.drag-drop-enabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: all 0.3s ease;
}

.file-upload-area.drag-over::after {
  background: linear-gradient(45deg,
      rgba(var(--bs-success-rgb), 0.1) 25%,
      transparent 25%,
      transparent 50%,
      rgba(var(--bs-success-rgb), 0.1) 50%,
      rgba(var(--bs-success-rgb), 0.1) 75%,
      transparent 75%,
      transparent);
  background-size: 20px 20px;
  animation: moveStripes 0.5s linear infinite;
}

@keyframes moveStripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 20px 20px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .file-preview-item {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

  .file-upload-area,
  .file-preview-item,
  .floating-timer {
    transition: none;
  }

  .file-upload-area.drag-over::after {
    animation: none;
  }

  @keyframes slideInUp {

    from,
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.file-attachments-container {
  margin: 0;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bs-light);
  transition: background-color 0.2s ease;
}

[data-bs-theme="dark"] .file-icon {
  background: var(--bs-dark);
}

.file-attachment-card .card-title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--bs-body-color);
}

.file-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-direction: column;
}

.file-actions .btn {
  font-size: var(--fs-body);
  transition: all 0.2s ease;
}

.download-file-btn:hover {
  transform: translateY(-1px);
}

.preview-file-btn:hover {
  transform: translateY(-1px);
}

.min-width-0 {
  min-width: 0;
}

.badge {
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

@media (max-width: 576px) {
  .file-actions {
    flex-direction: column;
  }

  .file-actions .btn {
    width: 100%;
  }
}

/* Loading spinner */
.loading-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-primary);
  border-top: 2px solid transparent;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* ========================================
   SEARCH & FILTER STYLES
   ======================================== */

.search-input-wrapper .search-glass-btn {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--bs-gray-600);
  z-index: 3;
}

.search-input-wrapper input {
  padding-left: 2.5rem;
}

.more-filters-button {
  position: relative;
}

.active-filter {
  display: inline-flex;
  align-items: center;
  background: var(--bs-light);
  border: 0.0625rem solid var(--bs-border-color);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  margin: 0.125rem;
  font-size: var(--fs-body);
  gap: 0.25rem;
}

.active-filter .remove-filter {
  color: var(--bs-danger);
  text-decoration: none;
  margin-left: 0.25rem;
  font-size: var(--fs-sm);
}

.active-filter .remove-filter:hover {
  color: var(--bs-danger);
  opacity: 0.7;
}

.quick-filter-btn {
  font-size: var(--fs-body);
  padding: 0.25rem 0.5rem;
}

.form-label.fw-semibold {
  font-size: var(--fs-body-lg);
  margin-bottom: 0.25rem;
}

.card-body.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .active-filter {
  background: var(--bs-dark);
  border-color: var(--bs-gray-600);
  color: var(--bs-light);
}

[data-bs-theme="dark"] .card.bg-light {
  background: var(--bs-gray-800) !important;
}

[data-bs-theme="dark"] .search-input-wrapper .search-glass-btn {
  color: var(--bs-gray-400);
}

/* ========================================
   GLOBAL SEARCH MODAL
   ======================================== */

.glass-modal {
  backdrop-filter: blur(1.25rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(180%);
  border: 0.0625rem solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1rem 3rem var(--glass-black-20);
}

[data-bs-theme="light"] .glass-modal {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .glass-modal {
  background: rgba(0, 0, 0, 0.25);
}

.search-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
}

[data-bs-theme="light"] .search-icon {
  color: var(--bs-primary);
}

[data-bs-theme="dark"] .search-icon {
  color: var(--bs-info);
}

.search-header-content input {
  flex: 1;
  font-size: var(--fs-lg);
}

.search-header-content input:focus {
  outline: none;
  box-shadow: none;
}

/* ========================================
   MODERN FILTER PILLS
   ======================================== */

.search-filter-tabs,
.favorites-filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--bs-border-color);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 0.0625rem solid;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

[data-bs-theme="light"] .filter-chip {
  color: var(--bs-body-color);
  border-color: rgba(0, 0, 0, 0.12);
  background: var(--glass-black-2);
}

[data-bs-theme="light"] .filter-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--bs-primary-rgb), 0.08);
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-bs-theme="light"] .filter-chip:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem var(--glass-black-8);
}

[data-bs-theme="light"] .filter-chip:hover::before {
  opacity: 1;
}

[data-bs-theme="light"] .filter-chip.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-primary-rgb), 0.3);
}

[data-bs-theme="light"] .filter-chip.active::before {
  display: none;
}

[data-bs-theme="dark"] .filter-chip {
  color: var(--bs-body-color);
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--glass-white-3);
}

[data-bs-theme="dark"] .filter-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--bs-info-rgb), 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-bs-theme="dark"] .filter-chip:hover {
  border-color: var(--bs-info);
  color: var(--bs-info);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem var(--glass-black-30);
}

[data-bs-theme="dark"] .filter-chip:hover::before {
  opacity: 1;
}

[data-bs-theme="dark"] .filter-chip.active {
  background: var(--bs-info);
  border-color: var(--bs-info);
  color: white;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-info-rgb), 0.4);
}

[data-bs-theme="dark"] .filter-chip.active::before {
  display: none;
}

.filter-chip i,
.filter-chip svg {
  font-size: var(--fs-body);
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.filter-chip:hover i,
.filter-chip:hover svg {
  transform: scale(1.1);
}

.filter-chip.active i,
.filter-chip.active svg {
  transform: scale(1.05);
}

.filter-chip:active {
  transform: translateY(0) scale(0.98);
}

.filter-chip:focus {
  outline: none;
  box-shadow: 0 0 0 0.1875rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-bs-theme="dark"] .filter-chip:focus {
  box-shadow: 0 0 0 0.1875rem rgba(var(--bs-info-rgb), 0.25);
}

/* ========================================
   SEARCH RESULTS
   ======================================== */

.search-results-container {
  max-height: 25rem;
  overflow-y: auto;
}

.search-result-group {
  margin-bottom: 1.5rem;
}

.search-result-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.125rem solid var(--bs-border-color);
}

.search-result-group-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
}

.search-result-item {
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

[data-bs-theme="light"] .search-result-item {
  background: var(--glass-black-3);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .search-result-item {
  background: var(--glass-white-5);
  color: var(--bs-body-color);
}

.search-result-item:hover {
  transform: translateX(0.25rem);
}

[data-bs-theme="light"] .search-result-item:hover {
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .search-result-item:hover {
  background: rgba(var(--bs-info-rgb), 0.1);
  color: var(--bs-body-color);
}

.search-result-image {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-image-placeholder {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-description {
  font-size: var(--fs-body);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-secondary-color);
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  flex-shrink: 0;
  color: var(--bs-secondary-color);
}

mark.search-highlight {
  background: transparent;
  font-weight: 600;
  padding: 0;
}

[data-bs-theme="light"] mark.search-highlight {
  color: var(--bs-primary);
}

[data-bs-theme="dark"] mark.search-highlight {
  color: var(--bs-info);
}

kbd {
  font-family: inherit;
  font-size: var(--fs-sm);
}

.search-results-container::-webkit-scrollbar {
  width: 0.375rem;
}

.search-results-container::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-container::-webkit-scrollbar-thumb {
  border-radius: 0.625rem;
  background: var(--glass-black-20);
}

[data-bs-theme="dark"] .search-results-container::-webkit-scrollbar-thumb {
  background: var(--glass-white-20);
}

.search-results-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* ========================================
   WIZARD STYLES
   ======================================== */

.wizard-container {
  min-height: 60vh;
}

.wizard-step {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.wizard-step.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  background: var(--bs-light);
  border-radius: var(--radius-md);
}

[data-bs-theme="dark"] .step-indicator {
  background: var(--bs-dark);
}

.step-indicator .step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--bs-secondary);
  color: white;
  font-weight: 600;
  margin: 0 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.step-indicator .step.active {
  background: var(--bs-primary);
  transform: scale(1.1);
}

.step-indicator .step.completed {
  background: var(--bs-success);
}

.step-indicator .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2rem;
  height: 0.125rem;
  background: var(--bs-secondary);
  transform: translateY(-50%);
}

.step-indicator .step.completed:not(:last-child)::after {
  background: var(--bs-success);
}

.entry-type-card {
  border: 0.125rem solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry-type-card:hover {
  border-color: var(--bs-primary);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem var(--glass-black-10);
}

.entry-type-card.selected {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

[data-bs-theme="dark"] .entry-type-card {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .entry-type-card:hover,
[data-bs-theme="dark"] .entry-type-card.selected {
  background: var(--bs-primary-bg-subtle);
}

.recent-entry-card {
  border: 0.0625rem solid var(--bs-border-color);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  cursor: pointer;
}

.recent-entry-card:hover {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  transform: translateY(-0.0625rem);
}

/* ========================================
   FLOATING ISLAND
   ======================================== */

.floating-island {
  position: fixed;
  z-index: 9999;
  background-color: rgba(33, 33, 33, 0.15);
  border-radius: 3rem;
  box-shadow: 0 0.5rem 2rem var(--glass-black-15);
  border: 0.0625rem solid var(--bs-border-color);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  transition: box-shadow 0.2s ease;
  cursor: move;
  padding: 0.5rem 1rem;
  will-change: transform;
  animation: floatIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-island.dragging {
  box-shadow: 0 0.75rem 3rem rgba(0, 0, 0, 0.25);
  cursor: grabbing;
}

.island-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.floating-island.horizontal .island-content {
  flex-direction: row;
}

.floating-island.vertical {
  padding: 1rem 0.5rem;
}

.floating-island.vertical .island-content {
  flex-direction: column;
}

.island-divider {
  background: var(--bs-border-color);
}

.floating-island.horizontal .island-divider {
  width: 0.0625rem;
  height: 1.5rem;
}

.floating-island.vertical .island-divider {
  width: 1.5rem;
  height: 0.0625rem;
}

.floating-island.bottom-right {
  bottom: 2rem;
  right: 2rem;
}

.floating-island.bottom-left {
  bottom: 2rem;
  left: 2rem;
}

.floating-island.top-right {
  top: 2rem;
  right: 2rem;
}

.floating-island.top-left {
  top: 2rem;
  left: 2rem;
}

.island-button {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: var(--fs-xl);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.island-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 0;
}

.island-button:hover::before {
  width: 100%;
  height: 100%;
}

.island-button i {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.island-button:hover {
  transform: scale(1.1);
}

.island-button:hover i {
  transform: scale(1.05);
}

.island-button:active {
  transform: scale(0.95);
}

.search-button {
  background: transparent;
}

[data-bs-theme="light"] .search-button {
  color: #2196f3;
}

[data-bs-theme="dark"] .search-button {
  color: #64b5f6;
}

[data-bs-theme="light"] .search-button::before {
  background-color: rgba(33, 150, 243, 0.15);
}

[data-bs-theme="dark"] .search-button::before {
  background-color: rgba(100, 181, 246, 0.15);
}

.search-button:hover {
  color: white;
}

[data-bs-theme="light"] .search-button:hover {
  background-color: #2196f3;
}

[data-bs-theme="dark"] .search-button:hover {
  background-color: #1976d2;
}

.favorites-button {
  background-color: transparent;
  position: relative;
}

[data-bs-theme="light"] .favorites-button {
  color: #ff4081;
}

[data-bs-theme="dark"] .favorites-button {
  color: #ff80ab;
}

[data-bs-theme="light"] .favorites-button::before {
  background-color: rgba(255, 64, 129, 0.15);
}

[data-bs-theme="dark"] .favorites-button::before {
  background-color: rgba(255, 128, 171, 0.15);
}

.favorites-button:hover {
  color: white;
}

[data-bs-theme="light"] .favorites-button:hover {
  background-color: #ff4081;
}

[data-bs-theme="dark"] .favorites-button:hover {
  background-color: #f50057;
}

.add-button {
  background-color: transparent;
}

[data-bs-theme="light"] .add-button {
  color: #4caf50;
}

[data-bs-theme="dark"] .add-button {
  color: #81c784;
}

[data-bs-theme="light"] .add-button::before {
  background-color: rgba(76, 175, 80, 0.15);
}

[data-bs-theme="dark"] .add-button::before {
  background-color: rgba(129, 199, 132, 0.15);
}

.add-button:hover {
  color: white;
}

[data-bs-theme="light"] .add-button:hover {
  background-color: #4caf50;
}

[data-bs-theme="dark"] .add-button:hover {
  background-color: #388e3c;
}

.calendar-button {
  background-color: transparent;
}

[data-bs-theme="light"] .calendar-button {
  color: #4c61af;
}

[data-bs-theme="dark"] .calendar-button {
  color: #5770c8;
}

[data-bs-theme="light"] .calendar-button::before {
  background-color: rgba(76, 97, 175, 0.15);
}

[data-bs-theme="dark"] .calendar-button::before {
  background-color: rgba(87, 111, 200, 0.15);
}

.calendar-button:hover {
  color: white;
}

.settings-button {
  background-color: transparent;
}
[data-bs-theme="light"] .calendar-button {
  color: #666666;
}

[data-bs-theme="dark"] .settings-button {
  color: #888888;
}
.settings-button:hover {
  color: white;
  background-color: var(--bs-secondary-bg-subtle);
}
.island-close-btn {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--bs-danger);
  text-shadow: 1.5px 1.5px 3px rgba(255, 0, 0, 0.5);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  z-index: 1;
}

.floating-island.horizontal .island-close-btn {
  top: -0.5rem;
  right: -0.25rem;
}

.floating-island.vertical .island-close-btn {
  top: -0.25rem;
  right: -0.5rem;
}

.island-close-btn:hover {
  opacity: 1;
  color: var(--bs-danger);
}

.drag-handle {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--bs-secondary-color);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.floating-island.horizontal .drag-handle {
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.floating-island.vertical .drag-handle {
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.floating-island:hover .drag-handle {
  opacity: 0.5;
}

[data-bs-theme="light"] .floating-island {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--glass-black-10);
}

[data-bs-theme="light"] .floating-island.dragging {
  box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .floating-island {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .floating-island.dragging {
  box-shadow: 0.5rem 0.5rem 1.5rem rgba(255, 255, 255, 0.5);
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@media (max-width: 48rem) {
  .search-input-wrapper {
    margin-bottom: 1rem;
  }

  .col-md-6,
  .col-md-3,
  .col-md-2,
  .col-md-1 {
    margin-bottom: 0.5rem;
  }

  .quick-filter-btn {
    margin-bottom: 0.25rem;
  }

  .search-filter-tabs,
  .favorites-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    scroll-behavior: smooth;
  }

  .search-filter-tabs::-webkit-scrollbar,
  .favorites-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex-shrink: 0;
    padding: 0.4375rem 0.875rem;
    font-size: var(--fs-body-sm);
  }

  .filter-chip i,
  .filter-chip svg {
    font-size: var(--fs-body-sm);
    width: 0.8125rem;
    height: 0.8125rem;
  }

  /* Mobile island - allow dragging, just smaller */
  .floating-island {
    padding: 0.5rem 0.75rem;
  }

  .floating-island.vertical {
    padding: 0.75rem 0.5rem;
  }

  .island-button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--fs-lg);
  }

  .floating-island .island-content {
    gap: 0.375rem;
  }

  .floating-island.horizontal .island-divider {
    height: 1.25rem;
  }

  .floating-island.vertical .island-divider {
    width: 1.25rem;
  }

  .drag-handle {
    display: none;
  }

}

@media (max-width: 30rem) {
  .floating-island {
    padding: 0.375rem 0.5rem;
  }

  .floating-island.vertical {
    padding: 0.5rem 0.375rem;
  }

  .island-button {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--fs-md);
  }

  .floating-island .island-content {
    gap: 0.25rem;
  }
}
.category-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.exercise-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 0.5rem;
}

.exercise-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.35rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.exercise-type-option:hover {
  border-color: var(--bs-primary);
  transform: translateY(-2px);
}

.exercise-type-option.selected {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

.exercise-type-option input {
  display: none;
}

.type-icon,
.exercise-type-icon {
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

.type-name,
.exercise-type-label {
  font-size: var(--fs-2xs);
  text-align: center;
  line-height: 1.1;
}

.exercise-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.35rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.exercise-type-btn:hover {
  border-color: var(--bs-primary);
  transform: translateY(-2px);
}

.exercise-type-btn.selected {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

@media (max-width: 576px) {

  .exercise-type-grid,
  .exercise-types-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Breadcrumb container */
.breadcrumb {
  --breadcrumb-bg: var(--glass-bg);
  --breadcrumb-border: var(--glass-border);
  --breadcrumb-shadow: var(--glass-shadow);

  display: flex;
  align-items: center;
  gap: 0.25rem;

  padding: 0.5rem 1rem;
  border-radius: var(--radius-lg);

  background: var(--breadcrumb-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  border: 0.5px solid var(--breadcrumb-border);
  box-shadow: var(--breadcrumb-shadow);

  font-size: 1.125rem;
}

/* Breadcrumb items */
.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--bs-sky);
  font-weight: 500;
}

/* Breadcrumb links */
.breadcrumb-item a {
  color: var(--bs-sky);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
}

/* Hover effect */
.breadcrumb-item a:hover {
  background: var(--glass-hover-bg);
  color: var(--bs-sky-text-emphasis);
  box-shadow: var(--glow-primary);
}

/* Active item */
.breadcrumb-item.active {
  color: var(--bs-sky-text-emphasis);
  font-weight: 600;
  background: var(--gradient-overlay);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
}

/* Separator */
.breadcrumb-item+.breadcrumb-item::before {
  content: "\F0142";
  /* mdi-chevron-right */
  font-family: "Material Design Icons";
  font-size: var(--fs-md);

  color: var(--bs-sky);
  opacity: 0.8;

  display: inline-flex;
  align-items: center;

  transform: translateY(1px);
}

/* Dark mode fine-tuning */
[data-bs-theme="dark"] .breadcrumb {
  background: var(--card-glass-bg);
  border-color: var(--card-border);
}

/* ============================================
   MOBILE NAVIGATION - Accordion Style
   ============================================ */

/* Mobile Navigation Accordion Container */
.mobile-nav-accordion {
  width: 100%;
  padding: 0;
}

.mobile-nav-accordion .accordion {
  background: transparent;
  border: none;
}

.mobile-nav-accordion .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-white-10);
}

[data-bs-theme="light"] .mobile-nav-accordion .accordion-item {
  border-bottom-color: var(--glass-black-8);
}

/* Section Header Buttons */
.mobile-nav-section {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  background: transparent !important;
  border: none;
  box-shadow: none !important;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-nav-section:not(.collapsed) {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="light"] .mobile-nav-section:not(.collapsed) {
  background: rgba(0, 0, 0, 0.03) !important;
}

.mobile-nav-section::after {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.mobile-nav-section.active {
  color: var(--bs-primary);
}

.mobile-nav-section.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--bs-primary);
  border-radius: 0 3px 3px 0;
}

.mobile-nav-section i.mdi {
  font-size: var(--fs-xl);
  opacity: 0.9;
}

/* Mobile Navigation Groups */
.mobile-nav-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-white-5);
}

.mobile-nav-group:last-child {
  border-bottom: none;
}

[data-bs-theme="light"] .mobile-nav-group {
  border-bottom-color: var(--glass-black-5);
}

.mobile-nav-group-header {
  padding: 8px 20px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="light"] .mobile-nav-group-header {
  color: rgba(0, 0, 0, 0.45);
}

/* Mobile Navigation Links */
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-body-lg);
  transition: background-color 0.15s ease;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
  background: var(--glass-white-8);
  color: inherit;
  text-decoration: none;
}

[data-bs-theme="light"] .mobile-nav-link:hover,
[data-bs-theme="light"] .mobile-nav-link:focus {
  background: var(--glass-black-5);
}

.mobile-nav-link.active {
  background: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-primary);
}

.mobile-nav-link.active i {
  color: var(--bs-primary);
}

.mobile-nav-link i {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
  opacity: 0.8;
  flex-shrink: 0;
}

.mobile-nav-link span {
  flex: 1;
}

/* Mobile Direct Links (non-accordion items like Help) */
.mobile-nav-direct-link {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.mobile-nav-direct-link:hover {
  background: var(--glass-white-5);
  color: inherit;
  text-decoration: none;
}

[data-bs-theme="light"] .mobile-nav-direct-link:hover {
  background: var(--glass-black-3);
}

.mobile-nav-direct-link.active {
  color: var(--bs-primary);
}

.mobile-nav-direct-link i {
  font-size: var(--fs-xl);
  opacity: 0.9;
}

/* ============================================
   DESKTOP NAVIGATION - Multi-column Dropdowns
   ============================================ */

.desktop-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Multi-column dropdown menu - scoped to desktop-nav only */
.desktop-nav .dropdown-menu-columns {
  display: none;
  flex-wrap: wrap;
  min-width: 250px;
  max-width: 600px;
  padding: 8px 0;
}

/* Show as flex only when Bootstrap adds .show class */
.desktop-nav .dropdown-menu-columns.show {
  display: flex;
}

.desktop-nav .dropdown-menu-column {
  min-width: 200px;
  flex: 1;
  padding: 0 4px;
}

.desktop-nav .dropdown-menu-column:not(:last-child) {
  border-right: 1px solid var(--glass-white-10);
}

[data-bs-theme="light"] .desktop-nav .dropdown-menu-column:not(:last-child) {
  border-right-color: var(--glass-black-8);
}

.desktop-nav .dropdown-menu-columns .dropdown-header {
  padding: 8px 16px 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="light"] .desktop-nav .dropdown-menu-columns .dropdown-header {
  color: rgba(0, 0, 0, 0.45);
}

.desktop-nav .dropdown-menu-columns .dropdown-item {
  padding: 8px 16px;
  font-size: var(--fs-body);
}

.desktop-nav .dropdown-menu-columns .dropdown-item i {
  opacity: 0.8;
}

/* Ensure proper alignment in dropdown columns */
.desktop-nav .dropdown-menu-columns li {
  list-style: none;
}

/* Mobile-specific adjustments for accordion body */
@media (max-width: 991.98px) {
  .mobile-nav-accordion .accordion-body {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Smoother scrolling in accordion */
  .mobile-nav-accordion .accordion-collapse {
    transition: height 0.25s ease;
  }

  /* Better touch targets */
  .mobile-nav-link {
    min-height: 48px;
  }

  .mobile-nav-section {
    min-height: 52px;
  }

  /* Hide desktop nav on mobile */
  .desktop-nav {
    display: none !important;
  }
}

/* Desktop-specific adjustments */
@media (min-width: 992px) {
  /* Hide mobile nav on desktop */
  .mobile-nav-accordion {
    display: none !important;
  }

  /* Ensure dropdowns don't overflow viewport */
  .desktop-nav .dropdown-menu-columns {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Active state indicator for section buttons */
.mobile-nav-accordion .accordion-header {
  position: relative;
}

/* Settings button in mobile nav */
.mobile-nav-link.settings-btn {
  font-family: inherit;
}

/* Ensure accordion collapse works smoothly */
.mobile-nav-accordion .accordion-collapse {
  background: var(--glass-black-2);
}

[data-bs-theme="dark"] .mobile-nav-accordion .accordion-collapse {
  background: var(--glass-black-15);
}
/* Activity Logs Stat Cards */
.stat-card {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--glass-black-10);
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

.stat-card-primary .stat-icon {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.stat-card-success .stat-icon {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.stat-card-warning .stat-icon {
  background: rgba(255, 193, 7, 0.15);
  color: #cc9a00;
}

.stat-card-info .stat-icon {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}

.stat-card-secondary .stat-icon {
  background: rgba(108, 117, 125, 0.1);
  color: #6c757d;
}

.stat-card-danger .stat-icon {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.stat-content {
  margin-left: 0.75rem;
  min-width: 0;
}

.stat-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* Detail Modal Sections */
.detail-section-title {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bs-primary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.detail-list {
  font-size: var(--fs-body);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.25rem 0;
  gap: 0.5rem;
}

.detail-label {
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.detail-item>span:last-child,
.detail-item>a {
  text-align: right;
}

/* Dark Mode */
[data-bs-theme="dark"] .stat-card {
  background: rgba(33, 37, 41, 0.95);
  border-color: var(--glass-white-10);
}

[data-bs-theme="dark"] .stat-card-warning .stat-icon {
  color: #ffc107;
}

/* Responsive */
@media (max-width: 576px) {
  .stat-card {
    padding: 0.5rem 0.75rem;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
    font-size: var(--fs-md);
  }

  .stat-value {
    font-size: var(--fs-md);
  }

  .stat-content {
    margin-left: 0.5rem;
  }

  .detail-item {
    flex-direction: column;
    gap: 0;
  }

  .detail-item>span:last-child,
  .detail-item>a {
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* Extracted inline styles (css_extract.py)                    */
/* ════════════════════════════════════════════════════════════ */

/* ═══ Source: Areas/Nutrition/Views/BodyMeasurement/Delete.cshtml ═══ */
.measurement-delete-card {
        overflow: hidden;
    }

    .delete-icon-wrapper {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background-color: rgba(var(--bs-danger-rgb), 0.1);
    }

    .delete-icon-wrapper i {
        font-size: var(--fs-2xl);
    }

    .stat-item {
        background-color: var(--bs-tertiary-bg);
        transition: transform 0.2s ease;
    }

    .stat-item:hover {
        transform: translateY(-2px);
    }

    .additional-stats {
        background-color: var(--bs-tertiary-bg);
        border-radius: var(--radius-md);
        padding: 0.5rem 1rem;
    }

    [data-bs-theme="dark"] .stat-item {
        background-color: var(--glass-white-5);
    }

    [data-bs-theme="dark"] .additional-stats {
        background-color: var(--glass-white-5);
    }

    [data-bs-theme="light"] .stat-item {
        background-color: var(--glass-black-3);
    }

    [data-bs-theme="light"] .additional-stats {
        background-color: var(--glass-black-3);
    }

    #deleteBtn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    @media (max-width: 575.98px) {
        .measurement-delete-card .card-body {
            padding: 1rem;
        }

        .delete-icon-wrapper {
            width: 40px;
            height: 40px;
        }

        .delete-icon-wrapper i {
            font-size: var(--fs-xl);
        }
    }

/* ═══ Source: Areas/Nutrition/Views/DrinkEntries/Create.cshtml ═══ */
.entry-type-card {
        cursor: pointer;
        transition: all 0.3s ease;
        border-color: var(--bs-border-color) !important;
    }

    .entry-type-card:hover {
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0.25rem 0.75rem var(--glass-black-10);
        transform: translateY(-2px);
    }

    .btn-check:checked + .entry-type-card {
        border-color: var(--bs-primary) !important;
        background: var(--bs-primary-bg-subtle);
    }

    .entry-section {
        padding: 1.5rem;
        background: var(--bs-light-bg-subtle);
        border-radius: var(--radius-md);
        margin-bottom: 1.5rem;
        border: 1px solid var(--bs-border-color);
    }

    [data-bs-theme="dark"] .entry-section {
        background: var(--bs-dark-bg-subtle);
    }

    .ingredient-row {
        transition: all 0.3s ease;
        animation: fadeIn 0.3s ease;
    }

    .ingredient-row:hover {
        box-shadow: 0 0.125rem 0.5rem var(--glass-black-10);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary);
    }

    @media (max-width: 768px) {
        .entry-type-card .card-body {
            padding: 1.5rem !important;
        }
        
        .entry-type-card i {
            font-size: 2rem !important;
        }
        
        .ingredient-row .row {
            flex-direction: column;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/DrinkEntries/Details.cshtml ═══ */
.info-group {
        padding: 1rem;
        border-radius: var(--radius-md);
        background: var(--bs-light-bg-subtle);
    }

    [data-bs-theme="dark"] .info-group {
        background: var(--bs-dark-bg-subtle);
    }

    @media (max-width: 768px) {
        .card-header h2 {
            font-size: var(--fs-2xl);
        }
    }

/* ═══ Source: Areas/Nutrition/Views/DrinkEntries/Duplicate.cshtml ═══ */
.entry-section {
        padding: 1.5rem;
        background: var(--bs-light-bg-subtle);
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }

    [data-bs-theme="dark"] .entry-section {
        background: var(--bs-dark-bg-subtle);
    }

    #nutritionPreview {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary);
    }

/* ═══ Source: Areas/Nutrition/Views/DrinkEntries/Edit.cshtml ═══ */
.entry-section {
        padding: 1.5rem;
        background: var(--bs-light-bg-subtle);
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }

    [data-bs-theme="dark"] .entry-section {
        background: var(--bs-dark-bg-subtle);
    }

    #nutritionPreview {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary);
    }

    @media (max-width: 768px) {
        td .btn-group {
            flex-direction: column;
        }

        td .btn-group .btn {
            border-radius: 0.375rem !important;
            margin-bottom: 0.5rem;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/DrinkEntries/Index.cshtml ═══ */
@media (max-width: 768px) {
        .table-responsive {
            font-size: var(--fs-body);
        }

        .btn-group-sm .btn {
            padding: 0.25rem 0.5rem;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/Entries/Index.cshtml ═══ */
@media (max-width: 768px) {
        .table-responsive {
            font-size: var(--fs-body);
        }
        .btn-group-sm .btn {
            padding: 0.25rem 0.5rem;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/Home/Index.cshtml ═══ */
.macro-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .macro-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px var(--glass-black-10) !important;
        }

        .meal-log-item,
        .quick-entry-item,
        .drink-log-item,
        .water-log-item {
            transition: all 0.2s ease;
        }

        .meal-log-item:hover,
        .quick-entry-item:hover,
        .drink-log-item:hover {
            background-color: var(--bs-tertiary-bg) !important;
        }

        /* Water circular chart */
        .circular-chart {
            display: block;
            width: 100%;
            height: 100%;
        }

        .circle-bg {
            fill: none;
            stroke: var(--bs-secondary-bg);
            stroke-width: 3.8;
        }

        .circle {
            fill: none;
            stroke: var(--bs-primary);
            stroke-width: 3.8;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            transition: stroke-dasharray 0.6s ease;
        }

        /* MDI icon sizes */
        .mdi-14px {
            font-size: 14px;
        }

        .mdi-36px {
            font-size: 36px;
        }

        .mdi-48px {
            font-size: 48px;
        }

        /* Dark mode adjustments */
        [data-bs-theme="dark"] .card {
            background-color: var(--bs-body-bg);
        }

        [data-bs-theme="dark"] .bg-body-secondary {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        [data-bs-theme="dark"] .meal-log-item:hover,
        [data-bs-theme="dark"] .quick-entry-item:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* Mobile optimizations */
        @media (max-width: 768px) {
            .display-6 {
                font-size: var(--fs-2xl);
            }

            .card-body {
                padding: 0.75rem;
            }

            .meal-log-item .d-flex.gap-3 {
                gap: 0.5rem !important;
                font-size: var(--fs-sm);
            }
        }

        @media (max-width: 576px) {
            .macro-card .display-6 {
                font-size: var(--fs-xl);
            }

            .btn-group-sm>.btn {
                padding: 0.25rem 0.5rem;
                font-size: var(--fs-sm);
            }
        }

/* ═══ Source: Areas/Nutrition/Views/QuickEntries/Delete.cshtml ═══ */
@media (max-width: 768px) {
        .col-6 {
            margin-bottom: 0.5rem;
        }
        .row.text-center .col-6 {
            border-right: none !important;
            border-bottom: 1px solid var(--bs-border-color);
            padding-bottom: 0.5rem;
        }
        .row.text-center .col-6:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/QuickEntries/Details.cshtml ═══ */
@media (max-width: 768px) {
        .col-6 {
            margin-bottom: 0.5rem;
        }
        .row.text-center .col-6 {
            border-right: none !important;
            border-bottom: 1px solid var(--bs-border-color);
            padding-bottom: 0.5rem;
        }
        .row.text-center .col-6:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/QuickEntries/Index.cshtml ═══ */
.text-truncate-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    @media (max-width: 768px) {
        .row.text-center .col-3 {
            font-size: var(--fs-body);
        }
        .table-responsive {
            font-size: var(--fs-body);
        }
    }

/* ═══ Source: Areas/Nutrition/Views/Report/Index.cshtml ═══ */
.stats-icon {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Loading spinner styles */
    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }

    .spinner-container {
        text-align: center;
    }


/* ═══ Source: Areas/Nutrition/Views/WaterEntries/Details.cshtml ═══ */
.water-details-card {
        overflow: hidden;
    }

    .water-icon-lg {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-xl);
        background: rgba(13, 202, 240, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-3xl);
        color: #0dcaf0;
    }

    [data-bs-theme="dark"] .water-icon-lg {
        background: rgba(13, 202, 240, 0.2);
    }

    .water-amount-section {
        background: var(--bs-light-bg-subtle);
        border-radius: var(--radius-xl);
        padding: 2rem;
    }

    [data-bs-theme="dark"] .water-amount-section {
        background: var(--bs-dark-bg-subtle);
    }

    .water-amount-display {
        text-align: center;
    }

    .amount-primary {
        margin-bottom: 1.5rem;
    }

    .amount-value {
        font-size: 4rem;
        font-weight: 700;
        color: #0dcaf0;
        line-height: 1;
    }

    .amount-unit {
        font-size: var(--fs-2xl);
        font-weight: 600;
        color: var(--bs-secondary-color);
        margin-left: 0.5rem;
    }

    .amount-conversions {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .conversion-item {
        padding: 0.5rem 1rem;
        background: var(--bs-body-bg);
        border-radius: var(--radius-md);
        font-size: var(--fs-md);
        color: var(--bs-secondary-color);
    }

    .water-level-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .water-glass {
        width: 120px;
        height: 300px;
        background: transparent;
        border: 3px solid var(--bs-border-color);
        border-top: none;
        border-radius: 0 0 20px 20px;
        position: relative;
        overflow: hidden;
    }

    .water-level {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(13, 202, 240, 0.3) 0%, rgba(13, 202, 240, 0.6) 100%);
        transition: height 1s ease-in-out;
    }

    .water-wave {
        position: absolute;
        top: -10px;
        left: -50%;
        width: 200%;
        height: 20px;
        background: radial-gradient(ellipse at center, rgba(13, 202, 240, 0.8) 0%, transparent 70%);
        animation: wave 3s ease-in-out infinite;
    }

    @keyframes wave {
        0%, 100% {
            transform: translateX(0) translateY(0);
        }
        50% {
            transform: translateX(-25%) translateY(-5px);
        }
    }

    .glass-markers {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

    .marker {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--bs-border-color);
    }

    .marker span {
        position: absolute;
        right: -45px;
        top: -8px;
        font-size: var(--fs-sm);
        color: var(--bs-secondary-color);
        font-weight: 600;
    }

    .info-card {
        display: flex;
        gap: 1rem;
        padding: 1.25rem;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--radius-lg);
        transition: all 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--glass-black-10);
    }

    [data-bs-theme="dark"] .info-card:hover {
        box-shadow: 0 4px 12px var(--glass-black-30);
    }

    .info-card-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        background: rgba(13, 202, 240, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-xl);
        color: #0dcaf0;
        flex-shrink: 0;
    }

    .info-card-content {
        flex: 1;
    }

    .info-card-label {
        font-size: var(--fs-body);
        color: var(--bs-secondary-color);
        margin-bottom: 0.25rem;
    }

    .info-card-value {
        font-weight: 600;
        color: var(--bs-body-color);
    }

    .property-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        background: var(--bs-body-bg);
        border: 2px solid var(--bs-border-color);
        border-radius: var(--radius-lg);
        transition: all 0.3s ease;
    }

    .property-card:hover {
        border-color: #0dcaf0;
        transform: translateY(-2px);
    }

    .property-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        background: rgba(13, 202, 240, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-2xl);
        color: #0dcaf0;
        flex-shrink: 0;
    }

    .property-label {
        font-size: var(--fs-body);
        color: var(--bs-secondary-color);
        margin-bottom: 0.25rem;
        display: block;
    }

    .property-value {
        font-weight: 600;
        font-size: var(--fs-md);
        color: var(--bs-body-color);
    }

    .benefits-section {
        padding: 1.5rem;
        background: var(--bs-success-bg-subtle);
        border-radius: var(--radius-lg);
        border: 1px solid var(--bs-success-border-subtle);
    }

    .benefit-badge {
        padding: 0.75rem;
        background: var(--bs-body-bg);
        border-radius: var(--radius-md);
        font-size: var(--fs-body);
        font-weight: 500;
        text-align: center;
        transition: all 0.3s ease;
    }

    .benefit-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px var(--glass-black-10);
    }

    .notes-section {
        padding: 1.5rem;
        background: var(--bs-warning-bg-subtle);
        border-radius: var(--radius-lg);
        border-left: 4px solid var(--bs-warning);
    }

    .notes-content {
        padding: 1rem;
        background: var(--bs-body-bg);
        border-radius: var(--radius-md);
        line-height: 1.6;
        color: var(--bs-body-color);
    }

    @media (max-width: 768px) {
        .water-icon-lg {
            width: 48px;
            height: 48px;
            font-size: var(--fs-2xl);
        }

        .card-header h2 {
            font-size: var(--fs-2xl);
        }

        .amount-value {
            font-size: var(--fs-5xl);
        }

        .amount-unit {
            font-size: var(--fs-xl);
        }

        .water-glass {
            width: 100px;
            height: 250px;
        }

        .amount-conversions {
            gap: 1rem;
        }

        .conversion-item {
            font-size: var(--fs-body);
            padding: 0.4rem 0.8rem;
        }

        .info-card,
        .property-card {
            padding: 1rem;
        }

        .info-card-icon,
        .property-icon {
            width: 40px;
            height: 40px;
            font-size: var(--fs-md);
        }

        .benefit-badge {
            font-size: var(--fs-sm);
            padding: 0.5rem;
        }

        .marker span {
            right: -38px;
        }
    }

    @media (max-width: 576px) {
        .water-amount-section {
            padding: 1.5rem;
        }

        .d-flex.gap-2.flex-wrap {
            justify-content: center;
        }
    }

/* ═══ Source: Areas/Nutrition/Views/WaterEntries/Index.cshtml ═══ */
.today-progress-card {
        background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-light-bg-subtle) 100%);
        overflow: hidden;
    }

    [data-bs-theme="dark"] .today-progress-card {
        background: linear-gradient(135deg, var(--bs-dark) 0%, var(--bs-gray-900) 100%);
    }

    .today-amount-display {
        display: inline-block;
    }

    .amount-value-large {
        font-size: 4rem;
        font-weight: 700;
        color: #0dcaf0;
        line-height: 1;
        display: inline;
    }

    .amount-unit-large {
        font-size: var(--fs-2xl);
        font-weight: 600;
        color: var(--bs-secondary-color);
        margin-left: 0.5rem;
        display: inline;
    }

    .amount-conversions-inline {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .conversion-badge {
        padding: 0.375rem 0.75rem;
        background: var(--bs-secondary-bg);
        border-radius: var(--radius-sm);
        font-size: var(--fs-body);
        font-weight: 600;
        color: var(--bs-body-color);
    }

    .water-visualization-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .water-glass-large {
        width: 200px;
        height: 400px;
        background: transparent;
        border: 4px solid var(--bs-border-color);
        border-top: none;
        border-radius: 0 0 30px 30px;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 20px var(--glass-black-10);
    }

    [data-bs-theme="dark"] .water-glass-large {
        box-shadow: inset 0 0 20px var(--glass-white-5);
    }

    .water-level-large {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(13, 202, 240, 0.4) 0%, rgba(13, 202, 240, 0.7) 100%);
        transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .water-wave-large {
        position: absolute;
        top: -15px;
        left: -50%;
        width: 200%;
        height: 30px;
        background: radial-gradient(ellipse at center, rgba(13, 202, 240, 0.9) 0%, transparent 70%);
        animation: waveLarge 4s ease-in-out infinite;
    }

    @keyframes waveLarge {
        0%, 100% {
            transform: translateX(0) translateY(0);
        }
        50% {
            transform: translateX(-25%) translateY(-8px);
        }
    }

    .water-bubbles {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .bubble {
        position: absolute;
        bottom: 0;
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-full);
        animation: rise 3s infinite ease-in;
    }

    .bubble:nth-child(1) {
        left: 20%;
        animation-delay: 0s;
        animation-duration: 3s;
    }

    .bubble:nth-child(2) {
        left: 40%;
        animation-delay: 0.5s;
        animation-duration: 3.5s;
    }

    .bubble:nth-child(3) {
        left: 60%;
        animation-delay: 1s;
        animation-duration: 4s;
    }

    .bubble:nth-child(4) {
        left: 80%;
        animation-delay: 1.5s;
        animation-duration: 3.2s;
    }

    .bubble:nth-child(5) {
        left: 50%;
        animation-delay: 2s;
        animation-duration: 3.8s;
    }

    @keyframes rise {
        0% {
            bottom: 0;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            bottom: 100%;
            opacity: 0;
        }
    }

    .glass-markers-large {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

    .marker-large {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--bs-border-color);
    }

    .marker-large span {
        position: absolute;
        right: -65px;
        top: -10px;
        font-size: var(--fs-body);
        color: var(--bs-secondary-color);
        font-weight: 600;
        background: var(--bs-body-bg);
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-xs);
    }

    .goal-badge {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(25, 135, 84, 0.95);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
        animation: celebrate 0.6s ease-in-out;
        z-index: 10;
    }

    .goal-badge i {
        margin-right: 0.5rem;
        font-size: var(--fs-xl);
    }

    @keyframes celebrate {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.1);
        }
    }

    .water-glass-large.goal-reached {
        border-color: #198754;
        box-shadow: 0 0 30px rgba(25, 135, 84, 0.3);
    }

    .water-glass-large.goal-reached .water-level-large {
        background: linear-gradient(180deg, rgba(25, 135, 84, 0.4) 0%, rgba(25, 135, 84, 0.7) 100%);
    }

    .glass-label {
        margin-top: 1.5rem;
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: center;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-xl);
    }

    .stat-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px var(--glass-black-15) !important;
    }

    .quick-add-card {
        transition: transform 0.3s ease;
    }

    .quick-add-btn {
        padding: 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
        border-width: 2px;
    }

    .quick-add-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
        border-color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    [data-bs-theme="dark"] .quick-add-btn:hover {
        background: rgba(13, 110, 253, 0.1);
    }

    [data-bs-theme="dark"] .card {
        background-color: var(--bs-dark);
        border-color: var(--bs-gray-800);
    }

    [data-bs-theme="dark"] .stat-icon {
        opacity: 0.9;
    }

    @media (max-width: 992px) {
        .today-amount-display {
            text-align: center;
        }

        .amount-conversions-inline {
            justify-content: center;
        }

        .water-glass-large {
            width: 160px;
            height: 320px;
        }

        .marker-large span {
            right: -55px;
            font-size: var(--fs-sm);
        }
    }

    @media (max-width: 768px) {
        .amount-value-large {
            font-size: var(--fs-5xl);
        }

        .amount-unit-large {
            font-size: var(--fs-xl);
        }

        .water-glass-large {
            width: 140px;
            height: 280px;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            font-size: var(--fs-md);
        }

        h2 {
            font-size: var(--fs-2xl);
        }

        .table {
            font-size: var(--fs-body);
        }

        .goal-badge {
            padding: 0.5rem 1rem;
            font-size: var(--fs-body);
        }

        .goal-badge i {
            font-size: var(--fs-md);
        }

        .marker-large span {
            right: -50px;
            font-size: var(--fs-xs);
            padding: 0.125rem 0.375rem;
        }
    }

    @media (max-width: 576px) {
        .today-progress-card .card-body {
            padding: 1.5rem !important;
        }

        .water-glass-large {
            width: 120px;
            height: 240px;
        }

        .amount-value-large {
            font-size: 2.5rem;
        }

        .quick-add-btn {
            padding: 0.75rem;
            font-size: var(--fs-body);
        }
    }

/* ═══ Source: Views/Error/AccessDenied.cshtml ═══ */
.access-denied-card {
        background: var(--bs-body-bg);
        border-radius: 1.5rem;
        padding: 3rem;
        box-shadow: 0 0.5rem 2rem var(--glass-black-10);
        border: 0.0625rem solid var(--bs-border-color);
    }

    [data-bs-theme="dark"] .access-denied-card {
        background: var(--glass-white-5);
        backdrop-filter: blur(0.625rem);
        box-shadow: 0 0.5rem 2rem var(--glass-black-30);
    }

    .access-denied-icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .access-denied-icon {
        font-size: 6rem;
        color: var(--bs-warning);
        animation: pulse-icon 2s ease-in-out infinite;
    }

    @keyframes pulse-icon {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    .glass-morphism {
        background: rgba(255, 193, 7, 0.1);
        backdrop-filter: blur(0.625rem);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
    }

    [data-bs-theme="dark"] .glass-morphism {
        background: rgba(255, 193, 7, 0.15);
    }

    .access-denied-info ul li {
        padding: 0.5rem 0;
        transition: transform 0.2s ease;
    }

    .access-denied-info ul li:hover {
        transform: translateX(0.5rem);
    }

    .glass-button {
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(0.625rem);
        transition: all 0.3s ease;
    }

    .glass-button:hover {
        transform: translateY(-0.125rem);
        box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.3);
    }

    .glass-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .glass-button:hover::before {
        left: 100%;
    }

    .btn-link {
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-link:hover {
        transform: translateY(-0.125rem);
    }

    @media (max-width: 576px) {
        .access-denied-card {
            padding: 2rem 1.5rem;
        }

        .access-denied-icon {
            font-size: 4rem;
        }

        .display-4 {
            font-size: var(--fs-4xl);
        }

        .lead {
            font-size: var(--fs-md);
        }
    }

    .alert-warning {
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-1.25rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .access-denied-actions .btn {
        transition: all 0.3s ease;
    }

    .access-denied-actions .btn:hover {
        transform: translateY(-0.1875rem);
    }

/* ═══ Source: Views/Error/NotFound.cshtml ═══ */
.access-denied-card {
        background: var(--bs-body-bg);
        border-radius: 1.5rem;
        padding: 3rem;
        box-shadow: 0 0.5rem 2rem var(--glass-black-10);
        border: 0.0625rem solid var(--bs-border-color);
    }

    [data-bs-theme="dark"] .access-denied-card {
        background: var(--glass-white-5);
        backdrop-filter: blur(0.625rem);
        box-shadow: 0 0.5rem 2rem var(--glass-black-30);
    }

/* ═══ Source: Views/Home/Converts.cshtml ═══ */
:root {
        --primary-color: #6366f1;
        --secondary-color: #ec4899;
        --success-color: #3b82f6;
        --warning-color: #f59e0b;
        --info-color: #06b6d4;
        --danger-color: #ef4444;
        --card-bg: #ffffff;
        --body-bg: #f8f9fa;
        --border-color: #e0e0e0;
        --text-color: #212529;
        --text-muted: #6c757d;
    }

    [data-bs-theme="dark"] {
        --card-bg: #212529;
        --body-bg: #1a1d20;
        --border-color: #495057;
        --text-color: #ffffff;
        --text-muted: #adb5bd;
    }

    .page-title {
        text-align: center;
        color: var(--text-color);
        margin-bottom: 30px;
        font-weight: 300;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .page-title i {
        margin-right: 10px;
    }

    .converter-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* Control Panel Styles */
    .control-panel {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px var(--glass-black-10);
    }

    [data-bs-theme="dark"] .control-panel {
        box-shadow: 0 5px 15px var(--glass-black-30);
    }

    .view-controls {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .view-toggle {
        display: flex;
        background: var(--body-bg);
        border-radius: var(--radius-md);
        padding: 5px;
        border: 1px solid var(--border-color);
    }

    .view-btn {
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: var(--text-color);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .view-btn.active {
        background: var(--primary-color);
        color: white;
    }

    .collapse-all-btn {
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-color);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-body-lg);
    }

    .collapse-all-btn:hover {
        background: var(--body-bg);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .collapse-all-btn.all-collapsed {
        background: var(--success-color);
        color: white;
        border-color: var(--success-color);
    }

    .collapse-all-btn.all-collapsed:hover {
        background: #2563eb;
        border-color: #2563eb;
    }

    .grid-size-selector {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .grid-size-btn {
        width: 35px;
        height: 35px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-color);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-body-lg);
    }

    .grid-size-btn.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .filter-panel {
        border-top: 1px solid var(--border-color);
        padding-top: 20px;
    }

    .filter-toggle {
        background: none;
        border: 1px solid var(--border-color);
        color: var(--text-color);
        padding: 8px 16px;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filter-toggle:hover {
        background: var(--body-bg);
    }

    .filter-content {
        margin-top: 15px;
        display: none;
    }

    .filter-content.show {
        display: block;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }

    .filter-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--body-bg);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
    }

    .filter-checkbox {
        margin: 0;
    }

    .filter-label {
        margin: 0;
        cursor: pointer;
        color: var(--text-color);
        font-size: var(--fs-body-lg);
    }

    /* Converter Grid Styles */
    .converters-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    

    

    @media (max-width: 768px) {        
        .view-controls {
            flex-direction: column;
            align-items: stretch;
        }
        
        .grid-size-selector {
            justify-content: center;
        }
    }

    .converter-card {
        margin-bottom: 0;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px var(--glass-black-10);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        height: fit-content;
    }

    [data-bs-theme="dark"] .converter-card {
        box-shadow: 0 10px 30px var(--glass-black-30);
    }

    .converter-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px var(--glass-black-15);
    }

    [data-bs-theme="dark"] .converter-card:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    .converter-card.hidden {
        display: none;
    }

    .card-header .collapse-icon {
        float: right;
        transition: transform 0.3s ease;
    }

    .card-header[aria-expanded="true"] .collapse-icon {
        transform: rotate(180deg);
    }

    /* Solid color backgrounds for different categories */
    .speed-header {
        background: #06b6d4;
        color: white;
    }

    .temperature-header {
        background: #ef4444;
        color: black;
    }

    .weight-header {
        background: #64748b;
        color: white;
    }

    .length-header {
        background: #10b981;
        color: black;
    }

    .power-header {
        background: #f59e0b;
        color: white;
    }

    .area-header {
        background: #65a4a2;
        color: black;
    }

    .volume-header {
        background: #2c52a5;
        color: white;
    }

    .time-header {
        background: #949ba4;
        color: black;
    }

    .pressure-header {
        background: #567d44;
        color: white;
    }

    .energy-header {
        background: #c4cd22e0;
        color: black;
    }

    .data-header {
        background: #0ea5e9;
        color: white;
    }

    .frequency-header {
        background: #6baaa3;
        color: black;
    }

    .angle-header {
        background: #e0742ce6;
        color: white;
    }

    /* Dark mode adjustments for headers - slightly lighter versions */
    [data-bs-theme="dark"] .speed-header {
        background: #0891b2;
    }

    [data-bs-theme="dark"] .temperature-header {
        background: #dc2626;
    }

    [data-bs-theme="dark"] .weight-header {
        background: #475569;
    }

    [data-bs-theme="dark"] .length-header {
        background: #059669;
    }

    [data-bs-theme="dark"] .power-header {
        background: #d97706;
    }

    [data-bs-theme="dark"] .area-header {
        background: #65a4a2;
    }

    [data-bs-theme="dark"] .volume-header {
        background: #2c52a5;
    }

    [data-bs-theme="dark"] .time-header {
        background: #949ba4;
    }

    [data-bs-theme="dark"] .pressure-header {
        background: #567d44;
    }

    [data-bs-theme="dark"] .energy-header {
        background: #c4cd22e0;
    }

    [data-bs-theme="dark"] .data-header {
        background: #0284c7;
    }

    [data-bs-theme="dark"] .frequency-header {
        background: #6baaa3;
    }

    [data-bs-theme="dark"] .angle-header {
        background: #e0742ce6;
    }

    .converter-body {
        padding: 25px;
        background: var(--body-bg);
        color: var(--text-color);
    }

    .form-floating input {
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
        font-size: var(--fs-md);
        background-color: var(--card-bg);
        color: var(--text-color);
    }

    .form-floating input:focus {
        border-color: #556083;
        box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        background-color: var(--card-bg);
        color: var(--text-color);
    }

    .form-floating label {
        padding: 0.75rem 0.75rem;
        color: var(--text-muted);
    }

    .unit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    @media (max-width: 768px) {
        .unit-grid {
            grid-template-columns: 1fr;
        }
    }
    /* Loading animation */
    .converter-card {
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Clear button styling */
    .clear-all-btn {
        background: #33487f;
        border: none;
        color: white;
        padding: 10px 30px;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s ease;
        margin: 20px auto;
        display: block;
    }

    .clear-all-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px var(--glass-black-20);
        background: #2e459e;
    }

    /* Ensure proper contrast for floating labels in dark mode */
    [data-bs-theme="dark"] .form-floating>.form-control:focus~label,
    [data-bs-theme="dark"] .form-floating>.form-control:not(:placeholder-shown)~label {
        color: var(--text-muted);
    }

    /* Show/Hide all button */
    .bulk-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .bulk-btn {
        background: var(--primary-color);
        border: none;
        color: white;
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-size: var(--fs-body);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .bulk-btn:hover {
        background: #4f46e5;
    }

/* ═══ Source: Views/Shared/_DetailsIngredient.cshtml ═══ */
/* Responsive nutrition circles */
    .nutrition-circle {
        transition: transform 0.3s ease;
    }

    .nutrition-circle:hover {
        transform: scale(1.05);
    }

    /* Better spacing for mobile */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }

        .card-body {
            padding: 1rem;
        }

        .nav-pills .nav-link {
            padding: 0.5rem 0.75rem;
            font-size: var(--fs-body);
        }

        .badge {
            font-size: var(--fs-sm);
            padding: 0.25rem 0.5rem;
        }
    }

    [data-bs-theme="dark"] .bg-body-secondary {
        background-color: var(--bs-gray-800) !important;
    }

    [data-bs-theme="dark"] .text-muted {
        color: var(--bs-gray-400) !important;
    }

    /* Animate tab content */
    .tab-pane {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .tab-pane.active {
        opacity: 1;
    }

    /* Responsive grid improvements */
    @media (max-width: 576px) {
        .col-6:nth-child(odd) {
            padding-right: 0.5rem;
        }

        .col-6:nth-child(even) {
            padding-left: 0.5rem;
        }
    }

/* ═══ Source: Views/Shared/_FileAttachmentListView.cshtml ═══ */
.file-attachments-container {
        padding: 0.5rem 0;
    }
    
    .file-card {
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: all 0.2s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .file-card:hover {
        border-color: var(--bs-primary);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.15);
        transform: translateY(-2px);
    }
    
    [data-bs-theme="dark"] .file-card {
        background: var(--glass-white-3);
        border-color: var(--glass-white-10);
    }
    
    [data-bs-theme="dark"] .file-card:hover {
        background: var(--glass-white-5);
        border-color: var(--bs-primary);
    }
    
    .file-card-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }
    
    .file-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: var(--bs-tertiary-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .file-icon-wrapper i {
        font-size: var(--fs-xl);
    }
    
    .file-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    .file-name {
        margin: 0;
        font-size: var(--fs-body-lg);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--bs-body-color);
    }
    
    .file-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.25rem;
    }
    
    .file-ext {
        font-size: var(--fs-xs);
        font-weight: 700;
        padding: 0.15rem 0.4rem;
        border-radius: var(--radius-xs);
        background: var(--bs-primary);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .file-size {
        font-size: var(--fs-sm);
        color: var(--bs-secondary-color);
        font-weight: 500;
    }
    
    .file-status {
        flex-shrink: 0;
    }
    
    .status-dot {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: var(--radius-full);
    }
    
    .status-dot.status-public {
        background: var(--bs-success);
        box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.2);
    }
    
    .status-dot.status-private {
        background: var(--bs-warning);
        box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.2);
    }
    
    .file-card-body {
        padding: 0.75rem 1rem;
        flex: 1;
    }
    
    .file-details-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: var(--fs-sm);
        color: var(--bs-secondary-color);
    }
    
    .detail-item i {
        font-size: var(--fs-xs);
        opacity: 0.7;
    }
    
    .file-usage {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--bs-border-color-translucent);
    }
    
    .usage-label {
        font-size: var(--fs-xs);
        color: var(--bs-secondary-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 0.35rem;
    }
    
    .usage-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    
    .usage-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: var(--fs-xs);
        font-weight: 600;
    }
    
    .usage-badge i {
        font-size: var(--fs-2xs);
    }
    
    .usage-badge.usage-tasks {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
    }
    
    .usage-badge.usage-comments {
        background: rgba(var(--bs-info-rgb), 0.1);
        color: var(--bs-info);
    }
    
    .usage-badge.usage-time {
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
    }
    
    .file-card-actions {
        display: flex;
        border-top: 1px solid var(--bs-border-color-translucent);
        margin-top: auto;
    }
    
    .btn-file-action {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
        border: none;
        background: transparent;
        color: var(--bs-secondary-color);
        font-size: var(--fs-md);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .btn-file-action:not(:last-child) {
        border-right: 1px solid var(--bs-border-color-translucent);
    }
    
    .btn-file-action.btn-preview:hover {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
    }
    
    .btn-file-action.btn-download:hover {
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
    }
    
    .btn-file-action.btn-download.downloading {
        pointer-events: none;
        opacity: 0.6;
    }
    
    .empty-files-state {
        text-align: center;
        padding: 3rem 1rem;
    }
    
    .empty-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1rem;
        border-radius: var(--radius-full);
        background: var(--bs-tertiary-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .empty-icon i {
        font-size: var(--fs-4xl);
        color: var(--bs-secondary-color);
    }
    
    .empty-files-state h5 {
        margin: 0 0 0.5rem;
        color: var(--bs-body-color);
        font-weight: 600;
    }
    
    .empty-files-state p {
        margin: 0;
        color: var(--bs-secondary-color);
        font-size: var(--fs-body);
    }
    
    @media (max-width: 576px) {
        .file-card-header {
            padding: 0.875rem;
        }
        
        .file-icon-wrapper {
            width: 40px;
            height: 40px;
        }
        
        .file-icon-wrapper i {
            font-size: var(--fs-lg);
        }
        
        .file-name {
            font-size: var(--fs-body);
        }
        
        .btn-file-action {
            padding: 0.65rem;
        }
    }

/* ═══ Source: Views/Shared/_IngredientSelector.cshtml ═══ */
.ingredient-row {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .ingredient-row::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--bs-success);
        border-radius: 4px 0 0 4px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ingredient-row:hover::before {
        opacity: 1;
    }

    [data-bs-theme="dark"] .ingredient-row {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    [data-bs-theme="light"] .ingredient-row {
        background: rgba(0, 0, 0, 0.015);
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    .ingredient-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--glass-black-8);
    }

    .remove-ingredient-btn {
        position: absolute;
        top: -1px;
        right: -1px;
        z-index: 10;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 0.75rem 0 0.75rem;
        opacity: 0.6;
        transition: all 0.2s ease;
        font-size: var(--fs-body);
    }

    .remove-ingredient-btn:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .ingredient-calories-badge {
        font-size: var(--fs-body-sm);
        min-width: 60px;
        text-align: center;
    }

    .ingredient-nutrition-preview {
        font-size: var(--fs-body);
        padding: 0.75rem;
        border-radius: var(--radius-md);
        margin-top: 1rem;
    }

    [data-bs-theme="dark"] .ingredient-nutrition-preview {
        background: var(--glass-white-5);
    }

    [data-bs-theme="light"] .ingredient-nutrition-preview {
        background: var(--glass-black-2);
    }

/* ═══ Source: Views/Shared/_InlineTranslationEditor.cshtml ═══ */
.inline-translation-editor {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.inline-translation-editor .te-toggle-btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.inline-translation-editor .te-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--glass-black-10);
}

.inline-translation-editor .te-card {
    border: none;
    box-shadow: 0 4px 12px var(--glass-black-15);
    border-radius: 8px;
    min-width: 340px;
    max-width: 520px;
    font-size: 0.82rem;
}

[data-bs-theme="dark"] .inline-translation-editor .te-card {
    background-color: var(--bs-dark);
    border: 1px solid var(--bs-gray-700);
}

.inline-translation-editor .te-card > .card-header {
    border-bottom: 1px solid var(--glass-black-10);
    border-radius: 8px 8px 0 0;
    background-color: var(--bs-light);
}

[data-bs-theme="dark"] .inline-translation-editor .te-card > .card-header {
    background-color: var(--bs-gray-800) !important;
    border-bottom-color: var(--bs-gray-700);
}

.inline-translation-editor .te-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.inline-translation-editor .te-tabs .nav-link.has-translation {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
}

.inline-translation-editor .te-tabs .nav-link.no-translation {
    background-color: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.2);
}

.inline-translation-editor .te-tabs .nav-link.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.inline-translation-editor .te-flag {
    font-size: 0.9em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.inline-translation-editor .te-status-dot {
    font-size: 0.75em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.inline-translation-editor .te-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

.inline-translation-editor .te-input.saving {
    border-color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.08);
    animation: te-pulse 1.5s infinite;
}

.inline-translation-editor .te-input.saved {
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.08);
}

.inline-translation-editor .te-input.error {
    border-color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.08);
}

.inline-translation-editor .te-save-all-btn:disabled {
    opacity: 0.6;
}

.inline-translation-editor .te-save-all-btn.has-changes {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: white;
}

.inline-translation-editor .te-ai-btn:hover {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.inline-translation-editor .te-paste-btn:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.inline-translation-editor .te-refresh-btn:hover {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: white;
}

.inline-translation-editor .te-prompt-card {
    border: 1px solid rgba(var(--bs-info-rgb), 0.3);
    border-radius: 4px;
    font-size: 0.78rem;
}

[data-bs-theme="dark"] .inline-translation-editor .te-prompt-card {
    background-color: var(--bs-gray-900);
    border-color: rgba(var(--bs-info-rgb), 0.4);
}

.inline-translation-editor .te-prompt-card > .card-header {
    background-color: var(--bs-info) !important;
    color: white;
    border-radius: 4px 4px 0 0;
}

.inline-translation-editor .te-prompt-textarea {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.72rem;
    resize: vertical;
}

.inline-translation-editor .te-copy-prompt-btn.copied {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

@media (max-width: 768px) {
    .inline-translation-editor .te-card {
        min-width: 100%;
        max-width: 100%;
    }

    .inline-translation-editor .te-culture-name {
        display: none;
    }

    .inline-translation-editor .te-tabs .nav-link {
        padding: 0.2rem 0.35rem;
        font-size: 0.75rem;
    }

    .inline-translation-editor .te-prompt-textarea {
        font-size: 0.68rem;
    }
}

@keyframes te-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ═══ Source: Views/Shared/_LanguageSelector.cshtml ═══ */
.flag-icon {
        display: inline-block;
        width: 20px;
        height: 15px;
        font-size: 16px;
        line-height: 15px;
        text-align: center;
        border-radius: 2px;
        box-shadow: 0 0 1px var(--glass-black-20);
    }

/* ═══ Source: Views/Shared/_Layout.cshtml ═══ */
body {
                visibility: hidden;
            }

/* ═══ Source: Views/Shared/_Navbar.cshtml ═══ */
.theme-check {
        font-size: 1.2rem;
    }

    .dropdown-item.active .theme-check {
        display: inline-block !important;
    }

    [data-bs-theme="dark"] .mdi-white-balance-sunny {
        opacity: 0.5;
    }

    [data-bs-theme="light"] .mdi-moon-waning-crescent {
        opacity: 0.5;
    }