@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Source+Serif+4:wght@200..900&family=Libre+Baskerville:wght@400;700&display=swap');

#app {
  opacity: 0;
}

/* ================================================
   DASHY CUSTOM CSS - 'GLASS' THEME ANIMATED
   Fixed: Vertical alignment, responsive grid, improved animations
   ================================================ */

:root {
  --primary: #9fdfac;
  --background: #1a2a1f;
  --background-darker: #0f1814;

  --info: #9fdfac;
  --success: #20e253;
  --warning: #f6f000;
  --error: #fca016;
  --danger: #f80363;
  --neutral: #1A4314;

  --white: #fff;
  --black: #000;
  --medium-grey: #9e9e9e;

  --item-group-outer-background: linear-gradient(145deg, #1A4314, #2d6b24, #4D2C5E) !important;
  --item-group-background: transparent !important;
  --item-group-heading-text-color: #fff;
  --item-group-heading-text-color-hover: rgba(255, 255, 255, 0.85);
  --item-group-padding: 10px;
  --item-group-shadow: 5px 2px 20px rgba(0, 0, 0, 0.5);

  --item-background: hsla(0, 0%, 100%, 0.1);
  --item-background-hover: hsla(0, 0%, 100%, 0.2);
  --item-text-color: #fff;
  --item-text-color-hover: #9fdfac;
  --item-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --item-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

  --heading-text-color: #fff;
  --header-height: 6rem;

  --nav-link-text-color: rgba(255, 255, 255, 0.8);
  --nav-link-background-color: transparent;
  --nav-link-text-color-hover: #fff;
  --nav-link-background-color-hover: rgba(26, 67, 20, 0.3);
  --nav-link-border-color: transparent;
  --nav-link-border-color-hover: transparent;
  --nav-link-shadow: none;
  --nav-link-shadow-hover: none;

  --search-container-background: transparent !important;
  --search-field-background: rgba(0, 0, 0, 0.2);
  --search-label-color: #fff;

  --footer-text-color: rgba(255, 255, 255, 0.6);
  --footer-text-color-link: #fff;
  --footer-background: transparent;
  --footer-height: 50px;

  --settings-background: transparent !important;
  --config-settings-background: linear-gradient(145deg, rgba(26, 67, 20, 0.95), rgba(45, 107, 36, 0.85)) !important;
  --cloud-backup-background: linear-gradient(145deg, rgba(26, 67, 20, 0.95), rgba(45, 107, 36, 0.85)) !important;

  --scroll-bar-color: linear-gradient(135deg, #4D2C5E, #1A4314);
  --scroll-bar-background: rgba(0, 0, 0, 0.2);
  --scroll-bar-width: 10px;

  --curve-factor: 12px;
  --curve-factor-navbar: 16px;
  --curve-factor-small: 6px;

  --font-headings: "Inter", sans-serif !important;
  --font-body: "Source Serif 4", serif !important;
  --font-monospace: "Libre Baskerville", serif !important;
}

/* ================================================
   GLOBAL BACKGROUND
   ================================================ */
html, body {
  position: relative;
  background: linear-gradient(
    135deg,
    #1A4314 20%,
    #2d6b24 40%,
    #4D2C5E 75%,
    #190842 100%
  ) !important;
  overflow-x: hidden;
}

/* Gradient drift behind everything */
body::before {
  content: '';
  position: fixed;
  inset: -60%;
  z-index: -2;
  background: linear-gradient(135deg, #1A4314, #2d6b24, #4D2C5E, #190842);
  background-size: 400% 400%;
  animation: drift 60s ease-in-out infinite alternate;
}

/* ================================================
   ENHANCED CLOUD LAYER WITH DEPTH
   ================================================ */
.home::before,
.settings-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    radial-gradient(circle at 25% 25%, rgba(159, 223, 172, 0.08) 2px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(77, 44, 94, 0.08) 1px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 1.5px, transparent 3px);
  background-size: 100px 100px, 180px 180px, 250px 250px;
  animation: cloudDrift 120s linear infinite, cloudPulse 8s ease-in-out infinite alternate;
  opacity: 0.4;
}

/* Additional floating orbs layer */
.home::after,
.settings-outer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background-image:
    radial-gradient(circle at 20% 40%, rgba(159, 223, 172, 0.15) 0%, transparent 15%),
    radial-gradient(circle at 80% 60%, rgba(77, 44, 94, 0.12) 0%, transparent 18%),
    radial-gradient(circle at 40% 80%, rgba(159, 223, 172, 0.1) 0%, transparent 20%);
  animation: orbFloat 25s ease-in-out infinite alternate;
  opacity: 0.3;
}

/* ================================================
   ENHANCED ANIMATIONS
   ================================================ */
@keyframes drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(8%,6%,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes cloudDrift {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 1000px 500px, -500px 700px, 800px -300px; }
}

@keyframes cloudPulse {
  0% { opacity: 0.35; }
  100% { opacity: 0.45; }
}

@keyframes orbFloat {
  0% { 
    transform: translate(0, 0);
    opacity: 0.3;
  }
  50% { 
    transform: translate(30px, -40px);
    opacity: 0.4;
  }
  100% { 
    transform: translate(-20px, 20px);
    opacity: 0.3;
  }
}

@keyframes subtleGlow {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 15px rgba(77, 44, 94, 0.2);
  }
  50% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 25px rgba(77, 44, 94, 0.4);
  }
}

@keyframes iconRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ================================================
   CORE COMPONENTS
   ================================================ */

.home,
.settings-outer {
  background: transparent !important;
  position: relative;
}

header {
  background: rgba(10, 14, 28, 0.55) !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4),
              0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ================================================
   PURPLE BORDER ON HOVER WITH SMOOTH GLOW
   ================================================ */

.item-wrapper .item {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s ease-in-out, 
              border-color 0.3s ease-in-out !important;
  border: 2px solid transparent !important;
}

.item-wrapper:hover .item {
  transform: translateY(-8px) scale(1.02) !important;
  animation: subtleGlow 2s ease-in-out infinite !important;
  border-color: #4D2C5E !important;
}

.item-wrapper:hover .item .item-icon {
  animation: iconRotate 0.6s ease-in-out !important;
}

.item-title,
.item-details {
  color: var(--item-text-color) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.item-wrapper:hover .item-title {
  color: var(--item-text-color-hover) !important;
}

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

.search-container {
  background: var(--search-container-background) !important;
}

.search-container .search-label {
  color: var(--search-label-color) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.search-container input[type="search"] {
  background: var(--search-field-background) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
}

.search-container input[type="search"]:focus {
  border-color: #4D2C5E !important;
  box-shadow: 0 0 15px rgba(77, 44, 94, 0.4) !important;
}

.search-container input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ================================================
   SCROLLBAR WITH GRADIENT
   ================================================ */

::-webkit-scrollbar {
  width: var(--scroll-bar-width);
  height: var(--scroll-bar-width);
}

::-webkit-scrollbar-track {
  background: var(--scroll-bar-background);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #4D2C5E, #2d6b24, #1A4314);
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #6b3d82, #3d8a34, #2d6b24);
}

/* Dropdown scrollbar */
select::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.config-options::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #4D2C5E, #2d6b24, #1A4314) !important;
}

/* ================================================
   BUTTONS
   ================================================ */

.modal-button.confirm,
button.btn-primary {
  background: linear-gradient(145deg, var(--success), var(--primary)) !important;
  color: var(--background-darker) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

.modal-button.confirm:hover,
button.btn-primary:hover {
  background: linear-gradient(145deg, var(--primary), var(--success)) !important;
  box-shadow: 0 0 15px var(--primary) !important;
  transform: translateY(-2px);
}

button.btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
}

button.btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

/* ================================================
   FOOTER
   ================================================ */

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4) !important;
  background: transparent !important;
}

/* ================================================
   FIX 1: RESPONSIVE GRID LAYOUT (MAX 3 PER ROW)
   ================================================ */

/* Section Container */
.inner-size-large,
.inner-size-medium,
.inner-size-small {
  display: grid !important;
  gap: 1.25em !important; /* Changed to em */
  padding: 1em !important; /* Changed to em */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Default: Fluid columns based on content */
.inner-size-large {
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)) !important; /* Changed minmax to em */
  max-width: 100% !important;
}

@media (max-width: 75em) {
  .inner-size-large {
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)) !important;
  }
  .item-wrapper {
    max-width: 20em !important; /* Adjust max-width for medium screens */
  }
}

@media (max-width: 48em) {
  .inner-size-large {
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)) !important;
  }
  .item-wrapper {
    max-width: 15em !important; /* Adjust max-width for small screens */
  }
}



/* ================================================
   FIX 2: GROUP HEADING ICON ALIGNMENT
   ================================================ */

.lbl-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.lbl-toggle:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--curve-factor-small) !important;
}

.lbl-toggle > .section-icon.item-icon.wrapper-small {
  flex-shrink: 0 !important;
  width: 2.8em !important; /* Changed to em for responsiveness */
  height: 2.8em !important; /* Changed to em for responsiveness */
  padding: 0.2em !important; /* Adjusted padding */
  margin: 0 !important;
  border-radius: var(--curve-factor-small) !important;
  background: linear-gradient(145deg, #1A4314, #2d6b24, #4D2C5E) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
}

.lbl-toggle > .section-icon.item-icon.wrapper-small i {
  font-size: 1.2em !important; /* Changed to em for responsiveness */
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  line-height: 1 !important;
}

/* ================================================
   FIX 3: ITEM WRAPPER - REMOVE SPAN CLASSES
   ================================================ */

.item-wrapper {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  max-width: 25em !important; /* Default max-width for items */
}

/* Override any span-X classes that force width */
.item-wrapper[class*="span-"] {
  grid-column: auto !important;
  width: 100% !important;
}

/* ================================================
   FIX 4: INDIVIDUAL ITEM VERTICAL ALIGNMENT
   ================================================ */

.item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 1em 1.25em !important; /* Adjusted padding for responsiveness */
  box-sizing: border-box !important;
}

/* ================================================
   ITEM ICON BOX - FIXED SIZE
   ================================================ */

.item .item-icon {
  width: 3em !important; /* Changed to em for responsiveness */
  height: 3em !important; /* Changed to em for responsiveness */
  min-width: 3em !important;
  min-height: 3em !important;
  max-width: 3em !important;
  max-height: 3em !important;
  margin: 0 !important;
  padding: 0.4em !important; /* Adjusted padding */
  border-radius: var(--curve-factor) !important;
  background: linear-gradient(145deg, #1A4314, #2d6b24, #4D2C5E) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.item .item-icon i {
  font-size: 1.3em !important; /* Changed to em for responsiveness */
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================================
   ITEM TITLE BLOCK - PERFECT VERTICAL CENTER
   ================================================ */

.item .tile-title {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.25rem !important;
}

.item .tile-title .text {
  color: var(--item-text-color) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  font-size: 1.1em !important; /* Changed to em for responsiveness */
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.3s ease !important;
}

.item .tile-title .description {
  color: var(--item-text-color) !important;
  opacity: 0.85 !important;
  font-size: 0.9em !important; /* Changed to em for responsiveness */
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.3s ease !important;
}

.item-wrapper:hover .item .tile-title .description {
  opacity: 1 !important;
}



/* ================================================
   RESPONSIVE ADJUSTMENTS FOR SMALLER SCREENS
   ================================================ */

@media (max-width: 75em) { /* Changed to em (1200px / 16px) */
  .item .item-icon {
    width: 2.5em !important; /* Changed to em */
    height: 2.5em !important; /* Changed to em */
    min-width: 2.5em !important;
    min-height: 2.5em !important;
    max-width: 2.5em !important;
    max-height: 2.5em !important;
    padding: 0.4em !important;
  }
  
  .item .item-icon i {
    font-size: 1.3em !important;
  }
  
  .item .tile-title {
    padding: 0.5em 0 !important; /* Added vertical padding for text */
  }

  .item .tile-title .text {
    font-size: 1em !important;
  }
  
  .item .tile-title .description {
    font-size: 0.85em !important;
  }
}

@media (max-width: 48em) { /* Changed to em (768px / 16px) */
  .item {
    padding: 0.9em 1em !important; /* Changed to em */
    flex-wrap: wrap !important; /* Allow content to wrap on small screens */
  }
  
  .item .item-icon {
    width: 2.2em !important;
    height: 2.2em !important;
    min-width: 1.5em !important; /* Allow icon to shrink more */
    min-height: 1.5em !important; /* Allow icon to shrink more */
    max-width: 2.2em !important;
    max-height: 2.2em !important;
    padding: 0.35em !important;
    flex-shrink: 1 !important; /* Allow icon to shrink on small screens */
  }
  
  .item .item-icon i {
    font-size: 1.1em !important;
  }
  
  .item .tile-title .text {
    font-size: 1em !important; /* Slightly larger font size for readability */
    color: var(--item-text-color) !important; /* Explicitly set color */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  
  .item .tile-title .description {
    font-size: 0.9em !important; /* Slightly larger font size for readability */
    color: var(--item-text-color) !important; /* Explicitly set color */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  
  body::before { animation-duration: 90s; }
  .home::after, .settings-outer::after { opacity: 0.2; }
}

/* ITEM SIZE VARIANTS (IF NEEDED) */

.item.size-medium {
  padding: 0.85em 1.1em !important; /* Changed to em */
}

.item.size-medium .item-icon {
  width: 2.5em !important; /* Changed to em */
  height: 2.5em !important; /* Changed to em */
  min-width: 2.5em !important;
  min-height: 2.5em !important;
  max-width: 2.5em !important;
  max-height: 2.5em !important;
  padding: 0.4em !important;
}

.item.size-medium .item-icon i {
  font-size: 1.3em !important;
}

.item.size-medium .tile-title .text {
  font-size: 1em !important;
}

.item.size-medium .tile-title .description {
  font-size: 0.85em !important;
}

.item.size-small {
  padding: 0.75em 1em !important; /* Changed to em */
}

.item.size-small .item-icon {
  width: 2.2em !important; /* Changed to em */
  height: 2.2em !important; /* Changed to em */
  min-width: 2.2em !important;
  min-height: 2.2em !important;
  max-width: 2.2em !important;
  max-height: 2.2em !important;
  padding: 0.35em !important;
}

.item.size-small .item-icon i {
  font-size: 1.1em !important;
}

.item.size-small .tile-title .text {
  font-size: 0.95em !important;
}

.item.size-small .tile-title .description {
  font-size: 0.8em !important;
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .home::before,
  .home::after,
  .settings-outer::before,
  .settings-outer::after,
  .item-wrapper:hover .item,
  .item-wrapper:hover .item .item-icon { 
    animation: none !important;
  }
  
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Focus states for keyboard navigation */
.item:focus,
.item:focus-visible {
  outline: 2px solid #4D2C5E !important;
  outline-offset: 2px !important;
  border-color: #4D2C5E !important;
}

/* ================================================
   ADDITIONAL POLISH & IMPROVEMENTS
   ================================================ */

/* Smooth loading animation for items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item-wrapper {
  animation: fadeInUp 0.5s ease-out backwards;
}

/* Stagger animation for items */
.item-wrapper:nth-child(1) { animation-delay: 0.05s; }
.item-wrapper:nth-child(2) { animation-delay: 0.1s; }
.item-wrapper:nth-child(3) { animation-delay: 0.15s; }
.item-wrapper:nth-child(4) { animation-delay: 0.2s; }
.item-wrapper:nth-child(5) { animation-delay: 0.25s; }
.item-wrapper:nth-child(6) { animation-delay: 0.3s; }

/* Enhanced glass effect on hover */
.item-wrapper:hover .item {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: hsla(0, 0%, 100%, 0.15) !important;
}

/* Subtle shine effect on cards */
.item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
}

.item-wrapper:hover .item::after {
  left: 100%;
}

/* Section headers enhancement */
.section-heading {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* --- Reveal branded dashboard --- */
#app {
  opacity: 1;
  transition: opacity 0.35s ease-in-out;
}