/* ==========================================
   THE SODA JERK - CONSOLIDATED STYLES
   ========================================== */

/* ==========================================
   CSS CUSTOM PROPERTIES (ROOT VARIABLES)
   ========================================== */

:root {
  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  --font-body: "Outfit", sans-serif;
  --font-heading: "Spicy Rice", serif;
  --font-fun: "Luckiest Guy", cursive;
  --font-script: "Lobster", cursive;
  --font-accent: "Poppins", sans-serif;
  --font-nutrition: 'Helvetica', Arial, sans-serif;

  /* ==========================================
     FONT SIZES
     ========================================== */
  --font-size-50: 0.5rem;
  --font-size-75: 0.75rem;
  --font-size-90: 0.90rem;
  --font-size-100: 1rem;
  --font-size-110: 1.1rem;
  --font-size-125: 1.25rem;
  --font-size-150: 1.5rem;
  --font-size-175: 1.75rem;
  --font-size-200: 2rem;
  --font-size-250: 2.5rem;
  --font-size-300: 3rem;
  --font-size-400: 4rem;

  --font-weight-light: 200;
  --font-weight-semilight: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ==========================================
     SEMANTIC SPACING
     ========================================== */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 5rem;

  /* ==========================================
     SEMANTIC SIZING
     ========================================== */
  --touch-target-sm: 32px;                    /* Smallest interactive size, for dense UIs like grids */
  --touch-target-md: 44px;                    /* Standard touch target size for most buttons and icons */
  --touch-target-md-plus: 48px;               /* A slightly larger variant for tablet/desktop breakpoints */
  --touch-target-lg: 56px;                    /* Larger targets for primary actions like FABs or header icons */

  --icon-size-sm: 16px;                       /* Tiny icons, often inline with text */
  --icon-size-md: 24px;                       /* Medium icons */
  --icon-size-md-plus: 28px;                  /* Slightly larger variant for icons in buttons */
  --icon-size-lg: 32px;                       /* Standard icon size for grids and buttons */
  --icon-size-xl: 40px;                       /* Larger icons for cards and prominent actions */

  --avatar-size-sm: 32px;                     /* For grids/lists */
  --avatar-size-md: 56px;                     /* For header profile button */
  --avatar-size-lg: 80px;                     /* For forms */
  --avatar-size-xl: 200px;                    /* For main profile page hero display */

  --card-image-height-md: 140px;              /* Standard height for smaller preview images */
  --card-image-height-lg: 200px;              /* Standard height for larger embedded images & components */


  /* ==========================================
     BRAND PALETTE (App Identity)
     ========================================== */
  --color-brand-cream: #f5e4b7;               /* Rich Cream */
  --color-brand-pale-cream: #F9F2E7;          /* Pale cream */
  --color-brand-red: #b52a1c;                 /* Bottle cap red */
  --color-brand-blue: #0078a2;                /* Logo blue */
  --color-brand-mint: #a7f8a7;                /* Light Mint Green */
  --color-brand-tangerine: #f3a53a;           /* Light Tangerine */
  
  /* ==========================================
     SEMANTIC COLORS (Using Brand Palette)
     ========================================== */
  --color-primary: var(--color-brand-blue);
  --color-secondary: var(--color-brand-mint);
  --color-accent: var(--color-brand-tangerine);
  --color-error: var(--color-brand-red);
  --color-success: var(--color-soda-lime);
  --color-warning: #eab308;
  --color-info: var(--color-brand-cream);
  --color-header: var(--color-brand-pale-cream);
  --color-invisible: color-mix( in srgb, white 0%, transparent );
  
  /* ==========================================
     BUTTON ICON COLORS 
     ========================================== */
  --color-btn-add: #124C95;         /* Blue */
  --color-btn-save: #00BBBB;        /* Aqua */
  --color-btn-view: #7e22ce;        /* Grape purple */
  --color-btn-close: #2f3ad1;       /* Deep blue */
  --color-btn-cancel: #d66060;      /* Light red */
  --color-btn-export: #fa9911;      /* Tangerine */
  --color-btn-import: #03AEBD;      /* Teal */

  /* ==========================================
     TEXT COLORS
     ========================================== */
  --color-text-primary: #3a3f58;    /* Dark blue-grey for body text */
  --color-text-secondary: #6b7280;  /* Medium grey for secondary text */
  --color-text-muted: #9ca3af;      /* Light grey for muted text */
  --color-text-white: white;        /* White text */
  --color-text-black: black;        /* Black text */
  --color-text-offwhite: #f8f5f1;   /* Off-white text */

  /* ==========================================
     LINK COLORS
     ========================================== */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-error);
  --color-link-visited: #6366f1;

  /* ==========================================
     BACKGROUND COLORS
     ========================================== */
  --color-bg-body: var(--color-brand-pale-cream);
  --color-bg-card: white;
  --color-bg-card-top: #d9d9da;
  --color-bg-card-bottom: #f9fafb;
  --color-bg-card-left: #9a9b9c;
  --color-bg-card-right: #b7b8b9;
  --color-bg-muted: #f9fafb;
  --color-bg-muted-dark: #b7b8b9;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-subtle: #f8fafc;

  /* ==========================================
     BORDER COLORS
     ========================================== */
  --color-border-light: #e5e7eb;
  --color-border-medium: #b4bcc8;;
  --color-border-dark: #818a96;

  /* ==========================================
     TIER COLORS
     ========================================== */
  --color-tier-s: #dc2626;
  --color-tier-a: #ea580c;
  --color-tier-b: #eab308;
  --color-tier-c: #16a34a;
  --color-tier-d: #2563eb;
  --color-tier-f: #7c3aed;
  --color-tier-none: var(--color-text-secondary);

  /* ==========================================
     SPECIALTY COLOR EFFECTS
     ========================================== */
  --color-rainbow-gradient-right: linear-gradient(
        to right, 
        #ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, 
        #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, 
        #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, 
        #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040
    );
  --color-rainbow-gradient-left: linear-gradient(
        to left, 
        #ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, 
        #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, 
        #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, 
        #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040
    );
  --color-rainbow-gradient-bottom: linear-gradient(
        to bottom, 
        #ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, 
        #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, 
        #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, 
        #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040
    );

  /* ==========================================
     STATE COLORS WITH TRANSPARENCY
     ========================================== */

  /* Success states */
  --color-success-bg: rgba(34, 197, 94, 0.1);
  --color-success-border: rgba(34, 197, 94, 0.2);
  --color-success-text: #166534;

  /* Error states */
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.2);
  --color-error-text: #991b1b;

  /* Warning states */
  --color-warning-bg: rgba(234, 179, 8, 0.1);
  --color-warning-border: rgba(234, 179, 8, 0.2);
  --color-warning-text: #78350f;

  /* Info states */
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.2);
  --color-info-text: #1e3a8a;

  /* ==========================================
     SODA PALETTE (All Spectrums)
     ========================================== */

  /* Red Spectrum - Cherry */
  --color-soda-cherry: #de3163;               /* Cherry red */
  --color-soda-cherry-light: #ffb7ce;         /* Cotton candy pink */

  /* Orange Spectrum */
  --color-soda-orange: #f97316;               /* Orange soda */
  --color-soda-orange-light: #fdba74;         /* Light orange */

  /* Yellow Spectrum - Lemon */
  --color-soda-lemon: #efe510;                /* Lemon yellow */
  --color-soda-lemon-light: #fff570;          /* Light lemon */

  /* Green Spectrum - Lime */
  --color-soda-lime: #22c55e;                 /* Lime green */
  --color-soda-lime-light: #8EFFB4;           /* Light lime */

  /* Blue Spectrum - Blue Raspberry */
  --color-soda-blue-raspberry: #3b82f6;       /* Blue raspberry */
  --color-soda-blue-raspberry-light: #8BC5FF; /* Light blue raspberry */

  /* Purple Spectrum - Grape */
  --color-soda-grape: #7e22ce;                /* Grape purple */
  --color-soda-grape-light: #c084fc;          /* Light grape */

  /* Brown Spectrum - Root Beer */
  --color-soda-root-beer: #8b5e19;            /* Root beer brown */
  --color-soda-root-beer-light: #be8314;      /* Light root beer */

  /* Dark Brown Spectrum - Cola */
  --color-soda-cola: #4a2c2a;                 /* Dark cola brown */
  --color-soda-cola-light: #8C786A;           /* Lighter cola (root beer tone) */

  /* Cream Spectrum */
  --color-soda-cream: #f5ecd4;                /* Cream soda base */
  --color-soda-cream-light: #faf6e8;          /* Light cream */

  /* Green Spectrum - Mint */
  --color-soda-mint: #a7f8a7;                 /* Mint green */
  --color-soda-mint-light: #ccf8cc;           /* Light mint */

  /* Pink Spectrum - Cotton Candy */
  --color-soda-cotton-candy: #ffb7ce;         /* Cotton candy pink */
  --color-soda-cotton-candy-light: #ffc7de;   /* Light cotton candy */

  /* ==========================================
     COMPLETE SODA/SWEETS TINTS 
     ========================================== */

  /* Cherry tints */
  --color-soda-cherry-tint-subtle: color-mix( in srgb, var(--color-soda-cherry) 10%, transparent );
  --color-soda-cherry-tint: color-mix( in srgb, var(--color-soda-cherry) 25%, transparent );
  --color-soda-cherry-tint-medium: color-mix( in srgb, var(--color-soda-cherry) 50%, transparent );
  --color-soda-cherry-tint-strong: color-mix( in srgb, var(--color-soda-cherry) 75%, transparent );

  /* Orange tints */
  --color-soda-orange-tint-subtle: color-mix( in srgb, var(--color-soda-orange) 10%, transparent );
  --color-soda-orange-tint: color-mix( in srgb, var(--color-soda-orange) 25%, transparent );
  --color-soda-orange-tint-medium: color-mix( in srgb, var(--color-soda-orange) 50%, transparent );
  --color-soda-orange-tint-strong: color-mix( in srgb, var(--color-soda-orange) 75%, transparent );

  /* Lemon tints */
  --color-soda-lemon-tint-subtle: color-mix( in srgb, var(--color-soda-lemon) 10%, transparent );
  --color-soda-lemon-tint: color-mix( in srgb, var(--color-soda-lemon) 25%, transparent );
  --color-soda-lemon-tint-medium: color-mix( in srgb, var(--color-soda-lemon) 50%, transparent );
  --color-soda-lemon-tint-strong: color-mix( in srgb, var(--color-soda-lemon) 75%, transparent );

  /* Lime tints */
  --color-soda-lime-tint-subtle: color-mix( in srgb, var(--color-soda-lime) 10%, transparent );
  --color-soda-lime-tint: color-mix( in srgb, var(--color-soda-lime) 25%, transparent );
  --color-soda-lime-tint-medium: color-mix( in srgb, var(--color-soda-lime) 50%, transparent );
  --color-soda-lime-tint-strong: color-mix( in srgb, var(--color-soda-lime) 75%, transparent );

  /* Blue Raspberry tints */
  --color-soda-blue-raspberry-tint-subtle: color-mix( in srgb, var(--color-soda-blue-raspberry) 10%, transparent );
  --color-soda-blue-raspberry-tint: color-mix( in srgb, var(--color-soda-blue-raspberry) 25%, transparent );
  --color-soda-blue-raspberry-tint-medium: color-mix( in srgb, var(--color-soda-blue-raspberry) 50%, transparent );
  --color-soda-blue-raspberry-tint-strong: color-mix( in srgb, var(--color-soda-blue-raspberry) 75%, transparent );

  /* Grape tints */
  --color-soda-grape-tint-subtle: color-mix( in srgb, var(--color-soda-grape) 10%, transparent );
  --color-soda-grape-tint: color-mix( in srgb, var(--color-soda-grape) 25%, transparent );
  --color-soda-grape-tint-medium: color-mix( in srgb, var(--color-soda-grape) 50%, transparent );
  --color-soda-grape-tint-strong: color-mix( in srgb, var(--color-soda-grape) 75%, transparent );

  /* Root Beer tints */
  --color-soda-root-beer-tint-subtle: color-mix( in srgb, var(--color-soda-root-beer) 10%, transparent );
  --color-soda-root-beer-tint: color-mix( in srgb, var(--color-soda-root-beer) 25%, transparent );
  --color-soda-root-beer-tint-medium: color-mix( in srgb, var(--color-soda-root-beer) 50%, transparent );
  --color-soda-root-beer-tint-strong: color-mix( in srgb, var(--color-soda-root-beer) 75%, transparent );

  /* Cola tints */
  --color-soda-cola-tint-subtle: color-mix( in srgb, var(--color-soda-cola) 10%, transparent );
  --color-soda-cola-tint: color-mix( in srgb, var(--color-soda-cola) 25%, transparent );
  --color-soda-cola-tint-medium: color-mix( in srgb, var(--color-soda-cola) 50%, transparent );
  --color-soda-cola-tint-strong: color-mix( in srgb, var(--color-soda-cola) 75%, transparent );

  /* Cream tints */
  --color-soda-cream-tint-subtle: color-mix( in srgb, var(--color-soda-cream) 30%, transparent );
  --color-soda-cream-tint: color-mix( in srgb, var(--color-soda-cream) 50%, transparent );
  --color-soda-cream-tint-medium: color-mix( in srgb, var(--color-soda-cream) 70%, transparent );
  --color-soda-cream-tint-strong: color-mix( in srgb, var(--color-soda-cream) 75%, transparent );

  /* Mint tints */
  --color-soda-mint-tint-subtle: color-mix( in srgb, var(--color-soda-mint) 10%, transparent );
  --color-soda-mint-tint: color-mix( in srgb, var(--color-soda-mint) 25%, transparent );
  --color-soda-mint-tint-medium: color-mix( in srgb, var(--color-soda-mint) 50%, transparent );
  --color-soda-mint-tint-strong: color-mix( in srgb, var(--color-soda-mint) 75%, transparent );

  /* Cotton Candy tints */
  --color-soda-cotton-candy-tint-subtle: color-mix( in srgb, var(--color-soda-cotton-candy) 10%, transparent );
  --color-soda-cotton-candy-tint: color-mix( in srgb, var(--color-soda-cotton-candy) 25%, transparent );
  --color-soda-cotton-candy-tint-medium: color-mix( in srgb, var(--color-soda-cotton-candy) 50%, transparent );
  --color-soda-cotton-candy-tint-strong: color-mix( in srgb, var(--color-soda-cotton-candy) 75%, transparent );

  /* ==========================================
     SODA COLOR PICKER SWATCHES (Complete Set)
     ========================================== */
  --swatch-soda-cherry: var(--color-soda-cherry);
  --swatch-soda-orange: var(--color-soda-orange);
  --swatch-soda-lemon: var(--color-soda-lemon);
  --swatch-soda-lime: var(--color-soda-lime);
  --swatch-soda-blue-raspberry: var(--color-soda-blue-raspberry);
  --swatch-soda-grape: var(--color-soda-grape);
  --swatch-soda-root-beer: var(--color-soda-root-beer);
  --swatch-soda-cola: var(--color-soda-cola);
  --swatch-soda-cream: var(--color-soda-cream);
  --swatch-soda-cotton-candy: var(--color-soda-cotton-candy);
  --swatch-white: white;
  --swatch-black: black;

  /* ==========================================
     UTILITY TRANSPARENCIES
     ========================================== */
  --alpha-overlay: 0.5;
  --alpha-subtle: 0.1;
  --alpha-light: 0.2;
  --alpha-medium: 0.4;
  --alpha-strong: 0.6;
  --alpha-verystrong: 0.8;

  /* White overlays */
  --color-white-overlay-subtle: rgba(255, 255, 255, var(--alpha-subtle));
  --color-white-overlay-light: rgba(255, 255, 255, var(--alpha-light));
  --color-white-overlay-medium: rgba(255, 255, 255, var(--alpha-medium));
  --color-white-overlay-strong: rgba(255, 255, 255, var(--alpha-strong));
  --color-white-overlay-verystrong: rgba( 255, 255, 255, var(--alpha-verystrong) );

  /* Black overlays */
  --color-black-overlay-subtle: rgba(0, 0, 0, var(--alpha-subtle));
  --color-black-overlay-light: rgba(0, 0, 0, var(--alpha-light));
  --color-black-overlay-medium: rgba(0, 0, 0, var(--alpha-medium));
  --color-black-overlay-strong: rgba(0, 0, 0, var(--alpha-overlay));

  --color-box-shadow: rgba(0, 0, 0, 0.15);

  /* ==========================================
     LEGACY COMPATIBILITY (DEPRECATED)
     ========================================== */
  /* Old brand color names */
  --color-accent-cream: var(--color-brand-cream);
  --color-accent-pale-cream: var(--color-brand-pale-cream);
  --color-accent-red: var(--color-brand-red);
  --color-accent-blue: var(--color-brand-blue);
  --color-accent-mint: var(--color-brand-mint);
  --color-accent-tangerine: var(--color-brand-tangerine);
  --color-text: var(--color-text-primary);

  /* Old form-card names - map to new soda names */
  --color-form-red-start: var(--color-soda-cherry);
  --color-form-red-end: var(--color-soda-cherry-light);
  --color-form-orange-start: var(--color-soda-orange);
  --color-form-orange-end: var(--color-soda-orange-light);
  --color-form-yellow-start: var(--color-soda-lemon);
  --color-form-yellow-end: var(--color-soda-lemon-light);
  --color-form-green-start: var(--color-soda-lime);
  --color-form-green-end: var(--color-soda-lime-light);
  --color-form-blue-start: var(--color-soda-blue-raspberry);
  --color-form-blue-end: var(--color-soda-blue-raspberry-light);
  --color-form-purple-start: var(--color-soda-grape);
  --color-form-purple-end: var(--color-soda-grape-light);
  --color-form-brown-start: var(--color-soda-root-beer);
  --color-form-brown-end: var(--color-soda-root-beer-light);

  /* ==========================================
     CARD SETTINGS
     ========================================== */
  --card-radius-xs: 0.25rem;
  --card-radius-sm: 0.5rem;
  --card-radius-md: 0.75rem;
  --card-radius: 1rem;
  --card-shadow: 0 10px 25px var(--color-black-overlay-subtle);
  --card-shadow-lg: 0 20px 25px -5px var(--color-black-overlay-subtle),
                    0 8px 10px -6px var(--color-black-overlay-subtle);
  --card-padding: var(--space-lg);
  --card-header-padding: var(--space-lg);
  --card-header-padding-md: var(--space-md);

  /* ==========================================
     INPUT SETTINGS
     ========================================== */
  --input-radius: 0.50rem;
  --input-padding: 0.75rem 1rem;

  /* ==========================================
     BUTTON SETTINGS
     ========================================== */
  --button-radius: 0.5rem;
  --button-padding: 0.75rem 1.5rem;

  /* ==========================================
     TRANSITION SETTINGS
     ========================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ==========================================
     ACCORDION AND EXPANDABLE SETTINGS
     ========================================== */
  --dashboard-card-height-compact: 250px;
  --dashboard-card-height-expanded: 550px;
  --accordion-height-default: 1000px;
  --accordion-height-dashboard: 950px;
  --accordion-height-custom-soda: 500px;
  --accordion-height-criteria: 2000px;
  --accordion-height-global: 800px;
  --accordion-height-actions: 5rem;
}

/* =====================================================
   TEXT UTILITIES: Fonts, font sizes, font weights, alignments
   ===================================================== */

/* Font size utilities */
.font-size-75 { font-size: var(--font-size-75); }
.font-size-90 { font-size: var(--font-size-90); }
.font-size-100 { font-size: var(--font-size-100); }
.font-size-125 { font-size: var(--font-size-125); }
.font-size-150 { font-size: var(--font-size-150); }
.font-size-175 { font-size: var(--font-size-175); }
.font-size-200 { font-size: var(--font-size-200); }
.font-size-250 { font-size: var(--font-size-250); }
.font-size-300 { font-size: var(--font-size-300); }
.font-size-400 { font-size: var(--font-size-400); }

/* Font weight utilities */
.font-light{ font-weight: var(--font-weight-light); }
.font-semilight { font-weight: var(--font-weight-semilight); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text color utilities */
.text-color-primary { color: var(--color-text-primary); }
.text-color-secondary { color: var(--color-text-secondary); }
.text-color-muted { color: var(--color-text-muted); }
.text-color-white { color: var(--color-text-white); }
.text-color-black { color: var(--color-text-black); }

/* Allows paragraphs to preserve newlines without a big initial tab */
.preserve-newlines { white-space: pre-line; }

/* ==========================================
   STATE UTILITIES
   ========================================== */
.state-hidden {
  display: none !important;                 /* Hides the element */
}

/* ==========================================
   ALIGNMENT UTILITIES
   ========================================== */

/* Flexbox utilities - default direction is horizontal/row */
.flex { display: flex; }
.flex-expand { flex: 1; }                 /* Flex item will take up all available space */
.flex-wrap { flex-wrap: wrap; }           /* Items will wrap to the next line if not enough space */
.flex-column { flex-direction: column; }  /* Switches the flex direction to columnar (vertical) */
.flex-row { flex-direction: row; }        /* Switches the flex direction to row (horizontal - default) */
.flex-expand { flex: 1; }                 /* The element will expand to fill available space */


/* Justification utilities - horizontal in the default direction (row) */
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-space-between { justify-content: space-between; }
.justify-space-around { justify-content: space-around; }
.justify-space-evenly { justify-content: space-evenly; }

/* Alignment utilities - vertical across the default direction (row) */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-space-between { align-items: space-between; }
.align-stretch { align-items: stretch; }


/* Spreads items evenly across the row - touching the edges */
.flex-row-spread {
  display: flex;                                      /* Enables flexbox for horizontal layout */
  justify-content: space-between;                     /* Pushes items to opposite ends of the row */
  align-items: center;                                /* Vertically centers items */
}


/* ==========================================
   SPACING UTILITIES 
   ========================================== */

/* Margin Utilities */
.m-auto { margin: auto; }
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-xl); }

.mr-2xs { margin-right: var(--space-2xs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.ml-2xs { margin-left: var(--space-2xs); }
.ml-md { margin-left: var(--space-md); }

/* Padding Utilities */
.p-0   { padding: 0; }
.p-xs  { padding: var(--space-xs); }
.p-md  { padding: var(--space-md); }
.p-xl  { padding: var(--space-xl); }
.pt-0  { padding-top: 0; }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pb-0  { padding-bottom: 0; }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* Gapping utilities */
.gap-0 { gap: 0; }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }
.gap-5xl { gap: var(--space-5xl); }
.icon-gap { margin-right: var(--space-xs); }

/* Icon spacing */
.icon-spacing-2xs { margin-right: var(--space-2xs); }


/* ==========================================
   FOUNDATION: RESET AND BASE STYLES
   ========================================== */

/* Universal box-sizing reset for predictable layout */
*, *::before, *::after {
  box-sizing: border-box;                     /* Includes padding and border in the element's total width and height */
}

/* Base body styles */
body {
  font-family: var(--font-body);              /* Sets the default application font */
  margin: 0;                                  /* Removes default browser margins */
  padding: 0;                                 /* Removes default browser padding */
  background-color: var(--color-brand-pale-cream); /* Establishes the site's base background color */
  color: var(--color-text);                   /* Sets the default text color for the entire site */
  line-height: 1.6;                           /* Improves readability with a comfortable line height */
  transition: background-color var(--transition-slow); /* Smoothly animates background color changes */
}

/*--- Base Typography ---*/

/* Primary heading styles for H1 and H2 */
h1, h2 {
  font-family: var(--font-heading);           /* Uses the distinct, stylized heading font */
  font-weight: var(--font-weight-medium);     /* A balanced weight that's not overly bold */
  color: var(--color-brand-pale-cream);       /* Light text color for contrast on dark headers */
  text-shadow: 2px 2px 0 #073b3a;           /* Creates a subtle, retro 3D effect */
  -webkit-text-stroke: 0.5px #073b3a;       /* Adds a thin outline for better definition */
  margin: 0 0 var(--space-md) 0;              /* Provides consistent spacing below headings */
  line-height: 1.2;                           /* Tighter line height suitable for large text */
}

/* Secondary heading styles for H3-H6 */
h3, h4, h5, h6 {
  font-family: var(--font-accent);            /* Uses the secondary, clean accent font */
  font-weight: var(--font-weight-medium);     /* A balanced weight for subheadings */
  margin: 0 0 var(--space-md) 0;              /* Provides consistent spacing below headings */
  line-height: 1.2;                           /* Tighter line height for subheadings */
}

/* Base paragraph styling */
p {
  margin: 0 0 var(--space-md) 0;              /* Ensures consistent spacing below paragraphs */
}
p.error {
  color: var(--color-error);                 /* Red color for error messages */
}

/*--- Typographic Sizing and Components ---*/

/* Defines specific sizes for headings */
h1 { font-size: var(--font-size-200); }       /* Largest heading size */
h2 { font-size: var(--font-size-175); }       /* Second-largest heading size */
h3 { font-size: var(--font-size-150); }       /* Third-largest heading size */
h4 { font-size: var(--font-size-125); }       /* Fourth-largest heading size */

/* A simple, reusable caption component */
.caption {
  font-size: var(--font-size-90);             /* Smaller font size for supplementary text */
  color: var(--color-text-secondary);         /* Uses a muted color to be less prominent than body text */
  margin-top: var(--space-sm);                /* Adds space above the caption to separate it from content */
}

/* Centered modifier for the caption component */
.caption--centered {
  text-align: center;                         /* Horizontally centers the caption text */
}

/*--- Base Interactive Element Styles ---*/

/* Default link styling */
a {
  color: var(--color-link);                   /* Sets the default link color to the primary brand color */
  text-decoration: none;                      /* Removes the default underline for a cleaner look */
  transition: color var(--transition-fast);   /* Provides a smooth color change on hover */
}

/* Link hover state */
a:hover {
  color: var(--color-link-hover);             /* Changes color on hover for clear feedback */
  text-decoration: underline;                 /* Adds an underline on hover for accessibility and clarity */
}

/* Default list styling */
ul, ol {
  margin: 0 0 var(--space-md) 0;              /* Adds consistent spacing below lists */
  padding-left: var(--space-xl);              /* Provides standard indentation for list items */
  line-height: 1.6;                           /* Matches the base body line height for consistent spacing */
}

/* --- Responsiveness --- */
@media (min-width: 768px) {
  /* Scale up heading sizes for larger screens */
  h1 { font-size: var(--font-size-250); }     /* Adding 50px to the font size */
  h2 { font-size: var(--font-size-200); }     /* Adding 25px to the font size */
}


/* ==============================================
   COMPONENT: SITE LAYOUT (REVISED)
   ============================================== */

/*--- Base Structure (Mobile-First) ---*/

/* The main stacking container for the entire page */
.site-container {
  min-height: 100vh;                          /* Ensures content fills at least the full viewport height */
  display: flex;                              /* Enables a flexbox layout for header, body, and footer */
  flex-direction: column;                     /* Stacks the main site sections vertically */
}

/* The main site header */
.site-header {
  background-color: var(--color-brand-blue);  /* Sets the brand's primary blue as the background */
  color: var(--color-brand-pale-cream);       /* A light, contrasting text color for readability */
  border-bottom: 3px solid var(--color-brand-red); /* A thick, red border for a distinct brand accent */
  width: 100%;                                /* Ensures the header spans the full width of the viewport */
  position: relative;                         /* Establishes a positioning context for absolute children */
  overflow: visible;                          /* Allows decorative elements to escape the header's bounds */
  flex-shrink: 0;                             /* Prevents the header from shrinking in the desktop flex layout */
}

/* The main content area between the header and footer */
.site-body {
  display: flex;                              /* Establishes a flex context for its direct child */
  flex: 1;                                    /* Allows the body to grow and fill all available vertical space */
  position: relative;                         /* Establishes a positioning context for children */
  min-height: 0;                              /* A critical flexbox fix to allow child elements with overflow to scroll correctly */
}

/* The primary content wrapper card used on all pages */
.card--site-body {
    width: 100%;                              /* Ensures the card fills the full width of the .site-body */
    margin: 0;                                /* Removes default card margins for a seamless mobile view */
    border-radius: 0;                         /* Removes rounded corners for a full-screen mobile experience */
    flex-grow: 1;                             /* Allows this card to fill the entire .site-body */
    display: flex;                            /* Uses flexbox for its inner content layout */
    flex-direction: column;                   /* Stacks its children (e.g., .card-body) vertically */
}

/* The inner container that holds the page's primary scrollable content */
.card-scroll-list {
  flex-grow: 1;                               /* Allows this container to fill its parent (.card-body) */
                                              /* On mobile, it simply grows with content, letting the page scroll */
}

/* Constrains the height of the list inside our modals, enabling scrolling */
.card--modal .card-scroll-list {
  min-height: 60vh;                         /* Sets min height to 60% of the viewport height */
  max-height: 60vh;                         /* Sets max height to 60% of the viewport height */
}

/* --- Custom Scrollbar Styling --- */
.site-container::-webkit-scrollbar,
.card-scroll-list::-webkit-scrollbar,
.editor-column::-webkit-scrollbar,
.preview-column::-webkit-scrollbar {
  width: 10px;
}
.site-container::-webkit-scrollbar-track,
.card-scroll-list::-webkit-scrollbar-track,
.editor-column::-webkit-scrollbar-track,
.preview-column::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}
.site-container::-webkit-scrollbar-thumb,
.card-scroll-list::-webkit-scrollbar-thumb,
.editor-column::-webkit-scrollbar-thumb,
.preview-column::-webkit-scrollbar-thumb {
  background-color: var(--global-scrollbar-color, #a0aec0);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.site-container::-webkit-scrollbar-thumb:hover,
.card-scroll-list::-webkit-scrollbar-thumb:hover,
.editor-column::-webkit-scrollbar-thumb:hover,
.preview-column::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-primary);
}


/*--- Desktop App Shell Enhancements (Definitive) ---*/
@media (min-width: 769px) {
  /* Lock the viewport size and hide the main browser scrollbar on desktop */
  html,
  body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  /* Ensure the site body is a flex container that can constrain its children */
  .site-body {
    overflow: hidden;
  }

  /* The main header is now a bit more spacious on desktop  */
  .site-header {
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
  }
  
  /*
    This forces the direct child of the site-body card AND the main card-body within it
    to become flex containers that grow to fill space. This is robust against
    any number of intermediate wrapper divs.
  */
  .card--site-body > *,
  .card--site-body .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Essential for child scrolling to work */
  }

  /* Use the padding-shift trick to position the scrollbar at the edge */
  .card--site-body >.card-body {
    padding-right: 0;
  }

  /* The scroll list grows to fill the flex container and handles overflow */
  .card-scroll-list {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Create the visual gap between content and the edge scrollbar */
  .card-scroll-list > * {
    margin-right: var(--scroll-margin, var(--space-md));
  }
}

/* ==============================================
   COMPONENT: UNIFIED RESPONSIVE HEADER 
   ============================================== */

/* The main content wrapper for the header, laying out the hamburger, logo/title, and profile button */
.site-header-content {
  position: relative;                         /* Establishes a positioning context for absolute children (hamburger & profile button on desktop) */
  display: flex;                              /* Enables a flexible layout for alignment */
  align-items: center;                        /* Vertically centers all flex items */
  padding: 0 var(--space-md);                 /* Mobile-first horizontal padding */
  gap: var(--space-sm);                       /* Default spacing between flex items */
  min-height: 68px;                           /* Ensures an adequate touch target size for accessibility */
}

/* The hamburger button, now absolutely positioned on the left */
.hamburger-button {
  width: var(--touch-target-md);              /* Standard, comfortable touch target size */
  height: var(--touch-target-md);             /* Maintains a square aspect ratio for a balanced look */
  background: none;                           /* Removes the default browser background */
  border: none;                               /* Removes the default browser border */
  color: var(--color-brand-pale-cream);       /* Sets the icon color to contrast with the header */
  font-size: 1.2rem;                          /* A large, easily recognizable icon size */
  cursor: pointer;                            /* Signals that the button is interactive */
  display: flex;                              /* Enables flexbox for precise icon centering */
  align-items: center;                        /* Vertically centers the icon within the button */
  justify-content: center;                    /* Horizontally centers the icon within the button */
  border-radius: var(--button-radius);        /* Softens the button's edges for a modern aesthetic */
  transition: all var(--transition-fast);     /* Provides smooth feedback on interaction */
  flex-shrink: 0;                             /* Prevents the button from being compressed on small screens */
}

/* We don't want a focus ring on the hamburger button */
.hamburger-button:focus-visible {
  outline: none;                            /* Removes the default browser focus outline */
}

/* Hover state for the hamburger button */
.hamburger-button:hover {
  background-color: rgba(255, 255, 255, 0.1);   /* Adds a subtle highlight that doesn't overwhelm the design */
  transform: scale(1.05);                         /* A gentle growth effect for satisfying feedback */
}

/* The clickable link containing the site logo */
.header-logo-link {
  display: flex;                              /* Ensures proper alignment of the image within the link */
  align-items: center;                        /* Vertically centers the logo image */
  text-decoration: none;                      /* Removes the default link underline */
  flex-shrink: 0;                             /* Prevents the logo from being compressed by a long title */
}

/* The site logo image */
.header-logo-img {
  height: 56px;                               /* Default mobile logo size for brand recognition in a small space */
  width: auto;                                /* Maintains the logo's aspect ratio to prevent distortion */
  vertical-align: middle;                     /* Prevents baseline alignment issues in flex containers */
  transition: height var(--transition-fast);  /* Smoothly animates the logo's size change on desktop */
}

/* The main header title */
.header-title {
  font-family: var(--font-heading);           /* Maintains typographic hierarchy with the brand's heading font */
  color: var(--color-brand-pale-cream);       /* Ensures high contrast against the header's background */
  margin: 0;                                  /* Removes default heading margins that would break the layout */
  font-weight: normal;                        /* A lighter weight prevents the title from visually dominating the header */
  white-space: nowrap;                        /* Prevents the title from wrapping to a new line */
  overflow: hidden;                           /* Hides any part of the title that overflows its container */
  text-overflow: ellipsis;                    /* Adds "..." for overly long titles that would break the layout */
  transition: font-size var(--transition-fast);/* Smoothly animates the title's size change on desktop */
  flex-grow: 1;                               /* Allows the title to expand and fill available space */
  text-align: center;                         /* Centers the text within the now-expanded title container */
}

/* --- Responsive Title Spans --- */

/* Mobile title is visible by default */
.header-title--mobile {
  font-size: var(--font-size-175);            /* Smaller font size suitable for mobile header */
  display: inline;                            /* Makes the mobile title visible */
}

/* Desktop title is hidden by default */
.header-title--desktop {
  display: none;                              /* Hides the desktop title on mobile */
}

/*--- Tablet Adjustments ---*/
@media (min-width: 768px) {
  /* On tablets, keep the mobile title but make it larger */
  .header-title--mobile {
    font-size: var(--font-size-300);          /* Use a larger font for the mobile title on tablets */
  }

  /* The rest of your existing desktop rules apply here for the tablet layout */
  .site-header-content {
      justify-content: center;                /* Center the logo/title group */
      gap: var(--space-lg);                   /* Bigger spacing between the logo and title */
  }

  .header-logo-img {
    height: 100px;                            /* Increases the logo height for tablets and desktops */
  }

  .header-title {
    flex-grow: 0;                             /* Resets flex-grow so it only takes up its content's width */
  }

  .hamburger-button {
    position: absolute;                       /* Re-apply absolute positioning */
    left: var(--space-md);                    /* Positions the button from the left edge */
    width: var(--touch-target-md);            /* A slightly larger touch/click target */
    height: var(--touch-target-md);           /* Maintains the square aspect ratio */
    font-size: 1.4rem;                        /* A larger icon */
  }
}

/*--- Wide Desktop Adjustments ---*/
@media (min-width: 1024px) {
  /* Hides the mobile title and shows the full desktop one */
  .header-title--mobile {
    display: none;                            /* Hides the mobile-specific title */
  }
  .header-title--desktop {
    display: inline;                          /* Shows the desktop-specific title */
    font-size: var(--font-size-300);          /* Applies the largest font size for wide screens */
  }
}

/* ==============================================
   COMPONENT: STICKY STACKING HEADERS (MOBILE)
   ============================================== */

/* This effect is only active on mobile/tablet portrait views */
@media (max-width: 768px) {

  /* --- 1. The Main Site Header --- */
  /* This makes the main blue header stick to the top until it's pushed off screen */
  .site-header {
    position: sticky;                         /* Makes the header stick to the top of the viewport */
    top: 0;                                   /* The position it sticks to */
    z-index: 990;                             /* Ensures it stays above the content scrolling underneath */
  }

  /* --- 2. The Filter/Stats Bars --- */
  /* This makes the filter bar also sticky, so it replaces the main header once it scrolls away */
  .filter-bar,
  .stats-bar {
    position: sticky;                         /* Makes these bars also sticky */
    top: 0;                                   /* They will also stick to the top of the viewport */
    z-index: 989;                             /* A slightly lower z-index to slide underneath the main header */
  }

  /* --- 3. The Scrolling Content (Fixes the "Blank Space" issue) --- */
  /* This changes the main content area from absolute positioning to a natural flexbox flow,
     which is required for sticky positioning to work correctly */
  .scrolling-list-container {
    display: flex;                            /* Re-establish as a flex container */
    flex-direction: column;                   /* Stacks its children (headers, list) vertically */
    flex-grow: 1;                             /* Allows this container to fill the available space */
  }
}

/* ==============================================
   COMPONENT: LIST ITEM (BASE)
   ============================================== */

/* A reusable base class for a single-row flexbox item with content spaced apart */
.list-item {
  display: flex;                                        /* Enables flexbox for horizontal layout */
  justify-content: space-between;                       /* Pushes child elements to opposite ends */
  align-items: center;                                  /* Vertically centers content */
  padding: var(--space-sm) var(--space-md);             /* Provides consistent internal padding */
  border-radius: var(--input-radius);                   /* Consistent rounded corners */
  border: 1px solid var(--color-border-light);          /* A good default border */
}

/* ==========================================
   COMPONENT: PROFILE BUTTON
   ========================================== */

/* The main container for the profile button, now a flex item by default */
.profile-button-container {
  position: relative;                         /* Changed from absolute to relative for mobile */
  z-index: 1001;                              /* Ensures it sits above other header content like spacers */
  flex-shrink: 0;                             /* Prevents it from being compressed */
}

/* The clickable profile button itself, styled like a bottle cap */
.profile-button {
  width: var(--touch-target-md);              /* Defines a standard, clickable target size */
  height: var(--touch-target-md);             /* Maintains a perfect circle aspect ratio */
  border-radius: 50%;                         /* Ensures the "bottle cap" is perfectly circular */
  position: relative;                         /* Establishes a positioning context for badges or overlays */
  cursor: pointer;                            /* Signals that this element is interactive */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast); /* Provides smooth visual feedback on interaction */
  display: flex;                              /* Uses flexbox to easily center the content (avatar or initials) */
  align-items: center;                        /* Vertically centers the content */
  justify-content: center;                    /* Horizontally centers the content */
  background: linear-gradient(135deg,
                              var(--role-color-primary, #6b7280),
                              var(--role-color-secondary, #9ca3af)); /* Sets background based on user role */
  color: white;                               /* Sets a default text color for initials */
  border: 2px solid var(--role-color-primary, #4b5563); /* Creates a crisp, solid outer edge */
  padding: 3px;                               /* Creates space for the colored ring around the inner avatar */
}

/*--- Base States & Animations ---*/

/* Hover effects for the profile button */
.profile-button:hover {
  transform: scale(1.05);                     /* Slightly enlarges the button for clear feedback */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adds a subtle shadow for a lifting effect */
}

/* Active state for when the dropdown is open */
.profile-button.active {
  transform: scale(1.02);                     /* A subtle scale to indicate an active state */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);   /* A slightly smaller shadow for the active state */
}

/* Pop animation when the profile button is clicked */
@keyframes bottle-cap-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.15) rotate(2deg); }
  60% { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1.02); }
}

/* Class to trigger the pop animation */
.profile-button.pop {
  animation: bottle-cap-pop 0.3s ease-out;    /* Applies the pop animation with a smooth easing function */
}

/*--- Button Content (Avatar, Initials, Icon) ---*/

/* The user's avatar image inside the button */
.profile-button-avatar {
  width: 100%;                                /* Ensures the avatar image fills the space created by the parent's padding */
  height: 100%;                               /* Maintains the image's aspect ratio within the circle */
  border-radius: 50%;                         /* Keeps the inner image circular to match its container */
  object-fit: cover;                          /* Prevents the avatar image from being stretched or distorted */
}

/* The user's initials, displayed when no avatar is present */
.profile-button-initials {
  font-family: var(--font-accent);            /* Uses the secondary, clean accent font */
  font-weight: var(--font-weight-bold);       /* Bold weight for clear visibility */
  font-size: 0.8rem;                          /* Default smaller font size for mobile */
  line-height: 1;                             /* Ensures tight, centered vertical alignment */
  text-transform: uppercase;                  /* Standard for initials */
  position: relative;                         /* Ensures proper stacking context */
  z-index: 1;                                 /* Sits above the background gradient */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  /* Adds a subtle shadow for better readability */
}

/* The generic user icon for guests */
.profile-button-icon {
  font-size: 1rem;                            /* Default smaller icon size for mobile */
  position: relative;                         /* Ensures proper stacking context */
  z-index: 1;                                 /* Sits above the background gradient */
}

/*--- Responsive Adjustments ---*/

/* Repositions/resizes the entire button for the tablet/desktop header layout */
@media (min-width: 768px) {
  .profile-button-container {
    position: absolute;                          /* Switches to absolute positioning on desktop */
    top: -0.5rem;                                /* Better desktop position - matches header padding */
    right: -1.0rem;                              /* Better desktop position - matches header padding */
  }

  /* Enlarge the profile button and its contents */
  .profile-button {
    width: var(--touch-target-lg);            /* Increased size for desktop */
    height: var(--touch-target-lg);           /* Increased size for desktop */
  }
  .profile-button-initials {
    font-size: 1.5rem;                          /* Increases font size for better visibility on larger screens */
  }
  .profile-button-icon {
    font-size: 1.5rem;                          /* Increases icon size for better visibility on larger screens */
  }
}

/* ==========================================
   COMPONENT: PROFILE DROPDOWN
   ========================================== */

/* The main dropdown container */
.profile-dropdown {
  position: fixed;                            /* Use fixed positioning to break out of the header's clipping context */
  /* top, right, and left will now be set by JavaScript */
  width: 240px;                               /* A consistent width for the dropdown */
  background: white;                        /* A solid white background for clarity */
  border: 2px solid var(--color-border-medium); /* A clear, medium border */
  border-radius: var(--card-radius);          /* Standard card border radius */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* A prominent shadow to lift it off the page */
  z-index: 9999;                              /* A very high z-index to ensure it appears above all other content */
  opacity: 0;                                 /* Hidden by default for fade-in animation */
  overflow: hidden;                           /* Clips content to the rounded corners */
  visibility: hidden;                         /* Prevents interaction when hidden */
  transform: translateY(-10px);               /* Starts slightly above for a slide-down animation */
  transition: all var(--transition-fast);     /* Smoothly animates all property changes */
}

/* The visible state for the dropdown */
.profile-dropdown.open {
  opacity: 1;                                 /* Fades the dropdown in */
  visibility: visible;                        /* Makes the dropdown interactive */
  transform: translateY(0);                   /* Moves the dropdown to its final position */
}

/*--- Dropdown Content ---*/

/* An individual item within the dropdown menu */
.profile-dropdown-item {
  display: block;                             /* Ensures the item takes up the full width */
  width: 100%;                                /* Makes the entire row clickable */
  padding: var(--space-sm) var(--space-md);   /* Comfortable padding for text and icons */
  text-decoration: none;                      /* Removes the default link underline */
  color: var(--color-text-primary);           /* Sets the text color to the primary body text color */
  border: none;                               /* Removes default button borders */
  background: none;                           /* Removes default button backgrounds */
  text-align: left;                           /* Aligns text to the left */
  font-size: var(--font-size-90);             /* A clear, legible font size for menu items */
  transition: background-color var(--transition-fast); /* Smoothly animates the background color on hover */
  cursor: pointer;                            /* Signals that the item is interactive */
}

/* Hover state for dropdown items */
.profile-dropdown-item:hover {
  background-color: var(--color-brand-mint);  /* A mint green background on hover for clear feedback */
  text-decoration: none;                      /* Ensures no underline appears on hover */
  color: var(--color-text-primary);           /* Maintains the primary text color on hover */
}

/* First and last item border radius adjustments to match the container */
.profile-dropdown-item:first-child {
  border-radius: var(--card-radius) var(--card-radius) 0 0; /* Rounds the top corners of the first item */
}
.profile-dropdown-item:last-child {
  border-radius: 0 0 var(--card-radius) var(--card-radius); /* Rounds the bottom corners of the last item */
}

/* Icons within a dropdown item */
.profile-dropdown-item i {
  margin-right: var(--space-sm);              /* Provides space between the icon and the text */
  width: 1rem;                                /* A fixed width to ensure all text is aligned */
  text-align: center;                         /* Horizontally centers the icon within its fixed width */
  color: var(--color-primary);                /* Sets the icon color to the primary brand color */
}

/* A visual separator between groups of dropdown items */
.profile-dropdown-divider {
  height: 1px;                                /* A thin, single-pixel line */
  background-color: var(--color-border-light); /* A light color for a subtle separation */
  margin: var(--space-xs) 0;                  /* Provides vertical space around the divider */
}

/*--- User Info Header in Dropdown ---*/

/* The header section of the dropdown displaying user information */
.profile-dropdown-user-info {
  padding: var(--space-md);                   /* Comfortable padding around the user info */
  border-bottom: 1px solid var(--color-border-light); /* A light border to separate it from the menu items */
  background-color: var(--color-background-subtle); /* A very subtle background to differentiate the header */
}

/* The user's email address */
.profile-dropdown-user-email {
  font-size: var(--font-size-85);             /* A slightly smaller font size for secondary info */
  color: var(--color-text-secondary);         /* Muted text color for less emphasis */
  margin: 0;                                  /* Removes default paragraph margin */
  font-weight: var(--font-weight-medium);     /* A medium weight for clarity */
}

/* The user's role/subscription status pill */
.profile-dropdown-user-role {
  font-size: var(--font-size-80);             /* A small font size suitable for a pill */
  margin: var(--space-2xs) 0 0 0;             /* Adds a small space above the pill */
  display: inline-block;                      /* Allows the pill to have padding and a background */
  padding: 2px 6px;                           /* Small padding to create the pill shape */
  border-radius: 10px;                        /* A pill-shaped border radius */
  font-weight: var(--font-weight-medium);     /* A medium weight for clarity */
}

/* Color modifier for the 'Admin' role pill */
.profile-dropdown-user-role--admin {
  background-color: var(--color-brand-red);;    /* Brand red as the admin represents the brand */
  color: white;                               /* White text for high contrast */
}

/* Color modifier for the 'Subscriber' role pill */
.profile-dropdown-user-role--subscriber {
  background-color: var(--color-brand-tangerine); /* A distinct orange color for subscribers */
  color: white;                                 /* White text for high contrast */
}

/* Color modifier for the 'Free' role pill */
.profile-dropdown-user-role--free {
  background-color: #6b7280;                  /* A neutral grey color for the default role */
  color: white;                               /* White text for high contrast */
}

/*--- Responsive Adjustments ---*/

/* Repositions the dropdown for the tablet/desktop header layout */
@media (min-width: 768px) {
  .profile-dropdown {
    right: var(--space-md);                   /* Aligns with the desktop profile button */
    left: auto;                               /* Resets the mobile left property */
    max-width: none;                          /* Removes the mobile max-width constraint */
    margin-left: 0;                           /* Resets the mobile margin */
  }
}


/* ==============================================
   COMPONENT: MOBILE NAVIGATION PANEL
   ============================================== */

/*--- Overlay and Backdrop ---*/

/* Creates immersive navigation context by isolating content */
.nav-panel-overlay {
  position: fixed;                                         /* Covers entire viewport regardless of page scroll */
  top: 0;                                                  /* Starts from very top of screen */
  left: 0;                                                 /* Extends to left edge */
  width: 100vw;                                            /* Covers full viewport width */
  height: 100vh;                                           /* Covers full viewport height */
  background: rgba(0, 0, 0, 0.5);                        /* Semi-transparent dark backdrop focuses attention on panel */
  backdrop-filter: blur(4px);                              /* Modern blur effect adds depth and premium feel */
  z-index: 998;                                            /* Just below navigation panel in stacking order */
  opacity: 0;                                              /* Initially invisible for smooth entrance animation */
  visibility: hidden;                                      /* Prevents interaction when panel is closed */
  transition: all var(--transition-normal);                /* Smooth fade in/out enhances perceived performance */
}

/* Activates backdrop when navigation panel is open */
.nav-panel-overlay.active {
  opacity: 1;                                              /* Fades in to focus attention on navigation */
  visibility: visible;                                     /* Enables click-to-close functionality */
}

/*--- Navigation Panel Structure ---*/

/* Provides immersive soda-themed navigation experience */
.nav-panel {
  position: fixed;                                         /* Stays in place regardless of page scroll */
  top: 0;                                                  /* Aligns with top of viewport */
  left: 0;                                                 /* Slides in from left edge */
  width: 280px;                                            /* Wide enough for comfortable reading, narrow enough to leave context */
  height: 100vh;                                           /* Full height maximizes navigation space */
  background: linear-gradient(135deg,                      /* Default gradient provides rich visual experience */
    var(--color-soda-cherry) 0%, 
    var(--color-soda-blue-raspberry) 50%, 
    var(--color-soda-orange) 100%);
  z-index: 999;                                            /* Appears above backdrop overlay */
  transform: translateX(-100%);                            /* Initially hidden off-screen to left */
  transition: transform var(--transition-normal);          /* Smooth slide animation feels responsive */
  overflow-y: auto;                                        /* Enables scrolling for panels with many items */
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);            /* Depth shadow separates panel from background content */
}

/* Slides panel into view when activated */
.nav-panel.active {
  transform: translateX(0);                                /* Moves panel into viewport for interaction */
}

/*--- Panel Header ---*/

/* Establishes visual hierarchy and provides panel controls */
.nav-panel-header {
  display: flex;                                           /* Arranges logo, title, and close button in row */
  flex-shrink: 0;                                          /* Prevents compression during overflow */
  align-items: center;                                     /* Vertically centers all header elements */
  padding: var(--space-lg) var(--space-md);                /* Generous padding creates breathing room */
  background: rgba(0, 0, 0, 0.1);                        /* Subtle overlay distinguishes header from content */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);     /* Delicate separator defines header boundary */
  position: relative;                                      /* Enables fizz effect positioning */
}

/* Maintains brand identity within navigation context */
.nav-panel-logo {
  height: 40px;                                            /* Larger than mobile header but smaller than desktop */
  width: auto;                                             /* Preserves aspect ratio */
  margin-right: var(--space-md);                          /* Creates space between logo and title */
}

/* Reinforces brand while providing navigation context */
.nav-panel-title {
  font-family: var(--font-heading);                        /* Consistent typography with main header */
  font-size: var(--font-size-150);                         /* Large enough to establish hierarchy */
  color: white;                                            /* High contrast against colorful backgrounds */
  margin: 0;                                               /* Removes default heading margins */
  flex: 1;                                                 /* Takes available space between logo and close button */
}

/* Provides clear exit path from navigation panel */
.nav-panel-close {
  width: var(--touch-target-md);                           /* Standard touch target size for mobile */
  height: var(--touch-target-md);                          /* Square proportions for visual balance */
  background: rgba(255, 255, 255, 0.1);                  /* Subtle highlight distinguishes from header background */
  border: none;                                            /* Removes browser default styling */
  color: white;                                          /* High contrast for easy recognition */
  font-size: 1.2rem;                                       /* Large enough to tap accurately */
  cursor: pointer;                                         /* Indicates interactivity */
  border-radius: var(--button-radius);                     /* Softened corners feel modern */
  transition: all var(--transition-fast);                  /* Responsive hover feedback */
}

/* Confirms close button interaction */
.nav-panel-close:hover {
  background: rgba(255, 255, 255, 0.2);                   /* Slightly brighter highlight on hover */
}

/*--- Navigation Content ---*/

/* Creates comfortable reading environment for navigation items */
.nav-panel-content {
  display: flex;                                          /* Creates a stacking context */ 
  flex-direction: column;                                 /* Stack content vertically */
  flex-grow: 1;                                           /* Takes available vertical space */
  padding: var(--space-md);                               /* Consistent spacing around navigation content */
}

/*--- Navigation Items ---*/

/* Optimizes each navigation item for touch interaction and visual appeal */
.nav-panel-item {
  display: flex;                                           /* Aligns icon and text in readable layout */
  align-items: center;                                     /* Vertically centers icon with text */
  padding: var(--space-md) var(--space-lg);                /* Generous padding creates large touch targets */
  color: white;                                          /* High contrast against vibrant backgrounds */
  text-decoration: none;                                   /* Clean appearance without underlines */
  font-size: var(--font-size-110);                         /* Readable size for navigation context */
  font-weight: 500;                                        /* Medium weight provides good readability */
  border-radius: 12px;                                     /* Rounded corners feel friendly and modern */
  margin-bottom: var(--space-xs);                          /* Spacing between items prevents accidental taps */
  transition: all var(--transition-fast);                  /* Smooth hover effects feel responsive */
  min-height: 48px;                                        /* Ensures accessibility-compliant touch targets */
}

/* Provides satisfying hover feedback that encourages exploration */
.nav-panel-item:hover {
  background: rgba(255, 255, 255, 0.15);                  /* Subtle highlight that doesn't overwhelm design */
  text-decoration: none;                                   /* Maintains clean appearance */
  transform: translateX(4px);                              /* Gentle slide effect suggests forward movement */
}

/* Confirms touch interaction with immediate visual response */
.nav-panel-item:active {
  transform: translateX(2px) scale(0.98);                  /* Brief compression mimics physical button press */
}

/* Creates consistent icon spacing for visual alignment */
.nav-panel-item i {
  width: 24px;                                             /* Fixed width prevents text misalignment */
  margin-right: var(--space-md);                           /* Comfortable space between icon and text */
  text-align: center;                                      /* Centers icons within their allocated space */
  font-size: 1.1rem;                                       /* Large enough to recognize quickly */
}

/*--- Panel Sections ---*/

/* Organizes navigation items into logical groups */
.nav-panel-section {
  margin-top: var(--space-xl);                             /* Creates clear separation between content groups */
  padding-top: var(--space-lg);                            /* Additional space emphasizes section boundary */
  border-top: 1px solid rgba(255, 255, 255, 0.2);        /* Subtle visual separator */
}

/* Labels navigation sections for improved user comprehension */
.nav-panel-section-title {
  font-family: var(--font-accent);                        /* Distinguishes section labels from navigation items */
  font-size: var(--font-size-90);                         /* Smaller size establishes hierarchy */
  color: rgba(255, 255, 255, 0.8);                      /* Slightly muted to de-emphasize labels */
  text-transform: uppercase;                              /* Creates visual distinction from navigation items */
  letter-spacing: 0.5px;                                  /* Improves readability of uppercase text */
  margin: 0 0 var(--space-md) var(--space-lg);            /* Aligns with navigation item text */
  font-weight: 600;                                       /* Medium-bold weight for clear hierarchy */
}

/*--- Panel Footer ---*/

/* Copyright notice at the bottom of the navigation panel */
.nav-panel-footer {
  display: block;                                         /* Makes the footer visible */
  text-align: center;                                     /* Horizontally centers the footer content */
  padding: var(--space-xl);                               /* Provides ample spacing around the footer text */
  font-size: var(--font-size-90);                         /* A smaller font size for secondary information */
  color: var(--color-white-overlay-strong);               /* A muted text color for less emphasis */
}


/*--- Navigation Panel Fizz Support ---*/

/* A fizz wrapper for the nav panel */
.nav-panel-fizz-wrapper {
  display: flex;                                          /* Creates a stacking context */ 
  flex-direction: column;                                 /* Stack content vertically */
  position: relative;                                     /* Provides positioning context for fizz effects */
  width: 100%;                                            /* Fill the nav panel */
  height: 100%;                                           /* Fill the nav panel */
  overflow: hidden;                                       /* Contains fizz effects */
}

/* Enables existing fizz-animation.js fizz system within navigation panel */
.nav-panel-fizz-wrapper.fizz-container {
  position: relative;                                      /* Required for absolute positioning of fizz elements */
  overflow: hidden;                                        /* Contains fizz effects within panel boundaries */
}

/* Ensures fizz elements work properly with navigation panel layout */
.nav-panel-fizz-wrapper.fizz-container .bubble,
.nav-panel-fizz-wrapper.fizz-container .sparkle {
  z-index: 1;                                              /* Places fizz effects behind interactive content */
}

/* Maintains navigation content above fizz effects */
.nav-panel-content,
.nav-panel-header {
  position: relative;                                      /* Establishes stacking context */
}

/* =====================================================
   COMPONENT: NAV PANEL THEMES
   ===================================================== */

/* Base header gets a subtle transition for smooth color changes */
.nav-panel-header {
  transition: background-color var(--transition-normal); /* Applies a smooth transition to the background color */
}

/* --- Theme Modifiers --- */

/* Cherry theme for the header */
.nav-panel.nav-panel--cherry .nav-panel-header {
  background: var(--color-soda-cherry); /* Sets the header background to the cherry soda color */
  border-bottom-color: rgba(0, 0, 0, 0.2); /* Adds a subtle dark border at the bottom */
}

/* Blue Raspberry theme for the header */
.nav-panel.nav-panel--blue-raspberry .nav-panel-header {
  background: var(--color-soda-blue-raspberry); /* Sets the header background to the blue raspberry soda color */
  border-bottom-color: rgba(0, 0, 0, 0.2); /* Adds a subtle dark border at the bottom */
}

/* Orange theme for the header */
.nav-panel.nav-panel--orange .nav-panel-header {
  background: var(--color-soda-orange); /* Sets the header background to the orange soda color */
  border-bottom-color: rgba(0, 0, 0, 0.2); /* Adds a subtle dark border at the bottom */
}

/* ==========================================
   COMPONENT: PROFILE EDIT
   ========================================== */

/* Centers the avatar container */
.avatar-display-wrapper {
  display: flex;                                           /* Uses flexbox to enable easy centering of its children */
  justify-content: center;                                 /* Centers the avatar horizontally within the page section */
  align-items: center;                                     /* Centers the avatar vertically for a balanced look */
  margin-bottom: 1rem;                                     /* Provides consistent spacing below the avatar before the next element */
  padding: var(--space-lg) 0;                              /* Adds vertical breathing room without affecting horizontal alignment */
}

/* A container that allows for absolute positioning of the remove button */
.avatar-image-container {
  position: relative;                                      /* Establishes a positioning context for the remove button */
  display: flex;                                           /* Uses flexbox for easy centering of the image or placeholder */
  align-items: center;                                     /* Vertically centers the content */
  justify-content: center;                                 /* Horizontally centers the content */
  width: var(--avatar-size-xl);                            /* Defines a large, clear size for the main profile avatar */
  height: var(--avatar-size-xl);                           /* Keeps the container perfectly circular */
  border-radius: 50%;                                      /* Ensures the container itself is a circle */
  background: linear-gradient(135deg, var(--role-color-primary, #6b7280), var(--role-color-secondary, #9ca3af)); /* The dynamic background creates the colored ring */
  box-shadow: var(--card-shadow);                          /* Lifts the avatar off the page for a sense of depth */
  padding: 6px;                                            /* This padding creates the desired thickness of the colored ring */
}

/* Large avatar image and placeholder */
.current-avatar-image {
  width: 100%;                                             /* Stretches the image to the boundary created by the parent's padding */
  height: 100%;                                            /* Ensures the image fills the inner circle completely */
  border-radius: 50%;                                      /* Keeps the image perfectly circular */
  object-fit: cover;                                       /* Prevents the image from being distorted */
  border: none;                                            /* Removes the old white ring, as the parent container now creates the effect */
}

/* Styles for the placeholder when no avatar image is present */
.current-avatar-placeholder {
  width: 100%;                                             /* Ensures the placeholder takes up the full inner space */
  height: 100%;                                            /* Keeps the placeholder circular */
  border-radius: 50%;                                      /* Maintains the circular shape */
  background: none;                                        /* Removes its own background; the parent container now provides the color */
  display: flex;                                           /* Uses flexbox to center the initials */
  align-items: center;                                     /* Vertically centers the initials */
  justify-content: center;                                 /* Horizontally centers the initials */
  border: none;                                            /* No border is needed as the ring is created by the parent */
}

/* Large bold initials for the placeholder when no avatar image is present */
.avatar-initials {
  font-size: 4rem;                                         /* Scales the text to be proportional to the new, larger avatar size */
  font-weight: 600;                                        /* Makes the initials stand out clearly */
  color: white;                                            /* Ensures high contrast against the colored background for readability */
}

/* Handles the "No avatar" message */
.current-avatar-info {
  text-align: center;                                      /* Centers the "No avatar" helper text below the placeholder */
  margin-top: var(--space-md);                             /* Adds appropriate space between the placeholder and the text */
}

/* --- Enhanced Profile Edit Form Styles --- */

/* Creates the side-by-side grid layout for the form */
.profile-form-grid {
  display: flex;                                           /* This turns the container into a flexbox */
  align-items: center;                                     /* Vertically centers the children (the fields block and the button) */
  gap: var(--space-lg);                                    /* This creates a space between the fields and the button */
}

/* The fields container will take up all available horizontal space */
.profile-form-grid .fields-container {
  flex-grow: 1;                                            /* This tells the form fields container to take up all available horizontal space */
}

/* Creates a larger, more readable text input style */
.form-input--large {
  font-size: var(--font-size-125);                         /* Increases the font size for better readability */
  padding: var(--space-md) var(--space-lg);                /* Adds more internal padding for a larger, more touch-friendly input */
  border-radius: var(--card-radius-sm);                    /* Slightly larger radius to match the increased size */
}

/* Styles for the new save icon button */
.profile-save-btn {
  background-color: var(--color-soda-lime);                /* A green color signifies a positive "save" or "confirm" action */
  width: 56px;                                             /* Makes the button large enough to match the input height */
  height: 56px;                                            /* Maintains a square aspect ratio */
  border-radius: var(--card-radius-sm);                    /* Matches the border radius of the form inputs */
}
.profile-save-btn:hover {
  background-color: var(--color-brand-tangerine);          /* Changes color on hover for clear feedback */
}
.profile-save-btn:disabled {
  background-color: var(--color-border-medium);            /* A muted grey color indicates the button is inactive */
  opacity: 0.5;                                            /* Further reduces visual prominence when disabled */
  cursor: not-allowed;                                     /* Changes the cursor to show the button cannot be clicked */
  transform: none;                                         /* Prevents the hover scale effect on a disabled button */
}

/* --- Avatar Action Button Styles --- */

/* Base class for all buttons that sit on the avatar */
.avatar-action-btn {
  position: absolute;                                      /* Lifts the button out of flow to be placed over the avatar image */
  background-color: var(--color-white-overlay-strong);     /* Provides a semi-transparent background for visibility on any image */
  padding: var(--space-xs);                                /* Gives the icon breathing room inside the circular button */
  border-radius: 50%;                                      /* Creates a circular button that echoes the main avatar shape */
  width: var(--touch-target-md);                           /* Standard, comfortable touch/click target size */
  height: var(--touch-target-md);                          /* Maintains the button's perfect circular aspect ratio */
  line-height: 1;                                          /* Prevents extra vertical space from affecting alignment */
  z-index: 10;                                             /* Ensures the button appears on top of the avatar image */
  transition: all 0.2s ease;                               /* Provides a smooth transition for hover effects */
}
.avatar-action-btn:hover {
  transform: scale(1.1);                                   /* Slightly enlarges the button on hover for clear feedback */
}
.avatar-action-btn .action-button-icon {
  width: var(--icon-size-md-plus);                         /* Sizes the inner icon appropriately for the button's padding */
  height: var(--icon-size-md-plus);                        /* Maintains the icon's aspect ratio */
  margin: 0;                                               /* Removes any default margin that could misalign the icon */
}

/* Positions the remove button at the top right ("1 o'clock") */
.avatar-remove-btn {
  top: 5px;                                                /* Positions from the top edge of the container */
  right: 5px;                                              /* Positions from the right edge of the container */
}
.avatar-remove-btn:hover {
  background-color: var(--color-brand-red);                /* Provides clear visual feedback that this is a destructive action */
}

/* Positions the save button at the top left ("11 o'clock") */
.avatar-save-btn {
  top: 5px;                                                /* Positions from the top edge of the container */
  left: 5px;                                               /* Positions from the left edge of the container */
  background-color: var(--color-soda-lime-tint-medium);    /* A green color signifies a "confirm" or "save" action */
}
.avatar-save-btn:hover {
  background-color: var(--color-soda-lime);                /* Darkens on hover for better interaction feedback */
}

/* Positions the cancel button at the top right ("1 o'clock") */
.avatar-cancel-btn {
  top: 5px;                                                /* Positions from the top edge of the container */
  right: 5px;                                              /* Positions from the right edge of the container */
  background-color: var(--color-soda-cherry-tint-medium);  /* A light red matches the cancel icon itself */
}
.avatar-cancel-btn:hover {
  background-color: var(--color-soda-cotton-candy);        /* Darkens on hover for better interaction feedback */
}

/* Adds a visual cue when an avatar change is pending but not saved */
.avatar-image-container.is-pending-change {
  outline: 3px dashed var(--color-soda-lime);              /* A dashed outline clearly indicates a temporary or "preview" state */
  outline-offset: 4px;                                     /* Pushes the outline outward so it doesn't overlap the colored ring */
}

/* Upload Progress Styles */
.avatar-upload-progress {
    margin-top: 1rem;                                        /* Space above progress bar */
}

.avatar-progress {
    height: 8px;                                             /* Thin progress bar */
    background: var(--color-bg-subtle);                      /* Background for empty progress */
    border-radius: 4px;                                      /* Rounded progress bar */
    overflow: hidden;                                        /* Hide corners of inner bar */
}

.avatar-progress-bar {
    height: 100%;                                            /* Fill container height */
    background: var(--color-accent-lime);                    /* Lime progress color */
    transition: width 0.3s ease;                             /* Smooth progress animation */
}

/* Validation Feedback Styles */
.profile-validation-feedback {
    margin-top: 0.5rem;                                      /* Space above feedback */
    font-size: 0.875rem;                                     /* Smaller feedback text */
}

.profile-validation-feedback.valid {
    color: var(--color-success);                             /* Green for valid input */
}

.profile-validation-feedback.invalid {
    color: var(--color-error);                              /* Red for invalid input */
}

.profile-validation-feedback.checking {
    color: var(--color-warning);                             /* Orange for checking state */
}

.profile-validation-feedback::before {
    margin-right: 0.5rem;                                    /* Space after icon */
}

.profile-validation-feedback.valid::before {
    content: "✓";                                            /* Checkmark for valid */
}

.profile-validation-feedback.invalid::before {
    content: "✗";                                            /* X mark for invalid */
}

.profile-validation-feedback.checking::before {
    content: "⋯";                                            /* Dots for checking */
}

/* Form Enhancement States */
.form-control.valid {
    border-color: var(--color-success);                      /* Green border for valid */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);      /* Green glow */
}

.form-control.invalid {
    border-color: var(--color-error);                       /* Red border for invalid */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);      /* Red glow */
}

.form-control.checking {
    border-color: var(--color-warning);                      /* Orange border for checking */
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);      /* Orange glow */
}

/* Loading Button States */
.btn.loading {
    position: relative;                                       /* Position for pseudo-element */
    color: transparent;                                       /* Hide button text */
}

.btn.loading::after {
    content: "";                                             /* Empty pseudo-element */
    position: absolute;                                       /* Position over button */
    width: 16px;                                             /* Spinner size */
    height: 16px;                                            /* Spinner size */
    top: 50%;                                                /* Center vertically */
    left: 50%;                                               /* Center horizontally */
    margin-left: -8px;                                       /* Offset for centering */
    margin-top: -8px;                                        /* Offset for centering */
    border: 2px solid transparent;                           /* Transparent base border */
    border-top-color: currentColor;                          /* Visible top border */
    border-radius: 50%;                                      /* Circular spinner */
    animation: spin 1s linear infinite;                      /* Spin animation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }                          /* Start rotation */
    100% { transform: rotate(360deg); }                      /* End rotation */
}

/* Responsive Design for Profile Edit */
@media (max-width: 768px) {
    .current-avatar-container {
        flex-direction: column;                              /* Stack vertically on mobile */
        text-align: center;                                  /* Center content */
        gap: 1rem;                                           /* Reduce gap on mobile */
    }
    
    .avatar-upload-area {
        padding: 1.5rem 1rem;                               /* Reduce padding on mobile */
    }
    
    .avatar-preview-actions {
        justify-content: center;                             /* Center buttons on mobile */
    }
}

/* ==========================================
   COMPONENT: CARD TITLES
   ========================================== */

/*--- Card Title ---*/

/* The base style for a title within a card, typically in the body */
.card-title {
  font-size: var(--font-size-200);                /* A large, clear size for card headings */
  margin: 0;                                      /* Removes default heading margin */
}

/* Modifier for a decorative title, typically used in a card-header */
.card-title--header {
  font-family: var(--font-heading);               /* Uses the primary, decorative heading font */
  font-size: var(--font-size-250);                /* Increases font size for more prominence */
  font-weight: var(--font-weight-medium);         /* A balanced weight that's not overly bold */
  color: var(--color-text-offwhite);              /* Use a subtle off-white color */
}

/* Modifier for a dark title, for use on light backgrounds */
.card-title--dark {
  color: var(--color-text-primary);               /* Sets the title color to the primary body text color */
}

/* Modifier for a card title with an icon on the left */
.card-title--left-icon {
  display: flex;                                /* Lays out icon and text in a row */
  align-items: center;                          /* Vertically centers items */
  justify-content: center;                      /* Horizontally centers items */
  gap: 0.75rem;                                 /* Space between icon and text */
  font-size: var(--font-size-175);              /* Large font size for the title */
  margin: 0;                                    /* Resets default margin */
  color: white;                               /* White text, assuming a dark header background */
}


/*--- Card Subtitle ---*/

/* The base style for subtitle text that accompanies a card title */
.card-subtitle {
  font-family: var(--font-accent);                /* Uses the secondary, clean accent font */
  font-size: var(--font-size-110);                /* A legible size for subtitles */
  color: var(--color-text-secondary);             /* Muted color to be less prominent than the main title */
  margin: 0 0 2rem 0;                             /* Provides significant space below the subtitle */
}

/* Modifier for a white subtitle */
.card-subtitle--white {
  font-size: var(--font-size-125);                /* Makes the white version slightly larger for better presence */
  color: var(--color-white-overlay-verystrong);   /* This is a white that allows just a hint of the background color */
  margin: var(--space-xs) 0 0 0;                  /* Adjusts margin for this specific variant */
}

/* Bespoke design for rainbow header visibility */
.card-subtitle--over-rainbow {
  font-size: var(--font-size-125);                /* Makes the white version slightly larger for better presence */
  color: var(--color-soda-lemon-light);           /* This is a white that allows just a hint of the background color */
  margin: var(--space-xs) 0 0 0;                  /* Adjusts margin for this specific variant */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ==============================================
   COMPONENT: EMPTY STATE
   ============================================== */

/* A container for displaying an empty state message within a card */
.card-empty {
  text-align: center;                             /* Centers the icon and text */
  color: var(--color-text-secondary);             /* Uses a muted color for secondary information */
  padding: var(--space-lg);                       /* Provides comfortable spacing around the content */
}

/* The large icon used in an empty state message */
.icon-empty {
  font-size: var(--font-size-300);                /* A large icon for strong visual presence */
  margin-bottom: var(--space-lg);                 /* Creates space between the icon and the text */
  opacity: 0.5;                                   /* Semi-transparent to be less visually jarring */
}

/* The text in an empty state message */
.text-empty {
  font-size: var(--font-size-100);                /* Standard readable font size for the message */
  margin: 0.5rem 0 0 0;                           /* Top margin to separate from other elements if needed */
}
/* The first line of an empty state message */
.text-empty:first-of-type {
  font-size: var(--font-size-125);                /* Makes the primary message line larger for emphasis */
  margin-top: 0;                                  /* Removes top margin from the first line */
}

/* ==============================================
   COMPONENT: FLAVOR SWATCH
   ============================================== */

/* A small, inline color swatch used to display a flavor's color */
.flavor-swatch {
  display: inline-block;                          /* Allows it to sit within a line of text but have dimensions */
  width: var(--space-lg);                         /* A small, consistent width */
  height: var(--space-lg);                        /* Maintains a square aspect ratio */
  border: 1px solid var(--color-border-light);    /* A subtle border to define the swatch edge */
  background-color: var(--swatch-color);          /* The dynamic color is passed in via this variable */
  margin-left: var(--space-2xs);                  /* A tiny space to separate it from preceding text */
  vertical-align: middle;                         /* Aligns it nicely with the vertical center of the text */
  border-radius: var(--space-2xs);                /* Slightly rounded corners for a softer look */
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);   /* A subtle shadow to give it depth */
}

/* ==============================================
   COMPONENT: EXPLAINER TEXT
   ============================================== */

/* A reusable style for a block of explanatory text, often in a card */
.explainer-card-text {
  font-size: var(--font-size-100);                /* Standard font size for readability */
  color: var(--set-color, var(--color-text-secondary)); /* Allows dynamic color override, otherwise defaults to muted */
  margin: 0;                                      /* Removes default paragraph margins */
  padding: var(--space-lg);                       /* Assumes it's in a container that needs padding */
}

/* A centered version of the explainer text */
.explainer-card-text-centered {
  font-size: var(--font-size-110);                /* Slightly larger text for centered content */
  font-weight: var(--font-weight-medium);         /* Medium weight for emphasis */
  color: var(--set-color, var(--color-text-secondary)); /* Allows dynamic color override */
  text-align: center;                             /* Horizontally centers the text */
  margin: var(--space-md);                        /* Provides spacing around the centered block */
}

/* ==============================================
   UTILITIES: Icons & Positioning
   ============================================== */

/* --- Standalone SVG Icon Styling --- */
.icon-svg {
  width: 4rem;                                    /* Sets a large, fixed width for standalone decorative icons */
  height: 4rem;                                   /* Maintains a square aspect ratio */
  margin-bottom: var(--space-md);                 /* Standard spacing below the icon */
  opacity: 0.5;                                   /* Semi-transparent for a softer, more decorative feel */
  fill: currentColor;                             /* Allows the SVG's color to be controlled by the parent's `color` property */
}

/* --- Positioning Helper --- */
/* A specific helper to position a button in the top-right of a relatively positioned cell/header */
.cell-header-btn-position {
  position: absolute;                             /* Lifts the element out of the normal document flow */
  top: var(--space-xl);                           /* Positions from the top edge */
  right: var(--space-xl);                         /* Positions from the right edge */
}

/* =====================================================
   4. LAYOUT SYSTEM- Containers, grids, flexbox, wrappers
   ===================================================== */

/* Grid utilities */
.grid { display: grid; }      /* Generic grid */ 
.grid-2 {                     /* 2 column grid, equal width, 1.5rem gap */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.grid-2.grid-2--centered {
  justify-items: center;
}
.grid-gapped {
  display: grid;                    /* Generic grid - no specific number of columns */
  grid-auto-flow: column;           /* Arranges items in columns first */
  grid-auto-columns: max-content;   /* Each column takes up only as much space as its content needs */
  gap: var(--space-sm);             /* A small gap */
}
.grid-gapped.grid-gapped--2xs {
  gap: var(--space-2xs);            /* A tiny gap */
}

.grid-2 h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-xs);  
}
.grid-3 {                     /* 3 column grid, equal width, 1.5rem gap */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.grid-auto {                  /* Auto-fit grid, minimum 250px width, equal width, 1.5rem gap */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}
.grid-span-full { 
  grid-column: 1 / -1; 
}
.grid-skinny-wide {
    display: grid; /* */
    grid-template-columns: 1fr auto; /* */
    /* 'auto' makes the first column as wide as its content (the grip handle) */
    /* '1fr' makes the second column take up the remaining available space */
    gap: var(--space-md); /* Adjust gap as needed */
    align-items: start; /* Align items to the top of their cells */
}

@media (max-width: 768px) {   /* On mobile, switch to 1 column grid */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .grid-skinny-wide {
    /* The drag handle will now be at the top of the single column if needed */
      grid-template-columns: 1fr; 
  }
}

@media (min-width: 768px) and (max-width: 1245px) {
    .grid-3 .card-title {
        min-height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.grid-color-column {
  display: flex; 
  align-items: center; 
  justify-items: center; 
  height: 100%; 
}

.grid-color-swatch {
  background-color: var(--color);
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  margin-right: 8px;
}
.grid-color-swatch-sm {
  background-color: var(--color);
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  margin-right: 5px;
}
.grid-action-column {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  gap: var(--space-xs)
}
.grid-soda {
  height: 600px;
  width: 100%;
}

/* ==============================================
   COMPONENT: CUSTOM SELECT DROPDOWN
   ============================================== */

/* The container for the custom select, ensuring correct positioning context */
.custom-select-container {
  position: relative;                         /* Establishes positioning context for the dropdown */
}

/* The dropdown panel that appears on button click */
.custom-select-dropdown {
  position: absolute;                         /* Positions relative to the container */
  top: calc(100% + 8px);                      /* Places it just below the toggle button with a small gap */
  right: 0;                                   /* Aligns to the right edge of the container */
  background: white;                          /* Solid white background */
  border-radius: var(--card-radius-sm);       /* Consistent rounded corners */
  box-shadow: var(--card-shadow-lg);          /* Prominent shadow to lift it off the page */
  z-index: 1000;                              /* Ensures it appears above other content */
  width: 250px;                               /* A comfortable width for the dropdown list */
  max-height: 300px;                          /* Limits height and enables scrolling for long lists */
  overflow-y: auto;                           /* Adds a scrollbar if content overflows */
  opacity: 0;                                 /* Hidden by default for animation */
  visibility: hidden;                         /* Prevents interaction when hidden */
  transform: translateY(-10px);               /* Starts slightly above for a slide-down animation */
  transition: all var(--transition-fast);     /* Smoothly animates all property changes */
}

/* The visible state for the dropdown */
.custom-select-dropdown.show {
  opacity: 1;                                 /* Fades the dropdown in */
  visibility: visible;                        /* Makes it interactive */
  transform: translateY(0);                   /* Moves it to its final position */
}

/* An individual option within the dropdown list */
.custom-select-option {
  padding: var(--space-sm) var(--space-md);   /* Comfortable padding for each item */
  cursor: pointer;                            /* Indicates the item is clickable */
  transition: background-color var(--transition-fast); /* Smooth hover effect */
  border-bottom: 1px solid var(--color-border-light); /* Separator line between options */
}
.custom-select-option:last-child {
  border-bottom: none;                        /* Removes the border from the last item */
}

/* Hover state for an option */
.custom-select-option:hover {
  background-color: var(--color-bg-subtle);   /* Subtle background color on hover */
}

/* Active state for the currently selected option */
.custom-select-option.active {
  background-color: var(--color-brand-blue);  /* Brand Blue background for the selected item */
  color: var(--color-text-offwhite);          /* White text for contrast */
  font-weight: var(--font-weight-semibold);   /* Bolder text for the selected item */
}

/* ================================================
   COMPONENT: ACTION (ICON) BUTTONS (GRID AND CARD)
   ================================================ */

/* --- Button Container Styling --- */

/* Base styling for action button containers (the clickable elements) */
.action-button {
  background: none;                        /* Transparent background for clean look */
  border: none;                            /* Remove default button borders */
  cursor: pointer;                         /* Indicate clickable element */
  margin: 0;                               /* Make sure there's no inherited margin */
  padding: 0;                              /* Make sure there's no inherited padding */
  transition: all var(--transition-fast);  /* Smooth transitions for all properties */
}

/* Remove margin from last button in a group to prevent extra spacing */
.action-button:last-child {
  margin-right: 0;                         /* Clean alignment in button groups */
}

/* Button hover effect - subtle scale for feedback */
.action-button:hover {
  transform: scale(1.1);                   /* Slight enlargement on hover */
}

/* --- Card Context Styling --- */

/* Enhanced button styling specifically for card layouts */
.action-button--card {
  padding: var(--space-xs);                /* Comfortable padding for larger touch targets */
  display: inline-flex;                    /* Flex layout for perfect centering */
  align-items: center;                     /* Center icon vertically */
  justify-content: center;                 /* Center icon horizontally */
  border-radius: 3rem;                     /* Fully circular button for modern look */
}

/* Card button hover effect - different from grid for context-appropriate feedback */
.action-button--card:hover {
  transform: translateY(-1px);             /* Subtle lift effect for tactile feedback */
}

/* --- Icon/Image Styling --- */

/* Base styling for action button icons (the actual images/icons) */
.action-button-icon {
  width: var(--icon-size-lg);              /* Standard size for grid context */
  height: var(--icon-size-lg);             /* Square aspect ratio */
  display: block;                          /* Block display for proper sizing */
  transition: transform 0.2s ease;         /* Smooth animation for hover effects */
}

/* Icon hover effect - adds personality with scale and rotation */
.action-button-icon:hover {
  transform: scale(1.1) rotate(5deg);      /* Slight enlargement with playful tilt */
}

/* Larger icon variant for card context where more space is available */
.action-button-icon--card {
  width: var(--icon-size-xl);              /* Larger size for better visibility in cards */
  height: var(--icon-size-xl);             /* Maintains square aspect ratio */
}

/* Even larger icon variant for card context where more space is available */
.action-button-icon--big {
  width: var(--touch-target-md-plus);      /* Larger size for better visibility in cards */
  height: var(--touch-target-md-plus);     /* Maintains square aspect ratio */
}

/* Tiny icon variant embedding with text */
.action-button-icon--tiny {
  width: var(--icon-size-sm);              /* Tiny size for compact embedding */
  height: var(--icon-size-sm);             /* Maintains square aspect ratio */
}


/* ==============================================
   COMPONENT: ICON HOVER SWAP
   ============================================== */

/*--- Default State ---*/

/* By default, the hover icon is hidden */
.hover-button .icon-hover {
  display: none;                              /* Ensures only the default icon is visible initially */
}
/* By default, the default icon is visible */
.hover-button .icon-default {
  display: block;                             /* Ensures the default icon is visible by default */
}


/*--- AG Grid Hover State ---*/
/* This targets an element that has BOTH .ag-cell and .hover-button classes */
/* It triggers when that specific element is hovered */

/* When the cell/button is hovered, HIDE the default icon */
.ag-cell.hover-button:hover .icon-default {
  display: none;                   /* Hides the default icon to make way for the hover version */
}

/* When the cell/button is hovered, SHOW the hover icon */
.ag-cell.hover-button:hover .icon-hover {
  display: block;                  /* Reveals the hover icon */
}


/*--- Standard Hover State (Fallback) ---*/

/* For buttons NOT inside an AG Grid, hide the default icon on hover */
.hover-button:hover .icon-default {
    display: none;                            /* Standard hover behavior for non-grid contexts */
}
/* For buttons NOT inside an AG Grid, show the hover icon on hover */
.hover-button:hover .icon-hover {
    display: block;                           /* Standard hover behavior for non-grid contexts */
}

/* ==========================================
   LOADER UTILITIES
   ========================================== */

.text-container {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-md);
}   

.text-container-icon {
  font-size: var(--font-size-200);
  margin-bottom: var(--space-md);
}

.text-secondary-small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-90);
}

/* ==========================================
   AG GRID CUSTOMIZATION
   ========================================== */

.ag-theme-quartz {
  --ag-font-family: var(--font-body);
  --ag-font-size: var(--font-size-90);

  /* Header Styling */
  --ag-header-icon-color: var(--color-brand-pale-cream);

  /* Cell/Row Styling */
  --ag-background-color: var(--color-brand-pale-cream);
  --ag-odd-row-background-color: rgba(0, 0, 0, 0.02);
  --ag-row-hover-color: var(--color-brand-mint);

  /* Border Style */
  --ag-row-border-style: solid;
  --ag-row-border-width: 1px;
  --ag-row-border-color: #e0e0e0;

  /* Spacing and Selection */
  --ag-grid-size: 8px;
  --ag-selected-row-background-color: var(--color-brand-tangerine);
  --ag-active-color: var(--color-brand-red);

  /* Make it more card-like */
  --ag-border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

/* Sets the background color for the header */
.ag-header-cell {
  background-color: var(--ag-header-background-color);
}

/* Sets the text color for the header */
.ag-header-cell-text {
  color: var(--ag-header-foreground-color);
}

.ag-theme-quartz.ag-status-bar {
  background-color: var(--color-brand-red);
  color: var(--color-brand-pale-cream);
}

/* --- Soda Grid Themes --- */

/* --- Automatic Grid Theming --- */
/* This single rule applies to any AG Grid inside a .card--soda-* container */

[class*="card--soda-"] .ag-theme-quartz {
  /* The grid's header background will now use the card's main color */
  --ag-header-background-color: var(--card-left-color);
  --ag-header-foreground-color: var(--card-header-text-color, white);

  /* The grid's main background can use one of the card's body tints */
  --ag-background-color: var(--card-bottom-color);

  /* Set consistent hover and odd-row colors here for all themed grids */
  --ag-odd-row-background-color: var(--color-white-overlay-light);
  --ag-row-hover-color: var(--color-soda-mint-tint-subtle);
}

/* AG Grid filter popup override for better readability */
.ag-theme-quartz .ag-menu,
.ag-theme-quartz .ag-select-list {
  background-color: var(--color-soda-cream-light) !important; /* Forces a fairly white background */
  box-shadow: var(--card-shadow-lg);                          /* Adds a more prominent shadow to lift it off the page */
  border: 1px solid var(--color-border-medium);               /* Adds a subtle border */
}


/* ==========================================
   TABLE UTILITIES
   ========================================== */
.table-responsive {
  overflow-x: auto;
}

.table-basic {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 4px var(--color-black-overlay-subtle);
}

.table-header {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.table-header th {
  padding: 0.75rem;
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

.table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 768px) {
  .stat-number {
    font-size: var(--font-size-250);
  }
}

/* ==========================================
   RESET AND BASE STYLES
   ========================================== */

/* Utility Classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================
   CARD SYSTEM
   ========================================== */

.card {
  display: flex;                                 /* Lays out child elements (header, body) in a flexible box */
  flex-direction: column;                        /* Stacks children vertically */
  background: white;                           /* Sets a default white background for the card */
  border-radius: var(--card-radius);             /* Applies standard rounded corners to the card */
  box-shadow: var(--card-shadow);                /* Adds a shadow to make the card appear floating */
  overflow: hidden;                              /* Hides any content that extends beyond the card's rounded corners */
  margin-bottom: var(--space-xl);                /* Provides spacing below each card */

  /* Define default or fallback custom properties for dynamic colors */
  /* These will be used if no specific override is set on the card itself or a modifier */
  
  --card-left-color: var(--color-bg-card-left);       /* Default starting color for the card's header (left side) */
  --card-right-color: var(--color-bg-card-right);     /* Default ending color for the card's header (right side) */
  --card-top-color: var(--color-bg-card-top);         /* Default starting color for the card's body (top) */
  --card-bottom-color: var(--color-bg-card-bottom);   /* Default ending color for the card's body (bottom) */
}

.card.card--site-body {
  margin-bottom: 0;
  flex-grow: 1;
}

.card-header {
  padding: var(--card-header-padding);                  /* Inner spacing for the header content */
  color: var(--card-header-text-color, --color-header); /* Sets the text color inside the header (default white for contrast) */
  position: relative;                                   /* Establishes a positioning context for any absolutely positioned children */
  overflow: hidden;                                     /* Hides content that overflows the header bounds */
  text-align: center;                                   /* Centers text horizontally within the header */

  /* Applies a linear gradient background to the header, transitioning from left to right */
  /* The colors are determined by the custom properties set on the parent .card element */
  background: linear-gradient(
    to right,                                           /* Specifies the gradient direction from left to right */
    var(--card-left-color) 60%,                         /* The color at the left of the gradient */
    var(--card-right-color)                             /* The color at the right of the gradient */
  );
}

.card-header--short {
  padding: var(--card-header-padding-md);               /* Decreases padding for a shorter, more compact header style */
}

.card-header--rainbow {
  background: var(--color-rainbow-gradient-right);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.card-header--rainbow-no-shadow {
  background: var(--color-rainbow-gradient-right);
}

/* New utility for headers that contain our absolute drag handle */
.card-header--with-handle {
  position: relative; /* Establishes the positioning context for the handle */
  padding-left: 50px; /* Creates space on the left for the handle to sit in */
}

/* Override the default h3 margin specifically inside this header */
.card-header--with-handle h3 {
  margin: 0 0 0 var(--space-lg);                /* Bottom margin breaks vertical centering but we need a left margin to avoid the handle */
}

.card-body {
  flex: 1;                                      /* Allows the body to grow and fill available space within the flex container (.card) */
  padding: var(--card-padding);                 /* Inner spacing for the body content */

  /* Applies a linear gradient background to the body, transitioning from top to bottom */
  /* The colors are determined by the custom properties set on the parent .card element */
  background: linear-gradient(
    to bottom,                                  /* Specifies the gradient direction from top to bottom */
    var(--card-top-color),                      /* The color at the top of the gradient */
    var(--card-bottom-color)                    /* The color at the bottom of the gradient */
  );
}

.card-body--centered-column {
  display: flex;                                 /* Uses flexbox for arrangement within the body */
  flex-direction: column;                        /* Stacks body content vertically */
  align-items: center;                           /* Centers items vertically within the column */
  text-align: center;                            /* Centers text horizontally for all content in this body style */
}

/* Adds a semi-transparent white gradient on top of the rainbow, muting it */
.card-body--rainbow-muted {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), 
                    var(--color-rainbow-gradient-bottom);
  background-size: cover;                       /* Ensures both gradients cover the area */
}

.card-icon {
  color: var(--color, var(--color-primary));     /* Sets icon color, defaulting to --color-primary if --color is not set */
  font-size: var(--font-size-300);               /* Defines the size of the icon */
  margin-bottom: var(--space-md);                /* Provides spacing below the icon */
}

/* Used to separate "sections" within a card */
.card-section {
  margin-bottom: var(--space-xl);                /* Provides spacing below each card section */
}

/* The last section of a card doesn't require separation */
.card-section:last-of-type {
  margin-bottom: 0;                              /* Removes the bottom margin from the last section to avoid extra space */
}

/* The title for a card section  */
.card-section-title {
  font-size: var(--font-size-125);               /* Sets the font size for section titles */
  font-weight: 600;                              /* Makes the section titles bold */
  color: var(--color-text-primary);              /* Sets the text color for section titles */
  margin-bottom: var(--space-xs);                /* Provides small spacing below the section title */
  text-align: left;                              /* Aligns section titles to the left */
}

/* A divider line within a section */
.card-section-divider {
  border: none;                                  /* Removes default border */
  border-top: 1px solid var(--color-border-medium); /* Adds a thin top border to create a divider line */
  margin: var(--space-xs) 0 var(--space-md) 0;   /* Sets top, right, bottom, left margins for the divider */
}

.card-footer {
  padding: var(--card-padding);                  /* Inner spacing for the footer content */
  border-top: 1px solid #e5e7eb;               /* Adds a thin line at the top to separate footer from body */
  background-color: var(--color-bg-muted);       /* Sets a slightly muted background color for the footer */
}

/* Base class for a container of action buttons in a card */
.card-actions {
  display: flex;                                 /* Lays out action buttons in a flexible row */
  flex-wrap: wrap;                               /* Allows action buttons to wrap to the next line if space is limited */
  gap: var(--space-md);                          /* Provides consistent spacing between action buttons */
  margin-top: auto;                              /* Pushes the action buttons to the bottom of a flex container card body */
  padding-top: var(--space-md);                  /* Ensures space between content and actions above the buttons */
}

/* Modifier for centered actions */
.card-actions--centered {
  justify-content: center;                       /* Centers the action buttons horizontally */
}

/* Modifier for right-aligned actions */
.card-actions--end {
  justify-content: flex-end;                     /* Aligns the action buttons to the right */
}

/* Modifier for left-aligned actions */
.card-actions--start {
  justify-content: flex-start;                   /* Aligns the action buttons to the left */
}

@media (max-width: 900px) {
  .card {
    margin-bottom: var(--space-sm);
  }
}

/* --- Scrollable Layout & Page Style --- */
.scrolling-list-container {
  display: flex;                                            /* Enables flexbox for child layout management */
  flex-direction: column;                                   /* Stacks children (headers, content) vertically */
  background-color: var(--card-top-color);                  /* Adds a subtle, thematic background color */
  border-radius: var(--card-radius-sm);                     /* Consistent rounded corners for the page container */
  flex-grow: 1;                                             /* Allows the container to grow and fill available space */
  padding: var(--space-md);                                 /* Provides comfortable internal padding for all content */
}

/* Desktop enhancement with wider layout */
@media (min-width: 1024px) {
  .scrolling-list-container {
    border-radius: var(--card-radius);                     /* Card-sized rounded corners */
    padding: var(--space-lg);                              /* Increases padding for desktop spacing */
  }
}

@media (max-width: 768px) {
  /*
     This section contains mobile-specific overrides to ensure full-page layouts
     correctly fill the viewport without unwanted margins or padding.

     These rules specifically target the 'Soda Scout' and "The Lineup"page view and similar
     full-screen experiences where a container needs to occupy the entire screen.
  */

  .scrolling-list-container,
  .card--site-body {
    margin: 0;
    border-radius: 0;
  }

  /* Ensures the full-page container aligns to the top edge of the viewport */
  .scrolling-list-container {
    padding: 0;                                     /* Removes any default or inherited padding */
  }

  /* -- Mobile body padding fix for full-page layouts -- */
  /* Targets the body ONLY on pages that use a full-page container like Soda Scout and The Lineup */
  body:has(.scrolling-list-container),
  body:has(.card--site-body) {
    /* Resets body spacing to counteract space introduced by the out-of-flow
       profile dropdown div, allowing the container to fill the entire viewport */
    padding: 0;                                     /* Ensures there is no padding around the viewport */
    margin: 0;                                      /* Ensures there are no margins around the viewport */
  }
}

/* =====================================================
   COMPONENT: ENTITY LIST CARD
   ===================================================== */

/* Base style for cards that display a list of manageable entities */
.card--entity-list {
  cursor: pointer;                                  /* Indicates that the card header is clickable */
  margin-bottom: 0;                                 /* Ensures 'gap' property handles spacing, preventing double margins */
  transition: all 0.3s ease;                        /* Smooth transition for visual changes (e.g., hover, collapse/expand) */
  will-change: transform;                           /* Optimizes the element for transform animations to prevent flashing */
}

/* --- Entity List Card Header --- */

/* Defines the header section within an entity list card */
.card--entity-list .card-header {
  display: flex;                                    /* Lays out header content horizontally */
  padding: var(--card-header-padding);              /* Standard padding inside the header */
  justify-content: space-between;                   /* Distributes space between the title and the action items */
  align-items: center;                              /* Vertically centers the header content */
}

/* Styles for the main title within the header */
.card--entity-list .card-header h2,
.card--entity-list .card-header h3 {
  font-size: var(--font-size-175);                  /* Sets a large font size for the header title */
  font-weight: var(--font-weight-medium);           /* Applies a medium font weight for emphasis */
  margin: 0;                                        /* Removes any default margins from the heading tags */
  display: flex;                                    /* Enables flexbox for aligning the title and count pill */
  align-items: center;                              /* Vertically centers the title and count pill */
  gap: 0.75rem;                                     /* Adds space between the title and the count pill */
}

/* Container for actions or information on the right side of the header */
.entity-list-header-actions {
  display: flex;                                    /* Enables flexbox layout for the action items */
  align-items: center;                              /* Vertically centers the action items */
  gap: 1rem;                                        /* Adds a consistent space between each action item */
  font-size: var(--font-size-90);                   /* Sets a small font size for the action text */
}

/* Styles a pill-shaped count display */
.entity-list-count {
  background: rgba(192, 192, 192, 0.3);         /* Sets a semi-transparent gray background */
  padding: 0.25rem 0.75rem;                       /* Adds vertical and horizontal padding to create the pill shape */
  border-radius: 20px;                            /* Creates a highly rounded border for the pill shape */
  font-weight: var(--font-weight-semibold);       /* Applies a semi-bold font weight to the text */
  min-width: 2rem;                                /* Ensures the pill is a minimum width for consistent appearance */
  text-align: center;                             /* Centers the count text within the pill */
}

/* --- Entity List Card Body --- */

/* Container for the body of the entity list card */
.card--entity-list > .card-body {
  flex: none;                                       /* Prevents the card body from growing or shrinking to avoid layout issues */
}

/* The container for the main list or grid content within the card body */
.card--entity-list .entity-list-content {
  overflow: hidden;                                 /* Hides any content that exceeds the container's bounds */
}

/* =====================================================
   COMPONENT: EXPANDABLE CARD 
   ===================================================== */

/* This modifier class marks a card as having expandable behavior */
.card--expandable {
  /* No styles needed on the base class */
}

/* Styling for the expanded state of the card */
.card--expandable.is-expanded {
  cursor: default;                                  /* Changes the cursor back to a default pointer */
  transform: none;                                  /* Removes any transform effects */
}

/* Defines a hover effect for a non-expanded card */
.card--expandable:not(.is-expanded):hover {
  transform: translateY(-2px);                      /* Lifts the card slightly on hover */
  box-shadow: var(--card-shadow-lg);                /* Applies a large shadow on hover */
}

/* In the default (compact) state, the content container has a fixed short height */
.card--expandable .entity-list-content {
  height: var(--dashboard-card-height-compact);     /* Sets a fixed height for the collapsed state */
  transition: height 0.4s ease-out;                 /* Smoothly animates the height change */
}

/* When the card has the .is-expanded class, the grid grows */
.card--expandable.is-expanded .entity-list-content {
  height: var(--dashboard-card-height-expanded);    /* Sets a fixed height for the expanded state */
}

/* The generic chevron icon for use in accordions or expandable cards */
.card-chevron {
  font-size: var(--font-size-125);                  /* Sets a large font size for the icon */
  transition: transform 0.3s ease;                  /* Smoothly animates the rotation of the icon */
}

/* Rotates the chevron when its parent card's expandable or accordion state is active */
.is-expanded .card-chevron,
.accordion-expanded .card-chevron {
  transform: rotate(180deg);
}

/* ==========================================
   COMPLETE SODA-THEMED CARD CLASSES
   ========================================== */

/* Cherry (Red Spectrum) */
.card--soda-cherry {
  /* Header colors (left-to-right gradient) */
  --card-left-color: var(--color-soda-cherry);           /* Sets the header's left gradient color */
  --card-right-color: var(--color-soda-cherry-light);    /* Sets the header's right gradient color */
  /* Body colors (top-to-bottom gradient) */
  --card-top-color: var(--color-soda-cherry-tint);       /* Sets the body's top gradient color */
  --card-bottom-color: var(--color-soda-cherry-tint-subtle); /* Sets the body's bottom gradient color */
  --card-container-color: var(--color-soda-cherry-tint-subtle);
  --card-container-item-color: var(--color-soda-cherry-tint-medium);
  --card-container-item-text: var(--color-text-offwhite);
  --card-container-item-handle: var(--color-brand-red);
  --card-scrollbar-color: var(--color-soda-cherry);       /* Sets the scrollbar's color */
}

/* Orange Spectrum */
.card--soda-orange {
  --card-left-color: var(--color-soda-orange);
  --card-right-color: var(--color-soda-orange-light);
  --card-top-color: var(--color-soda-orange-tint);
  --card-bottom-color: var(--color-soda-orange-tint-subtle);
  --card-container-color: var(--color-soda-orange-tint-subtle);
  --card-container-item-color: var(--color-soda-orange-tint-medium);
  --card-container-item-text: var(--color-text-offwhite);
  --card-container-item-handle: var(--color-soda-orange);
  --card-scrollbar-color: var(--color-soda-orange);       /* Sets the scrollbar's color */
}

/* Lemon (Yellow Spectrum) */
.card--soda-lemon {
  --card-left-color: var(--color-soda-lemon);
  --card-right-color: var(--color-soda-lemon-light);
  --card-top-color: var(--color-soda-lemon-tint);
  --card-bottom-color: var(--color-soda-lemon-tint-subtle);
  --card-container-color: var(--color-soda-lemon-tint);
  --card-container-item-color: var(--color-soda-lemon-tint-medium);
  --card-container-item-text: var(--color-text-primary);
  --card-container-item-handle: var(--color-soda-lime);
  --card-scrollbar-color: var(--color-soda-lemon);       /* Sets the scrollbar's color */
}

/* Lime (Green Spectrum) */
.card--soda-lime {
  --card-left-color: var(--color-soda-lime);
  --card-right-color: var(--color-soda-lime-light);
  --card-top-color: var(--color-soda-lime-tint);
  --card-bottom-color: var(--color-soda-lime-tint-subtle);
  --card-container-color: var(--color-soda-lime-tint-subtle);
  --card-container-item-color: var(--color-soda-lime-tint-medium);
  --card-container-item-text: var(--color-text-offwhite);
  --card-container-item-handle: var(--color-brand-blue);
  --card-scrollbar-color: var(--color-soda-lime);       /* Sets the scrollbar's color */
}

/* Blue Raspberry (Blue Spectrum) */
.card--soda-blue-raspberry {
  --card-left-color: var(--color-soda-blue-raspberry);
  --card-right-color: var(--color-soda-blue-raspberry-light);
  --card-top-color: var(--color-soda-blue-raspberry-tint);
  --card-bottom-color: var(--color-soda-blue-raspberry-tint-subtle);
  --card-container-color: var(--color-soda-blue-raspberry-tint-subtle);
  --card-container-item-color: var(--color-soda-blue-raspberry-tint-medium);
  --card-container-item-text: var(--color-text-offwhite);
  --card-container-item-handle: var(--color-brand-blue);
  --card-scrollbar-color: var(--color-soda-blue-raspberry);       /* Sets the scrollbar's color */
}

/* Grape (Purple Spectrum) */
.card--soda-grape {
  --card-left-color: var(--color-soda-grape);
  --card-right-color: var(--color-soda-grape-light);
  --card-top-color: var(--color-soda-grape-tint);
  --card-bottom-color: var(--color-soda-grape-tint-subtle);
  --card-container-color: var(--color-soda-grape-tint-subtle);
  --card-container-item-color: var(--color-soda-grape-tint-medium);
  --card-container-item-text: var(--color-text-offwhite);
  --card-container-item-handle: var(--color-text-primary);
  --card-scrollbar-color: var(--color-soda-grape);       /* Sets the scrollbar's color */
}

/* Root Beer (Brown Spectrum) */
.card--soda-root-beer {
  --card-left-color: var(--color-soda-root-beer);
  --card-right-color: var(--color-soda-root-beer-light);
  --card-top-color: var(--color-soda-root-beer-tint);
  --card-bottom-color: var(--color-soda-root-beer-tint-subtle);
  --card-container-color: var(--color-soda-root-beer-tint-subtle);
  --card-container-item-color: var(--color-soda-root-beer-tint-medium);
  --card-container-item-text: var(--color-soda-cream-light);
  --card-container-item-handle: var(--color-text-primary);
  --card-scrollbar-color: var(--color-soda-rootbeer);       /* Sets the scrollbar's color */
}

/* Cola (Dark Brown Spectrum) */
.card--soda-cola {
  --card-left-color: var(--color-soda-cola);
  --card-right-color: var(--color-soda-cola-light);
  --card-top-color: var(--color-soda-cola-tint);
  --card-bottom-color: var(--color-soda-cola-tint-subtle);
  --card-container-color: var(--color-soda-cola-tint-subtle);
  --card-container-item-color: var(--color-soda-cola-tint-medium);
  --card-container-item-text: var(--color-soda-cream-light);
  --card-container-item-handle: maroon;
  --card-scrollbar-color: var(--color-soda-cola);       /* Sets the scrollbar's color */
}

/* Cream (Cream Spectrum) */
.card--soda-cream {
  --card-left-color: var(--color-soda-cream);
  --card-right-color: var(--color-soda-cream-light);
  --card-top-color: var(--color-soda-cream-tint);
  --card-bottom-color: var(--color-soda-cream-tint-subtle);
  --card-container-color: var(--color-soda-cream-tint-subtle);
  --card-container-item-color: var(--color-soda-cream-tint-medium);
  --card-container-item-text: var(--color-soda-root-beer);
  --card-container-item-handle: var(--color-soda-cola);
  --card-scrollbar-color: var(--color-soda-root-beer-light);       /* Sets the scrollbar's color */
}

/* Mint (Green Spectrum) */
.card--soda-mint {
  --card-left-color: var(--color-soda-mint);
  --card-right-color: var(--color-soda-mint-light);
  --card-top-color: var(--color-soda-mint-tint);
  --card-bottom-color: var(--color-soda-mint-tint-subtle);
  --card-container-color: var(--color-soda-lime-mint-subtle);
  --card-container-item-color: var(--color-soda-mint-tint-medium);
  --card-container-item-text: var(--color-brand-blue);
  --card-container-item-handle: var(--color-soda-cola);
  --card-scrollbar-color: var(--color-soda-mint);       /* Sets the scrollbar's color */
}

/* Cotton Candy (Pink Spectrum) */
.card--soda-cotton-candy {
  --card-left-color: var(--color-soda-cotton-candy);
  --card-right-color: var(--color-soda-cotton-candy-light);
  --card-top-color: var(--color-soda-cotton-candy-tint);
  --card-bottom-color: var(--color-soda-cotton-candy-tint-subtle);
  --card-container-color: var(--color-soda-cotton-candy-tint);
  --card-container-item-color: var(--color-soda-cotton-candy-tint-medium);
  --card-container-item-text: var(--color-soda-cherry);
  --card-container-item-handle: maroon;
  --card-scrollbar-color: var(--color-soda-cotton-candy);       /* Sets the scrollbar's color */
}

/* A more saturated pastel mint used for the main card holder */
.card--soda-mint-saturated {
  --card-left-color: var(--color-soda-mint-light);
  --card-right-color: var(--color-soda-mint-light);
  --card-top-color: var(--color-soda-mint-light);
  --card-bottom-color: var(--color-soda-mint-tint);
  --card-container-color: var(--color-soda-mint-light);
  --card-container-item-color: var(--color-soda-mint-tint-medium);
  --card-container-item-text: var(--color-text-primary);
  --card-container-item-handle: darkgreen;
  --card-scrollbar-color: var(--color-soda-mint);       /* Sets the scrollbar's color */
}

/* A card with no background colors */
.card--invisible {
  --card-left-color: color-mix( in srgb, white 0%, transparent );
  --card-right-color: color-mix( in srgb, white 0%, transparent );
  --card-top-color: color-mix( in srgb, white 0%, transparent );
  --card-bottom-color: color-mix( in srgb, white 0%, transparent );
  --card-container-color: color-mix( in srgb, white 0%, transparent );
  --card-container-item-color: color-mix( in srgb, white 0%, transparent );
  --card-container-item-text: color-mix( in srgb, white 0%, transparent );
  --card-container-item-handle: color-mix( in srgb, white 0%, transparent );
  --card-scrollbar-color: color-mix( in srgb, white 0%, transparent );
}

/* =====================================================
   COMPONENT: CARD ACCORDION BEHAVIOR (Universal)
   ===================================================== */

/* Card body for accordion cards */
.card-body--accordion {
  display: flex;                              /* Flex container */ 
  flex-direction: column;                     /* Stack children vertically */
}

/* Base accordion behavior for any card with expandable content */
.card--accordion .accordion-content {
  opacity: 0;                                    /* Hidden by default */
  max-height: 0;                                 /* Collapsed state */
  overflow: hidden;                              /* Clip content during transition */
  transform: translateY(-10px);                  /* Start slightly offset for slide effect */
  transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease; /* Smooth animation */
}

/* Expanded state for accordion content */
.card--accordion.accordion-expanded .accordion-content {
  opacity: 1;                                    /* Fully visible */
  max-height: var(--accordion-height, var(--accordion-height-default)); /* Flexible height */
  transform: translateY(0);                      /* Slide into final position */
}

/* Override for the batch importer accordion to allow it to grow */
.card--accordion#batch-importer-card.accordion-expanded .accordion-content {
  max-height: 5000px;                           /* A large value to accommodate many staging cards */
}

/* =====================================================
   ACCORDION MODIFIERS FOR SPECIFIC CONTEXTS
   ===================================================== */

/* An accordion card with an entity list */
.card--accordion.card--entity-list {
  --accordion-height: var(--accordion-height-dashboard); /* Remaining space after 550px grid */
}

/* Accordion content within an entity list (compact state) */
.card--accordion.card--entity-list .accordion-content {
  background: var(--color-white-overlay-strong);  /* Slightlly lighter background for form area */
  border-radius: var(--input-radius);             /* Consistent border radius */
  /* Margin and padding are removed from the default state */
}

/* Accordion content within an entity list (expanded state) */
.card--accordion.card--entity-list.accordion-expanded .accordion-content {
  padding: var(--space-md);                         /* Add padding ONLY when open */
  margin-top: var(--space-md);                      /* Add margin ONLY when open */
  border-top: 1px solid var(--color-border-light);  /* Add separator ONLY when open */
}

/* Custom soda accordion - for custom soda forms */
.card--accordion.card--custom-soda {
  --accordion-height: var(--accordion-height-custom-soda); /* Compact height */
}

/* Accordion content within a custom soda form */
.card--accordion.card--custom-soda .accordion-content {
  background: var(--color-white-overlay-medium);    /* Custom soda background */
  border-top: 1px solid var(--color-border-light);  /* Visual separation */
}

.card--accordion.card--custom-soda .accordion-content .card-body {
  padding: var(--space-md);                     /* Standard content padding */
  padding-left: calc(var(--space-md) + 24px);   /* Extra space for rainbow border */
}

/* Criteria manager accordion - for criteria forms */
.card--accordion.card--criteria {
  --accordion-height: var(--accordion-height-criteria); /* Extra height for complex forms */
}

/* Accordion content within a criteria form */
.card--accordion.card--criteria .accordion-content {
  margin-top: var(--space-lg);                  /* More space for criteria forms */
  padding: 0 var(--space-md);                   /* Horizontal padding only */
  background: var(--color-bg-subtle);           /* Subtle background */
  border-radius: var(--input-radius);           /* Rounded corners */
  border: 1px solid var(--color-border-light);  /* Light border */
}

/* Accordion content within a criteria form (expanded state) */
.card--accordion.card--criteria.accordion-expanded .accordion-content {
  padding-bottom: var(--space-md);              /* Bottom padding when expanded */
}

/* =====================================================
   COMPONENT: ENTITY LIST CARD
   ===================================================== */


/* =====================================================
   MOBILE RESPONSIVENESS
   ===================================================== */

@media (max-width: 768px) {
  :root {
    --dashboard-card-height-compact: 200px;              /* Smaller grid on mobile */
    --dashboard-card-height-expanded: 400px;               /* Smaller expanded grid */
    --accordion-height-dashboard: 800px;            /* Reduced form height */
    --accordion-height-criteria: 1500px;        /* Reduced criteria height */
  }
  
  /* Adjust padding for mobile */
  .card--accordion.card--criteria .accordion-content {
    padding: 0 var(--space-sm);                 /* Reduced horizontal padding */
  }
  
  .card--accordion.card--custom-soda .accordion-content .card-body {
    padding: var(--space-sm);                   /* Reduced padding */
    padding-left: calc(var(--space-sm) + 24px); /* Maintain rainbow border space */
  }
}

/* ==========================================
   STACKING
   ========================================== */

.h-stack > * + * {
  margin-left: var(--space-md);
}

.v-stack > * + * {
  margin-top: var(--space-md);
}

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

/* Header */

.export-import-header {
  color: var(--color-primary);
}

/* ==========================================
   COMPONENT: BUTTONS
   ========================================== */

/* The base class for all buttons, defining core styles and variables */
.btn {
  font-family: var(--font-heading);             /* Sets the font family to the project's heading font */
  --btn-base-color: var(--color-accent-red);    /* Defines a custom property for the button's default color */
  background-color: var(--btn-base-color);      /* Applies the base color as the background */
  --btn-text-color: var(--color-header);        /* Defines a custom property for the button's text color */
  color: var(--btn-text-color);                 /* Applies the text color defined by the custom property */
  padding: var(--button-padding);               /* Applies consistent padding using a variable */
  border: none;                                 /* Removes the default border */
  border-radius: var(--button-radius);          /* Applies a consistent border radius */
  cursor: pointer;                              /* Changes the cursor to a pointer to indicate clickability */
  font-size: var(--font-size-125);              /* Sets a base font size */
  text-decoration: none;                        /* Removes underlines from button links */
  display: inline-block;                        /* Ensures buttons behave as inline-block elements */
  transition: all var(--transition-fast);       /* Applies a fast transition to all properties for smooth effects */
  font-weight: 500;                             /* Sets a medium font weight */
  align-items: center;                          /* Aligns flex items vertically in the center */
  line-height: 1;                               /* Ensures consistent vertical text alignment */
  
  --btn-hover-bg: var(--color-brand-blue);      /* Defines the default hover background color */
  --btn-hover-color: white;                     /* Defines the default hover text color */
}

/* Defines the standard hover state for a button */
.btn:hover {
  background-color: color-mix(in srgb, var(--btn-base-color) 75%, white); /* Lightens the background color by mixing with 25% white */
  color: white;                                 /* Changes the text color to white on hover */
  text-decoration: none;                        /* Ensures no text decoration on hover */
  transform: translateY(-1px);                  /* Lifts the button slightly to create a pop effect */
}

/* Darken on hover by mixing with 15% black */
.btn--hover-dark:hover {
  /* Override: Darken on hover by mixing with 25% black */
  background-color: color-mix(in srgb, var(--btn-base-color) 75%, black); /* Overrides the default hover to darken the background */
}

/* --- Button Size/Display Modifiers --- */

/* Modifier to make a button take the full width of its container */
.btn--full-width {
  width: 100%;
}

/* Modifier for a large-sized button */
.btn--large {
  padding: var(--space-md) var(--space-xl);     /* Sets a larger padding for a bigger button */
  font-size: var(--font-size-125);              /* Maintains a consistent font size */
  border-radius: 2rem;                          /* Applies a very rounded border radius */
}

/* Modifier for a small-sized button */
.btn--small {
  padding: var(--space-xs) var(--space-md);     /* Sets a smaller padding for a compact button */
  font-size: var(--font-size-90);               /* Applies a smaller font size */
}

/* Modifier to hide a button */
.btn--hidden {
  display: none;                                /* Hides the button from view */
}

/* --- Button Color Modifiers --- */

/* Utility class to define a button's primary action (e.g., adding something) */
.btn--add { --btn-base-color: var(--color-btn-add);}
.btn--add-alt { background-color: var(--color-soda-orange); --btn-hover-bg: var(--color-soda-lime)}
.btn--update { background-color: var(--color-brand-mint); --btn-hover-bg: var(--color-brand-tangerine); }
.btn--update-alt { background-color: var(--color-soda-lime); --btn-hover-bg: var(--color-soda-orange); }
.btn--delete { background-color: var(--color-brand-red); --btn-hover-bg: var(--color-brand-blue); }
.btn--export { --btn-base-color: var(--color-btn-export);}
.btn--export-alt { background-color: var(--color-soda-grape); --btn-hover-bg: var(--color-soda-lime); }
.btn--edit { background-color: var(--color-soda-lime); --btn-hover-bg: var(--color-soda-orange); }
.btn--save { --btn-base-color: var(--color-btn-save);}
.btn--manage { background-color: var(--color-soda-grape); --btn-hover-bg: var(--color-soda-lemon); }
.btn--browse { background-color: var(--color-soda-lime); --btn-hover-bg: var(--color-soda-orange); }
.btn--import { --btn-base-color: var(--color-btn-import);}
.btn--disabled { background-color: var(--color-text-secondary); --btn-hover-bg: var(--color-text-primary); }
.btn--tasting { background: linear-gradient(135deg, var(--color-soda-root-beer), var(--color-soda-root-beer-light));}
.btn--tasting:hover { 
  background: linear-gradient(135deg, var(--color-soda-root-beer-light), var(--color-soda-root-beer));}
.btn--soda-manager {
  background: var(--color-rainbow-gradient-right); 
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.btn--soda-manager:hover {
    background: var(--color-rainbow-gradient-left);
}
.btn--stats { background-color: var(--color-brand-blue); --btn-hover-bg: var(--color-brand-blue);}
.btn--close { --btn-base-color: var(--color-btn-close);}
.btn--cancel { --btn-base-color: var(--color-btn-cancel);}
.btn--success { background-color: var(--color-success); }
.btn--error { background-color: var(--color-error); }
.btn--warning { background-color: var(--color-soda-lemon); --btn-hover-bg: var(--color-soda-lemon); }
.btn--view { --btn-base-color: var(--color-btn-view);}

/* --- Button Containers --- */

/* A flexbox container for a group of buttons, centering them horizontally */
.btn-box {
  display: flex;                                /* Enables flexbox layout */
  flex-wrap: wrap;                              /* Allows buttons to wrap to a new line if needed */
  justify-content: center;                      /* Centers the buttons horizontally */
  gap: var(--space-lg);                         /* Adds consistent large spacing between buttons */
}

/* A flexbox container that aligns a group of buttons to the end of the container */
.btn-box--end {
  display: flex;                                /* Enables flexbox layout */
  flex-wrap: wrap;                              /* Allows buttons to wrap to a new line */
  justify-content: flex-end;                    /* Aligns buttons to the right side of the container */
  gap: var(--space-lg);                         /* Adds consistent large spacing between buttons */
}

/* A container for a small group of related action buttons */
.action-button-group {
  display: flex;                                /* Enables flexbox to align buttons horizontally */
  flex-shrink: 0;                               /* Prevents the buttons from shrinking when space is limited */
  gap: var(--space-xs);                         /* Adds a small gap between the action buttons */
  align-items: center;                          /* Vertically centers the buttons */
  justify-content: center;                      /* Centers the buttons horizontally within the container */
}

/* --- Button with Icon Modifiers --- */

/* Modifier for buttons that contain an icon on the left side */
.btn--icon-left {
  display: inline-flex;                         /* Enables an inline flexbox layout for aligning icon and text */
  align-items: center;                          /* Vertically centers the icon and text */
  gap: var(--space-sm);                         /* Creates space between the icon and the text */
}

/* Styles for the icon image itself within a button */
.btn-icon {
  width: var(--icon-size-xl);                   /* Sets a large, fixed width for the icon */
  height: var(--icon-size-xl);                  /* Sets a large, fixed height to maintain a square aspect ratio */
  border: 2px solid var(--color-white-overlay-light); /* Adds a thin, translucent white border around the icon */
  border-radius: 50%;                           /* Makes the icon circular */
}

/* Modifier for a medium-sized button icon */
.btn-icon--medium {
  width: var(--icon-size-md);                   /* Sets a standard fixed width for the icon */
  height: var(--icon-size-md);                  /* Sets a standard fixed height to maintain a square aspect ratio */
}

/* Styles for button icons specifically within a dashboard actions card */
.card-actions--dashboard .btn-icon {
  width: var(--icon-size-md);                   /* Sets a standard fixed width for the icon */
  height: var(--icon-size-md);                  /* Sets a standard fixed height to maintain a square aspect ratio */
}

/* ==========================================
   COMPONENT: FORMS
   ========================================== */

/* --- Form Grouping & Layout --- */

/* Generic container for a group of form-related items, providing vertical spacing */
.form-group {
  margin-bottom: var(--space-sm);               /* Adds consistent space below each form group */
}

/* Modifier to remove margin from a form group */
.form-group-no-margin {
  margin: 0;                                    /* Resets all margins for specific layout needs */
}

/* A container for a group of fields that should be visually nested, indicating a sub-section */
.form-group--nested {
  padding-left: var(--space-xl);                /* Creates a visual indentation for nested fields */
  border-left: 3px solid var(--color-border-light); /* Adds a vertical line to visually connect to the parent field */
}

/* Defines a grid-based layout for form fields arranged in a row */
.form-row-layout {
  display: grid;                                /* Enables CSS Grid layout */
  gap: var(--space-lg);                         /* Sets consistent spacing between grid items (form fields) */
}

/* Modifier to create a two-column form layout */
.form-row-layout--2-col {
  grid-template-columns: repeat(2, 1fr);        /* Creates two equally sized columns */
}

/* Modifier to create a three-column form layout */
.form-row-layout--3-col {
  grid-template-columns: repeat(3, 1fr);        /* Creates three equally sized columns */
}

/* On mobile, all form layouts stack to a single column */
@media (max-width: 768px) {
  .form-row-layout {
    grid-template-columns: 1fr;                 /* Changes all multi-column layouts to a single column on mobile */
  }
}

/* --- Form UI Components --- */

/* Base style for a form label */
.form-label {
  display: block;                               /* Ensures the label takes its own line */
  font-weight: var(--font-weight-medium);       /* Applies a medium font weight for emphasis */
  margin-bottom: var(--space-2xs);              /* Adds a small space below the label */
  color: inherit;                               /* Inherits text color from its parent */
}

/* Larger version of a form-label - good if only a few labels need embiggening */
.form-label--large {
  font-size: var(--font-size-125);              /* Increases the font size for a larger label */
  margin-bottom: var(--space-xs);               /* Increases the bottom margin for a larger label */
}

/* Used if all form-labels inside a card-section--large-labels container should be bigger */
.card-section--large-labels .form-label {
  font-size: var(--font-size-125);              /* Increases the font size for labels within this specific section */
  margin-bottom: var(--space-xs);               /* Adjusts the bottom margin for labels within this section */
}

/* Informational box within a form */
.form-info {
  display: block;                               /* Ensures the info box takes its own line */
  border: 1px solid var(--color-info-border);   /* Adds a border with an info-specific color */
  background: var(--color-info-bg);             /* Sets an info-specific background color */
  color: var(--color-info-text);                /* Sets an info-specific text color */
  font-weight: 500;                             /* Applies a medium font weight */
  border-radius: var(--card-radius-sm);         /* Applies consistent rounded corners */
  padding: var(--space-md);                     /* Adds internal padding */
  margin: var(--space-sm) 0;                    /* Adds vertical margin for spacing */
}

/* Base styles for form input fields, select dropdowns, and text areas */
.form-input,
.form-select,
.form-textarea {
  width: 100%;                                  /* Ensures the input fills the full width of its container */
  padding: var(--input-padding);                /* Sets consistent internal padding */
  border: 2px solid #e2e8f0;                    /* Defines a subtle border */
  border-radius: var(--input-radius);           /* Applies consistent rounded corners */
  font-family: var(--font-body);                /* Uses the main body font */
  font-size: var(--font-size-100);              /* Sets a consistent font size */
  transition: all var(--transition-normal);     /* Smoothly animates changes to properties */
  background: white;                            /* Sets a solid white background */
}

/* Focus states for form input fields, select dropdowns, and text areas */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;                                /* Removes the default outline */
  border-color: var(--color-primary);           /* Changes the border color to the primary brand color */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* Adds a subtle blue outer glow */
}

/* --- Client-Side Validation Feedback --- */

/* Styles for invalid form inputs, selects, text areas, and icon picker buttons */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.icon-picker-button.is-invalid {
  border-color: var(--color-error);             /* Changes the border color to red to indicate an error */
  box-shadow: 0 0 0 1px var(--color-error);     /* Adds a subtle red outer glow */
}

/* Modifier for a short form input field */
.form-input--short {
  max-width: 120px;                             /* Limits the maximum width of the input field */
}

/* Modifier for smaller form inputs and selects */
.form-input--small,
.form-select--small {
  padding: 0.5rem;                              /* Reduces padding for a more compact size */
  font-size: var(--font-size-90);               /* Reduces font size for a more compact size */
}

/* Styles for a form text area */
.form-textarea {
  min-height: 80px;                             /* Sets a minimum height for the text area */
  resize: vertical;                             /* Allows vertical resizing only */
}

/* Styles for displaying form errors */
.form-errors {
  color: var(--color-error);                    /* Sets the text color to red for error messages */
  font-size: var(--font-size-90);               /* Applies a small font size */
  display: block;                               /* Ensures the error message takes its own line */
  margin-top: 0.25rem;                          /* Adds a small space above the error message */
}

/* Styles for a general validation message */
.validation-message {
  color: var(--color-error);                    /* Sets the text color to red for validation messages */
  font-size: var(--font-size-90);               /* Applies a small font size */
  font-weight: 500;                             /* Applies a medium font weight */
  margin-top: var(--space-2xs);                 /* Adds a small space above the message */
  min-height: 1.2em;                            /* Prevents layout shifts when the message appears/disappears */
}

/* --- Form Cards (special styling for add/edit forms) --- */

/* Styles specifically applied to form labels within a form card */
.form-card .form-label {
  color: white;                                 /* Sets the label text color to white */
  font-weight: var(--font-weight-semibold);     /* Applies a semi-bold font weight */
}

/* Styles specifically applied to form inputs, selects, and text areas within a form card */
.form-card .form-input,
.form-card .form-select,
.form-card .form-textarea {
  background: rgba(255, 255, 255, 0.95);        /* Sets a slightly transparent white background */
}

/* ==========================================
   COMPONENT: INPUT SPINNER
   ========================================== */

/* Input spinner container */
.input-spinner {
    background: white;                          /* Ensure consistent background for the entire group */
    display: flex;                                /* Arrange items in a row */
    align-items: stretch;                         /* Make all items the same height */
    width: 100%;                                  /* Take full width of parent .form-group */
    border: 2px solid var(--color-border-light);  /* Subtle border */
    border-radius: var(--input-radius);           /* Input fields all have the same border-radius */
    overflow: hidden;                             /* Ensures inner elements respect the border-radius */
    transition: all var(--transition-normal);     /* Normal transition */
}

/* Focus state for the entire spinner group (matches form-input focus) */
.input-spinner:focus-within {
    outline: none;                                    /* Remove default browser outline */
    border-color: var(--color-primary);               /* The border color will change to your primary */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);  /* Your primary focus shadow */
}

/* Input field inside the spinner group */
.input-spinner .form-input {
    background: white;                          /* Ensure input background is white to prevent bleed */
    flex-grow: 1;                                 /* Allow input to take up available space */
    border: none;                                 /* Remove individual input border, as group has it */
    border-radius: 0;                             /* CRITICAL: Ensure no border-radius on the inner input */
    text-align: center;                           /* All text is centered */
}

/* Input field inside the spinner group */
.input-spinner-input {
    appearance: none;                             /* Standard property */
    -moz-appearance: textfield;                   /* Turns of the Firefox spinners */
}

/* Hide native spinners if you're using this custom setup */
.input-spinner-input::-webkit-outer-spin-button,
.input-spinner-input::-webkit-inner-spin-button {
    -webkit-appearance: none;                     /* Turns off the Chrome spinners */
    margin: 0;                                    /* Remove margin added for the Chrome spinners */
}

/* Increment and decrement buttons within the spinner group */
.input-spinner-btn {
    background-color: var(--color-brand-blue);  /* Buttons default to brand blue */
    color: var(--color-text-white);             /* White text */
    flex-shrink: 0;                             /* Prevent buttons from shrinking */
    width: var(--icon-size-xl);                 /* Fixed width for the buttons, adjust as needed */
    border: none;                               /* No border for the button itself, group handles it */
    cursor: pointer;                            /* Show pointer cursor on hover */
    font-size: var(--font-size-150);            /* Larger font for + / - for better visibility */
    line-height: 1;                             /* Adjust line height for vertical centering */
    padding: 0;                                 /* Remove default button padding */
    transition: all var(--transition-fast);     /* Fast transition */
    font-weight: var(--font-weight-semibold);   /* Slightly more bold */
}

.input-spinner-btn:hover {
    background-color: var(--color-brand-red);   /* Switches to brand red on hover */
    color: var(--color-text-white);             /* Keep text white on hover */
}

.input-spinner-btn:active {
    background-color: var(--color-brand-red);   /* Switches to brand red on press */
    transform: scale(0.95);                     /* Subtle press effect */
}

/* Styles for the increment and decrement buttons */
.input-spinner-btn--decrement {
    border-right: 1px solid var(--color-border-light);  /* Separator line from input */
}

.input-spinner-btn--increment {
    border-left: 1px solid var(--color-border-light);   /* Separator line from input */
}

/* Ensure responsiveness for the input spinner on smaller screens */
@media (max-width: 768px) {
  .input-spinner {
    max-width: 100%;                  /* Ensure it takes full width on small screens */
  }
}

/* ==============================================
   COMPONENT: NAVIGATION
   ============================================== */

/* --- Back Navigation Link --- */

/* Styles for a back navigation link, typically used for returning to a previous page or list */
.nav-back {
  color: var(--color-black-overlay-medium); /* Sets the default text color to a muted black */
  text-decoration: none;                    /* Removes underline from the link */
  font-weight: 400;                         /* Sets the font weight to normal */
  font-size: var(--font-size-90);           /* Uses a slightly smaller font size for navigation */
  font-family: var(--font-body);            /* Applies the main body font */
  transition: color var(--transition-fast); /* Smooth transition for color changes on hover */
  display: inline-block;                    /* Allows proper padding and margins */
}

/* Hover state for the back navigation link */
.nav-back:hover {
  color: var(--color-primary);              /* Changes text color to the primary brand color on hover */
  text-decoration: none;                    /* Ensures no underline appears on hover */
}

/* --- Navigation Separator --- */

/* Styles for a visual separator between navigation elements, like an arrow or pipe symbol */
.nav-separator {
  margin: 0 1rem;                           /* Adds horizontal spacing around the separator */
  color: var(--color-text-muted);           /* Sets a muted color for the separator text */
}

/* ==============================================
   COMPONENT: NOTIFICATION (TOAST)
   ============================================== */

/* The main container for a toast notification, positioned in the top-right corner */
.notification {
  position: fixed;                              /* Positions the notification relative to the viewport */
  top: 20px;                                    /* Aligns the notification 20px from the top of the viewport */
  right: 20px;                                  /* Aligns the notification 20px from the right of the viewport */
  padding: var(--space-md) 1.5rem;              /* Applies internal padding around the content */
  border-radius: var(--card-radius-sm);         /* Rounds the corners slightly */
  color: white;                               /* Sets the text color to white for contrast */
  font-weight: 500;                             /* Uses a medium font weight for readability */
  z-index: 2000;                                /* Ensures it appears above other content on the page */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* Adds a subtle shadow for depth */
  transition: transform 0.3s ease-in-out;       /* Smooth animation for sliding the notification into view */

  /* Start off-screen to allow for a slide-in animation */
  transform: translateX(120%);                  /* Moves the notification completely off the right side of the screen */

  /* For the icon and text alignment within the notification */
  display: flex;                                /* Enables flexbox for aligning internal items */
  align-items: center;                          /* Vertically centers items within the notification */
}

/* The state when the notification is visible on screen */
.notification.show {
  transform: translateX(0);                     /* Slides the notification into view from the right */
}

/* --- Color Modifiers --- */

/* Modifier for success-themed notifications */
.notification--success {
  background-color: var(--color-success);       /* Sets the background to the success color */
}

/* Modifier for error-themed notifications */
.notification--error {
  background-color: var(--color-error);        /* Sets the background to the error color */
}

/* Modifier for warning-themed notifications */
.notification--warning {
  background-color: var(--color-warning);       /* Sets the background to the warning color */
}

/* Modifier for informational-themed notifications */
.notification--info {
  background-color: var(--color-info);          /* Sets the background to the info color */
}

/* ==============================================
   COMPONENT: MODAL
   ============================================== */

/* This class is added to the <body> to prevent scrolling when a modal is open */
body.modal-open {
  overflow: hidden;                         /* Prevents scrolling of the main page content */
}

/* The semi-transparent backdrop that covers the entire screen when a modal is active */
.modal-overlay {
  position: fixed;                          /* Positions the overlay relative to the viewport */
  top: 0;                                   /* Aligns to the top edge of the viewport */
  left: 0;                                  /* Aligns to the left edge of the viewport */
  width: 100%;                              /* Ensures the overlay covers the full width of the viewport */
  height: 100%;                             /* Ensures the overlay covers the full height of the viewport */
  background-color: var(--color-bg-overlay);/* Sets a semi-transparent dark background color */
  z-index: 1000;                            /* Ensures the overlay appears above other page content */
  backdrop-filter: blur(2px);               /* Applies a subtle blur effect to the content behind the modal */
  display: flex;                            /* Enables flexbox for centering the modal content */
  align-items: center;                      /* Vertically centers the modal within the overlay */
  justify-content: center;                  /* Horizontally centers the modal within the overlay */

  /* Animation styles for the overlay's appearance */
  opacity: 0;                               /* Starts completely transparent */
  visibility: hidden;                       /* Prevents interaction when the modal is not visible */
  transition: opacity 0.2s ease, visibility 0.2s ease; /* Smooth transition for fade-in/out */
}

/* The state modifier that makes the modal overlay visible and interactive */
.modal-overlay.modal-visible {
  opacity: 1;                               /* Fades the overlay in to full visibility */
  visibility: visible;                      /* Makes the overlay interactive (e.g., clickable to close) */
}

/* The main container for the modal's content, styled as a card */
.card--modal {
  max-width: 700px;                         /* Sets a hard upper limit on the width */
  width: clamp(350px, 90vw, 600px);         /* Fluid width for better responsiveness */
  transform: scale(0.95);                   /* Starts slightly smaller for a zoom-in animation */
  transition: transform 0.2s ease;          /* Smooth transition for the scaling effect */
}

/* The state modifier that animates the modal card into its final visible size */
.modal-overlay.modal-visible .card--modal {
  transform: scale(1);                      /* Scales the modal to its normal size when visible */
}

/* The main title text within the modal */
.modal-title {
  font-size: var(--font-size-150);          /* Sets a prominent font size for the modal title */
  color: var(--color-text-white);           /* Sets the text color to white for high contrast */
  margin: 0;                                /* Removes any default top or bottom margins */
}

/* The subtitle text within the modal, typically below the main title */
.modal-subtitle {
  margin-top: var(--space-sm);              /* Adds a small space above the subtitle */
  padding: 0;                               /* Removes any default padding */
}

.modal-subtitle--white {
  color: var(--color-text-white);           /* Sets the text color to white for high contrast */
}

/* The image icon displayed within a modal */
.modal-icon-img {
  width: 60px;                              /* Sets a fixed width for the image icon */
  height: 60px;                             /* Sets a fixed height to maintain a square aspect ratio */
  object-fit: contain;                      /* Ensures the image scales to fit within its container without cropping or distortion */
}

/* Generic paragraph text used within the modal body */
.modal-text {
  text-align: center;                       /* Centers the text content */
  margin-top: var(--space-md);              /* Adds space above the text */
  margin-bottom: var(--space-2xl);          /* Adds a larger space below the text */
  color: var(--color-text-primary);         /* Sets the text color to the primary body text color */
  line-height: 1.5;                         /* Improves readability with a comfortable line height */
}

.modal-text--large {
  font-size: var(--font-size-125);
}

/* Styles for a large icon, typically used for status (e.g., error, success) within a modal */
.modal-icon-container {
  width: 60px;                              /* Defines a fixed width for the circular icon container */
  height: 60px;                             /* Defines a fixed height for the circular icon container */
  background-color: var(--color-error-bg);  /* Sets a faint red background, typically for error states */
  border: 1px solid var(--color-error-border); /* Adds a thin red border, matching error state */
  border-radius: 50%;                       /* Creates a perfect circle for the container */
  display: flex;                            /* Enables flexbox for centering the icon */
  align-items: center;                      /* Vertically centers the icon within the container */
  justify-content: center;                  /* Horizontally centers the icon within the container */
  margin: var(--space-2xl) auto var(--space-3xl) auto; /* Centers the container horizontally and provides vertical spacing */
  color: var(--color-error);               /* Sets the icon color to the primary error color */
  font-size: var(--font-size-200);          /* Sets a large font size for the icon itself */
}

.modal-icon-container.confirm {
  background-color: var(--color-info-bg);      /* Sets a faint blue background */
  border: 1px solid var(--color-info-border);  /* Adds a thin blue border*/
  color: var(--color-info-text);               /* Sets the icon color to a deeper blue */
}

/* ==============================================
   COMPONENT: IMAGE LIGHTBOX
   ============================================== */

/* The main overlay container for the image lightbox. It's hidden by default and transitions into view */
.lightbox {
  position: fixed;                          /* Positions the lightbox relative to the viewport, ensuring it stays in place */
  top: 0;                                   /* Aligns the lightbox to the top edge of the viewport */
  left: 0;                                  /* Aligns the lightbox to the left edge of the viewport */
  width: 100%;                              /* Ensures the lightbox covers the full width of the viewport */
  height: 100%;                             /* Ensures the lightbox covers the full height of the viewport */
  background-color: var(--color-bg-overlay);/* Sets a semi-transparent dark background for the overlay */
  z-index: 1000;                            /* Ensures the lightbox appears above most other page content */
  backdrop-filter: blur(2px);               /* Applies a subtle blur effect to the content behind the lightbox */
  display: flex;                            /* Enables flexbox for centering the lightbox content */
  align-items: center;                      /* Vertically centers the content within the lightbox */
  justify-content: center;                  /* Horizontally centers the content within the lightbox */
  padding: var(--space-md);                 /* Adds internal padding to ensure content isn't too close to edges */

  /* Animation properties for the lightbox's visibility */
  opacity: 0;                               /* Starts completely transparent */
  visibility: hidden;                       /* Prevents interaction with the overlay when it's not visible */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for fading and visibility changes */
}

/* The state modifier that makes the lightbox visible and interactive */
.lightbox.is-visible {
  opacity: 1;                               /* Fades the lightbox in to full visibility */
  visibility: visible;                      /* Makes the lightbox interactive */
}

/* The content wrapper holds the main image and its caption within the lightbox */
.lightbox-content {
  position: relative;                       /* Establishes a positioning context for any absolutely positioned children */
  max-width: 90vw;                          /* Limits the maximum width of the content to 90% of the viewport width */
  max-height: 90vh;                         /* Limits the maximum height of the content to 90% of the viewport height */
  text-align: center;                       /* Centers any inline content, like the caption */

  /* A subtle zoom-in animation for the content when the lightbox becomes visible */
  transform: scale(0.95);                   /* Starts slightly smaller for a subtle zoom-in effect */
  transition: transform 0.3s ease;          /* Smooth transition for the scaling effect */
}

/* The state modifier that animates the lightbox content to its full size */
.lightbox.is-visible .lightbox-content {
  transform: scale(1);                      /* Scales the content to its normal size when the lightbox is visible */
}

/* The main image displayed within the lightbox */
.lightbox-image {
  max-width: 100%;                          /* Ensures the image does not exceed the width of its container */
  /* Adjusts the maximum height to leave space for the caption and padding, preventing overflow */
  max-height: calc(90vh - 5rem);            /* Calculates height relative to viewport height minus a fixed offset */
  border-radius: var(--card-radius-sm);     /* Applies small rounded corners to the image */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);/* Adds a prominent shadow to make the image stand out */
  display: block;                           /* Ensures the image behaves as a block element */
  margin: 0 auto;                           /* Centers the image horizontally within its container */
}

/* The caption text displayed below the image in the lightbox */
.lightbox-caption {
  color: white;                             /* Sets the text color to white for high contrast against the overlay */
  margin-top: var(--space-md);              /* Adds space above the caption to separate it from the image */
  font-size: var(--font-size-100);          /* Sets a standard readable font size */
  opacity: 0.9;                             /* Makes the caption slightly transparent for a softer look */
  padding: 0 var(--space-md);               /* Adds horizontal padding for better readability */
}

/* The close button for the lightbox, positioned in the top-right corner */
.lightbox-close-btn {
  position: absolute;                       /* Positions the button relative to the main .lightbox overlay */
  top: 20px;                                /* Positions the button 20px from the top edge */
  right: 20px;                              /* Positions the button 20px from the right edge */
  background: rgba(0, 0, 0, 0.5);         /* Sets a semi-transparent black background */
  border: none;                             /* Removes any default button borders */
  color: white;                           /* Sets the icon color to white for visibility */
  font-size: var(--font-size-200);          /* Sets a large font size for the close icon */
  width: var(--touch-target-md);            /* Standard, comfortable touch target size */
  height: var(--touch-target-md);           /* Ensures a perfect circle aspect ratio */
  border-radius: 50%;                       /* Creates a circular button shape */
  cursor: pointer;                          /* Indicates the button is interactive */
  display: flex;                            /* Enables flexbox for centering the icon */
  align-items: center;                      /* Vertically centers the icon */
  justify-content: center;                  /* Horizontally centers the icon */
  line-height: 1;                           /* Ensures proper vertical alignment of the icon */
  transition: background-color var(--transition-fast), transform 0.2s ease; /* Smooth transitions for hover effects */
  z-index: 1010;                            /* Ensures the button appears above all other lightbox content */
}

/* Hover state for the close button */
.lightbox-close-btn:hover {
  background: rgba(0, 0, 0, 0.8);           /* Darkens the background on hover for clear feedback */
  transform: scale(1.1);                    /* Slightly enlarges the button on hover */
}

/* ==============================================
   COMPONENT: STAT CARD
   ============================================== */

/* The label text for a statistic card, typically describing the metric */
.stat-card-label {
  font-size: var(--font-size-100);                /* Sets a standard readable font size */
  color: var(--color-text-secondary);             /* Uses a muted color to be less prominent than the number */
  margin: 0;                                      /* Removes any default margins */
}

/* The large, prominent number displayed on a statistic card */
.stat-number {
  font-size: var(--font-size-300);                /* Sets a large font size for strong visual impact */
  font-weight: bold;                              /* Makes the number bold for emphasis */
  margin-bottom: 0.5rem;                          /* Adds a small space below the number */
  color: var(--stat-color, var(--color-primary)); /* Uses a dynamic color variable or defaults to the primary color */
}


/* ==============================================
   COMPONENT: ACTIVITY LIST
   ============================================== */

/* An individual entry within an activity list, providing bottom padding */
.activity-list-entry {
  padding-bottom: var(--space-2xs);               /* Adds a very small padding to the bottom of each entry */
}

/* A vertical border that visually connects or separates activity list entries */
.activity-list-border {
  border-left: 4px solid var(--border-color);     /* Creates a thick left border, with color from a variable */
  padding-left: 0.75rem;                          /* Adds internal padding to the left of the border */
}

/* The primary column's text styling in an activity list entry, typically for the main detail */
.activity-column-a {
  font-weight: 500;                               /* Sets a medium font weight for readability */
  color: var(--color-text);                       /* Uses the default text color */
}

/* The secondary column's text styling in an activity list entry, often for meta-information like dates */
.activity-column-b {
  color: var(--color-text-secondary);             /* Uses a muted color for secondary information */
  font-size: var(--font-size-90);                 /* Sets a slightly smaller font size */
}

/* ==============================================
   ANIMATIONS AND EFFECTS
   ============================================== */

/* --- Fizz Animation Elements --- */

/* The container for elements that will have fizz animations (bubbles and sparkles) */
.fizz-container {
  position: relative;                               /* Establishes a positioning context for absolutely positioned fizz elements */
  overflow: hidden;                                 /* Ensures that fizz elements are clipped within the container's bounds */
}

/* Styling for the animated bubble elements */
.bubble {
  position: absolute;                               /* Positions bubbles relative to the .fizz-container */
  border-radius: 50%;                               /* Creates a perfect circular shape for the bubbles */
  pointer-events: none;                             /* Ensures bubbles do not interfere with mouse interactions */
  z-index: 10;                                      /* Places bubbles above general content but below sparkles */
  background: rgba(255, 255, 255, 0.3);           /* Semi-transparent white background for a subtle effect */
  mix-blend-mode: overlay;                          /* Blends with the background for a light, ethereal appearance */
  box-shadow: 0 0 2px white;                      /* Adds a subtle white glow around the bubbles */
  animation: floatPop 4s ease-in-out forwards;      /* Applies the 'floatPop' animation, staying at the end state */
}

/* Styling for the animated sparkle elements */
.sparkle {
  position: absolute;                               /* Positions sparkles relative to the .fizz-container */
  pointer-events: none;                             /* Ensures sparkles do not interfere with mouse interactions */
  z-index: 15;                                      /* Places sparkles above bubbles for a layered effect */
  background: white;                             /* Sets a solid white background for the sparkles */
  /* Creates a star-like shape using a polygon clip path */
  clip-path: polygon(
    50% 0%,                                         /* Top point */
    60% 40%,                                        /* Top-right inner point */
    100% 50%,                                       /* Right point */
    60% 60%,                                        /* Bottom-right inner point */
    50% 100%,                                       /* Bottom point */
    40% 60%,                                        /* Bottom-left inner point */
    0% 50%,                                         /* Left point */
    40% 40%                                         /* Top-left inner point */
  );
  opacity: 0.6;                                     /* Sets initial transparency for a softer look */
  filter: blur(0.5px);                              /* Applies a slight blur for a glowing effect */
  animation: sparklePulse 5s ease-in-out forwards;  /* Applies the 'sparklePulse' animation, staying at the end state */
}

/* --- Keyframe Animations --- */

/* Defines the animation for bubbles to float up and fade out */
@keyframes floatPop {
  0% {
    transform: scale(0.4) translateY(0);            /* Starts small and at its initial vertical position */
    opacity: 0;                                     /* Starts completely transparent */
  }
  20% {
    opacity: 0.6;                                   /* Fades in to a visible opacity */
  }
  50% {
    transform: scale(1.2) translateY(-40px);        /* Grows and moves upward */
    opacity: 0.9;                                   /* Reaches peak opacity */
  }
  100% {
    transform: scale(0.6) translateY(-100px);       /* Shrinks and continues moving upward, fading out */
    opacity: 0;                                     /* Becomes completely transparent at the end */
  }
}

/* Defines the animation for sparkles to pulse, rotate, and fade */
@keyframes sparklePulse {
  0% {
    transform: scale(0.8) rotate(0deg);             /* Starts slightly smaller and without rotation */
    opacity: 0;                                     /* Starts completely transparent */
  }
  40% {
    opacity: 0.6;                                   /* Fades in to a visible opacity */
  }
  60% {
    transform: scale(1.3) rotate(45deg);            /* Grows larger and rotates */
    opacity: 1;                                     /* Reaches full opacity */
  }
  100% {
    transform: scale(0.8) rotate(90deg);            /* Shrinks back down and continues rotating, fading out */
    opacity: 0;                                     /* Becomes completely transparent at the end */
  }
}

/* ==============================================
   COMPONENT: NUTRITION FACTS LABEL
   ============================================== */

/* The main container for the FDA-inspired nutrition label display */
.nutrition-label {
  width: 100%;                              /* Ensures the label takes full width of its parent */
  max-width: 320px;                         /* Limits the label to a standard, readable width */
  border: 2px solid black;                  /* Creates a prominent black border around the label */
  padding: 0.5rem;                          /* Provides internal spacing around the label's content */
  font-family: var(--font-nutrition);       /* Applies the specific font designed for nutrition labels */
  color: black;                             /* Sets the default text color to black */
  background: white;                        /* Ensures a solid white background for clarity */
  margin: 0 auto;                           /* Centers the label horizontally on the page */
}

/* The main "Nutrition Facts" heading at the top of the label */
.nutrition-label-header {
  font-size: var(--font-size-200);          /* Large font size for the main header */
  font-weight: 900;                         /* Very bold font weight for strong emphasis */
  letter-spacing: -1px;                     /* Slightly condenses letter spacing for a compact look */
}

/* Styling for messages displayed when nutrition data is empty or unavailable */
.nutrition-empty {
  color: var(--color-text-secondary);       /* Uses a muted text color for less emphasis */
  font-style: italic;                       /* Italicizes the text to indicate supplementary information */
}

/* Base styling for a single line item within the nutrition label */
.nl-line {
  display: flex;                            /* Uses flexbox to align content (nutrient and value) horizontally */
  justify-content: space-between;           /* Pushes the nutrient name to the left and value to the right */
  align-items: flex-end;                    /* Aligns content vertically to the bottom of the line */
  font-size: var(--font-size-90);           /* Sets a standard font size for nutrient lines */
  padding: 1px 0;                           /* Provides minimal vertical padding for tight spacing */
}

/* --- Dividers --- */

/* A thin horizontal divider line within the nutrition label */
.nl-divider {
  border-top: 1px solid black;              /* Creates a solid black line at the top */
  margin: 4px 0;                            /* Provides vertical spacing around the divider */
}

/* A thicker horizontal divider line, often used below the header */
.nl-divider--thick {
  border-top-width: 10px;                   /* Sets a very thick line for strong visual separation */
}

/* A medium-thickness horizontal divider line */
.nl-divider--medium {
  border-top-width: 5px;                    /* Sets a medium-thick line for moderate separation */
}

/* --- Line Modifiers --- */

/* Modifier for the "Calories" line, making its text larger */
.nl-line--calories {
  font-size: var(--font-size-175);          /* Uses a larger font size for calories, as per FDA guidelines */
}

/* Modifier for the "Daily Value" header line */
.nl-line--daily-value {
  font-size: var(--font-size-75);           /* Smaller font size for the daily value percentage label */
  text-align: right;                        /* Aligns the text to the right */
  border-bottom: 1px solid black;           /* Adds a thin black line below the daily value header */
  padding-bottom: 2px;                      /* Provides slight padding below the text and above the border */
  margin-bottom: 2px;                       /* Adds a small margin below the line */
}

/* Modifier for the footer text (e.g., "Daily Values may be higher or lower...") */
.nl-line--footer {
  font-size: var(--font-size-75);           /* Smaller font size for legal/explanatory text */
  line-height: 1.3;                         /* Adjusts line height for readability of small text */
  display: block;                           /* Overrides flex display to allow text to wrap naturally */
}

/* --- Text Element Styles --- */

/* Styling for the serving size value (e.g., "1 bottle") */
.nl-serving {
  font-weight: var(--font-weight-bold);     /* Makes the serving size text bold */
  font-size: var(--font-size-125);          /* Larger font size for prominence */
}

/* Container for serving size and servings per container */
.nl-serving-container {
  font-weight: var(--font-weight-semibold); /* Semibold font weight */
  font-size: var(--font-size-110);          /* Slightly larger font size */
}

/* Default font weight for nutrient names */
.nl-nutrient {
  font-weight: 400;                         /* Normal font weight for most nutrient names */
}

/* Bold font weight for important nutrient names (e.g., "Total Fat", "Sodium") */
.nl-nutrient--bold {
  font-weight: 700;                         /* Makes the nutrient name bold */
}

/* Default font weight for nutrient values (e.g., "14g", "250mg") */
.nl-value {
  font-weight: 400;                         /* Normal font weight for nutrient values */
}

/* Bold font weight for important nutrient values */
.nl-value--bold {
  font-weight: 700;                         /* Makes the nutrient value bold */
}

/* --- Indentation --- */

/* Indentation for sub-nutrients (e.g., "Saturated Fat" under "Total Fat") */
.nl-indent-1 {
  padding-left: 1rem;                       /* Adds a 1rem left padding for indentation */
}

/* Deeper indentation for sub-sub-nutrients (e.g., "Added Sugars" under "Total Sugars") */
.nl-indent-2 {
  padding-left: 2rem;                       /* Adds a 2rem left padding for deeper indentation */
}

/* ==============================================
   Nutrition Facts Editing (FDA inspired)
   ============================================== */

/* A visual divider used within the nutrition facts editing forms */
.nutrition-divider {
  border: none;                                     /* Removes any default border */
  border-top: 1px solid var(--color-border-medium); /* Creates a thin line using the medium border color */
  margin: var(--space-xs) 0 var(--space-md) 0;      /* Provides vertical space around the divider */
}

/* Indentation for sub-items in nutrition forms, such as sub-nutrients */
.nutrition-indent {
  padding-left: var(--space-lg);                    /* Indents elements by 1.5rem (var(--space-lg)) from the left */
}

/* Deeper indentation for specific sub-items, like "Added Sugars" */
.nutrition-double-indent {
  padding-left: var(--space-3xl);                   /* Indents elements by 2rem (var(--space-3xl)) from the left */
}

/* Ensures form labels within indented nutrition sections have no left margin */
.nutrition-indent .form-label,
.nutrition-double-indent .form-label {
  margin-left: 0;                                 /* Overrides any inherited left margin from parent styles */
}

/* ==============================================
   Enhanced Form Fieldsets for Nutrition
   ============================================== */

/* Base styling for fieldset elements, used to group related form controls */
fieldset {
  border: 1px solid #e5e7eb;                /* Creates a thin, light border around the fieldset */
  border-radius: var(--input-radius);       /* Applies rounded corners consistent with input fields */
  padding: var(--space-lg);                 /* Provides generous internal padding within the fieldset */
  margin-bottom: var(--space-xl);           /* Adds significant space below each fieldset */
}

/* Styling for the legend element within a fieldset, providing a title for the group */
fieldset legend {
  font-weight: var(--font-weight-semibold); /* Sets a semibold font weight for clarity */
  padding: 0 var(--space-xs);               /* Adds horizontal padding around the legend text */
  color: var(--color-text);                 /* Uses the default text color */
  font-size: var(--font-size-100);          /* Sets a standard font size for the legend */
}

/* Nutrition form sections, utilizing a grid layout */
.nutrition-section .grid {
  gap: var(--space-lg);                     /* Sets a large gap between grid items within the section */
}

/* Individual form groups within a nutrition section */
.nutrition-section .form-group {
  margin-bottom: var(--space-md);           /* Adds consistent bottom margin for spacing between form groups */
}

/* ==========================================
   Responsive Design for Nutrition & Tasting
   ========================================== */

/* --- Tablet and Mobile Layouts (768px and under) --- */

/* Styles for screens with a maximum width of 768px */
@media (max-width: 768px) {
  /* Nutrition forms responsive */
  /* Changes a 3-column grid layout to a single column on mobile devices */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Adjusts the margins of the nutrition label for mobile spacing */
  .nutrition-label {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-lg);
  }

  /* Adjusts padding on fieldsets to fit better on smaller screens */
  fieldset {
    padding: var(--space-md);
  }

  /* Ensures input spinners do not exceed the width of their container */
  .input-spinner {
    max-width: 100%;
  }

  /* Tasting notes responsive */
  /* Changes the rating item from a row to a single column layout */
  .rating-item {
    grid-template-columns: 1fr;
    text-align: left;
  }

  /* Adjusts the flexbox properties of the rating display for a responsive layout */
  .rating-display {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    min-width: auto;
  }

  /* Aligns the rating icons to the start of the container */
  .rating-icons {
    justify-content: flex-start;
  }
}

/* ==========================================
   RESEARCH EDITOR STYLES (EDITOR-PREFIXED)
   ========================================== */

/* Research Section Editor */
.research-editor-section {
  border: 2px solid #e5e7eb;
  border-radius: var(--card-radius);
  margin-bottom: 2rem;
  background: white;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.research-editor-section.modified {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.3);
}

.research-editor-section-header {
  background: linear-gradient(135deg, var(--color-brand-blue), #60a5fa);
  padding: var(--space-md) 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.research-editor-section-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.research-editor-section-title-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid transparent;
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font-size: var(--font-size-125);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.research-editor-section-title-input:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.research-editor-section-actions {
  display: flex;
  gap: 0.5rem;
}

/* Paragraph Editor */
.research-editor-paragraphs-container {
  padding: var(--space-lg);
}

.research-editor-paragraph {
  border: 1px solid #e5e7eb;
  border-radius: var(--input-radius);
  margin-bottom: var(--space-lg);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.research-editor-paragraph:last-child {
  margin-bottom: 0;
}

.research-editor-paragraph.modified {
  border-color: var(--color-warning);
  background-color: #fefce8;
}

.research-editor-paragraph-content {
  padding: var(--space-md);
}

.research-editor-paragraph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.research-editor-paragraph-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-size: var(--font-size-100);
}

.research-editor-paragraph-actions {
  display: flex;
  gap: 0.5rem;
}

.research-editor-paragraph-form {
  margin-bottom: var(--space-md);
}

.research-editor-paragraph-preview {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: var(--input-radius);
}

.research-editor-paragraph-preview h4 {
  margin: 0 0 1rem 0;
  color: var(--color-text);
  font-size: var(--font-size-100);
}

.research-editor-preview-content {
  font-size: var(--font-size-90);
  line-height: 1.6;
}

/* Preview content styling to match research report */
.research-editor-preview-content p {
  margin-bottom: 0.75rem;
}

.research-editor-preview-content strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.research-editor-preview-content em {
  font-style: italic;
}

.research-editor-preview-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.research-editor-preview-content code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: var(--font-size-90);
}

/* Sources Editor */
.research-editor-sources {
  margin-top: var(--space-md);
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.research-editor-sources-list {
  margin-bottom: var(--space-md);
}

/* This rule arranges the source description, link inputs, and delete button into a side-by-side grid */
.editor-source-item {
  display: grid;
  grid-template-columns: 1fr auto auto; /* Flexible column for inputs, fixed for button */
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xs);
}

.source-link-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.research-editor-source-item:last-child {
  margin-bottom: 0;
}

.research-editor-source-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

/* Button Styles */
.research-editor-btn-icon {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

.research-editor-btn-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.research-editor-btn-icon.btn--error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.research-editor-btn-icon.btn--error:hover {
  background-color: var(--color-error);
  color: white;
}

.research-editor-btn-icon.btn--small {
  padding: 0.375rem;
  min-width: 32px;
  height: 32px;
}

/* Add Buttons */
.research-editor-add-paragraph-container,
.research-editor-add-section-container {
  padding: var(--space-lg);
  text-align: center;
  border-top: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.5);
}

.research-editor-add-section-container {
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(167, 248, 167, 0.1),
    rgba(204, 248, 204, 0.1)
  );
  border: 2px dashed var(--color-success);
  border-radius: var(--card-radius);
}

/* Toggle States */
.research-editor-toggle-preview.active {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

/* Action Buttons */
.research-editor-action-button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Loading Overlay */
.research-editor-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-editor-loading-content {
  background: white;
  padding: 2rem;
  border-radius: var(--card-radius);
  text-align: center;
  box-shadow: var(--card-shadow-lg);
}

.research-editor-loading-content i {
  font-size: var(--font-size-200);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.research-editor-loading-content p {
  margin: 0;
  color: var(--color-text);
  font-weight: 500;
}

/* Animation for Adding Elements */
@keyframes researchEditorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.research-editor-new-element {
  animation: researchEditorSlideIn 0.3s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .research-editor-section-title-group {
    flex-direction: column;
    gap: 1rem;
  }

  .research-editor-section-title-input {
    font-size: var(--font-size-110);
  }

  .research-editor-paragraph-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .research-editor-paragraph-actions {
    align-self: flex-end;
  }

  .research-editor-source-inputs {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .research-editor-action-button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .research-editor-paragraphs-container {
    padding: var(--space-md);
  }

  .research-editor-add-paragraph-container,
  .research-editor-add-section-container {
    padding: var(--space-md);
  }
}

/* Focus States for Accessibility */
.research-editor-section-title-input:focus,
.research-editor-paragraph .form-input:focus,
.research-editor-paragraph .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ==========================================
   COMPONENT: UPLOAD PROGRESS BAR
   ========================================== */

.upload-progress {
  width: 100%;
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-xs);
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-success),
    var(--color-primary)
  );
  width: 0%;
  transition: width var(--transition-normal);
  border-radius: 2px;
}

/* ==========================================
   Responsive Design for Images
   ========================================== */

/* --- Mobile (Tablet and Smaller) Layout --- */

/* Adjustments for screens 768px wide or less */
@media (max-width: 768px) {
  /* Changes the image grid to a single column for a vertical layout */
  .image-management-grid {
    grid-template-columns: 1fr;         /* Switches the grid to a single column layout */
    gap: var(--space-lg);               /* Increases the space between grid items */
  }

  /* Ensures the lightbox content fits within the mobile viewport */
  .lightbox-content {
    max-width: 95vw;                    /* Limits the maximum width to 95% of the viewport width */
    max-height: 95vh;                   /* Limits the maximum height to 95% of the viewport height */
  }

  /* Adjusts the position and size of the lightbox close button for mobile */
  .lightbox-close-btn {
    top: 10px;                          /* Positions the button 10px from the top edge */
    right: 10px;                        /* Positions the button 10px from the right edge */
    width: var(--icon-size-xl);         /* Sets a large fixed width for the button icon */
    height: var(--icon-size-xl);        /* Ensures the icon remains a square */
    font-size: var(--font-size-150);    /* Increases the font size of the icon for better visibility */
  }
}

/* --- Small Mobile Layout --- */

/* Adjustments for screens 480px wide or less */
@media (max-width: 480px) {
  /* Adjusts the upload preview grid for very small screens */
  .upload-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Sets a smaller minimum column width for the upload preview grid */
  }
}

/* =====================================================
   COMPONENT: IMAGE SELECTION & UPLOAD VISUAL FEEDBACK
   ===================================================== */

/* --- Primary Selection Feedback --- */

/* Applies visual styles to indicate an image has been selected as primary */
.primary-selected {
  border: 2px solid var(--color-warning) !important;            /* Adds a solid border with a warning color, overriding other styles */
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) !important;   /* Adds a subtle outer glow with a warning color */
  transform: translateY(-2px);                                  /* Lifts the element slightly for a pop-out effect */
  transition: all 0.2s ease;                                    /* Smoothly animates all property changes */
}

/* Styles the image element itself within the primary-selected container */
.primary-selected img {
  border: 2px solid var(--color-warning);                       /* Adds a solid border directly to the image */
}

/* --- Primary Change Warning Animations --- */

/* The warning box that appears when the primary image is changed */
#primaryChangeWarning {
  background-color: #fef3c7;                                  /* Sets a light yellow background color */
  border: 1px solid #f59e0b;                                  /* Adds a contrasting orange border */
  border-radius: var(--input-radius);                           /* Applies a consistent border radius */
  padding: 0.75rem;                                             /* Adds internal padding */
  margin: 0.5rem 0;                                             /* Adds vertical margin for spacing */
  color: #92400e;                                             /* Sets a dark brown text color for readability */
  font-size: var(--font-size-90);                               /* Applies a small font size */
  display: none;                                                /* Hides the warning element by default */
  animation: warningSlideIn 0.3s ease-out;                      /* Triggers the slide-in animation */
}

/* Defines the keyframes for the warning message's slide-in animation */
@keyframes warningSlideIn {
  from {
    opacity: 0;                                                 /* Starts with the element being fully transparent */
    transform: translateY(-10px);                               /* Starts the element 10 pixels above its final position */
  }
  to {
    opacity: 1;                                                 /* Fades the element in to be fully opaque */
    transform: translateY(0);                                   /* Moves the element to its final position */
  }
}

/* --- Drag and Drop States --- */

/* Defines the visual feedback for an element when a file is being dragged over it */
.drag-over {
  border-color: var(--color-success) !important;                /* Changes the border color to green, overriding other styles */
  background-color: rgba(167, 248, 167, 0.2) !important;      /* Applies a semi-transparent green background color */
  transform: scale(1.02);                                       /* Slightly increases the size of the element */
  box-shadow: 0 0 20px rgba(167, 248, 167, 0.5);              /* Adds a glowing green box shadow */
}

/* --- File Upload Validation States --- */

/* Styles an input when its content is considered invalid by the browser or a custom validation */
.image-type-select:invalid,
.image-type-select[data-invalid="true"] {
  border-color: var(--color-error);                             /* Changes the border color to red to indicate an error */
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3);               /* Adds a subtle red outer glow */
}

/* Styles a valid input field */
.image-type-select:valid {
  border-color: var(--color-success);                           /* Changes the border color to green to indicate success */
}

/* --- Preview Grid Sizing --- */

/* Ensures the preview grid maintains a responsive column layout */
#previewGrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; /* Creates a responsive grid with a minimum column width of 150px */
}

/* --- Quick Apply Section Styling --- */

/* Container for the quick actions section */
.quick-actions {
  margin-top: var(--space-lg);                                  /* Adds a large top margin for spacing */
  padding: var(--space-md) 1.5rem;                              /* Sets internal padding for the container */
  background: rgba(167, 248, 167, 0.08);                      /* Sets a semi-transparent green background */
  border: 1px solid rgba(167, 248, 167, 0.2);                 /* Adds a subtle green border */
  border-radius: 0.75rem;                                       /* Applies rounded corners to the container */
  display: flex;                                                /* Enables flexbox for horizontal alignment */
  gap: 1rem;                                                    /* Adds space between the child elements */
  align-items: center;                                          /* Vertically centers the child elements */
  flex-wrap: wrap;                                              /* Allows items to wrap to a new line if needed */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);                  /* Adds a subtle box shadow for a soft lift effect */
}

/* --- Responsive Adjustments for Mobile --- */

/* Adjustments for screens up to 768px wide */
@media (max-width: 768px) {
  /* Reduces the translateY transform on mobile to be less jarring */
  .primary-selected {
    transform: none;                            
  }

  /* Reduces the scale transform on mobile to be less dramatic */
  .drag-over {
    transform: scale(1.01);                     
  }

  /* Stacks the quick action items vertically on mobile */
  .quick-actions {
    flex-direction: column;                     
    align-items: stretch;                       /* Stretches the items to fill the container width */
  }

  /* Adjusts the minimum width of image preview cards on mobile */
  .preview-image-card {
    min-width: 100px;                           
  }

  /* Reduces the minimum column width of the preview grid for mobile screens */
  #previewGrid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; 
  }
}

/* =====================================================
   COMPONENT: Dashboard Card Styles
   ===================================================== */

/* The default container for dashboard cards. It uses flexbox to stack cards vertically and provides consistent spacing */
.dashboard-container {
  display: flex;                              /* Stacks children vertically */
  flex-direction: column;                     /* Ensures vertical stacking */
  gap: 1.5rem;                                  /* Consistent space between accordion cards */
  padding-bottom: var(--space-lg);            /* Ensures consistent padding at the bottom of the container */
  padding-top: var(--space-sm);               /* Optional: consistent padding at the top of the container */
}

/* Container for action buttons at the bottom of the dashboardcard body (default hidden/revealed with content) */
.card-actions--dashboard {
  display: flex;                              /* Lays out action buttons horizontally */
  gap: 1rem;                                  /* Space between buttons - keep this for when visible */
  flex-wrap: wrap;                            /* Allows buttons to wrap on smaller screens */
  justify-content: flex-end;                  /* Usually right-aligned on dashboard */
}

/* More compact button styling specific to the dashboard card interface */
.card-actions--dashboard .btn {
  padding: 0.5rem 1rem;                       /* Smaller padding for compact buttons */
  font-size: var(--font-size-90);             /* Smaller font size */
  border-radius: 6px;                         /* Slightly less rounded corners */
  border: none;                               /* No border */
  cursor: pointer;                            /* Pointer cursor */
  font-weight: var(--font-weight-medium);     /* Medium font weight */
  display: inline-flex;                       /* Allows icon and text to sit together */
  align-items: center;                        /* Vertically aligns icon and text */
  gap: 0.5rem;                                /* Space between icon and text */
  transition: all 0.2s ease;                  /* Smooth transition for button hover effects */
}

/* When a dashboard card is expanded, reveal the action buttons (dashboard behavior) */
.card--expandable.is-expanded .card-actions--dashboard {
  opacity: 1;                                 /* Fully visible */
  max-height: 5rem;                           /* Enough height for buttons to be visible */
  margin-top: var(--space-xs);                /* Add just a touch more space above the buttons when visible */
}

/* When a dashboard card is not expanded, hide the action buttons (dashboard behavior) */
.card--expandable:not(.is-expanded) .card-actions--dashboard {
  opacity: 0;                                 /* Hidden */  
  max-height: 0;                              /* No height */ 
  overflow: hidden;                           /* Hide overflow */
  padding: 0;                                 /* No padding */                
  margin-top: 0;                              /* No margin */
}

/* Dashboard cards that are just links to other pages have a title inside the card body  */
.dashboard-page-link-title {
  color: var(--color-text-primary);           /* Primary text color */
  margin-bottom: var(--space-sm);             /* Space below the title */
}

/* Dashboard cards that are just links to other pages have explanatory text inside the card body  */
.dashboard-page-link-card-text {
  color: var(--color-text-secondary);         /* Secondary text color */
  margin-bottom: var(--space-lg);             /* Space below the text */
  max-width: 40ch;                            /* Limits text width for readability */
}

/* Icon specific color for Tasting System card */
.card--dashboard-tasting .card-icon {
  color: var(--color-soda-root-beer); /* Root beer color for the icon */
}

/* Icon specific color for System Settings card */
.card--dashboard-settings .card-icon {
  color: var(--color-warning); /* Warning color for the icon */
}

/* --- Responsive Design for Admin Components (apply to base classes) --- */
@media (max-width: 768px) {
  /* Ensure button actions are also stacked on mobile, even if hidden */
  .card-actions--dashboard {
    flex-direction: column;
    align-items: stretch;
  }

  /* Ensure the stacked buttons have enough room */
  .card--expandable.is-expanded .card-actions--dashboard {
    max-height: 20rem; /* Allow enough space for 3 stacked buttons */
  }
    
  /* The stacked buttons should be full width on mobile */
  .card--expandable.is-expanded .card-actions--dashboard .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================
   UTILITY COMPONENT: AG-GRID THEME & SCROLLBARS FOR DASHBOARD
   ===================================================== */

/* --- AG Grid Theme Overrides for Dashboard Grids --- */

/* Base styling for AG-Grid tables within dashboard cards */
.dashboard-grid {
  width: 100%;                                          /* Ensures the grid takes the full width of its container */
  height: 100%;                                         /* Ensures the grid fills the full height of its container */
  font-family: var(--font-body);                        /* Sets the font to a consistent body font */
}

/* Overrides for the Quartz AG-Grid theme specifically for dashboard grids */
.dashboard-grid .ag-theme-quartz {      
  --ag-foreground-color: var(--color-text);             /* Defines the primary text color for the grid content */
  --ag-background-color: white;                       /* Sets a solid white background for the grid area */
  --ag-header-foreground-color: var(--color-text);      /* Sets the text color for the grid header */
  --ag-header-background-color: var(--color-bg-subtle); /* Provides a subtle background color for the header */
  --ag-odd-row-background-color: var(--color-bg-muted); /* Sets a muted background for every other row to improve readability */
  --ag-row-hover-color: #f0f9ff;                      /* Adds a light blue background color when a row is hovered over */
  --ag-selected-row-background-color: rgba(59, 130, 246, 0.1); /* Defines a subtle blue background for selected rows */
  --ag-border-color: #e5e7eb;                         /* Sets a light gray color for grid borders and separators */
  font-size: var(--font-size-90);                       /* Applies a slightly smaller font size for the grid's data */
}

/* Styling for header cells in AG-Grid */
.dashboard-grid .ag-header-cell-label {
  font-weight: var(--font-weight-semibold);             /* Applies a semi-bold font weight to the header text */
  color: var(--color-text);                             /* Sets the text color for the header labels */
}

/* Styling for individual cells in AG-Grid */
.dashboard-grid .ag-cell {
  display: flex;                                        /* Uses flexbox for easier vertical content alignment */
  align-items: center;                                  /* Vertically centers the content within each cell */
  line-height: 1.4;                                     /* Improves readability by increasing the space between lines of text */
}

/* --- AG Grid Scrollbar Styling --- */

/* Custom scrollbar styles for AG-Grid viewports */
.dashboard-grid .ag-body-viewport::-webkit-scrollbar {
  width: 6px;                                           /* Sets the width of the vertical scrollbar */
  height: 6px;                                          /* Sets the height of the horizontal scrollbar */
}

/* Styles the track (the background) of the scrollbar */
.dashboard-grid .ag-body-viewport::-webkit-scrollbar-track {
  background: #f1f5f9;                                /* Defines a light gray color for the scrollbar's background track */
}

/* Styles the thumb (the movable part) of the scrollbar */
.dashboard-grid .ag-body-viewport::-webkit-scrollbar-thumb {
  background: #cbd5e1;                               /* Sets the color of the scrollbar thumb */
  border-radius: 3px;                                   /* Applies rounded corners to the thumb */
}

/* Defines the hover state for the scrollbar thumb */
.dashboard-grid .ag-body-viewport::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;                              /* Darkens the thumb color slightly when the mouse hovers over it */
}

/* ================================================
   COMPONENT: COLOR PICKERS, INPUT GRIDS & PREVIEWS
   ================================================ */

/* --- Color Picker Components --- */

/* Container for a color input and its associated swatch */
.color-input-group {
  display: flex;                                        /* Enables flexbox to align the input and swatch horizontally */
  align-items: center;                                  /* Vertically centers the input and swatch */
  gap: var(--space-xs);                                 /* Adds a small space between the input and swatch */
  min-height: 40px;                                     /* Ensures a minimum height for the group */
}

/* Styles the form input within a color input group */
.color-input-group .form-input {
  flex: 1;                                              /* Allows the input to grow and fill available space */
  min-width: 0;                                         /* Prevents overflow issues in flexbox layouts */
}

/* The color swatch display within the color picker */
.picker-color-swatch {
  width: var(--icon-size-md-plus);                      /* Sets a fixed width for the color swatch */
  height: var(--icon-size-md-plus);                     /* Sets a fixed height to maintain a square aspect ratio */
  border: 1px solid #ccc;                             /* Adds a subtle gray border */
  cursor: pointer;                                      /* Changes the cursor to a pointer to indicate clickability */
  border-radius: var(--space-2xs);                      /* Applies a small border radius */
  transition: transform var(--transition-fast);         /* Smoothly animates the transform property */
  flex-shrink: 0;                                       /* Prevents the swatch from shrinking */
}

/* Defines the hover state for the color swatch */
.picker-color-swatch:hover {
  transform: scale(1.1);                                /* Slightly increases the size of the swatch on hover         */
}

/* --- Color Input Grids --- */

/* Base class for grid layouts of color inputs */
.color-input-grid {
  display: grid;                                        /* Enables CSS Grid layout */
  gap: var(--space-md);                                 /* Provides consistent spacing between grid items */
}

/* Modifier for a two-column grid layout */
.color-input-grid--2x2 {
  grid-template-columns: 1fr 1fr;                       /* Creates two equally sized columns for brand colors */
}

/* Modifier for a two-column grid layout for flavor colors */
.color-input-grid--1x2 {
  grid-template-columns: 1fr 1fr;                       /* Creates two equally sized columns */
}

/* --- Color Preview Containers & Items --- */

/* The main container for color preview items */
.color-preview-container {
  display: flex;                                        /* Enables flexbox layout for aligning preview items */
  padding: var(--space-lg);                             /* Sets consistent internal padding */
  border: 1px solid var(--color-border-light);          /* Defines a subtle border around the container */
  border-radius: var(--card-radius-sm);                 /* Applies a small border radius for rounded corners */
  background-color: var(--color-white-overlay-strong);  /* Sets a slightly transparent white background */
  gap: var(--space-md);                                 /* Adds consistent space between preview items */
  margin-top: var(--space-md);                          /* Adds a top margin to separate the container from preceding content */
  flex-wrap: wrap;                                      /* Allows the preview items to wrap onto a new line on smaller screens */
}

/* The base class for an individual color preview item */
.color-preview-item {
  min-width: 80px;                                      /* Ensures a minimum width for the item to be readable */
  height: 50px;                                         /* Sets a consistent height for the preview item */
  display: flex;                                        /* Enables flexbox to center the content */
  align-items: center;                                  /* Vertically centers the content */
  justify-content: center;                              /* Horizontally centers the content */
  border-radius: var(--card-radius-sm);                 /* Applies rounded corners */
  border: 1px solid var(--color-border-light);          /* Adds a subtle border */
  font-size: var(--font-size-90);                       /* Applies a smaller font size for the text */
  font-weight: var(--font-weight-medium);               /* Sets a medium font weight for improved visibility */
  transition: all var(--transition-fast);               /* Smoothly animates color changes */
}

/* Modifier for a wider color preview item used for gradients */
.color-preview-item--gradient {
  flex: 1;                                              /* Allows the item to grow and fill available space */
  min-width: 120px;                                     /* Sets a minimum width to ensure the gradient is visible */
}

/* --- Color Section Containers --- */

/* Container for a section of color-related components */
.color-section {
  background: var(--color-white-overlay-verystrong);    /* Sets a highly transparent white overlay background */
  padding: var(--space-md);                             /* Adds consistent internal padding */
  border-radius: var(--card-radius-sm);                 /* Applies a medium border radius */
  margin-top: var(--space-lg);                          /* Adds a large top margin to separate sections */
}

/* --- Responsive Behavior --- */

/* Adjustments for screens with a maximum width of 768px */
@media (max-width: 768px) {
  /* Changes the grid layouts to a single column on mobile */
  .color-input-grid--2x2,
  .color-input-grid--1x2 {
    grid-template-columns: 1fr;                         /* Stacks items into a single column */
    gap: var(--space-sm);                               /* Reduces the space between items for a more compact layout */
  }
}

/* ==========================================
   COMPONENT: ICON PICKER (Criterion)
   ========================================== */

/* --- Visual Icon Picker --- */

/* The main container for the entire icon picker component */
.icon-picker-container {
  position: relative;                           /* Establishes a positioning context for the icon grid dropdown */
}

/* The button that triggers the icon picker dropdown */
.icon-picker-button {
  display: flex;                                /* Enables flexbox to align the icon and text horizontally */
  align-items: center;                          /* Vertically aligns the icon and text */
  gap: 0.75rem;                                 /* Adds space between the icon and the text */
  width: 100%;                                  /* Ensures the button takes up the full width of its parent */
  background: white;                          /* Sets a solid white background color */
  border: 2px solid #e2e8f0;                  /* Defines a subtle border around the button */
  border-radius: 0.5rem;                        /* Applies rounded corners to the button */
  padding: 0.75rem 1rem;                        /* Adds internal spacing for a comfortable size */
  font-size: 1rem;                              /* Sets a consistent font size */
  cursor: pointer;                              /* Changes the cursor to a pointer to indicate clickability */
  text-align: left;                             /* Aligns the text to the left */
  transition: border-color 0.2s ease;           /* Smoothly animates the border color change on hover/active states */
}

/* Defines the hover and active states for the icon picker button */
.icon-picker-button:hover,
.icon-picker-button.active {
  border-color: var(--color-primary);           /* Changes the border color to the primary brand color */
}

/* Styles the icon element inside the button */
.icon-picker-button i {
  font-size: 1.1rem;                            /* Sets a specific font size for the icon */
  width: 20px;                                  /* Gives the icon a fixed width for consistent alignment */
  text-align: center;                           /* Centers the icon within its fixed width */
}

/* The dropdown grid that contains all selectable icons */
.icon-picker-grid {
  position: absolute;                           /* Positions the grid relative to its container */
  background: white;                            /* Sets a solid white background for the grid */
  border: 1px solid #e5e7eb;                    /* Adds a subtle border around the grid */
  border-radius: 0.5rem;                        /* Applies rounded corners to the grid container */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);     /* Adds a drop shadow for visual depth */
  padding: 0.5rem;                              /* Adds internal padding to the grid */
  display: grid;                                /* Enables a CSS Grid layout */
  grid-template-columns: repeat(6, 1fr);        /* Creates six equally sized columns for the icons */
  gap: 0.5rem;                                  /* Adds consistent spacing between the grid items */
  margin-top: 0.25rem;                          /* Provides a small gap between the button and the dropdown */
  z-index: 100;                                 /* Ensures the grid appears above other content */
  opacity: 0;                                   /* Hides the grid by default */
  transform: translateY(-10px);                 /* Positions the grid slightly above its final position for the transition effect */
  transition: opacity 0.2s ease, transform 0.2s ease; /* Smoothly animates the visibility and position */
  pointer-events: none;                         /* Disables mouse interactions by default when the grid is hidden */
}

/* Modifier class to show the icon grid */
.icon-picker-grid.visible {
  opacity: 1;                                   /* Makes the grid fully visible */
  transform: translateY(0);                     /* Moves the grid to its final position */
  pointer-events: auto;                         /* Re-enables mouse interactions */
}

/* Defines the style for each selectable icon option within the grid */
.icon-picker-option {
  display: flex;                                /* Enables flexbox for centering the icon */
  align-items: center;                          /* Vertically centers the icon */
  justify-content: center;                      /* Horizontally centers the icon */
  padding: 0.5rem;                              /* Adds internal padding to increase the clickable area */
  border-radius: 0.375rem;                      /* Applies a small border radius */
  cursor: pointer;                              /* Changes the cursor to a pointer */
  transition: background-color 0.2s ease;       /* Smoothly animates the background color */
}

/* Styles for the icon itself within an option */
.icon-picker-option i {
  font-size: 1.5rem;                            /* Sets a larger font size for the icon */
  color: var(--color-text-secondary);           /* Sets a secondary color for the icon */
}

/* Defines the hover state for an icon option */
.icon-picker-option:hover {
  background-color: var(--color-bg-subtle);   /* Changes the background to a subtle color on hover */
}

/* Modifier class for the currently selected icon option */
.icon-picker-option.selected {
  background-color: var(--color-primary);       /* Sets a solid background color to indicate selection */
}

/* Changes the icon color to white when the option is selected */
.icon-picker-option.selected i {
  color: white;                                 /* Overrides the icon color for the selected state */
}

/* ==========================================
   COMPONENT: SELECTION BUTTON
   ========================================== */

/* The base class for a selection button, which acts as a clickable card */
.selection-button {
  width: 100%;                          /* Ensures the button fills the full width of its container */
  padding: var(--space-md);             /* Sets consistent internal padding */
  border: 2px solid var(--color-border-medium); /* Defines a clear border with medium thickness */
  border-radius: 0.75rem;               /* Applies rounded corners for a softer visual style */
  background: white;                    /* Sets a solid white background color */
  cursor: pointer;                      /* Changes the cursor to a pointer to indicate it's clickable */
  text-align: left;                     /* Aligns the text to the left side */
  display: flex;                        /* Enables flexbox for horizontal alignment of contents */
  align-items: center;                  /* Vertically centers all child elements */
  gap: var(--space-md);                 /* Adds consistent spacing between the icon, text, and chevron */
  transition: all 0.2s ease;            /* Smoothly animates all property changes for hover effects */
}

/* Defines the visual feedback for the button on hover */
.selection-button:hover {
  border-color: var(--color-primary);   /* Changes the border color to the primary brand color */
  background-color: var(--color-bg-subtle); /* Applies a subtle background color on hover */
  transform: translateY(-1px);          /* Lifts the button slightly for a pop-out effect */
  box-shadow: var(--card-shadow);       /* Adds a subtle shadow to create depth */
}

/* The container for the selection button's icon */
.selection-button-icon-wrapper {
  width: var(--space-2xl);              /* Sets a fixed width for the icon container */
  height: var(--space-2xl);             /* Sets a fixed height to maintain a square shape */
  border-radius: 0.5rem;                /* Applies a border radius to the icon wrapper */
  display: flex;                        /* Enables flexbox to center the icon inside */
  align-items: center;                  /* Centers the icon vertically */
  justify-content: center;              /* Centers the icon horizontally */
  color: white;                         /* Sets the icon color to white */
  font-size: var(--font-size-110);      /* Sets a specific font size for the icon */
}

/* Styles for the main title text of the selection button */
.selection-button-title {
  font-family: var(--font-heading);     /* Uses the heading font for the title */
  color: var(--color-text-primary);     /* Sets the title text color */
  font-size: var(--font-size-125);      /* Sets the font size for the title */
  margin: 0;                            /* Removes default margins from the title */
}

/* Styles for the subtitle text below the title */
.selection-button-subtitle {
  color: var(--color-text-secondary);   /* Sets a secondary color for the subtitle text */
  margin: 0.25rem 0 0 0;                /* Adds a small top margin to separate it from the title */
}

/* The chevron icon on the far right of the button */
.selection-button-chevron {
  color: var(--color-border-dark);      /* Sets a dark color for the chevron icon */
  margin-left: auto;                    /* Pushes the chevron to the rightmost side of the flex container */
}

/* --- Color Modifiers --- */

/* Modifier for the "All Sodas" selection button */
.selection-button--all-sodas {
  background: linear-gradient(to bottom, var(--color-soda-lime-tint), var(--color-soda-lime-tint-subtle)); /* Applies a subtle lime linear gradient background */
}
/* Styles for the icon wrapper within the sodas modifier */
.selection-button--all-sodas .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-lime), var(--color-soda-lime-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "Research Library" selection button */
.selection-button--research-library {
  background: linear-gradient(to bottom, var(--color-soda-root-beer-tint), var(--color-soda-root-beer-tint-subtle)); /* Applies a subtle grape linear gradient background */
}
/* Styles for the icon wrapper within the library modifier */
.selection-button--research-library .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-root-beer), var(--color-soda-root-beer-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "All Tastings" selection button */
.selection-button--all-tastings {
  background: linear-gradient(to bottom, var(--color-soda-grape-tint), var(--color-soda-grape-tint-subtle)); /* Applies a subtle grape linear gradient background */
}
/* Styles for the icon wrapper within the tastings modifier */
.selection-button--all-tastings .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-grape), var(--color-soda-grape-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "Reference" selection button */
.selection-button--reference-data {
  background: linear-gradient(to bottom, var(--color-soda-blue-raspberry-tint), var(--color-soda-blue-raspberry-tint-subtle)); /* Applies a subtle linear gradient background */
}
/* Styles for the icon wrapper within the reference modifier */
.selection-button--reference-data .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-blue-raspberry), var(--color-soda-blue-raspberry-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "Tasting System" selection button */
.selection-button--tasting-system {
  background: linear-gradient(to bottom, var(--color-soda-orange-tint), var(--color-soda-orange-tint-subtle)); /* Applies a subtle grape linear gradient background */
}
/* Styles for the icon wrapper within the tasting system modifier */
.selection-button--tasting-system .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-orange), var(--color-soda-orange-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "Complete Archive" selection button */
.selection-button--complete-archive {
  background: linear-gradient(to bottom, var(--color-soda-cherry-tint), var(--color-soda-cherry-tint-subtle)); /* Applies a subtle grape linear gradient background */
}
/* Styles for the icon wrapper within the archive modifier */
.selection-button--complete-archive .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-cherry), var(--color-soda-cherry-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* Modifier for the "Import" selection button */
.selection-button-import {
  background: linear-gradient(to bottom, var(--color-soda-orange-tint), var(--color-soda-orange-tint-subtle)); /* Applies a subtle orange linear gradient background */
}
/* Styles for the icon wrapper within the import modifier */
.selection-button-import .selection-button-icon-wrapper {
  background: linear-gradient(to right, var(--color-soda-orange), var(--color-soda-orange-light)); /* Applies a color-coordinated linear gradient to the icon wrapper */
}

/* ==========================================
   COMPONENT: CARD LIST
   ========================================== */

.card-list {                                /* Container for lists of data */
  display: grid;                            /* Grid layout */
  grid-template-columns: repeat(2, 1fr);    /* 2 columns, equal width */
  gap: var(--space-lg);                     /* Large gap between grid items */
}

.card-list--3 {                             /* Override for 3 column grid */
  grid-template-columns: repeat(3, 1fr);    /* 3 columns, equal width */
}

.card-list:last-child {                     /* Remove margin from last item in list */ 
  margin: 0;                                /* No margin */
}

.card-list-item {                           /* Container for list items */
  margin-bottom: var(--space-md);           /* Space between list items */
}

.card-list-item dt {                        /* List item title */
  font-family: var(--font-accent);          /* Title font - use the fancy heading script */
  font-size: var(--font-size-150);          /* Big titles */
  font-weight: var(--font-weight-semibold); /* Slight bolding */
  color: var(--color-text-primary);         /* Primary text color */
  margin-bottom: var(--space-2xs);          /* Space between title and description */
}

.card--details .card-list-item dt {         /* Override for details card */
    color: var(--color-primary);            /* Use the primary (brand blue) color */
}

.card-list-item dd {                        /* List item description */
  font-size: var(--font-size-110);          /* Slightly larger than normal text size */
  font-weight: var(--font-weight-medium);   /* Very lightly bold */
  margin: 0;                                /* No margin */                 
  color: var(--color-text-primary);         /* Primary text color */
}

.card-list-item dd .muted {                   /* Muted version of a list item description */
  color: var(--color-text-secondary);        /* Muted color for less emphasis */
}


/* ==========================================
   COMPONENT: FORMAT LIST
   ========================================== */

/* The main container for a list of format options */
.format-list {
  display: flex;                                /* Enables flexbox layout for arranging list items */
  flex-direction: column;                       /* Stacks the list items vertically */
  gap: var(--space-xs);                         /* Adds a small gap between each list item */
}

/* Defines the style for an individual item in the format list */
.format-list-item {
  padding: var(--space-xs);                     /* Sets consistent padding within the list item */
  background-color: var(--color-white-overlay-strong); /* Sets a slightly transparent white background */
  border-radius: var(--card-radius-sm);         /* Applies a small border radius for rounded corners */
  margin-bottom: var(--space-xs);               /* Adds a small margin below each item for extra spacing */
  border-left: 3px solid var(--color-primary);  /* Creates a colored vertical bar on the left side */
}

/* The title of a format list item */
.format-list-item-title {
  font-family: var(--font-accent);              /* Sets the font to the accent font */
  font-size: var(--font-size-125);              /* Sets a larger font size for the title */
  font-weight: var(--font-weight-semibold);     /* Applies a semi-bold font weight */
  color: var(--color-text-primary);             /* Sets the primary text color for the title */
}

/* A container for notes or additional information in a format list item */
.format-list-item-notes {
  font-size: var(--font-size-90);               /* Applies a smaller font size for notes */
  color: var(--color-text-secondary);           /* Sets a secondary color for the notes text */
  display: flex;                                /* Enables flexbox to align note content */
  align-items: center;                          /* Vertically centers any icons or elements within the notes */
  gap: var(--space-xs);                         /* Adds a small gap between elements in the notes section */
  margin-top: var(--space-2xs);                 /* Adds a very small margin to separate notes from the title */
}

/* Style for the message displayed when the format list is empty */
.format-list-empty {
  color: var(--color-text-secondary);           /* Sets a secondary color for the empty message */
  font-style: italic;                           /* Applies an italic style to the empty message */
  margin-bottom: var(--space-md);               /* Adds a bottom margin to space out the message */
}

/* ==========================================
   COMPONENT: RESEARCH PREVIEW
   ========================================== */

/* Modifier for a list item that is part of a research preview section */
.list-item--research-preview {
  background-color: var(--color-white-overlay-medium);  /* Sets a semi-transparent white background, which is a lighter version of the standard card background */
  align-items: start;                                   /* Aligns the content to the top of the flex container */
  gap: var(--space-md);                                 /* Creates a consistent space between elements inside the list item */
  border-left: 3px solid var(--color-soda-root-beer-light); /* Adds a light-colored vertical bar on the left for visual distinction */
}

/* A flexible container for the title and metadata of the preview item */
.research-preview-info {
  flex-grow: 1;                                         /* Allows this section to fill all available space within the list item */
}

/* The title of the research preview item */
.research-preview-title {
  font-size: var(--font-size-110);                      /* Sets a slightly larger font size for the title */
  font-weight: var(--font-weight-semibold);             /* Applies a semi-bold font weight for emphasis */
  color: var(--color-text-primary);                     /* Sets the color to the primary text color */
  margin: 0 0 var(--space-2xs) 0;                       /* Removes default margins and adds a small space below the title */
}

/* The metadata section of the research preview item (e.g., last updated date) */
.research-preview-meta {
  font-size: var(--font-size-90);                       /* Applies a smaller font size for the metadata */
  color: var(--color-text-secondary);                   /* Sets a secondary color for the metadata text */
  margin: 0;                                            /* Removes default margins */
}

/* ==========================================
   COMPONENT: NOTES LIST
   ========================================== */
.notes-list {
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
}

.notes-list-item {
  margin-bottom: var(--space-md);     /* Space between notes */
}

/* Remove margin from the very last item in the list */
.notes-list-item:last-child {
  margin-bottom: 0;
}

.notes-list-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-125);
  color: var(--color-primary);
}

.notes-list-content {
  margin: 0;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* ==========================================
   COMPONENT: REFERENCE LIST
   ========================================== */
.reference-list {
  margin: 0;
  padding-left: var(--space-lg); /* 1.5rem */
  list-style-type: disc;
}

.reference-list-item {
  margin-bottom: var(--space-xs); /* 0.5rem */
  padding-left: var(--space-2xs); /* Small space between bullet and text */
}

.reference-list-link {
  color: var(--color-link);
  text-decoration: underline; /* Links in a list are often underlined for clarity */
}

.reference-list-link:hover {
  color: var(--color-link-hover);
}

/* ==============================================
   COMPONENT: TASTING SESSIONS
   ============================================== */

/* --- Main Session Wrapper --- */

/* The main container for a single tasting session's details */
.tasting-session {
  background-color: var(--color-white-overlay-medium);  /* Semi-transparent white background for a layered effect */
  border-left: 4px solid var(--color-primary);          /* A prominent left border using the primary brand color */
  border-radius: var(--input-radius);                   /* Applies rounded corners consistent with input fields */
  padding: var(--space-lg);                             /* Provides generous internal padding */
}

/* Removes the bottom margin from the last tasting session in a sequence */
.tasting-session:last-child {
  margin-bottom: 0;                                     /* Prevents extra space at the bottom of a list of sessions */
}

/* --- Session Header --- */

/* The header section of a tasting session, using flexbox for horizontal layout */
.tasting-session-header {
  display: flex;                                        /* Enables flexible box layout */
  align-items: center;                                  /* Vertically centers items within the header */
  gap: var(--space-md);                                 /* Provides consistent spacing between header elements */
  padding-bottom: var(--space-md);                      /* Adds padding below the header content */
  margin-bottom: var(--space-md);                       /* Adds margin below the header, separating it from content */
  border-bottom: 1px solid var(--color-border-light);   /* Adds a thin light border at the bottom */
}

/* This targets the <h4> or any other title element you use */
.tasting-session-header h4 {
  font-family: var(--font-heading);                     /* Uses the distinct, stylized heading font */
  font-size: var(--font-size-150);                      /* Sets a medium-large font size for the title */
  font-weight: var(--font-weight-medium);               /* A balanced weight that's not overly bold */
  margin: 0;                                            /* Removes default heading margins */
}

.tasting-session-header h5 {
  font-family: var(--font-heading);                     /* Uses the distinct, stylized heading font */
  font-size: var(--font-size-150);                      /* Sets a medium-large font size for the title */
  font-weight: var(--font-weight-regular);              /* A lighter weight than h4 uses */
  color: var(--color-text-secondary);                   /* A softer color than h4 uses */
  margin: 0;                                            /* Removes default heading margins */
}

/* Default state (for subscribers): pushes the pills to the far right */
.tasting-session-pills {
  margin-left: auto;                                    /* Pushes the pills to the far right when no action buttons are present */
}

.tasting-session-pills .pill {
  margin-right: var(--space-2xs);                       /* Adds a small space between pills */
}

/* :has() Selector - IF the header contains an .action-button-group element
   (i.e., we are in admin view), THEN also add a right margin, which centers the pills.
*/
.tasting-session-header:has(.action-button-group) .tasting-session-pills {
  margin-right: auto;                                 /* Adds a right margin to center the pills when action buttons are present */
}

/* --- Session Content --- */

/* Main notes or description content within a tasting session */
.tasting-session-notes {
  font-size: var(--font-size-125);                    /* Sets a slightly larger font size for notes */
  margin-bottom: var(--space-lg);                     /* Adds a significant space below the notes */
}

/* Ensures strong-tagged text within notes appears as a block with spacing */
.tasting-session-notes strong {
  display: block;                                     /* Makes the strong text a block element */
  margin-bottom: var(--space-2xs);                    /* Adds a very small space below the strong text */
}

/* Styling for titles or main labels within tasting session content */
.tasting-session-titles {
  font-size: var(--font-size-125);                    /* Sets a medium-large font size */
  font-weight: 700;                                   /* Makes the title bold */
  display: block;                                     /* Ensures the title appears on its own line */
  margin-bottom: var(--space-md);                     /* Adds consistent spacing below the title */
}

/* Styling for icons associated with tasting session titles */
.tasting-session-titles i {
  color: var(--icon-color);                           /* Uses a dynamic color variable for the icon */
}

/* --- Tasting Session Cards (for multiple sessions displayed in a grid) --- */

/* Grid container for displaying multiple tasting session summary cards */
.tasting-sessions-grid {
  display: grid;                                      /* Enables CSS Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid with minimum 300px column width */
  gap: var(--space-lg);                               /* Sets a large gap between grid items */
  margin-bottom: var(--space-lg);                     /* Adds consistent spacing below the entire grid */
}

/* A single card summarizing a tasting session within the grid */
.tasting-session-card {
  background: var(--color-white-overlay-medium);      /* Semi-transparent white background */
  border: 2px solid transparent;                      /* Starts with a transparent border to prevent layout shift on hover */
  border-radius: var(--card-radius);                  /* Applies standard rounded corners */
  padding: var(--space-md);                           /* Provides internal padding */
  cursor: pointer;                                    /* Indicates the card is clickable */
  transition: all var(--transition-fast);             /* Smooth transition for hover and active states */
  border-left: 4px solid var(--color-soda-root-beer); /* A prominent left border with a root beer color */
}

/* Hover state for a tasting session summary card */
.tasting-session-card:hover {
  transform: translateY(-2px);                        /* Lifts the card slightly on hover */
  border-color: var(--color-primary);                 /* Changes the border color to the primary brand color */
  box-shadow: var(--card-shadow);                     /* Adds a subtle shadow for elevation */
}

/* Active state for a tasting session card, indicating it's selected or focused */
.tasting-session-card.session-row--active {
  border-color: var(--color-primary);                 /* Sets the border color to primary for active state */
  background: var(--color-primary-tint-subtle);       /* Applies a subtle primary-colored tint to the background */
  box-shadow: var(--card-shadow);                     /* Adds a subtle shadow for the active state */
}

/* Header section of a tasting session summary card */
.tasting-session-card-header {
  display: flex;                                      /* Enables flexbox for horizontal layout */
  justify-content: space-between;                     /* Pushes items to opposite ends of the header */
  align-items: center;                                /* Vertically centers items */
  margin-bottom: var(--space-sm);                     /* Adds a small space below the header */
}

/* Styling for the date text in the tasting session summary card header */
.tasting-session-card-date {
  font-weight: var(--font-weight-semibold);           /* Sets a semibold font weight */
  color: var(--color-text-primary);                   /* Uses the primary text color */
  font-size: var(--font-size-110);                    /* Sets a slightly larger font size */
}

/* Container for small pills (e.g., tags, categories) in the tasting session summary card */
.tasting-session-card-pills {
  display: flex;                                      /* Enables flexbox for horizontal layout of pills */
  gap: var(--space-sm);                               /* Adds a small gap between individual pills */
  flex-wrap: wrap;                                    /* Allows pills to wrap to the next line on smaller screens */
}

/* Preview text for a tasting session summary card, often an excerpt or short description */
.tasting-session-card-preview {
  color: var(--color-text-secondary);                 /* Uses a muted text color for less emphasis */
  font-size: var(--font-size-90);                     /* Sets a smaller font size */
  font-style: italic;                                 /* Italicizes the preview text */
}

/* --- Mobile Responsiveness --- */

/* Media query for screens up to 768px wide (e.g., tablets in portrait, mobile devices) */
@media (max-width: 768px) {
  /* Changes the tasting sessions grid to a single column on mobile */
  .tasting-sessions-grid {
    grid-template-columns: 1fr;                     /* Stacks cards vertically in a single column */
  }

  /* Adjusts the header of the tasting session card for mobile */
  .tasting-session-card-header {
    flex-direction: column;                         /* Stacks header items vertically */
    align-items: flex-start;                        /* Aligns stacked items to the left */
    gap: var(--space-sm);                           /* Adds a small gap between stacked items */
  }
}

/* ==============================================
   COMPONENT: GROUPED TASTING RATINGS WITH CHARTS
   ============================================== */

/* --- Main Container --- */
.ratings-container {
  /* Define default or fallback custom properties for dynamic colors */
  /* These will be used if no specific override is set on the card itself or a modifier */

  --icon-color: var(--color-text-primary);    /* Default color of the header icon is the primary text color */
  --container-color: var(--color-bg-muted);   /* Default color of containers is a muted white */
  --border-color: var(--color-bg-muted-dark); /* Default border of containers is a muted grey */

  margin-bottom: var(--space-xl);             /* Large margin between containers */
  background-color: var(--container-color);   /* Background color of the container */
  padding: var(--space-lg);                   /* Padding around the container */
  border-radius: var(--card-radius);          /* Rounded corners for the container */
}

.ratings-section-header {
  margin-bottom: var(--space-lg); /* Adds a large margin below the header of each ratings section */
}

/* --- Layout: Chart + Cards Side by Side --- */
.ratings-section-content {
  display: grid;                               /* Uses CSS Grid for a flexible and responsive layout */
  /* Defines two columns:
     1. A chart column that's responsive, staying between 200px and 300px, but also adapting to 25% of viewport width.
     2. A flexible column (1fr) for the rating cards, taking up the remaining space */
  grid-template-columns: clamp(200px, 25vw, 300px) 1fr;
  gap: var(--space-xl);                        /* Sets a large gap between the grid columns (chart and cards) */
  align-items: start;                          /* Aligns grid items to the start of their cross-axis (top) */
}

/* Modifier for a cards-only layout (e.g., for impressions where no chart is shown) */
.ratings-section-content--cards-only {
  display: block;                              /* Overrides the grid display, reverting to normal block flow */
}

/* --- Chart Container --- */
.ratings-chart-container {
  position: relative;                          /* Establishes a positioning context for children if needed */
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: center;                          /* Ensures it centers within the grid column */
  justify-self: center;                        /* Ensures it centers within the grid column */

  border-radius: var(--card-radius);           /* Applies standard rounded corners to the chart container */
  padding: var(--space-md);                    /* Inner padding for the chart container */
  display: flex;                               /* Uses flexbox to easily center content within the container */
  align-items: center;                         /* Vertically centers items within the flex container */
  justify-content: center;                     /* Horizontally centers items within the flex container */
  box-shadow: var(--card-shadow);              /* Adds a shadow, making the chart container appear floating */
  background: var(--container-color);          /* Sets a subtle background color using a custom property */
  border: 1px solid var(--border-color);       /* Adds a slightly less subtle border using a custom property */
}

/* Chart canvas */
.ratings-chart {
  max-width: 100%;                             /* Ensures the chart image/canvas does not overflow its container horizontally */
  max-height: 100%;                            /* Ensures the chart image/canvas does not overflow its container vertically */
}

/* Styles for the chart fallback message when data is incomplete or unavailable */
.ratings-chart-fallback {
  display: flex;                               /* Uses flexbox for internal layout of fallback content */
  flex-direction: column;                      /* Stacks fallback elements vertically */
  align-items: center;                         /* Centers items horizontally */
  justify-content: center;                     /* Centers items vertically */
  text-align: center;                          /* Centers text within the fallback container */
  color: var(--color-text-secondary);          /* Sets a muted text color for the fallback message */
  height: 100%;                                /* Ensures the fallback content fills the entire container height */
}

.ratings-chart-fallback-icon {
  font-size: var(--font-size-200);             /* Sets a large font size for the fallback icon */
  margin-bottom: var(--space-sm);              /* Adds a small margin below the icon */
  opacity: 0.5;                                /* Makes the icon slightly transparent */
}

.ratings-chart-fallback-text strong {
  display: block;                              /* Makes the strong text a block element to take full width */
  margin-bottom: var(--space-2xs);             /* Adds a very small margin below the strong text */
  font-size: var(--font-size-100);             /* Sets the font size for the main fallback text */
}

.ratings-chart-fallback-text p {
  margin: 0;                                   /* Removes default margins from paragraph elements */
  font-size: var(--font-size-90);              /* Sets a slightly smaller font size for helper text */
}

/* --- Rating Cards Grid --- */
.ratings-cards-grid {
  display: grid;                               /* Uses CSS Grid for arranging the individual rating cards */
  /* Creates a responsive grid of cards:
     - `auto-fit`: automatically fits as many columns as possible.
     - `minmax(280px, 1fr)`: each column will be at least 280px wide, and can grow to fill available space */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);                        /* Sets a medium gap between the rating cards in the grid */
}

/* Styling for a rating card when it's highlighted (e.g., on chart hover) */
.rating-item--highlighted {
  transform: translateY(-2px);                 /* Slightly lifts the card up for a visual effect */
  box-shadow: var(--card-shadow-lg);           /* Applies a larger shadow when highlighted */
  background: var(--color-white-overlay-strong) !important; /* Forces a strong white overlay background */
  transition: all var(--transition-fast);      /* Smooth transition for all properties when highlighting */
}

/* --- Mobile Responsive --- */
/* Media query for screens up to 1024px wide (e.g., tablets in landscape, smaller desktops) */
@media (max-width: 1024px) {
  .ratings-section-content {
    grid-template-columns: 1fr;                /* Changes the grid to a single column, stacking the chart above the cards */
    gap: var(--space-lg);                      /* Adjusts the gap between stacked elements */
  }

  .ratings-chart-container {
    justify-self: center;                      /* Centers the chart horizontally within its grid cell */
    margin-bottom: var(--space-md);            /* Adds a margin below the chart when stacked */
  }
}

/* Media query for screens up to 768px wide (e.g., tablets in portrait, mobile devices) */
@media (max-width: 768px) {
  .ratings-cards-grid {
    grid-template-columns: 1fr;                /* Changes the card grid to a single column, stacking cards vertically */
  }

  .ratings-chart-container {
    width: 180px;                              /* Reduces the fixed width of the chart container */
    height: 180px;                             /* Reduces the fixed height of the chart container */
  }

  /* Note: These next two rules (tasting-session-header, tasting-session-card-header) */
  /* seem to be outside the direct scope of .ratings-container but are included as provided */
  .tasting-session-header {
    flex-direction: column;                    /* Stacks items vertically within the header */
    align-items: flex-start;                   /* Aligns items to the start (left) */
    gap: var(--space-sm);                      /* Adds a small gap between stacked items */
  }

  .tasting-session-card-header {
    flex-direction: column;                    /* Stacks items vertically within the card header */
    align-items: flex-start;                   /* Aligns items to the start (left) */
    gap: var(--space-sm);                      /* Adds a small gap between stacked items */
  }
}

/* ==========================================
   ENHANCED RATING ITEM STYLES FOR GROUPED VIEW
   ========================================== */

/* Make rating items in view slightly more compact than form items */
.ratings-cards-grid .rating-item {
  padding: var(--space-md);
  border-radius: var(--card-radius-sm);
  border-left: 3px solid var(--color-primary);
  margin-bottom: 0; /* Remove margin since grid handles spacing */
  transition: all var(--transition-fast);
}

.ratings-cards-grid .rating-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ensure rating icons are properly sized in view */
.ratings-cards-grid .rating-icon {
  width: 20px;
  height: 20px;
}

.ratings-cards-grid .rating-display {
  min-width: 120px; /* Ensure consistent width */
}

.ratings-cards-grid .rating-scale-text {
  font-size: var(--font-size-90);
  font-style: italic;
  min-height: 1.2em;
}

/* ==========================================
   COMPONENT: RATINGS
   ========================================== */

.ratings-container {
  margin-top: var(--space-lg);
}

.ratings-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Increased from default */
}

/* The card for a single rating criterion */
.rating-item {
  display: flex;
  flex-wrap: wrap; /* Allows notes to wrap below */
  justify-content: space-between;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  background-color: var(--color-white-overlay-medium);
  border-radius: var(--input-radius);
  border-left: 3px solid var(--color-primary);
  min-width: 300px; 
}

.rating-criterion {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-100);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
  flex-grow: 1; /* Allows the criterion name to take available space */
}

.rating-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 140px; /* Ensure space for 5 caps + gaps */
  flex-shrink: 0; /* Prevent shrinking */
}

.rating-icons {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.rating-icon {
  width: 22px;
  height: 22px;
  transition: transform var(--transition-fast);
  cursor: pointer;
}
.rating-icon.filled {
  opacity: 1;
}
.rating-icon.empty {
  opacity: 0.25;
}
.rating-icon:hover {
  transform: scale(1.2);
}

.rating-scale-text {
  font-size: var(--font-size-90);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 0;
  font-style: italic;
  min-height: 1.2em; /* Prevent layout shift */
}

/* Notes for a specific rating */
.rating-notes {
  flex-basis: 100%; /* Ensures notes take the full width and wrap to a new line */
  width: 100%;
  font-size: var(--font-size-90);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.4;
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

@media (max-width: 768px) {
  .ratings-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
  
  .rating-item {
    min-width: auto;
  }
}

/* ==========================================
   COMPONENT: MANAGE FORMATS PAGE
   ========================================== */

.card-body--flush {
  padding: 0;
}

.card-section--nav-back {
  padding: var(--space-lg) 0 0 var(--space-xl);
  margin-bottom: var(--space-md);
}

.card-section--grid {
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
}

/* Remove bottom padding from all but the last padded section */
.card-section--padded:not(:last-child) {
  padding-bottom: 0;
}
.card-section--flush {
  padding: 0;
}

.format-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-md);
  align-items: end;
}
.format-form .form-group {
  margin: 0;
}
.format-form-actions {
  height: 100%;
  display: flex;
  align-items: end;
}
@media (max-width: 768px) {
  .format-form {
    grid-template-columns: 1fr;
  }
  .format-form-actions {
    grid-row: 3;
    justify-content: flex-end;
  }
}

.alert {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--card-radius-sm);
  border-left-width: 3px;
  border-left-style: solid;
}
.alert--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-primary);
  color: var(--color-info-text);
}
.alert--info i {
  color: var(--color-primary);
}

.callout {
  padding: var(--space-md);
  background-color: var(--color-white-overlay-strong);
  border-radius: var(--card-radius-sm);
  border-left: 3px solid var(--border-color);
}
.callout-heading {
  margin: 0 0 0.5rem 0;
  color: var(--heading-color, var(--color-text-primary));
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-semibold);
}
.callout-subtext {
  font-size: var(--font-size-90);
  margin: 0;
  color: var(--subtext-color, var(--color-text-secondary));
}
.callout--success {
  --border-color: var(--color-success);
  --heading-color: var(--color-success);
  background-color: var(--color-success-bg);
}

/* ==========================================
   COMPONENT: PILLS
   ========================================== */
.pill {
  color: var(--color, white);
  background-color: var(--bgcolor, black);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: var(--font-size-90);
  font-weight: var(--font-weight-semibold);
  display: inline-block;
  text-align: center;
  text-transform: capitalize;
}

.pill--no-caps {
  text-transform: none;
}

.pill--small {
  padding: 0rem 0.5rem;
  font-size: var(--font-size-80);
}

.pill--thin {
  padding: 0rem 0.50rem;
  font-size: var(--font-size-75);
}

.pill--selector {
  padding: 0.5rem 1rem;               /* Larger padding for easier clicking */
  font-size: var(--font-size-125);    /* Slightly bigger text */
  min-width: 80px;                    /* Consistent width */
  cursor: pointer;                    /* Show it's interactive */
}

/* Tier Pills */
.pill--tier-s { background-color: var(--color-tier-s); }
.pill--tier-a { background-color: var(--color-tier-a); }
.pill--tier-b { background-color: var(--color-tier-b); }
.pill--tier-c { background-color: var(--color-tier-c); }
.pill--tier-d { background-color: var(--color-tier-d); }
.pill--tier-f { background-color: var(--color-tier-f); }
.pill--tier-none { 
  background-color: color-mix( in srgb, var(--color-tier-none) 20%, transparent);
  color: var(--color-text-secondary);
  border: 2px dashed var(--color-border-medium);
}

/* Format Pills */
.pill--format-glass_bottle { background-color: #27ae60; }
.pill--format-aluminum_can { background-color: #909497; }
.pill--format-plastic_bottle { background-color: #f39c12; }
.pill--format-fountain { background-color: #ff293a; }
.pill--format-other { background-color: #6e2c00; }
.pill--primary { background-color: var(--color-primary); }
.pill--default { background-color: var(--color-warning); }
.pill--custom-color { background-color: var(--bgcolor); }
.pill--templates { background-color: var(--color-text-primary); }
.pill--max-templates { background-color: var(--color-brand-tangerine); color: var(--color-text-primary); }
.pill--enabled { background-color: var(--color-success); }
.pill--disabled { background-color: var(--color-text-muted); }

.pill--ratings {
  color: white;

  background-image: linear-gradient(
      135deg, 
      red,
      orange,
      green,
      blue,
      indigo,
      violet
    );
}

.pill--import-modal {
  border-radius: var(--card-radius-xs);
  font-size: var(--font-size-125);
}
.pill--reference-data {
  background-color: var(--color-soda-orange);
}
.pill--sodas {
  background-color: var(--color-soda-cherry);
}
.pill--research-reports {
  background-color: var(--color-soda-grape);
}
.pill--tasting-system {
  background-color: var(--color-soda-root-beer);
}

.pill--other {
  background-color: var(--color-text-primary);   /* Nice deep grey */
}


/* ==========================================
   COMPONENT: RESEARCH EDITOR 
   ========================================== */

/* --- Section Card --- */
.card--editor-section {
  /* This is the main container for a section like "Introduction" */
  /* It already gets styles from the base .card class */
  margin-bottom: var(--space-xl);
}

.card-header--editor-section {
  /* This is the blue header for the section card */
  background: linear-gradient( to right, var(--color-soda-blue-raspberry), var(--color-soda-blue-raspberry-light) );
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.card-title--editor-section {
  flex-grow: 1;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--input-radius);
  font-size: var(--font-size-110);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: var(--space-xs) var(--space-sm);
}
.card-title--editor-section:focus {
  outline: none;
  border-color: var(--color-border-dark);
  box-shadow: 0 0 0 2px var(--color-soda-orange-tint);
}

/* --- Paragraph Card (Nested) --- */
.card-body--editor-section {
  padding: var(--space-md);
  background: linear-gradient( to top, var(--color-soda-blue-raspberry-tint-medium), var(--color-soda-blue-raspberry-tint) );
}

.card--editor-paragraph {
  /* This is the nested card for a single paragraph */
  border-radius: var(--card-radius-sm);
  margin-bottom: var(--space-md);
  box-shadow: none; /* Override default card shadow for a flatter look */
}
.card--editor-paragraph:last-child {
  margin-bottom: 0;
}

.card-header--editor-paragraph {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient( to right, var(--color-soda-lime), var(--color-soda-lime-light) );
  border-bottom: 1px solid var(--color-border-light);
}

.card-title--editor-paragraph {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-125);
  color: var(white);
  margin: 0;
}

.card-body--editor-paragraph {
    background: linear-gradient( to bottom, var(--color-soda-lime-tint-subtle), var(--color-soda-lime-tint-medium) );
}

/* ==========================================
   COMPONENT: RESEARCH EDITOR MODAL & HELPERS
   ========================================== */

/* A simple styled divider with text */
.text-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-muted);
  margin: var(--space-md) 0;
}
.text-divider::before,
.text-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--color-border-light);
}
.text-divider:not(:empty)::before {
  margin-right: .5em;
}
.text-divider:not(:empty)::after {
  margin-left: .5em;
}

/* Styled <details> and <pre> tags */
.details-box {
  margin-top: var(--space-md);
}
.details-box-summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}
.code-block {
  background-color: var(--color-bg-muted);
  padding: var(--space-md);
  border-radius: var(--card-radius-sm);
  margin-top: var(--space-xs);
  font-size: var(--font-size-90);
  overflow-x: auto;
  border: 1px solid var(--color-border-light);
}

/* ==========================================
   COMPONENT: IMAGE DISPLAY & MANAGEMENT
   ========================================== */

/* --- Image Grid Layout --- */

/* The grid container for all image cards on the manage, edit, and view pages */
.image-management-grid {
  display: grid;                                /* Enables CSS Grid layout */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Creates a responsive grid of columns */
  gap: 1.5rem;                                  /* Sets the space between grid items */
}


/* --- Image Card Component (for existing images) --- */

/* The main container for a card that displays an existing image */
.card--image-management {
  background: white;                          /* Sets a solid white background */
  display: flex;                                /* Enables flexbox layout for children */
  flex-direction: column;                       /* Stacks child elements vertically */
}

/* Modifier for display-only cards (on edit/view pages) */
.card--image-management.card--display-only .image-card-details {
  text-align: center;                           /* Centers the text inside the details section */
}
.card--image-management.card--display-only .image-preview-filename {
  font-size: var(--font-size-90);                            /* Slightly larger font for filenames in display mode */
}

/* Wrapper for the main image, allowing badges to be positioned over it */
.image-card-image-container {
  position: relative;                           /* Establishes a positioning context for children */
  background: rgba(59, 130, 246, 0.05);       /* A very subtle blue background tint */
}

/* The main image displayed in an existing image card */
.image-card-image {
  display: block;                               /* Removes extra space below the image */
  width: 100%;                                  /* Image takes the full width of its container */
  height: var(--card-image-height-lg);          /* Sets a fixed height for uniform card sizes */
  object-fit: cover;                            /* Ensures the image covers the area without distortion */
  cursor: pointer;                              /* Indicates the image is clickable (for lightbox) */
  transition: transform 0.2s ease;              /* Smooth transition for the hover effect */
}
.image-card-image:hover {
  transform: scale(1.02);                       /* Slightly enlarges the image on hover */
}

/* The container for all content below the image */
.image-card-details {
  padding: var(--space-md);                     /* Standard padding inside the details area */
  background: white;                          /* Ensures a solid white background */
  flex-grow: 1;                                 /* Allows this section to grow and fill available space */
  display: flex;                                /* Enables flexbox for its children */
  flex-direction: column;                       /* Stacks children vertically */
}

/* --- Description text within an image card --- */
.image-card-image-description {
  font-size: var(--font-size-100);          /* Readable font size */
  font-style: italic;                       /* Italicizes the description text */
  color: var(--color-text-secondary);       /* Muted color to differentiate from the filename */
  margin: 0.25rem 0;                        /* Adds a little vertical space */
  white-space: nowrap;                      /* Prevents the text from wrapping */
  overflow: hidden;                         /* Hides any text that overflows the container */
  text-overflow: ellipsis;                  /* Adds "..." to overflowing text */
}

/* The <form> element within the management card */
.image-card-form {
  margin-top: auto;                             /* Pushes the form to the bottom of the image-card-details container */
  padding-top: 1rem;                            /* Adds space above the form elements */
}

/* A text label for a form field within the management card */
.image-card-form-label {
  font-size: var(--font-size-90);               /* Sets the font size for the label */
  font-weight: 500;                             /* Medium font weight */
  display: block;                               /* Ensures the label is on its own line */
  margin-bottom: 0.25rem;                       /* Small space below the label */
}

/* The label for a checkbox, allowing the whole area to be clickable */
.image-card-form-checkbox-label {
  display: flex;                                /* Aligns the checkbox and text horizontally */
  align-items: center;                          /* Vertically centers the checkbox and text */
  font-size: var(--font-size-90);               /* Sets the font size */
  cursor: pointer;                              /* Indicates the label is clickable */
  gap: 0.5rem;                                  /* Space between the checkbox and the text */
}

/* The container for action buttons (e.g., Update, Delete) */
.image-card-form-actions {
  display: flex;                                /* Lays out buttons in a row */
  gap: 0.5rem;                                  /* Space between the buttons */
}


/* --- Upload Preview Card Component (for new uploads) --- */

/* Base class for a dynamically generated image preview card */
.preview-image-card {
  border: 1px solid var(--color-border-light);  /* Standard light border */
  border-radius: var(--card-radius-md);         /* Consistent medium-sized corner radius */
  overflow: hidden;                             /* Hides anything that spills out of the rounded corners */
  background: white;                          /* Solid white background */
  box-shadow: 0 2px 4px var(--color-box-shadow);/* Subtle shadow to lift the card */
  transition: all 0.2s ease;                    /* Smooth transition for all properties */
  position: relative;                           /* Establishes positioning context */
  display: flex;                                /* Use flexbox for layout */
  flex-direction: column;                       /* Stack children vertically */
}
.preview-image-card:hover {
  transform: translateY(-2px);                  /* Lifts the card up slightly on hover */
  box-shadow: 0 4px 12px var(--color-box-shadow);/* Increases shadow on hover for more depth */
}

/* The image container within the preview card */
.preview-image-card-image-container {
  position: relative;                           /* Positioning context for the remove button */
}

/* The image itself in the preview card */
.preview-image-card-image {
  display: block;                               /* Removes extra space below image */
  width: 100%;                                  /* Fills the container's width */
  height: var(--card-image-height-md);          /* Fixed height for smaller preview cards */
  object-fit: cover;                            /* Covers the area without distortion */
}

/* The 'X' button to remove an image from the upload queue */
.preview-image-card-remove-btn {
  position: absolute;                           /* Positions over the top-left of the image */
  top: 6px;                                     /* Space from the top */
  left: 6px;                                    /* Space from the left */
  background: rgba(220, 38, 38, 0.9);         /* Semi-transparent red background */
  border: none;                                 /* No border */
  color: white;                               /* White 'X' text */
  border-radius: 50%;                           /* Makes the button a circle */
  width: var(--icon-size-md);                   /* Standard size for an icon button*/
  height: var(--icon-size-md);                  /* Maintains a square aspect ratio */
  font-size: var(--font-size-75);               /* Size of the 'X' */
  cursor: pointer;                              /* Indicates it's clickable */
  display: flex;                                /* Enables flexbox for centering */
  align-items: center;                          /* Vertically centers the 'X' */
  justify-content: center;                      /* Horizontally centers the 'X' */
  transition: all 0.2s ease;                    /* Smooth transition for hover effects */
  z-index: 1;                                   /* Ensures the button is above the image */
}
.preview-image-card-remove-btn:hover {
  background: var(--color-error);              /* Solid red on hover */
  transform: scale(1.1);                        /* Slightly enlarges on hover */
}

/* Container for all metadata and form fields in the preview card */
.preview-image-card-meta {
  padding: var(--space-md);                     /* Standard padding */
  flex-grow: 1;                                 /* Allows this area to fill remaining vertical space */
  display: flex;                                /* Enables flexbox */
  flex-direction: column;                       /* Stacks metadata fields vertically */
  gap: 0.75rem;                                 /* Space between each metadata field */
}

/* The filename text in the preview card */
.preview-image-card-filename {
  font-size: var(--font-size-75);               /* Smaller font size for metadata */
  font-weight: 500;                             /* Medium font weight */
  color: var(--color-text);                     /* Standard text color */
  word-break: break-word;                       /* Breaks long filenames to prevent overflow */
  line-height: 1.2;                             /* Adjusts line height for readability */
}

/* The filesize text in the preview card */
.preview-image-card-filesize {
  color: var(--color-text-secondary);           /* Secondary text color */
  font-weight: normal;                          /* Normal font weight */
  font-size: var(--font-size-75);               /* Even smaller font size */
  margin-top: -0.5rem;                          /* Pulls it closer to the filename above */
}

/* Wrapper for a label/input pair in the preview card */
.preview-image-card-control-group {
  margin: 0;                                    /* Resets any default margin */
}

/* A text label in the preview card */
.preview-image-card-label {
  display: block;                               /* Ensures label is on its own line */
  font-size: var(--font-size-75);               /* Small font size for compact layout */
  font-weight: 500;                             /* Medium font weight */
  color: var(--color-text);                     /* Standard text color */
  margin-bottom: 0.25rem;                       /* Space between label and input */
}

/* A select dropdown or text input in the preview card */
.preview-image-card-select,
.preview-image-card-input {
  width: 100%;                                  /* Takes full width of its container */
  padding: 0.5rem;                              /* Inner padding */
  border: 2px solid #e5e7eb;                  /* Standard light border */
  border-radius: 0.375rem;                      /* Small corner radius */
  font-size: var(--font-size-75);               /* Small font size */
  background: white;                          /* Solid white background */
  transition: border-color 0.2s ease;           /* Smooth transition for focus effect */
}
.preview-image-card-select:focus,
.preview-image-card-input:focus {
  outline: none;                                /* Removes the default browser outline */
  border-color: var(--color-primary);           /* Changes border color on focus */
}

/* A label for a checkbox in the preview card */
.preview-image-card-checkbox-label {
  display: flex;                                /* Lays out checkbox and text in a row */
  align-items: center;                          /* Vertically centers items */
  font-size: var(--font-size-75);               /* Small font size */
  cursor: pointer;                              /* Indicates the label is clickable */
  color: var(--color-text);                     /* Standard text color */
  gap: 0.5rem;                                  /* Space between checkbox and text */
}

/* The checkbox input itself */
.primary-image-checkbox {
  margin-right: 0.5rem;                         /* Space to the right of the checkbox */
  vertical-align: middle;                       /* Aligns checkbox with the text */
}


/* --- COMPONENT: IMAGE BADGE --- */

/* Base class for all image badges (not used directly, but sets context) */
.image-badge {
  position: absolute;                           /* Positions badge relative to its container */
  padding: 2px 6px;                             /* Inner padding */
  border-radius: 3px;                           /* Slight corner rounding */
  font-size: var(--font-size-75);               /* Very small font size */
  font-weight: 500;                             /* Medium font weight */
  z-index: 10;                                  /* Ensures badge is on top of the image */
}

/* The "Primary" badge, indicating the main image for a soda */
.image-badge-primary {
  position: absolute;                           /* Positions badge */
  top: 8px;                                     /* Space from the top edge */
  right: 8px;                                   /* Space from the right edge */
  background: var(--color-warning);             /* Bright yellow warning color for high visibility */
  color: var(--color-text-primary);             /* Dark text for contrast against yellow */
  padding: 3px 8px;                             /* Padding around the text */
  border-radius: 20px;                          /* Pill-shaped badge */
  font-size: var(--font-size-75);               /* Small font size */
  font-weight: 600;                             /* Semibold for emphasis */
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);      /* Subtle shadow for depth */
}

/* The "Type" badge (e.g., Bottle, Can) */
.image-badge-type {
  position: absolute;                           /* Positions badge */
  top: 8px;                                     /* Space from the top edge */
  left: 8px;                                    /* Space from the left edge */
  background: var(--color-black-overlay-strong);/* Semi-transparent black for readability on any image */
  color: white;                               /* White text for contrast */
  padding: 4px 8px;                             /* Padding around the text */
  border-radius: var(--card-radius-xs);         /* Small corner radius */
  font-size: var(--font-size-75);               /* Small font size */
  font-weight: 500;                             /* Medium font weight */
}


/* --- Upload Zone Component --- */

/* The main container for the drag-and-drop upload area */
.upload-zone {
  position: relative;                           /* Establishes positioning context */
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.1)); /* Subtle blue gradient */
  border: 2px dashed #d1d5db;                 /* Dashed border to indicate a drop target */
  border-radius: 1rem;                          /* Large rounded corners */
  padding: 2rem 1rem;                           /* Generous inner padding */
  text-align: center;                           /* Centers all content */
  cursor: pointer;                              /* Indicates the area is clickable */
  overflow: hidden;                             /* Hides any overflow */
  transition: all var(--transition-normal);     /* Smooth transition for all properties */
}
.upload-zone:hover {
  transform: translateY(-2px);                  /* Lifts the zone on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Adds a more prominent shadow on hover */
}
/* State when a file is being dragged over the zone */
.upload-zone.drag-over {
  border-color: var(--color-success) !important;/* Changes border to green to indicate a valid drop */
  background-color: rgba(167, 248, 167, 0.3) !important; /* Green tint background */
  transform: scale(1.02);                       /* Slightly enlarges the zone */
}

/* The large cloud icon inside the upload zone */
.upload-zone-icon {
  font-size: var(--font-size-250);              /* Large icon size */
  color: var(--color-success);                  /* Green color to match success state */
  margin-bottom: var(--space-md);               /* Space below the icon */
  opacity: 0.7;                                 /* Slight transparency */
}

/* The main title text (e.g., "Drop Images Here") */
.upload-zone-title {
  font-size: var(--font-size-125);              /* Large font size */
  color: var(--color-primary);                  /* Primary brand color */
  margin-bottom: var(--space-xs);               /* Space below the title */
}

/* The secondary text (e.g., "Or click to browse...") */
.upload-zone-subtitle {
  font-size: var(--font-size-100);              /* Standard font size */
  color: var(--color-text-secondary);           /* Secondary text color */
  margin-bottom: var(--space-md);               /* Space below the subtitle */
}

/* Text displaying file types and size limits */
.upload-zone-meta-info {
  font-size: var(--font-size-90);               /* Small font size */
  color: #6b7280;                             /* Muted text color */
}

/* A small informational box inside the upload zone */
.upload-zone-info-box {
  padding: 0.75rem;                             /* Inner padding */
  background: rgba(59, 130, 246, 0.1);        /* Very subtle blue background */
  border-radius: 0.5rem;                        /* Rounded corners */
  border: 1px solid rgba(59, 130, 246, 0.2);  /* Faint blue border */
  display: inline-block;                        /* Allows it to size to its content */
  color: var(--color-primary);                  /* Primary brand color for text */
  font-weight: 500;                             /* Medium font weight */
  font-size: var(--font-size-90);               /* Small font size */
}

/* --- Upload Preview Area (Container for generated cards) --- */

/* The main container for the entire preview section, hidden by default */
.upload-preview-container {
  display: none;                                /* Hidden until an image is selected */
  margin-top: var(--space-md);                  /* Space above the preview area */
}

/* The header for the preview area ("Selected Images") */
.upload-preview-header {
  display: flex;                                /* Lays out title and count in a row */
  justify-content: space-between;               /* Pushes title and count to opposite ends */
  align-items: center;                          /* Vertically centers title and count */
  margin-bottom: var(--space-md);               /* Space below the header */
  padding-bottom: 0.5rem;                       /* Space below the text, above the border */
  border-bottom: 1px solid var(--color-border-light); /* Divider line */
}

/* The title text in the preview header */
.upload-preview-title {
  margin: 0;                                    /* Resets default margin */
  color: var(--color-text);                     /* Standard text color */
  font-size: var(--font-size-110);              /* Slightly larger font size */
}
.upload-preview-title i {
  margin-right: 0.5rem;                         /* Space between icon and text */
  color: var(--color-primary);                  /* Primary color for the icon */
}

/* The text displaying the number of selected images */
.upload-preview-count {
  font-size: var(--font-size-90);               /* Small font size */
  color: var(--color-text-secondary);           /* Secondary text color */
}

/* The grid that will contain the generated .preview-image-card elements */
.upload-preview-grid {
  display: grid;                                /* Enables CSS Grid layout */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Responsive columns */
  gap: var(--space-md);                         /* Space between preview cards */
}

/* A box containing helpful tips for the user */
.upload-tips-box {
  padding: var(--space-md);                     /* Inner padding */
  background: #f0f9f4;                        /* Very light green background */
  border-radius: 0.5rem;                        /* Rounded corners */
  border-left: 3px solid var(--color-success);  /* Green accent border */
  margin-top: var(--space-md);                  /* Space above the tips box */
}

/* The header for the tips box */
.upload-tips-header {
  display: flex;                                /* Lays out icon and text in a row */
  align-items: center;                          /* Vertically centers items */
  gap: 0.5rem;                                  /* Space between icon and text */
  margin-bottom: 0.5rem;                        /* Space below the header */
}
.upload-tips-header i {
  color: var(--color-success);                  /* Green icon color */
}
.upload-tips-header span {
  font-weight: 500;                             /* Medium font weight */
  color: #374151;                             /* Dark text color for readability */
  font-size: var(--font-size-90);               /* Small font size */
}

/* The list of tips */
.upload-tips-list {
  margin: 0;                                    /* Resets default list margin */
  padding-left: 1.25rem;                        /* Indents the list items */
  color: #374151;                             /* Dark text color */
  font-size: var(--font-size-90);               /* Small font size */
  line-height: 1.4;                             /* Adjusts line height */
}

/* A final note at the bottom of the upload section */
.upload-footer-note {
  color: var(--color-text-secondary);           /* Secondary text color */
  font-size: var(--font-size-90);               /* Small font size */
  margin-top: var(--space-md);                  /* Space above the note */
  text-align: center;                           /* Centers the text */
}


/* --- Quick Actions (for new uploads) --- */

/* The container for the "Quick Apply" feature, appears when multiple files are selected */
.quick-actions-container {
  margin-top: var(--space-md);                  /* Space above this container */
}

/* The main flex container for the Quick Actions bar */
.quick-actions {
  padding: var(--space-md);                     /* Inner padding */
  background: rgba(167, 248, 167, 0.08);      /* Very subtle green background */
  border: 1px solid rgba(167, 248, 167, 0.2); /* Faint green border */
  border-radius: 0.5rem;                        /* Rounded corners */
  display: flex;                                /* Lays out items in a row */
  gap: 1rem;                                    /* Space between items */
  align-items: center;                          /* Vertically centers items */
  flex-wrap: wrap;                              /* Allows items to wrap on small screens */
}

/* The label for the Quick Actions select dropdown */
.quick-actions-label {
  display: flex;                                /* Lays out icon and text in a row */
  align-items: center;                          /* Vertically centers icon and text */
  gap: 0.5rem;                                  /* Space between icon and text */
  font-size: var(--font-size-75);               /* Small font size */
  font-weight: 500;                             /* Medium font weight */
  color: var(--color-text);                     /* Standard text color */
  margin-bottom: 0.25rem;                       /* Space below the label */
}
.quick-actions-label .fas {
  color: var(--color-success);                  /* Green icon color */
}

/* The select dropdown for choosing a type to apply to all */
.quick-actions-select {
  padding: 0.5rem;                              /* Inner padding */
  border: 2px solid #e5e7eb;                  /* Standard light border */
  border-radius: 0.5rem;                        /* Rounded corners */
  font-size: var(--font-size-75);               /* Small font size */
  min-width: 150px;                             /* Ensures it doesn't get too small */
  background: white;                          /* Solid white background */
}


/* --- Supporting Utilities for Image Components --- */

/* An icon used in an empty state message */
.text-container-icon {
  font-size: var(--font-size-400);              /* Very large icon */
  margin-bottom: var(--space-md);               /* Space below the icon */
  opacity: 0.5;                                 /* Semi-transparent */
  display: block;                               /* Ensures it's on its own line */
}

/* ==========================================
   COMPONENT: RESEARCH REPORT 
   ========================================== */

.card-body--research {
  padding: var(--space-xs);                                 /* Thin inner padding */               
}   

.card-scroll-list--research {
  --scroll-margin: var(--space-xs);                         /* Push back less from scrollbar as inner padding is smaller */    
}

/* --- Report Header --- */
.card-header--research {
  color: var(--color-header);                               /* Sets default text color to off-white for contrast */
  border-radius: var(--card-radius) var(--card-radius) 0 0; /* Rounds the top corners */
  text-align: center;                                       /* Centers the title and subtitle */
}

/* --- Report Content --- */

/* The main content area below the header */
.research-content {
  background: var(--bgcolor);
  border-radius: 0 0 var(--card-radius) var(--card-radius); /* Rounds the bottom corners */
  box-shadow: var(--card-shadow);                           /* Standard card shadow to lift it off the page */
  overflow: hidden;                                         /* Hides any overflowing content */
}

/* Container for the top navigation links (Back, Edit) */
.research-nav {
  display: flex;
  justify-content: space-between;
  padding: var(--space-md) 2rem 0 2rem;                     /* Padding around the navigation */
}

/* A link in the top navigation area */
.research-nav-link {
  color: rgba(0,0,0,0.5);                                 /* Muted default color */
  text-decoration: none;                                    /* No underline by default */
  font-weight: 400;                                         /* Normal font weight */
  font-size: var(--font-size-90);                           /* Small font size */
  font-family: 'Outfit', sans-serif;                        /* Consistent body font */
  transition: color 0.2s ease;                              /* Smooth color transition on hover */
}
.research-nav-link:hover {
  color: var(--color-brand-blue);                           /* Changes color to brand blue on hover */
}
/* A styled link for editing the report */
.research-nav-link--edit {
  color: var(--color-primary);                              /* Uses primary color for more emphasis */
}

/* The separator between navigation links */
.research-nav-separator {
  margin: 0 1rem;                                           /* Horizontal margin */
  color: rgba(0,0,0,0.3);                                 /* Very muted color */
}


/* --- Report Sections & Paragraphs --- */

/* A major section of the report (e.g., "Introduction") */
.research-section {
  padding: var(--space-md) var(--space-xl);                 /* Horizontal and vertical padding */
}

/* The header for a section */
.research-section-header {
  margin-bottom: var(--space-lg);                           /* Space below the header */
}

/* A block containing a paragraph and its potential sources */
.research-paragraph {
  margin-bottom: 2rem;                                      /* Space between paragraph blocks */
  position: relative;                                       /* Establishes positioning context */
}
.research-paragraph:last-child {
  margin-bottom: 0;                                         /* No margin on the very last paragraph */
}

/* The text content of a paragraph */
.research-paragraph-text {
  margin: 0;                                                /* Resets default margin */
  font-size: var(--font-size-100);                          /* Standard body font size */
  line-height: 1.7;                                         /* Increased line height for readability */
}

/* The heading of a specific paragraph, displayed inline */
.research-paragraph-heading {
  font-weight: 600;                                         /* Bolder font weight */
  margin-right: 0.5rem;                                     /* Space after the heading, before the content */
}

/* The main content of a paragraph */
.research-paragraph-content {
  display: inline;                                          /* Allows heading and content to flow together */
}

/* --- Sources Button & Container --- */

/* The small, pill-shaped button to reveal sources */
.sources-toggle-pill {
  background: var(--bgcolor);                               /* Background color passed in as style variable*/
  display: inline-flex;                                     /* Allows for easy centering of content */
  align-items: center;                                      /* Vertically centers the icon */
  justify-content: center;                                  /* Horizontally centers the icon */
  margin-left: 0.4rem;                                      /* Space to the left of the pill */
  padding: 0.15rem 0.4rem;                                  /* Small padding */
  color: white;                                           /* White icon */
  border-radius: 12px;                                      /* Creates the pill shape */
  cursor: pointer;                                          /* Indicates it's clickable */
  border: none;                                             /* No border */
  transition: all 0.3s ease;                                /* Smooth transition for all properties */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);                 /* Subtle shadow */
  height: 16px;                                             /* Fixed height */
  min-width: 24px;                                          /* Minimum width */
}
.sources-toggle-pill:hover {
  transform: translateY(-1px) scale(1.05);                  /* Lifts and scales the pill on hover */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);                 /* Increases shadow on hover */
}

/* The SVG icon inside the pill */
.sources-toggle-pill svg {
  width: 6px;                                               /* Small icon width */
  height: 6px;                                              /* Small icon height */
  fill: white;                                           /* White icon color */
  transition: transform 0.3s ease;                          /* Smooth rotation transition */
}
/* Rotates the icon when the sources are open */
.sources-toggle-pill.is-open svg {
  transform: rotate(180deg);                                /* Flips the arrow icon upside down */
}

/* The container for the sources, hidden by default */
.sources-preview {
  max-height: 0;                                            /* Collapsed by default */
  overflow: hidden;                                         /* Hides the content when collapsed */
  margin-top: 0;                                            /* No margin when collapsed */
  opacity: 0;                                               /* Invisible by default */
  background: var(--color-white-overlay-strong);            /* Lighter version of the background */
  border: 1px solid #e2e8f0;                              /* Light border */
  border-radius: 0.5rem;                                    /* Rounded corners */
  transition: all 0.4s ease;                                /* Smooth transition for all properties */
}
/* The state when the sources container is visible */
.sources-preview.is-open {
  margin-top: var(--space-md);                              /* Adds space above when open */
  padding: var(--space-lg);                                 /* Adds padding when open */
  opacity: 1;                                               /* Fades it in */
  max-height: 800px;                                        /* Animates height to a large value */
}


/* --- Source Card --- */

/* The grid that holds the individual source cards */
.sources-grid {
  display: grid;                                                /* Enables CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* Responsive columns */
  gap: 1rem;                                                    /* Space between source cards */
}

/* An individual card for a single source link */
.source-card {
  background: white;                                      /* Solid white background */
  color: var(--color-text-primary);                       /* Ensure text color is inherited properly */
  border: 1px solid #e2e8f0;                              /* Light border */
  border-radius: 0.5rem;                                    /* Rounded corners */
  padding: var(--space-md);                                 /* Inner padding */
  text-decoration: none;                                    /* Removes underline from the link */
  display: flex;                                            /* Use flexbox */
  flex-direction: column;                                   /* Stack description and link vertically */
  justify-content: space-between;                           /* Push link to the bottom */
  position: relative;                                       /* Positioning context for pseudo-elements */
  overflow: hidden;                                         /* Hides the top accent bar overflow */
}
/* The colorful accent bar at the top of the card */
.source-card::before {
  content: '';                                              /* Required for pseudo-elements */
  position: absolute;                                       /* Positions relative to the card */
  top: 0;                                                   /* Aligns to the top */
  left: 0;                                                  /* Aligns to the left */
  right: 0;                                                 /* Stretches to the right */
  height: 3px;                                              /* Height of the accent bar */
  background: linear-gradient(to right, var(--color-brand-blue), var(--color-brand-tangerine)); /* Gradient color */
}

/* The description of the source */
.source-description {
  font-weight: 500;                                         /* Bolder font weight */
  color: var(--color-text-primary);                         /* Use primary text color for the title/description */
  margin-bottom: var(--space-md);                           /* Increased space below the description */
  line-height: 1.4;                                         /* Better line height for multi-line descriptions */
}

/* The container for the actual link and its display URL */
.source-link-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: auto; /* Pushes this to the bottom if the card grows */
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

/* The main clickable link with its text */
.source-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--color-brand-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.source-link:hover {
  color: var(--color-brand-red);
  text-decoration: underline;
}

/* The link icon next to the source title */
.source-icon {
  opacity: 0.7;                                             /* Slight transparency */
}

/* The URL of the source */
.source-url {
  font-size: var(--font-size-90);                           /* Small font size */
  color: #6b7280;                                        /* Muted text color */
  font-style: italic;
  word-break: break-all;                                    /* Breaks long URLs to prevent overflow */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .card-header--research {
    padding: var(--space-lg);                               /* Reduces padding on mobile for a tighter look */
  }
  .research-title {
    font-size: var(--font-size-200);                        /* Makes the title smaller on mobile devices */
  }
  .research-section {
    padding: var(--space-lg);                               /* Reduces section padding on smaller screens */
  }
  .sources-grid {
    grid-template-columns: 1fr;                             /* Stacks source cards into a single column on mobile */
  }
}

/* --- Markdown Content Styling --- */
/* These rules provide default styling for HTML elements generated from Markdown content */
/* This ensures consistency in how paragraphs, lists, bold text, etc., are rendered */

/* Ensures that paragraph tags generated from markdown are treated as inline elements to flow correctly */
.research-paragraph-text p {
  display: inline;                                          /* Allows paragraph text to flow with headings */
  margin: 0;                                                /* Removes default paragraph margin */
}
/* A second paragraph tag, however, should be treated as a new block */
.research-paragraph-text p + p {
  display: block;                                           /* Makes subsequent paragraphs stack vertically */
  margin-top: 0.75rem;                                      /* Adds space between stacked paragraphs */
}
/* Styles for bold text (e.g., **text**) */
.research-paragraph-text strong {
  font-weight: 600;                                         /* Sets a semibold weight */
  color: var(--color-text);                                 /* Ensures it uses the primary text color */
}
/* Styles for italic text (e.g., *text*) */
.research-paragraph-text em {
  font-style: italic;                                       /* Applies italics */
}
/* Styles for unordered and ordered lists */
.research-paragraph-text ul, .research-paragraph-text ol {
  margin: 0.5rem 0;                                         /* Vertical margin for the list block */
  padding-left: 1.5rem;                                     /* Indentation for the list */
  display: block;                                           /* Ensures the list is a block-level element */
}
/* Styles for individual list items */
.research-paragraph-text li {
  margin-bottom: 0.25rem;                                   /* Space between list items */
  display: list-item;                                       /* Ensures standard list-item rendering with bullets/numbers */
}
/* Styles for inline code (e.g., `code`) */
.research-paragraph-text code {
  background-color: rgba(0, 0, 0, 0.05);                  /* Subtle dark background */
  padding: 0.2rem 0.4rem;                                   /* Small padding around the code */
  border-radius: 3px;                                       /* Slightly rounded corners */
  font-family: 'Courier New', monospace;                    /* Monospaced font for code */
  font-size: var(--font-size-90);                           /* Slightly smaller font size */
}
/* Styles for code blocks (e.g., ```code block```) */
.research-paragraph-text pre {
  background-color: rgba(0, 0, 0, 0.05);                  /* Subtle dark background */
  padding: var(--space-md);                                 /* Generous padding for the block */
  border-radius: 0.5rem;                                    /* Rounded corners */
  overflow-x: auto;                                         /* Allows horizontal scrolling for long lines of code */
  margin: 0.75rem 0;                                        /* Vertical margin */
  display: block;                                           /* Ensures it's a block-level element */
}
/* Resets styles for code inside a preformatted block to avoid double-styling */
.research-paragraph-text pre code {
  background: none;                                         /* Removes the inner background */
  padding: 0;                                               /* Removes the inner padding */
}
/* Styles for blockquotes (e.g., > quote) */
.research-paragraph-text blockquote {
  border-left: 3px solid var(--color-brand-blue);           /* Blue accent border on the left */
  padding-left: 1rem;                                       /* Indentation for the quote */
  margin: 0.75rem 0;                                        /* Vertical margin */
  font-style: italic;                                       /* Italicizes the quote text */
  color: rgba(0, 0, 0, 0.7);                              /* Slightly muted text color */
  display: block;                                           /* Ensures it's a block-level element */
}
/* Styles for links (e.g., [link](url)) */
.research-paragraph-text a {
  color: var(--color-brand-blue);                           /* Uses brand blue for links */
  text-decoration: underline;                               /* Underlines links for clarity */
}
.research-paragraph-text a:hover {
  color: var(--color-brand-red);                            /* Changes to brand red on hover */
}

/* ==========================================
   COMPONENT: TASTING MANAGER
   ========================================== */

/* --- Main Layout --- */

/* Grid container for recent items displayed in list format */
.recent-items-list {
  display: flex;                                /* Vertical stacking layout */
  flex-direction: column;                       /* Items stack from top to bottom */
  gap: var(--space-sm);                        /* Consistent spacing between list items */
}

/* Grid container for recent criteria displayed in card format */
.recent-items-grid {
  display: grid;                               /* CSS Grid for responsive layout */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns with minimum 200px width */
  gap: var(--space-sm);                        /* Consistent spacing between grid items */
}

/* Grid container for soda types reference section */
.soda-types-grid {
  display: grid;                               /* CSS Grid for responsive layout */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns with minimum 200px width */
  gap: var(--space-md);                        /* Slightly larger gap for better visual separation */
}

/* --- Recent Items Display --- */

/* Individual item container in the recent items list */
.list-item--recent-item {
  background: var(--bgcolor, --color-white-overlay-light); /* Subtly lighter background to distinguish from parent */
}

/* Content area of recent item (left side) */
.recent-item-info {
  display: flex;                               /* Horizontal layout for title and pills */
  align-items: center;                         /* Vertically center content */
  justify-content: space-between;              /* Space between title pills and buttons*/
  flex-grow: 1;                                /* Take up available space, pushing actions right */
}

/* --- Recent Criteria Cards --- */

/* Individual criterion card in the recent criteria grid */
.recent-criterion-item {
  padding: var(--space-sm);                    /* Internal padding for content */
  background: var(--color-white-overlay-light); /* Subtle background to distinguish from parent */
  border-radius: var(--input-radius);          /* Consistent border radius with form inputs */
  border: 1px solid var(--color-border-light); /* Light border for definition */
}

/* Header section of criterion card containing name and group pill */
.recent-criterion-header {
  display: flex;                               /* Horizontal layout for name and pill */
  justify-content: space-between;              /* Name on left, pill on right */
  align-items: center;                         /* Vertically center content */
  margin-bottom: var(--space-2xs);             /* Small gap before metadata */
}

/* Metadata section showing type and scale information */
.recent-criterion-meta {
  display: flex;                               /* Horizontal layout for metadata items */
  justify-content: space-between;              /* Spread metadata across width */
  font-size: var(--font-size-90);             /* Slightly smaller text for secondary information */
}

/* --- Soda Types Reference --- */

/* Individual soda type item in the reference grid */
.soda-type-item {
  padding: var(--space-sm);                       /* Internal padding for content */
  background-color: var(--bgcolor, --color-soda-cola-tint-subtle); /* The soda flavor color or a subtle background to distinguish from parent */
  color: var(--textcolor, --color-text-primary);  /* Text color designed for soda flavor color or a subtle background to distinguish from parent */
  border-radius: var(--input-radius);             /* Consistent border radius with form inputs */
  border: 1px solid var(--color-border-light);    /* Light border for definition */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .recent-items-grid {
    grid-template-columns: 1fr;                 /* Single column layout on mobile */
  }
  
  .soda-types-grid {
    grid-template-columns: 1fr;                 /* Single column layout on mobile */
  }
  
  .recent-item {
    flex-direction: column;                      /* Stack item content vertically on mobile */
    align-items: stretch;                        /* Stretch items to full width */
    gap: var(--space-sm);                       /* Add gap between stacked elements */
  }
  
  .recent-item-info {
    justify-content: flex-start;                 /* Align content to left when stacked */
  }
  
  .recent-criterion-header {
    flex-direction: column;                      /* Stack name and pill vertically on mobile */
    align-items: flex-start;                     /* Align to left edge */
    gap: var(--space-2xs);                      /* Small gap between stacked elements */
  }
  
  .recent-criterion-meta {
    justify-content: flex-start;                 /* Align metadata to left on mobile */
    gap: var(--space-sm);                       /* Add gap between metadata items */
  }
}

/* ==========================================
   COMPONENT: TEMPLATE BUILDER
   ========================================== */

/* --- Current Criteria List --- */

/* Container for the list of criteria currently in the template */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                    /* Consistent spacing between criteria items */
}

/* Individual criterion item in the current criteria list */
.criteria-item {
  position: relative;                               /* For drag handle positioning */
  background: var(--color-soda-lime-tint-subtle);   /* Subtle background to distinguish from card */
  border: 1px solid var(--color-border-light);      /* Light border for definition */
  border-radius: var(--card-radius-sm);             /* Consistent with other small cards */
  padding: var(--space-md);                         /* Comfortable internal padding */
  padding-left: calc(var(--space-md) + 40px);       /* Extra left padding for drag handle */
  transition: all var(--transition-fast);           /* Smooth hover effects */
}

.criteria-item--no-drag {
  padding: var(--space-md);                         /* Comfortable internal padding - no extra for drag handle */
}

.criteria-item:hover {
  border-color: var(--color-primary);               /* Highlight border on hover */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);       /* Subtle elevation effect */
}

.criteria-group .criteria-item {
  background: var(--color-white-overlay-strong);  /* Just a much lighter version of the card background */
  border: 1px solid var(--color-border-light);    /* Light border */
}

.criteria-list .criteria-item {
  background: var(--color-white-overlay-strong);  /* Just a much lighter version of the card background */
  border: 1px solid var(--color-border-light);    /* Light border */
}

/* Main content area of each criteria item */
.criteria-item-info {
  display: flex;
  justify-content: space-between;          /* Space between content and actions */
  align-items: center;                     /* Align to top for multi-line content */
  gap: var(--space-md);                    /* Space between content and actions */
}

.criteria-item-pills {
  display: flex;                           /* Flex container for pills */
  gap: var(--space-sm);                    /* Small gap between pills */  
  flex-wrap: wrap;                         /* Allow wrapping on small screens */
  margin-left: auto;                       /* Pushes the pills to the left as much as possible, effectively creating space to the right */
}

.criteria-item-pills--no-margin {
  margin-left: 0;
}

/* Left side content (name, meta, description) */
.criteria-item-main {
  flex: 1;                                  /* Take up available space */
}

/* Criterion name styling */
.criteria-item-name {
  font-size: var(--font-size-110);          /* Slightly larger than body text */
  font-weight: var(--font-weight-semibold); /* Emphasize the name */
  color: var(--color-text-primary);         /* Primary text color */
  margin: 0;                                /* Ensure no default margin pushes it around */
  flex-shrink: 0;                           /* Prevent the name from shrinking */
}

/* Container for criterion metadata pills */
/* Optional description text */
.criteria-item-description {
  margin: var(--space-sm) 0 0 0;            /* Space above description */
  color: var(--color-text-secondary);       /* Muted text color */
  font-size: var(--font-size-90);           /* Smaller than body text */
  line-height: 1.4;                         /* Good readability */
}

/* --- Group Structure --- */

/* Container for a group of criteria (flavor, senses, overall) */
.criteria-group {
  margin-bottom: var(--space-xl);                   /* Space between groups */
  border-radius: var(--input-radius);               /* Rounded corners */
  background: var(--card-color, --color-bg-subtle); /* Subtle background to group items */
  padding: var(--space-md);                         /* Inner padding */
  border: 1px solid var(--color-border-light);      /* Light border */
  border-left: 4px solid var(--accent-color);       /* Left border for accent */
  transition: all 0.2s ease;                        /* Smooth transitions */
}

.criteria-group .criteria-group-title i {
  color: var(--accent-color);
}

.criteria-group:last-child {
  margin-bottom: 0;                                 /* Remove margin from last group */
}

/* Header for each criteria group */
.criteria-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

/* Title for each group with icon */
.criteria-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-125);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.criteria-group-title i {
  font-size: var(--font-size-110);
  color: var(--color-text-secondary);
}

/* Count badge for number of criteria in group */
.criteria-group-count {
  font-size: var(--font-size-90);
  color: var(--color-text-secondary);
  background: var(--color-white-overlay-medium);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 12px;
  font-weight: var(--font-weight-medium);
}
/* Grid layout for criteria selection cards */
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns with min width */
  gap: var(--space-md);                    /* Consistent spacing between cards */
}

/* --- Selectable Criteria Cards --- */

/* Main selectable criteria card container */
.criteria-card {
  display: block;                          /* Block level for full click area */
  background: var(--color-white-overlay-strong); /* Just a much lighter version of the card background */
  border: 2px solid var(--color-border-light); /* Thicker border for selection UI */
  border-radius: var(--card-radius-sm);    /* Consistent with other cards */
  padding: var(--space-md);                /* Comfortable internal padding */
  cursor: pointer;                         /* Indicate clickable */
  transition: all var(--transition-fast);  /* Smooth interactions */
}

.criteria-card:hover {
  border-color: var(--color-primary);      /* Highlight border on hover */
  background: var(--color-soda-lemon-tint);      /* Subtle background change */
  transform: translateY(-1px);             /* Slight lift effect */
  box-shadow: var(--card-shadow);          /* Add elevation */
}

/* Hidden checkbox for form submission */
.criteria-checkbox {
  position: absolute;
  opacity: 0;                              /* Invisible but functional */
  pointer-events: none;                    /* Let clicks pass through to label */
}

/* Modern CSS selector for checked state styling */
.criteria-card:has(.criteria-checkbox:checked) {
  border-color: var(--color-soda-blue-raspberry);     /* Primary border for selection */
  background: var(--color-soda-blue-raspberry-light); /* Highlight background */
  box-shadow: 0 0 0 2px var(--color-primary-light);   /* Focus ring effect */
}

/* Content area within selectable cards */
.criteria-card-content {
  border-radius: var(--card-radius-xs);                 /* Subtle inner rounding */
  transition: background-color var(--transition-fast);  /* Smooth selection transition */
}

/* Criterion name in selectable cards */
.criteria-card-name {
  font-size: var(--font-size-100);            /* Standard body text size */
  font-weight: var(--font-weight-semibold);   /* Emphasize the name */
  color: var(--color-text-primary);           /* Primary text color */
  margin: 0 0 var(--space-xs) 0;             /* Space below name */
}

/* Metadata pills in selectable cards */
.criteria-card-meta {
  display: flex;
  gap: var(--space-xs);                    /* Small gap between pills */
  flex-wrap: wrap;                         /* Allow wrapping */
  margin-bottom: var(--space-sm);          /* Space below meta section */
}

/* Description text in selectable cards */
.criteria-card-description {
  margin: 0;                               /* Reset default margins */
  color: var(--color-text-secondary);      /* Muted text color */
  font-size: var(--font-size-90);          /* Smaller than body text */
  line-height: 1.4;                        /* Good readability */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .criteria-grid {
    grid-template-columns: 1fr;             /* Single column on mobile */
  }
  
  .criteria-item-info {
    flex-direction: column;                 /* Stack content and actions vertically */
    gap: var(--space-sm);                   /* Reduce gap for mobile */
  }
  }

/* --- Sortable Group Styling --- */

/* Each sortable group within the criteria groups */
.sortable-group {
  min-height: 60px;                        /* Minimum height for empty drop zones */
  border-radius: var(--input-radius);      /* Rounded corners */
  transition: all 0.2s ease;              /* Smooth transitions */
  padding: var(--space-xs);                /* Small padding */
}

/* Styling when dragging over a valid drop zone */
.sortable-group.sortable-drag-over {
  background-color: var(--color-brand-mint); /* Mint background when valid drop */
  border: 2px dashed var(--color-primary);  /* Dashed border to show drop zone */
}

/* --- Enhanced Criteria Items for Groups --- */

/* Update criteria item spacing within groups */

/* --- Empty State for Groups --- */

/* When a group has no criteria */
.sortable-group:empty::after {
  content: "Drag criteria here or add new ones below.";
  display: block;
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-lg);
  border: 2px dashed var(--color-border-light);
  border-radius: var(--input-radius);
  background: var(--color-bg-subtle);
}

/* --- Mobile Responsiveness --- */

@media (max-width: 768px) {
  /* Stack group header on mobile */
  .criteria-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  /* Full width count badge on mobile */
  .criteria-group-count {
    align-self: flex-end;
  }
  
}

/* =====================================================
   MOBILE RESPONSIVENESS: TASTING CRITERIA
   ===================================================== */

@media (max-width: 768px) {
  /* Allows the main header's pills and action buttons to wrap onto a new line instead of squashing */
  .criteria-group-header {
    flex-wrap: wrap;                          /* Why: Allows items to wrap to a new line on narrow screens */
    gap: var(--space-sm);                     /* Why: Reduces the gap between items on mobile for a tighter layout */
  }

  /* Full width count badge on mobile */
  .criteria-group-count {
    align-self: flex-end;
  }

  /* Allows the criterion item's content to wrap onto multiple lines on mobile */
  .criteria-item-info {
    flex-wrap: wrap;        /* Why: Allows items to wrap to a new line instead of squashing */
    gap: var(--space-xs);   /* Why: Uses a tighter gap for the more compact mobile layout */
  }

  /* In the new stacked layout, this removes the auto-margin from the pills */
  .criteria-item-info .criteria-item-pills {
    margin-left: 0;                           /* Why: Resets the margin so the pills align cleanly to the left */
  }

  /* Reduce group padding on mobile */
  .criteria-group {
    padding: var(--space-sm);
  }
}

/* ==========================================
   COMPONENT: CRITERIA DRAG HANDLES
   ========================================== */

/* --- Drag Handle Styling --- */

/* Add this new class for the overall group's drag handle */
.group-drag-handle {
    display: flex; /* */
    align-items: center; /* */
    justify-content: center; /* */
    padding: var(--space-md); /* */
    min-width: 40px; /* Ensures it's always wide enough for the icon */
    height: 100%; /* Make it fill the height of its grid cell */
    cursor: grab; /* */
    border-radius: var(--card-radius-sm); /* */
    color: var(--color-text-secondary); /* */
    transition: all var(--transition-fast); /* */
}

.group-drag-handle:hover {
    color: var(--color-primary); /* */
    background-color: var(--color-bg-subtle); /* */
    transform: translateY(-2px); /* */
}


/* --- Mobile Responsiveness --- */

@media (max-width: 768px) {
  /* Adjust padding for larger drag handle */
  .criteria-item {
    padding-left: calc(var(--space-md) + 44px); /* Extra space for larger handle */
  }
}

/* ==========================================
   COMPONENT: SIMPLE SORTABLE VISUAL FEEDBACK
   ========================================== */

/* --- SortableJS Visual States --- */

/* Item being dragged (ghost) */
.sortable-ghost {
  opacity: 0.4;                           /* More transparent for better visibility */
  background-color: var(--color-bg-subtle) !important; /* Consistent background */
  border: 2px dashed var(--color-primary) !important;  /* Dashed border for ghost */
  transform: none !important;             /* Remove rotation - can cause positioning issues */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Subtle shadow */
}

/* Item that will be replaced (drop target) */
.sortable-chosen {
  border-color: var(--color-primary) !important; /* Highlight border for chosen item */
  background-color: var(--color-bg-subtle) !important; /* Light background */
  transform: none !important;             /* Prevent transform issues */
}

/* The actual dragged element while dragging */
.sortable-drag {
  background-color: white !important;     /* Solid background */
  border: 2px solid var(--color-primary) !important; /* Solid border */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important; /* Strong shadow */
  transform: rotate(3deg) !important;     /* Slight rotation for the actual drag element */
  z-index: 9999 !important;              /* Ensure it's on top */
}

/* Custom class for items being dragged */
.criteria-item.is-dragging {
  cursor: grabbing !important;            /* Show grabbing cursor */
}

/* List container while sorting */
.criteria-list.is-sorting {
  overflow: visible !important;           /* Ensure dragged items aren't clipped */
}

/* --- Drop Zone Feedback --- */

/* Add subtle feedback to the criteria list during drag */
.criteria-list {
  transition: background-color 0.2s ease; /* Smooth background transitions */
  position: relative;                     /* Ensure proper positioning context */
}

/* When dragging over the list, show it's a valid drop zone */
.criteria-list:has(.sortable-ghost) {
  background-color: var(--color-bg-subtle); /* Very subtle background change */
  border-radius: var(--input-radius);       /* Subtle rounding */
  padding: var(--space-xs);                 /* Small padding for visual definition */
}

/* List container while sorting */
.criteria-list.is-sorting {
  overflow: visible !important;           /* Ensure dragged items aren't clipped */
}

/* --- Prevent Text Selection During Drag --- */

/* Global text selection prevention during drag operations */
body.sorting-active {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* --- Mobile Responsiveness --- */

@media (max-width: 768px) {
  /* Enhance touch feedback on mobile */
  .sortable-ghost {
    opacity: 0.3;                         /* More transparent on mobile */
  }
  
  /* Ensure mobile drag works properly */
  .criteria-item {
    touch-action: manipulation;           /* Prevent unwanted touch behaviors */
  }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
 
@media (max-width: 768px) {
  .card-header {
    padding: var(--space-lg);
  }

  .card-body {
    padding: var(--space-md);
  }
} 

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
  .site-header,
  .site-nav,
  .btn,
  .card-footer {
    display: none;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }
}

/* ==========================================
   COMPONENT: TOGGLE BUTTON (Revised & Unified)
   ========================================== */

/* Base class for all icon-based toggle buttons */
.toggle-button {
  position: relative;                           /* For icon positioning */
  background: none;                             /* No background */
  border: none;                                 /* No border by default */
  cursor: pointer;                              /* Indicates interactivity */
  padding: var(--space-xs);                     /* Surround with small padding */
  transition: all var(--transition-fast);       /* Smooth transitions for all properties */
  display: flex;                                /* Use flex for centering */
  align-items: center;                          /* Center vertically */
  justify-content: center;                      /* Center horizontally */
  width: var(--touch-target-md);                /* Standard, comfortable touch target size */
  height: var(--touch-target-md);               /* Ensures a perfect circle aspect ratio */
  border-radius: 50%;                           /* Creates a perfect circle */
}

/* The icon image inside the toggle button */
.toggle-button .toggle-icon {
  position: absolute;                           /* Absolute positioning for overlay effect */
  top: 50%;                                     /* Center vertically */
  left: 50%;                                    /* Center horizontally */
  transform: translate(-50%, -50%);             /* Perfect centering */
  transition: all var(--transition-normal);     /* Smooth transitions for state changes */
  width: var(--icon-size-xl);                   /* Large button icon */
  height: var(--icon-size-xl);                  /* Maintains a square aspect ratio */
}

/* --- Hover Effect --- */
.toggle-button:hover .toggle-icon {
  transform: translate(-50%, -50%) scale(1.1) rotate(5deg); /* Scale and rotate on hover */
}

/* --- State Management for Two-Icon Toggles --- */

/* Hide the "on" icon by default */
.toggle-button .toggle-icon--on {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Desturate the desaturating icon by default */
.toggle-button .toggle-icon--desaturating {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(0.95);
}

/* When the button has the .active class, show the "on" or saturated icon */
.toggle-button.active .toggle-icon--on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.toggle-button.active .toggle-icon--desaturating {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* When the button has the .active class, hide the "off" icon */
.toggle-button.active .toggle-icon--off {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* --- State Management for Single-Icon Toggles (Desaturate when off) --- */

.toggle-button--desaturate-off:not(.active) .toggle-icon {
    filter: grayscale(1) opacity(0.6);
    transform: translate(-50%, -50%) scale(0.95);
}

/* --- Size & Shape Modifiers --- */

/* Large variant */
.toggle-button--large {
  width: 60px;
  height: 60px;
}
.toggle-button--large .toggle-icon {
  width: 54px;
  height: 54px;
}

/* Square variant */
.toggle-button--square {
  border-radius: var(--card-radius-sm);
}


/* ==========================================
   COMPONENT: PERSONAL TRACKING (SCOUT NOTES) 
   ========================================== */

/*--- Main Container & Initial State ---*/

/* The main wrapper for the entire scout notes component, providing consistent padding */
.personal-tracking-container {
  padding: var(--space-lg);                     /* Standard large padding around the component */
}

/* The loading message displayed while fetching user's tracking data */
.tracking-loading {
  text-align: center;                           /* Centers the spinner and text */
  color: var(--color-text-secondary);           /* Muted text color for a subtle look */
  padding: var(--space-xl);                     /* Adds vertical space to center it in the container */
  font-style: italic;                           /* Differentiates loading text from other content */
}

/* Hides the entire UI block while data is loading to prevent layout flash */
#tracking-ui-wrapper.tracking-ui--loading {
    display: none;                              /* Removes the element from the layout until ready */
}

/*--- ScoutEditor Container ---*/

/* Container for ScoutEditor components - replaces old tracking-controls-grid */
.scout-editor-container {
  background: var(--color-white-overlay-medium);/* A semi-transparent white for a layered look */
  border-radius: var(--card-radius);            /* Standard rounded corners for the component box */
  border: 1px solid var(--color-border-light);  /* A subtle border to define the component's edge */
  padding: var(--space-lg);                     /* Inner padding for the entire component */
}

/*--- Edit Row Layout ---*/

/* Edit row layout - used by both view-soda and soda-scout */
.edit-row {
  margin-bottom: var(--space-md);               /* Space between edit rows */
  display: flex;                                /* Flexible row layout */
  flex-direction: column;                       /* Stack label and control vertically */
  gap: var(--space-xs);                         /* Small gap between label and control */
}

.edit-label {
  font-size: var(--font-size-100);              /* Standard label size */
  font-weight: var(--font-weight-medium);       /* Medium weight for labels */
  color: var(--color-text-primary);             /* Primary text color */
}

/*--- Tier Pill Selector ---*/

/* Tier pill container for edit mode */
.tier-pill-container {
  position: relative;                           /* Establish positioning context for dropdown */
}

/* The main tier pill that is always visible and triggers the dropdown */
.tier-pill-selector {
  display: inline-block;                      /* Behaves like text but can have width/height */
  padding: 10px 20px;                         /* Comfortable padding for a larger click area */
  border-radius: 20px;                        /* Creates the full pill shape */
  font-weight: 600;                           /* Semi-bold text for emphasis */
  font-size: var(--font-size-125);            /* Slightly larger text for prominence */
  cursor: pointer;                            /* Indicates the element is interactive */
  transition: all var(--transition-fast);     /* Smooths all property changes, like hover */
  user-select: none;                          /* Prevents text selection on click/drag */
  min-width: 80px;                            /* Ensures a consistent minimum width */
  text-align: center;                         /* Centers the tier text inside the pill */
  border: 2px solid transparent;              /* A transparent border to prevent layout shift on focus */
}

/* Provides visual feedback when the user hovers over the main tier pill */
.tier-pill-selector:hover {
    transform: translateY(-2px) scale(1.03);    /* Lifts and slightly enlarges the pill for a modern feel */
    box-shadow: var(--card-shadow);             /* Adds a subtle shadow to enhance the lift effect */
}

/* The main container for the tier selection pop-up, positioned by JS */
.tier-dropdown {
  position: fixed;                              /* Positions relative to the viewport to escape parent clipping */
  top: var(--dropdown-top, 0);                  /* Uses JS-calculated variable for vertical position */
  left: var(--dropdown-left, 0);                /* Uses JS-calculated variable for horizontal position */
  background: var(--color-bg-subtle);           /* A subtle background to stand out from the page */
  border: 1px solid var(--color-border-dark);   /* A clear border to define the pop-up */
  border-radius: var(--card-radius-md);         /* Consistent rounded corners */
  box-shadow: var(--card-shadow);               /* Adds depth and lifts the element off the page */
  z-index: 1000;                                /* Ensures the dropdown appears above other content */
  padding: var(--space-sm);                     /* Internal padding for the dropdown items */
  display: none;                                /* Hidden by default, shown by JS */
  min-width: 120px;                             /* Ensures a consistent minimum width */
}

/* The state modifier that makes the dropdown visible */
.tier-dropdown.show {
  display: block;                               /* Makes the dropdown visible when the 'show' class is added */
}

/* An individual clickable option within the tier dropdown */
.tier-option {
  display: block;                               /* Ensures each option takes its own line */
  width: 100%;                                  /* Makes the entire row clickable */
  margin-bottom: var(--space-xs);               /* Vertical spacing between tier options */
  cursor: pointer;                              /* Indicates the item is interactive */
  transition: transform 0.2s ease;              /* Adds a smooth scaling effect on hover */
  text-align: center;                           /* Centers the text within the pill */
}
.tier-option:last-child { 
  margin-bottom: 0;                             /* Removes margin from the last item to prevent extra space */
}
.tier-option:hover {
  transform: scale(1.05);                       /* Slightly enlarges the option on hover for feedback */
}

/*--- Control Layouts ---*/

/* Inventory controls layout */
.inventory-controls {
  display: flex;                                /* Horizontal layout for Have/Want */
  gap: var(--space-md);                         /* Space between controls */
  flex-wrap: wrap;                              /* Wrap on small screens */
}

.inventory-control {
  display: flex;                                /* Horizontal layout for label + spinner */
  align-items: center;                          /* Vertical center alignment */
  gap: var(--space-xs);                         /* Small gap between label and spinner */
}

/* Toggle controls layout */
.toggle-controls {
  display: flex;                                /* Horizontal layout for toggles */
  gap: var(--space-lg);                         /* Larger gap between toggle pairs */
  flex-wrap: wrap;                              /* Wrap on small screens */
}

.toggle-control {
  display: flex;                                /* Horizontal layout for label + toggle */
  align-items: center;                          /* Vertical center alignment */
  gap: var(--space-xs);                         /* Small gap between label and toggle */
}

/* Edit actions layout */
.edit-actions {
  display: flex;                                /* Horizontal layout for buttons */
  gap: var(--space-md);                         /* Space between save/cancel */
  margin-top: var(--space-lg);                  /* Extra space above action buttons */
  justify-content: center;                      /* Center the buttons */
}

/*--- Mobile Responsive Design ---*/
@media (max-width: 768px) {
  /* Adjust spacing for mobile */
  .scout-editor-container {
    padding: var(--space-md);                   /* Reduced padding for mobile */
  }
  
  .inventory-controls {
    flex-direction: column;                     /* Stack inventory controls on mobile */
    gap: var(--space-sm);                       /* Smaller gap for mobile */
  }
  
  .toggle-controls {
    flex-direction: column;                     /* Stack toggle controls on mobile */
    gap: var(--space-md);                       /* Standard gap for mobile */
  }
}

/* ==========================================
   COMPONENT: SODA SCOUT PAGE
   ========================================== */

/*--- Quick Stats Bar ---*/

/* Horizontal scrolling container for collection statistics */
.stats-bar {
  display: none;                                           /* Hidden by default */                                                  
  flex-shrink: 0;                                          /* Prevents this header from shrinking */
  margin-bottom: var(--space-lg);                          /* Separates stats from filter controls */
  overflow-x: auto;                                        /* Enables horizontal scrolling on narrow screens */
  -webkit-overflow-scrolling: touch;                       /* Smooth scrolling on iOS devices */
}

/* Loading state for statistics */
.stats-loading {
  text-align: center;                                      /* Centers loading spinner */
  color: var(--color-text-secondary);                      /* Muted color for loading state */
  padding: var(--space-md);                                /* Provides vertical space around spinner */
  font-style: italic;                                      /* Distinguishes loading text */
}

/*--- Filter Bar ---*/

/* Container for filter controls and search */
.filter-bar {
  display: flex;                                           /* Arranges filter toggles and search horizontally */
  flex-shrink: 0;                                          /* Prevents compression during overflow */
  flex-wrap: wrap;                                         /* Allows wrapping on very narrow screens */
  gap: var(--space-md);                                    /* Consistent spacing between filter groups */
  align-items: center;                                     /* Vertically aligns filter elements */
  margin-bottom: var(--space-lg);                          /* Separates filters from soda list */
  padding: var(--space-md);                                /* Internal padding for touch comfort */
  background: var(--color-soda-blue-raspberry-light);      /* Subtle background to group filter controls */
  border-radius: 12px;                                     /* Rounded corners for modern appearance */
}

/* Group container for filter toggle buttons */
.filter-toggles {
  display: flex;                                           /* Arranges toggle buttons horizontally */
  gap: var(--space-sm);                                    /* Tight spacing between related toggles */
}

/* Search input container */
.search-container {
  flex: 1;                                                 /* Takes remaining space in filter bar */
  min-width: 200px;                                        /* Ensures adequate input width */
}

/* Search input field */
.search-input {
  width: 100%;                                             /* Full width of container */
  padding: var(--space-sm) var(--space-md);                /* Comfortable padding for text entry */
  border: 2px solid var(--color-border-medium);            /* Consistent border styling */
  border-radius: var(--button-radius);                     /* Matches filter toggle corners */
  font-size: var(--font-size-100);                         /* Standard text size */
  transition: border-color var(--transition-fast);         /* Smooth focus transitions */
}

/* Focus state for search input */
.search-input:focus {
  outline: none;                                           /* Removes default browser outline */
  border-color: var(--color-primary);                      /* Brand color focus indicator */
}

/*--- Collection Utilities ---*/

/* Loading state for collection */
.collection-loading {
  text-align: center;                                      /* Centers loading content */
  padding: var(--space-xl);                                /* Generous padding for loading state */
}

/* Loading message with icon and text */
.loading-message {
  color: var(--color-text-secondary);                      /* Muted color for loading text */
  font-style: italic;                                      /* Distinguishes loading from content */
}

.loading-message i {
  margin-right: var(--space-sm);                           /* Separates spinner from text */
}

/* Empty state when no sodas are tracked */
.empty-state {
  text-align: center;                                      /* Centers empty state content */
  padding: var(--space-xl);                                /* Generous padding around empty state */
}

/* Empty state content container */
.empty-content {
  max-width: 300px;                                        /* Constrains width for readability */
  margin: 0 auto;                                          /* Centers content horizontally */
}

/* Large icon for empty state */
.empty-icon {
  font-size: 3rem;                                         /* Large size for visual impact */
  color: var(--color-primary);                             /* Brand color for consistency */
  margin-bottom: var(--space-lg);                          /* Separates icon from text */
}

/* Empty state heading */
.empty-content h3 {
  margin-bottom: var(--space-md);                          /* Separates heading from description */
  color: var(--color-text);                                /* Standard text color */
}

/* Empty state description */
.empty-content p {
  margin-bottom: var(--space-lg);                          /* Separates description from button */
  color: var(--color-text-secondary);                      /* Muted color for supporting text */
}

/* Browse sodas button in empty state */
.btn-browse {
  display: inline-flex;                                    /* Aligns icon and text */
  align-items: center;                                     /* Vertical alignment */
  gap: var(--space-sm);                                    /* Space between icon and text */
  padding: var(--space-md) var(--space-lg);                /* Comfortable button padding */
  background: var(--color-primary);                        /* Brand color background */
  color: white;                                          /* High contrast text */
  text-decoration: none;                                   /* Removes link underline */
  border-radius: var(--button-radius);                     /* Rounded corners */
  transition: all var(--transition-fast);                  /* Smooth hover transitions */
}

/* Hover state for browse button */
.btn-browse:hover {
  background: var(--color-primary-dark);                   /* Darker shade on hover */
  transform: translateY(-1px);                             /* Subtle lift effect */
  text-decoration: none;                                   /* Maintains no underline */
  color: white;                                         /* Maintains text color */
}

/*--- Soda List ---*/

/* Container for list of soda items */
.sodas-list {
  display: flex;                                           /* Enables flexible layout */
  flex-direction: column;                                  /* Stacks items vertically */
  gap: var(--space-sm);                                    /* Consistent spacing between items */
}

/* No results message */
.no-results {
  text-align: center;                                      /* Centers no results message */
  padding: var(--space-xl);                                /* Generous padding */
  color: var(--color-text-secondary);                      /* Muted color */
  font-style: italic;                                      /* Distinguishes from content */
}

/*--- Floating Action Button ---*/

/* Floating button for adding new sodas */
.fab {
  position: fixed;                                         /* Fixed positioning for consistent location */
  bottom: var(--space-lg);                                 /* Distance from bottom of screen */
  right: var(--space-lg);                                  /* Distance from right edge */
  width: var(--touch-target-lg);                           /* Standard FAB size */
  height: var(--touch-target-lg);                          /* Circular aspect ratio */
  background: var(--color-primary);                        /* Brand color background */
  color: white;                                          /* High contrast icon */
  border: none;                                            /* Removes default button styling */
  border-radius: 50%;                                      /* Perfect circle */
  font-size: 1.25rem;                                      /* Large icon size */
  cursor: pointer;                                         /* Indicates interactivity */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);             /* Strong shadow for floating effect */
  transition: all var(--transition-fast);                  /* Smooth hover transitions */
  z-index: 1000;                                           /* Ensures FAB stays above content */
  display: flex;                                           /* Centers icon within button */
  align-items: center;                                     /* Vertical centering */
  justify-content: center;                                 /* Horizontal centering */
}

/* Hover state for floating action button */
.fab:hover {
  background: var(--color-accent);                         /* Switch to accent color on hover */
  transform: scale(1.1);                                   /* Growth effect for emphasis */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);             /* Enhanced shadow on hover */
}

/* Active state for floating action button */
.fab:active {
  transform: scale(0.95);                                  /* Brief compression on press */
}

/*--- Scout Editor Layout ---*/

/* The main container for the new editor layout */
.scout-editor-layout {
  display: flex;                                           /* Enables flexbox for the main layout */
  flex-direction: column;                                  /* Stacks the rows vertically */
  gap: var(--space-2xl);                                   /* Creates the large gap between the top row and the spinners */
}

/* The top row containing toggles and the tier selector */
.scout-editor-top-row {
  display: flex;                                           /* Arranges items in a row */
  justify-content: space-between;                          /* Pushes items to the edges and center */
  align-items: center;                                     /* Vertically aligns all items */
}

/* The grid area for the labels and spinners */
.scout-editor-spinners-area {
  display: grid;                                           /* Creates a two-column grid */
  grid-template-columns: 1fr 1fr;                          /* Defines two equal-width columns */
  gap: var(--space-lg);                                    /* Sets the space between the two columns */
}

/* A container for a label and its corresponding spinner */
.scout-editor-spinner-group {
  display: flex;                                           /* Enables flexbox */
  flex-direction: column;                                  /* Stacks the label above the spinner */
  align-items: center;                                     /* Horizontally centers the label and spinner */
  gap: var(--space-xs);                                    /* Sets the space between the label and the spinner */
}

/* The larger text label above each spinner */
.scout-editor-spinner-label {
  font-size: var(--font-size-110);                         /* Larger font size for emphasis */
  font-weight: var(--font-weight-medium);                  /* Medium weight for clarity */
  color: var(--color-text-primary);                        /* Primary text color */
}

/*--- Scout Card Display Mode ---*/

/* The main bar inside the card body for the new horizontal layout */
.card-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Container for the stat pods on the left */
.stat-pods {
  display: flex;
  gap: var(--space-sm);
}

/* The "tiny card" for a single statistic */
.stat-pod {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius-sm);
  min-width: 70px;
  text-align: center;
  border: 1px solid var(--pod-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Important for rounded corners on children */
}

/* The colored header section of the pod */
.stat-pod-header {
  background: linear-gradient(to right, var(--pod-header-bg-left), var(--pod-header-bg-right));
  padding: 2px var(--space-xs);
}

/* The text label inside the pod header */
.stat-pod-label {
  font-size: var(--font-size-75);
  font-weight: 600;
  color: var(--card-header-text-color, white);
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}

/* The lighter body section of the pod */
.stat-pod-body {
  background: var(--pod-body-bg);
  padding: var(--space-xs);
}

/* The large number inside the pod body */
.stat-pod-number {
  font-size: var(--font-size-150);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}

/* Container for the toggle icons on the right */
.stat-toggles {
  display: flex;
  gap: var(--space-sm);
}

/* A more specific selector to ensure the icon size is applied */
.card--scouted .stat-toggles .action-icon-img {
  width: var(--touch-target-md);            /* Standard, comfortable touch target size */
  height: var(--touch-target-md);           /* Ensures a perfect circle aspect ratio */
  opacity: 1;
}

/*--- Tablet/Desktop Adjustments ---*/
@media (min-width: 1024px) {
  /* Show stats bar on desktop */
  .stats-bar {
    display: block;
  }

  /* Transforms the single-column list into a two-column grid on desktop */
  .sodas-list {
    display: grid;                            /* Switches from flexbox to grid layout */
    grid-template-columns: repeat(2, 1fr);    /* Creates two equal-width columns */
    gap: var(--space-lg);                     /* Adds a larger gap suitable for a grid layout */
  }
}

/* ==========================================
   COMPONENT: STATS CHIPS
   ========================================== */

/* Horizontal layout for stat chips */
.stats-chips {
  display: none;                                           /* Hides by default - will show when JS loads chips in a horizontal flex row */
  gap: var(--space-sm);                                    /* Consistent spacing between chips */
  padding: var(--space-sm) 0;                              /* Vertical padding for touch targets */
  justify-content: space-between;                          /* Distributes chips evenly */
  min-width: 400px;                                        /* Ensures there is enough space to justify */
}

/* Individual statistic chip using card components */
.card--chip {
  flex-shrink: 0;                                          /* Prevents compression during overflow */
  min-width: 90px;                                         /* Ensures minimum touch target size */
  margin-bottom: 0;                                        /* Removes default card margin for chips */
  box-shadow: none;                                        /* Removes default box shadow for chips */
  border: 1px solid rgba(0,0,0,0.1);                       /* Adds a subtle border for definition */
}

/* Chip header styling */
.card-header--chip {
  padding: var(--space-xs) var(--space-sm);                /* Compact padding for chip headers */
  text-align: center;                                      /* Centers header content */
}

/* Chip header title */
.card-header--chip h4 {
  margin: 0;                                               /* Removes default margins */
  font-family: var(--font-accent);                         /* Uses the clean accent font */
  font-size: var(--font-size-75);                          /* Smaller font for chip headers */
  font-weight: 600;                                        /* Medium bold for clarity */
  text-transform: uppercase;                               /* Uppercase for style */
  color: white;                                            /* White text for contrast on gradient */
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);                /* Subtle text shadow for readability */
}

/* Chip body styling */
.card-body--chip {
  padding: var(--space-sm) var(--space-xs);                /* Compact padding for chip body */
  text-align: center;                                      /* Centers body content */
}

/* Stat number display within chip */
.stat-number--chip {
  font-family: var(--font-heading);                        /* Uses the bold, fun heading font */
  font-weight: bold;                                       /* Bold emphasis for numeric values */
  font-size: var(--font-size-175);                         /* Large but not overwhelming */
  line-height: 1;                                          /* Tight line height for compactness */
  margin: 0;                                               /* Removes default margins */
  color: var(--color-text-primary);                        /* Primary text color */
}

/* ==========================================
   COMPONENT: SCOUTED CARDS (TEMPLATE-BASED)
   ========================================== */

/*--- Template-Based Mode Switching ---*/

/* Display mode container (visible by default) */
.card-content {
  /* No special styling needed - just the container */
}

/* Edit mode container (hidden by default) */
.card-edit-controls {
  display: none;                                  /* Hidden by default */
}

/* When card is in editing mode, hide display and show edit */
.card--editing .card-content {
  display: none !important;                       /* Hide display mode when editing */
}

.card--editing .card-edit-controls {
  display: block !important;                      /* Show edit controls when editing */
}

/*--- Scouted Card Base Layout ---*/

/* Mobile-first soda collection card for personal tracking display mode */
.card--scouted {
  margin-bottom: var(--space-md);                 /* Tighter spacing for mobile list (1rem) */
  border-radius: var(--card-radius);              /* Standard card rounding */
  overflow: hidden;                               /* Ensures proper border radius application */
  transition: all var(--transition-fast);         /* Smooth press animations */
  cursor: pointer;                                /* Indicates entire card is interactive */
  position: relative;                             /* For absolute positioned edit hint */
  
  /* Inherit existing card gradient system - no new CSS needed */
}

/* Press state: removes shadow and translates card */
.card--scouted:active {
  box-shadow: none;                               /* Remove shadow to indicate press */
  transform: translate(2px, 2px);                 /* Move down/right 2px on press */
}

/* Disable press state when card is in editing mode */
.card--editing:active {
  transform: none !important;                     /* Prevent card movement on press */
  box-shadow: var(--card-shadow) !important;      /* Keep normal shadow */
}

/* Ensure editing mode has different cursor */
.card--editing {
  cursor: default !important;                     /* No pointer cursor in edit mode */
}

/*--- Header Layout ---*/

/* Header contains soda name and tier pill in one line */
.card--scouted .card-header {
  display: flex;                                           /* Flexbox for name + tier pill layout */
  justify-content: space-between;                          /* Space between name and tier pill */
  align-items: center;                                     /* Vertical center alignment */
  padding: var(--space-md);                                /* Mobile-friendly header padding */
  text-align: left;                                        /* Left-align text content */
}

/*
  Fix for the content wrapper inside a scouted card.
  This ensures the card's content wrapper expands to fill the space
  given to it by a grid layout, allowing the card body's gradient to fill the card.
*/
.card--scouted .card-content {
  flex-grow: 1;                                             /* Allows the wrapper to fill the extra height from the grid */
  display: flex;                                            /* Enables a flex context for its children (header and body) */
  flex-direction: column;                                   /* Stacks the card-header and card-body vertically */
}

/* Soda name and icon container */
.card--scouted .soda-info {
  flex: 1;                                                  /* Take up available space */
  min-width: 0;                                             /* Allow text truncation */
}

/* Soda name styling */
.card--scouted .soda-name {
  margin: 0;                                                /* Remove default margins */
  font-size: var(--font-size-125);                          /* Appropriately sized for mobile */
  font-weight: var(--font-weight-semibold);                 /* Semi-bold for prominence */
  color: var(--card-header-text-color, white);           /* Use provided header color or White text on gradient header */
  text-decoration: none;                                    /* Remove link underline */
}

/* Link styling within soda name */
.card--scouted .soda-name a {
  color: inherit;                                           /* Inherit color from parent */
  text-decoration: none;                                    /* No underline */
}

/* Tier pill display area */
.card--scouted .tier-pill-display {
  flex-shrink: 0;                                           /* Don't shrink tier pill */
  margin-left: var(--space-sm);                             /* Small gap from name */
}

/*--- Body Layout ---*/

/* Card body contains inventory info and action icons */
.card--scouted .card-body {
  padding: var(--space-md);                                /* Consistent padding with header */
  display: flex;                                          /* Flexbox for organized layout */
  flex-direction: column;                                 /* Stack inventory and actions vertically */
  gap: var(--space-sm);                                   /* Small gap between rows */
}

/*--- Inventory Information Row ---*/

/* Inventory status line with emoji icons */
.card--scouted .inventory-info {
  display: flex;                                          /* Horizontal layout for inventory items */
  gap: var(--space-md);                                   /* Space between inventory elements */
  align-items: center;                                    /* Vertical center alignment */
  font-size: var(--font-size-100);                        /* Standard body text size */
  color: var(--color-text-primary);                      /* Primary text color */
  font-weight: var(--font-weight-medium);                 /* Medium weight for readability */
}

/* Individual inventory item styling */
.card--scouted .inventory-item {
  display: flex;                                          /* Horizontal layout for icon + text */
  align-items: center;                                    /* Vertical center alignment */
  gap: var(--space-xs);                                   /* Small gap between emoji and text */
}

/* Inventory icon styling */
.card--scouted .inventory-icon {
  /* Style for inventory emoji icons */
}

/* Inventory count styling */
.card--scouted .inventory-count {
  /* Style for inventory numbers */
}

/*--- Action Icons Row ---*/

/* Container for action icons */
.card--scouted .action-icons {
  display: flex;                                          /* Horizontal layout for icons */
  gap: var(--space-sm);                                   /* Small gap between icons */
  align-items: center;                                    /* Vertical center alignment */
}

/* Individual action icon container */
.card--scouted .action-icon {
  position: relative;                                     /* For icon state switching */
}

/* Action icon images */
.card--scouted .action-icon-img {
  width: 20px;                                           /* Consistent icon size */
  height: 20px;                                          /* Square icons */
  opacity: 0.8;                                          /* Slightly transparent for subtlety */
}

/* Default state: show off icons, hide on icons */
.action-icon .action-icon-img {
  display: block;                                         /* Default state */
}

/* Favorite icon states */
.favorite-status .favorite-icon-on {
  display: none;                                          /* Hidden by default */
}

/* Wanted icon states */
.wanted-status .wanted-icon-on {
  display: none;                                          /* Hidden by default */
}

/* ==============================================
   COMPONENT: TEASER & LOCKED CONTENT
   ============================================== */

/* The main call-to-action card for guest users */
.card--cta .card-body {
  gap: var(--space-sm);                     /* Adds space between the icon, title, text, and buttons */
}

/* The large icon displayed inside the call-to-action card */
.cta-icon {
  width: 60px;                              /* Defines a fixed width for the icon container */
  height: 60px;                             /* Defines a fixed height for the icon container */
  background: var(--color-white-overlay-strong); /* Sets a strong white overlay background */
  border-radius: 50%;                       /* Creates a circular shape for the icon container */
  display: flex;                            /* Enables flexbox for centering the icon */
  align-items: center;                      /* Vertically centers the icon */
  justify-content: center;                  /* Horizontally centers the icon */
  font-size: var(--font-size-200);          /* Sets a large font size for the icon itself */
  color: var(--color-text-primary);         /* Uses the primary text color for the icon */
  margin-bottom: var(--space-sm);           /* Adds a small space below the icon */
}

/* Grid container for displaying locked content placeholders */
.locked-content-grid {
  display: grid;                            /* Enables CSS Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid with minimum 250px column width */
  gap: var(--space-lg);                     /* Sets a large gap between grid items */
}

/* A placeholder card for content that requires a paid subscription to view */
.card--locked {
  background: var(--color-bg-subtle);       /* Uses a subtle background color */
  border: 1px dashed var(--color-border-medium); /* Creates a dashed border to indicate locked content */
  text-align: center;                       /* Centers all content within the card */
  color: var(--color-text-secondary);       /* Uses a muted text color */
  box-shadow: none;                         /* Removes any default box shadow for a flatter appearance */
}

/* The large icon displayed in a locked content card */
.locked-icon {
  font-size: var(--font-size-250);          /* Sets a large font size for the icon */
  opacity: 0.5;                             /* Makes the icon semi-transparent */
  margin-bottom: var(--space-md);           /* Adds space below the icon */
  color: var(--color-border-dark);          /* Uses a dark border color for the icon */
}

/* The title text displayed in a locked content card */
.locked-title {
  color: var(--color-text-primary);         /* Uses the primary text color */
  margin-bottom: var(--space-xs);           /* Adds a small space below the title */
}

/* The description text displayed in a locked content card */
.locked-description {
  font-size: var(--font-size-90);           /* Sets a smaller font size for the description */
  line-height: 1.5;                         /* Improves readability with a comfortable line height */
  margin: 0;                                /* Removes any default margins */
}

/* ==============================================
   COMPONENT: NARRATIVE INFO CARD
   ============================================== */

/* The card body specifically for the narrative layout, centering its content */
.narrative-card-body {
  text-align: center;                       /* Centers all inline and text content within the body */
}

/* The 'hero' area for the tier pill, providing spacing around it */
.narrative-hero {
  margin-bottom: var(--space-lg);           /* Adds significant space below the hero section */
}

/* The main paragraph of descriptive text within the narrative card */
.narrative-text {
  font-size: var(--font-size-110);          /* Sets a slightly larger font size for the text */
  line-height: 1.6;                         /* Improves readability with a comfortable line height */
  color: var(--color-text-primary);         /* Uses the primary text color */
  margin: 0;                                /* Removes any default margins */
}

/* Styles for strong-tagged text within the narrative-text */
.narrative-text strong {
  font-size: var(--font-size-125);          /* Makes strong text slightly larger for emphasis */
}

/* ==============================================
   COMPONENT: ADMIN & PAGE CONTROLS
   ============================================== */

/* --- Global Admin View Switcher (Desktop Header) --- */
.admin-view-switcher-global {
  display: none;                                /* Hidden on mobile by default */
  position: absolute;                           /* Lifts the switcher out of the normal document flow */
  align-items: center;                          /* Vertically centers the content */
  gap: var(--space-sm);                         /* Space between the label and the pills */
  z-index: 1000;                                /* Ensures it sits above other header content */
}

/* --- Admin View Switcher (Mobile Nav Panel) --- */
.admin-view-switcher-mobile {
  display: flex;                                /* Lays out items */
  flex-direction: column;                       /* Stacks items vertically */
  gap: var(--space-xs);                         /* Small gap between switcher items */
}
.admin-view-switcher-mobile .admin-view-switcher-label {
    color: var(--color-white-overlay-strong);   /* Lighter text color for the nav panel */
    margin-bottom: var(--space-xs);             /* Space below the label */
}
/* User's improved styles for visibility */
.admin-view-switcher-mobile .pill--admin-tool {
    background: rgba(0, 0, 0, 0.2);           /* Subtle dark background for non-active pills */
    color: white;
}
.admin-view-switcher-mobile .pill--admin-tool:hover {
    transform: none;                            /* Disable the slide transform from nav-panel-item */
}

/* --- Base Pill & Label Styles (Shared) --- */
.admin-view-switcher-label {
  font-size: var(--font-size-75);           /* Sets a smaller font size for the label */
  font-weight: 500;                         /* Sets a medium font weight */
  color: var(--color-text-secondary);       /* Uses a muted text color */
}

.pill--admin-tool {
  background-color: var(--color-bg-subtle); /* Uses a subtle background color */
  border: 1px solid var(--color-border-medium); /* Adds a medium border */
  color: var(--color-text-secondary);       /* Uses a muted text color */
  text-decoration: none;                    /* Removes any text decoration */
  transition: all var(--transition-fast);   /* Smooth transition for all properties */
}
.pill--admin-tool:hover {
  background-color: var(--color-brand-tangerine); /* Changes background to tangerine on hover */
  color: white;                             /* Changes text to white on hover */
  text-decoration: none;                    /* Ensures no underline appears on hover */
}

.pill--switcher-active {
  background-color: var(--color-brand-tangerine) !important; /* Sets background to brand tangerine */
  color: white !important;                  /* Sets text to white */
  text-decoration: none;                    /* Removes text decoration */
  font-weight: bold;                        /* Makes the text bold */
  border-color: var(--color-brand-tangerine); /* Sets border to brand tangerine */
}
.pill--switcher-active:hover {
  opacity: 0.9;                             /* Slightly reduces opacity on hover */
  text-decoration: none;                    /* Ensures no underline on hover */
}


/* --- General Page Controls (Back button etc.) --- */
.page-controls {
  display: flex;                            /* Enables flexible box layout */
  flex-direction: column;                   /* Mobile-first: stacks controls vertically */
  align-items: flex-start;                  /* Aligns items (like back-nav) to the left */
  gap: var(--space-md);                     /* Provides consistent spacing between controls */
  margin-bottom: var(--space-md);           /* Adds space below the control area */
}

.back-nav-container {
  display: block;                           /* Ensure back nav is visible */
}

/* --- Desktop Adjustments (1024px and up) --- */
@media (min-width: 1024px) {
  /* Show the header switcher and hide the nav panel one */
  .admin-view-switcher-global {
    display: flex;
    top: 6.5rem;                              /* Your preferred vertical position */
    right: 1.5rem;                            /* Your preferred horizontal position */
  }

  .nav-panel-section--admin {
    display: none;
  }

  /* Adjusts page controls layout for desktop screens */
  .page-controls {
    flex-direction: row;                    /* Arranges controls side-by-side on desktop */
    justify-content: space-between;         /* Pushes items to opposite ends of the container */
    align-items: center;                    /* Vertically centers items */
  }
}

/* ==============================================
   COMPONENT: SODA LIST PAGE
   ============================================== */

/* This is the main blue card ("The Lineup") that holds the soda list content */
.soda-list-page-card {
  flex-grow: 1;                             /* Allows the card to grow and fill available space */
  display: flex;                            /* Enables flexbox for its internal content */
  flex-direction: column;                   /* Stacks internal content vertically */
  margin-bottom: 0;                         /* Overrides default card margin to prevent extra space */
}

/* The body of the main blue card, which holds the filters and the scrolling list */
.soda-list-page-card > .card-body {
  flex-grow: 1;                             /* Allows the card body to grow and fill vertical space */
  display: flex;                            /* Enables flexbox for internal layout */
  flex-direction: column;                   /* Stacks filters and the scroll container vertically */
  min-height: 0;                            /* Flexbox safety: ensures proper height calculation for scrolling */
}

/* Unified class for any scrollable list of cards */
.card-scroll-list {
  flex-grow: 1;                             /* Allows the container to grow and take all available vertical space */
  overflow-y: auto;                         /* Enables vertical scrolling if content overflows */
  min-height: 0;                            /* Flexbox safety: ensures proper height calculation for scrolling */
  padding: var(--space-xs);                 /* Provides internal padding around the scrollable content */
}

/* --- Grid container for the mobile-first pages --- */
.card-scroll-list--grid {
  display: flex;                              /* Mobile-first: stacks cards in a single column by default */
  flex-direction: column;                     /* Stacks cards vertically */
  gap: var(--space-sm);                       /* Consistent spacing between items */
}

/* The filter bar should not shrink, ensuring it always retains its full height */
.filter-bar {
  flex-shrink: 0;                           /* Prevents the filter bar from shrinking when space is limited */
}

/* --- Desktop Adjustments --- */
@media (min-width: 1024px) {
  /* Transforms the single-column list into a two-column grid on desktop */
  .card-scroll-list--grid {
    display: grid;                                /* Switches from a flex column to a grid layout */
    grid-template-columns: repeat(2, 1fr);        /* Creates two equal-width columns */
    row-gap: var(--space-sm);                     /* Tighter vertical spacing between cards */
    column-gap: var(--space-lg);                  /* Maintain wider horizontal spacing between columns */
    padding: var(--space-md);                     /* Provides more balanced padding for a grid */
    align-content: start;                         /* Aligns grid rows to the top, preventing single items from stretching */
  }
}

/* ==============================================
   COMPONENT: SODA CARD (Individual list item)
   ============================================== */

/* Styles for an individual soda card displayed in the list */
.soda-list-card {
  position: relative;                       /* CRITICAL FIX: Establishes positioning context for child elements */
  display: flex;                            /* Enables flexible box layout for horizontal alignment of content */
  align-items: center;                      /* Vertically centers items within the card's main row */
  gap: var(--space-md);                     /* Provides consistent spacing between main card elements */
  padding: var(--space-sm);                 /* Internal padding for comfortable spacing around content */
  border-radius: var(--card-radius-sm);     /* Applies small rounded corners to the card's overall shape */
  margin-bottom: var(--space-sm);           /* Adds consistent spacing below each card in a list */
  text-decoration: none;                    /* Removes default link underlines for a cleaner aesthetic */
  color: var(--color-text-primary);         /* Sets the default text color for content within the card */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast); /* Smooth transitions for interactive effects */
}
.soda-list-card:hover {
  transform: translateY(-2px);              /* Lifts the card slightly on hover for visual feedback */
  box-shadow: var(--card-shadow);           /* Adds a subtle shadow for elevation on hover */
  text-decoration: none;                    /* Ensures no underline appears when hovered */
  color: var(--color-text-primary);         /* Maintains the primary text color on hover */
}

/* The lock icon container, positioned over the border */
.soda-card-lock-icon {
  position: absolute;                       /* Positions the icon relative to its parent container */
  top: 50%;                                 /* Aligns the icon's top edge to the vertical midpoint of its parent */
  left: -15px;                              /* Positions icon inside the 21px border */
  transform: translateY(-50%);              /* Vertically centers the icon precisely */
  color: white;                           /* Sets the icon color to white for contrast */
  font-size: var(--font-size-75);           /* Sets a small font size for the lock icon */
  opacity: 0.7;                             /* Makes the icon semi-transparent for a subtle look */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Adds shadow for visibility */
  transition: opacity var(--transition-fast);
}

/* Modifier to visually dull the card when its content is locked (e.g., requires subscription) */
.soda-list-card--locked {
  opacity: 0.8;                             /* Reduces the card's opacity to indicate it's not fully accessible */
  transition: opacity var(--transition-fast); /* Smooth transition for opacity changes */
}

/* Defines the hover effect for a locked soda card */
.soda-list-card--locked:hover {
  opacity: 1;                               /* Makes the card fully opaque on hover for a clearer view */
}
.soda-list-card--locked:hover .soda-card-lock-icon {
    opacity: 1;                             /* Make lock icon fully visible on hover */
}

/* Main content area within the soda card, designed to expand and fill available space */
.soda-card-content {
  flex-grow: 1;                             /* Allows the main content block to take up available horizontal space */
}

/* Header section of a soda card, typically containing the soda name, pills, and actions */
.soda-card-header {
  display: grid;                            /* Enables CSS Grid for precise column control and alignment */
  align-items: center;                      /* Vertically centers all grid items within the header row */
  gap: var(--space-sm);                     /* Consistent spacing between grid items (columns) */
  /* Default (non-admin) is a 2-column layout that pushes pills to the right */
  grid-template-columns: 1fr auto;          /* Column 1 (Name) grows, Column 2 (Pills) is auto-sized for non-admins */
}

/* Container for the pills (e.g., type, format) displayed in the soda card header */
.soda-card-pills-container {
  display: flex;                            /* Enables flexible box layout for horizontal pill arrangement */
  gap: var(--space-sm);                     /* Provides consistent small spacing between individual pills */
}

/* The name of the soda displayed prominently in the card header */
.soda-card-name {
  font-size: var(--font-size-125);          /* Sets a medium-large font size for visual emphasis */
  font-weight: var(--font-weight-semibold); /* Applies a semibold font weight for clear readability */
  white-space: nowrap;                      /* Prevents the soda name from wrapping to multiple lines */
  overflow: hidden;                         /* Hides any portion of the text that extends beyond its container */
  text-overflow: ellipsis;                  /* Displays an ellipsis (...) for truncated names */
}

/* Narrative or descriptive text associated with the soda card, providing brief context */
.soda-card-narrative {
  font-size: var(--font-size-90);           /* Sets a slightly smaller font size for supplementary text */
  color: var(--color-text-secondary);       /* Uses a muted text color for less visual prominence */
  margin: var(--space-xs) 0 0 0;            /* Adds a small top margin to separate it from content above */
}

/* Container for action buttons associated with the soda card (e.g., edit, view) */
.soda-card-actions {
  display: flex;                            /* Enables flexible box layout for arranging buttons horizontally */
  align-items: center;                      /* Vertically centers the buttons within the container */
  gap: var(--space-xs);                     /* Provides tight spacing between individual action buttons */
}

/* Normalizes the size of all buttons inside the container */
.soda-card-actions > * {
  display: flex; 
  align-items: center;
  justify-content: center;
  width: var(--touch-target-md);
  height: var(--touch-target-md);
}

/* Adjusts the size of action buttons on tablets and desktops */
@media (min-width: 768px) {
  /* Oddly, a smaller size button is better on desktop due to two column mode */
  .soda-card-actions > * {
    width: var(--touch-target-sm);      /* Use a smaller touch target */
    height: var(--touch-target-sm);     /* The target should be square */
  }
}

/* --- Admin-only override for the grid layout within the soda list card header --- */
.soda-list-card--admin-view .soda-card-header {
  /* Changes to a 3-column layout that specifically centers the pills and aligns actions */
  grid-template-columns: 1fr auto 1fr;      /* Col 1 (Name) and Col 3 (Actions) are flexible, Col 2 (Pills) is auto-sized */
}

/* Styles to horizontally center the pills container within its grid column in admin view */
.soda-list-card--admin-view .soda-card-header .soda-card-pills-container {
  justify-self: center;                     /* Horizontally centers the pills within the middle grid column */
}

/* Styles to align the action buttons to the far right within their grid column in admin view */
.soda-list-card--admin-view .soda-card-header .soda-card-actions {
  justify-self: end;                        /* Aligns the action buttons to the far right of their grid column */
}

.soda-card-actions .toggle-icon {
  width: var(--icon-size-lg); /* 32px */
  height: var(--icon-size-lg); /* 32px */
}

/* =====================================================
   COMPONENT: USER MANAGEMENT
   ===================================================== */

/* --- User Management Form --- */

/* The form container for adding or editing a user */
.user-form {
  padding-top: var(--space-md);               /* Adds space above the form content */
}

/* A container for displaying the user's avatar in the edit form */
.user-form-avatar-display {
  display: flex;                                /* Enables flexbox for centering */
  justify-content: center;                      /* Horizontally centers the avatar */
  margin-bottom: var(--space-md);               /* Adds space below the avatar */
}

/* The avatar image itself */
.user-form-avatar-img {
  width: var(--avatar-size-lg);                 /* Sets a fixed width for the avatar */
  height: var(--avatar-size-lg);                /* Sets a fixed height for a circular aspect */
  border-radius: 50%;                           /* Makes the image a perfect circle */
  object-fit: cover;                            /* Ensures the image covers the area without distortion */
  border: 3px solid var(--color-border-light);  /* Adds a subtle border around the avatar */
  box-shadow: var(--card-shadow);               /* Adds a shadow to lift the avatar off the page */
}

/* The initials placeholder for users without an avatar in the form */
.user-form-initials {
  width: var(--avatar-size-lg);                 /* Matches the avatar image size */
  height: var(--avatar-size-lg);                /* Matches the avatar image size */
  border-radius: 50%;                           /* Circular shape */
  background: var(--color-primary);             /* Uses the primary brand color for the background */
  color: white;                               /* White text for high contrast */
  display: flex;                                /* Enables flexbox for centering */
  align-items: center;                          /* Vertically centers the initials */
  justify-content: center;                      /* Horizontally centers the initials */
  font-size: var(--font-size-250);              /* Larger font for the larger circle */
  font-weight: var(--font-weight-medium);       /* Medium weight for clarity */
  border: 3px solid var(--color-border-light);  /* Matches the avatar image border */
  box-shadow: var(--card-shadow);               /* Matches the avatar image shadow */
}

/* A muted helper text, often used for read-only fields or instructions */
.form-helper-text {
  font-size: var(--font-size-90);               /* Smaller font size for helper text */
  color: var(--color-text-secondary);           /* Muted color for less emphasis */
  display: block;                               /* Ensures it appears on its own line */
  margin-top: var(--space-2xs);                 /* Adds a small space above the text */
}

/* --- User Grid Cell Renderers --- */

/* Container for user info in a grid cell (e.g., avatar + email) */
.user-grid-cell {
  display: flex;                                /* Enables flexbox for horizontal alignment */
  align-items: center;                          /* Vertically centers the content */
  gap: var(--space-sm);                         /* Adds a small gap between avatar and text */
  height: 100%;                                 /* Ensures the cell fills its vertical space */
}

/* Small avatar for display within the AG Grid */
.user-grid-avatar {
  width: var(--avatar-size-sm);                 /* A small, clear avatar size */
  height: var(--avatar-size-sm);                /* Maintains a circular aspect */
  border-radius: 50%;                           /* Ensures the avatar is circular */
  object-fit: cover;                            /* Prevents image distortion */
  flex-shrink: 0;                               /* Prevents the avatar from being squashed */
}

/* Initials-based placeholder for users without an avatar */
.user-grid-initials {
  width: var(--avatar-size-sm);                 /* Matches the avatar size */
  height: var(--avatar-size-sm);                /* Matches the avatar size */
  border-radius: 50%;                           /* Circular shape */
  background: var(--color-primary);             /* Uses the primary brand color for the background */
  color: white;                               /* White text for high contrast */
  display: flex;                                /* Enables flexbox for centering */
  align-items: center;                          /* Vertically centers the initials */
  justify-content: center;                      /* Horizontally centers the initials */
  font-size: var(--font-size-90);               /* A legible font size for the initials */
  font-weight: var(--font-weight-medium);       /* Medium weight for clarity */
  flex-shrink: 0;                               /* Prevents shrinking */
}

/* Container for the user's text info (email/name) in the grid */
.user-grid-info {
  display: flex;                                /* Enables flexbox */
  flex-direction: column;                       /* Stacks the email and display name vertically */
}

/* User's email in the grid */
.user-grid-email {
  font-weight: var(--font-weight-medium);       /* Medium weight for the primary identifier */
}

/* User's display name in the grid */
.user-grid-display-name {
  font-size: var(--font-size-90);               /* Smaller font size for the secondary identifier */
  color: var(--color-text-secondary);           /* Muted color for less emphasis */
}

/* --- Status and Role Pills/Badges in Grid --- */

/* Base class for a pill-style status indicator */
.status-pill {
  padding: var(--space-2xs) var(--space-sm);    /* Small padding for a compact pill */
  border-radius: 12px;                          /* Pill-shaped border radius */
  font-size: var(--font-size-75);               /* Very small font size */
  font-weight: var(--font-weight-semibold);     /* Semibold for emphasis */
  text-transform: uppercase;                    /* Uppercase for a badge-like feel */
  letter-spacing: 0.5px;                        /* Adds a bit of space between letters */
}

/* Modifier for an 'Active' user status pill */
.status-pill--active {
  background-color: var(--color-soda-lime);     /* Green background */
  color: white;                               /* White text for contrast */
}

/* Modifier for an 'Inactive' user status pill */
.status-pill--inactive {
  background-color: var(--color-text-primary);   /* Dark grey/blue background */
  color: white;                                /* White text for contrast */
}

/* Role-specific status pill modifiers */
.status-pill--admin {
  background-color: var(--color-brand-red);       /* Red for admin role */
  color: white;                                 /* White text for contrast */
}

.status-pill--subscriber {
  background-color: var(--color-soda-orange);     /* Orange for subscriber role */
  color: white;                                 /* White text for contrast */
}

.status-pill--free {
  background-color: var(--color-soda-lemon);      /* Yellow for free users */
  color: var(--color-text-primary);               /* Dark text for better contrast on light background */
}

/* --- Row Styling --- */

/* Modifier for an entire row in AG Grid to indicate an inactive user */
.ag-row--inactive {
  background-color: #f8f8f8 !important;       /* A very light grey to de-emphasize the row */
  color: var(--color-text-muted);               /* Muted text color for all cells in the row */
}
.ag-row--inactive:hover {
  background-color: #f0f0f0 !important;       /* A slightly darker grey on hover */
}

/* ==============================================
   COMPONENT: SODA OF THE WEEK FEATURE
   ============================================== */

/* Container for the featured soda of the week section */
.sotw-feature {
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* Title for the soda of the week section */
.sotw-title {
  font-size: var(--font-size-125);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Card container for the featured soda */
.sotw-card {
  display:none;
  background: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--card-radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Default colors - will be overridden by JavaScript */
  background: linear-gradient(135deg, #CCCCCC, #DDDDDD);
}

/* Name of the featured soda */
.sotw-name {
  font-size: var(--font-size-150);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
  /* Color will be set by JavaScript for contrast */
}

/* Flavor of the featured soda */
.sotw-flavor {
  font-size: var(--font-size-100);
  margin: 0;
  opacity: 0.8;
  /* Color will be set by JavaScript for contrast */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sotw-card {
    padding: var(--space-sm);
  }
  
  .sotw-name {
    font-size: var(--font-size-125);
  }
}

/* ==============================================
   COMPONENT: RESEARCH EDITOR PREVIEW
   ============================================== */

/* --- 1. The Toggle Button --- */

/* Base state for the preview toggle button (when preview is OFF) */
.preview-toggle-btn {
  opacity: 0.5;                                   /* Set the default "off" state opacity */
  transition: opacity 0.2s ease;                  /* Provides a smooth fade for all state changes */
}

/* Hover state for the button */
.preview-toggle-btn:hover {
  opacity: 0.75;                                  /* The opacity for the hover state */
}

/* Active state for the button (when preview is ON) */
.preview-toggle-btn.active {
  opacity: 1;                                     /* The full opacity "on" state */
}

/* --- 2. The Two-Pane Layout --- */

/* This rule activates the two-column grid on the main scrolling container
   when JavaScript adds the .is-preview-active class. Desktop only */
@media (min-width: 1024px) {
  .card-scroll-list.is-preview-active {
    display: grid;                                /* Activates CSS Grid */
    grid-template-columns: 1fr 1fr;               /* Creates two equal-width columns */
    gap: var(--space-lg);                         /* Adds space between the editor and preview */
    align-items: start;                           /* Aligns the tops of the two columns */
  }
}

/* --- 3. The Preview Panel --- */

/* The container for the rendered HTML preview */
.research-preview-panel {
  display: none;                                  /* Hidden by default */
  height: 100%;                                   /* Fills the height of the grid row */
  padding: var(--space-lg);                       /* Internal padding */
  background: var(--color-bg-subtle);             /* A light background to differentiate it */
  border-radius: var(--card-radius);              /* Consistent rounded corners */
  border: 1px solid var(--color-border-light);    /* A subtle border */
  overflow-y: auto;                               /* Makes the panel scrollable if content is tall */
}

/* This rule shows the preview panel when the layout is active */
.is-preview-active .research-preview-panel {
  display: block;                                 /* Makes the preview panel visible */
}

/* Ensure the preview content matches the final report's styling */
.research-preview-panel .research-content {
  background: none;                               /* Override the tinted background from the report page */
  box-shadow: none;                               /* Remove the shadow from the report page */
  border-radius: 0;                               /* Remove the border-radius from the report page */
}

/* Hides the preview toggle button on screens where the two-column layout is not active */
@media (max-width: 1023px) {
  .preview-toggle-btn {
    display: none;
  }
}

/* --- Independent Scrolling for Two-Pane Layout --- */

/* This targets the two-column grid layout only on larger screens */
@media (min-width: 1024px) {
  /* When preview is active, the main list becomes a height-constrained grid container */
  .card-scroll-list.is-preview-active {
    height: 100%;                           /* Ensure the grid fills the parent container's height */
    overflow: hidden;                       /* Prevent the grid container itself from scrolling */
  }

  /* Make the direct children (our columns) of the active grid scroll independently */
  .card-scroll-list.is-preview-active > .editor-column,
  .card-scroll-list.is-preview-active > .preview-column {
    height: 100%;                           /* Make columns fill the full height of their grid cell */
    overflow-y: auto;                       /* Enable vertical scrolling ONLY within each column */
  }
}


/* ==============================================
   COMPONENT: BANNER HEADER CARDS
   ============================================== */

/* Container for the banner image content */
.banner-overlay-content {
  width: 100%;                          /* Ensures the container fills the full width of its parent */
  height: var(--card-image-height-lg);  /* Use the large image height */
  background-size: contain;             /* Scales the background image to fit within the container */
  background-position: center;          /* Centers the background image within the container */
  background-repeat: no-repeat;         /* Prevents the background image from repeating */
  position: relative;                   /* Establishes a positioning context for any absolutely positioned children */
}

/* Modifier for a card header, used specifically within a banner card */
.card-header--banner {
  padding: 0;                           /* Removes all padding from the banner header to create a flush layout */
}

/* ============================================================================ 
   COMPONENT: SWEETENERS 
   ============================================================================ */

/* Sweetener Display (for view templates) */
.sweetener-display {
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

/* Sweetener Container */
.sweetener-container {
    border: 1px solid var(--color-border-light);
    border-radius: var(--input-radius);
    padding: var(--space-md);
    background: var(--card-container-color);
}

/* Sweetener List */
.sweetener-list {
    min-height: 60px;
    border-radius: var(--input-radius);
}

/* ==============================================
   COMPONENT: ITEM DRAG HANDLE
   ============================================== */

/* A reusable drag handle for sortable list items */
.item-drag-handle {
  position: absolute;                           /* Positions the handle relative to its parent container */
  left: var(--space-md);                        /* Positions the handle from the left edge */
  top: 50%;                                     /* Aligns the top of the handle to the vertical center of its parent */
  transform: translateY(-50%);                  /* Shifts the handle up by half its height for perfect vertical centering */
  width: 20px;                                  /* Sets a fixed width for the handle's visual space */
  height: 40px;                                 /* Sets a fixed height for a larger click/touch target */
  display: flex;                                /* Enables flexbox layout for aligning icon/content inside */
  align-items: center;                          /* Centers the inner icon/content vertically */
  justify-content: center;                      /* Centers the inner icon/content horizontally */
  color: var(--card-container-item-handle, var(--color-text-secondary)); /* Sets the color, with a fallback */
  cursor: grab;                                 /* Changes the cursor to indicate the item is draggable */
  border-radius: var(--space-2xs);              /* Applies a small border radius to the corners */
  transition: all 0.2s ease;                    /* Smoothly animates property changes on hover and active states */
  z-index: 10;                                  /* Ensures the handle is above other elements in the list item */
  user-select: none;                            /* Prevent text selection */
  -webkit-user-select: none;                    /* Prevent text selection in Safari */
  -moz-user-select: none;                       /* Prevent text selection in Firefox */
  -ms-user-select: none;                        /* Prevent text selection in Internet Explorer */
  pointer-events: auto;                         /* Ensure it can be clicked */
}

/* Defines the hover state for the drag handle */
.item-drag-handle:hover {
  color: var(--color-primary);                  /* Changes the handle's color on hover */
  background-color: var(--color-bg-subtle);   /* Adds a subtle background color on hover */
  transform: translateY(-50%) scale(1.1);       /* Slightly increases the size of the handle on hover */
}

/* Defines the active state (while being clicked/dragged) for the drag handle */
.item-drag-handle:active {
  cursor: grabbing;                             /* Changes the cursor to indicate the item is being grabbed */
  color: var(--color-primary);                  /* Keeps the color the same while being grabbed */
  transform: translateY(-50%) scale(1.2);       /* Slightly larger when active */
}

/* Utility class to provide consistent left padding for a draggable item */
.has-drag-handle {
  position: relative;                                     /* Establishes a positioning context for the drag handle */
  padding-left: calc(var(--space-md) + 40px) !important;  /* Adds space for the drag handle on the left, overriding other padding rules */
}

/* --- Responsiveness for mobile devices --- */

/* Adjusts the drag handle size for screens 768px wide or smaller */
@media (max-width: 768px) {
  .item-drag-handle {
    width: 24px;                  /* Increases the width for easier touch interaction */
    height: 44px;                 /* Increases the height for easier touch interaction */
  }

  /* Larger active state for touch */
  .item-drag-handle:active {
    transform: translateY(-50%) scale(1.3); /* Even larger on mobile */
  }
}

/* ============================================================================ */
/* BASE DRAGGABLE CARD STYLES */
/* ============================================================================ */

/* Base draggable item */
.draggable-item {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--card-container-item-color, var(--color-bg-subtle));
    border: 1px solid var(--color-border-light);
    border-radius: var(--input-radius);
    padding: var(--space-md);
    padding-left: calc(var(--space-md) + 40px); /* Space for drag handle */
    margin-bottom: var(--space-sm);
    transition: all 0.2s ease;
}

.draggable-item {
    display: flex;
    align-items: center;
    background: var(--card-container-item-color, var(--color-bg-subtle));
    border: 1px solid var(--color-border-light);
    border-radius: var(--input-radius);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    transition: all 0.2s ease;
}

.draggable-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Content Area */
.draggable-item-content {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Item Name */
.draggable-item-name {
    font-weight: var(--font-weight-semibold);
    color: var(--card-container-item-text, var(--color-text-primary));
    font-size: var(--font-size-100);
}

/* Controls Area */
.draggable-item-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Class used to indicate that a button is used to delete a draggable item */
.draggable-remove {}

/* ============================================================================ */
/* SORTABLE VISUAL STATES */
/* ============================================================================ */

.draggable-item.sortable-ghost {
    opacity: 0.4;
    background-color: var(--color-bg-subtle) !important;
    border: 2px dashed var(--color-primary) !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.draggable-item.sortable-chosen {
    border-color: var(--color-primary) !important;
    background-color: var(--color-bg-subtle) !important;
    transform: none !important;
}

.draggable-item.sortable-drag {
    background-color: white !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    transform: rotate(2deg) !important;
    z-index: 9999 !important;
}

/* ============================================================================ */
/* SWEETENER-SPECIFIC STYLES */
/* ============================================================================ */

.draggable-item--sweetener:hover {
    border-color: var(--color-brand-orange);
}

.draggable-item--sweetener.sortable-ghost,
.draggable-item--sweetener.sortable-chosen,
.draggable-item--sweetener.sortable-drag {
    border-color: var(--color-brand-orange) !important;
}

/* Empty State */
.sweetener-list:empty::after {
    content: "No sweeteners assigned to this soda.";
    display: block;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: var(--space-lg);
    border: 2px dashed var(--color-border-light);
    border-radius: var(--input-radius);
    background: white;
}

/* ============================================================================ */
/* MOBILE RESPONSIVENESS */
/* ============================================================================ */

@media (max-width: 768px) {
    .draggable-item {
        padding-left: calc(var(--space-md) + 44px);
    }
    
    .draggable-item-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ==============================================
   COMPONENT: FILTERABLE ITEM MODAL
   ============================================== */

/* Header layout for the modal used to select items into or out of a list */
.filterable-modal-header {
  display: flex;                            /* Enables flexible box layout */
  justify-content: space-between;           /* Pushes items (title and close button) to opposite ends */
  align-items: center;                      /* Vertically centers items in the header */
  width: 100%;                              /* Ensures the header spans the full width */
}

/* The list container inside the modal */
.filterable-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* An individual item in the list */
.list-item--filterable-item {
  background: var(--color-white-overlay-medium); /* Subtly lighter background to distinguish from parent */
}

/* The name of the item */
.filterable-item-name {
  font-weight: var(--font-weight-medium);   /* Medium weight for emphasis */
}

/* The close button located in the modal header */
.modal-close-btn {
  background: none;                         /* Removes any background styling */
  border: none;                             /* Removes any border styling */
  color: white;                           /* Sets the text/icon color to white for contrast */
  font-size: var(--font-size-200);          /* Sets a large font size for the close icon */
  font-weight: bold;                        /* Makes the icon bold */
  cursor: pointer;                          /* Indicates the button is interactive */
  line-height: 1;                           /* Adjusts line height to ensure icon is vertically centered */
  padding: 0 var(--space-xs);               /* Adds horizontal padding for clickable area */
  opacity: 0.8;                             /* Starts slightly transparent */
  transition: opacity var(--transition-fast); /* Smooth transition for opacity changes */
}
.modal-close-btn:hover {
  opacity: 1;                               /* Becomes fully opaque on hover for clear feedback */
}

/* ==============================================
   COMPONENT: MODAL SODA ITEMS
   ============================================== */

/* An individual soda item in the modal's selectable list */
.list-item--modal-soda-item {
  border: none;                             
  transition: background-color 0.3s ease;   /* Smooth transition for background color */
}

/* Container for the soda's name and type */
.modal-soda-item-info {
  display: flex;
  flex-direction: column;
}

/* Styling for the soda's name within the list item */
.modal-soda-item-name {
  font-weight: var(--font-weight-medium);   /* Sets a medium font weight for readability */
}

/* Styling for the soda's type within the list item */
.modal-soda-item-type {
  font-size: var(--font-size-90);           /* Sets a slightly smaller font size */
  opacity: 0.8;                             /* Slight transparency to de-emphasize */
}

/* =====================================================
   COMPONENT: CUSTOM SODA ACCORDION CARD
   ===================================================== */

/* Main card container styled to match modal soda items with rainbow community branding */
.custom-soda-accordion-card {
    border-radius: var(--input-radius);                         /* Matches other modal elements for visual consistency */
    overflow: hidden;                                           /* Ensures border-radius clips all content properly */
    position: relative;                                         /* Establishes positioning context for rainbow border pseudo-element */

    /* Background is shared with modal-soda-item--community in a separate definition */
    
    color: var(--color-text-primary);                           /* Ensures readable text color on the gradient background */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);                 /* Subtle depth to match other modal elements */
    transition: all var(--transition-fast);                     /* Smooth hover animations for better UX */
}

/* Rainbow border created with pseudo-element for proper border-radius support */
.custom-soda-accordion-card::before {
    content: '';                                                /* Required for pseudo-element to display */
    position: absolute;                                         /* Positioned relative to the card container */
    top: 0;                                                     /* Aligns to top edge of container */
    left: 0;                                                    /* Aligns to left edge of container */
    width: 20px;                                                /* Matches standard modal item border width */
    height: 100%;                                               /* Spans full height of container */        
    background: var(--color-rainbow-gradient-bottom);           /* Rainbow gradient for community content identification */
    border-radius: var(--input-radius) 0 0 var(--input-radius); /* Rounded left edge only */
    z-index: 1;                                                 /* Places border behind content but above background */
}

/* Hover effect for visual feedback and improved interactivity */
.custom-soda-accordion-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);                /* Enhanced shadow for elevation effect */
    transform: translateY(-1px);                                /* Subtle lift animation for better UX */
}

/* Header section styled to match modal item layout and proportions */
.custom-soda-header {
    cursor: pointer;                                            /* Indicates interactive element to users */
    display: flex;                                              /* Horizontal layout for content and chevron */
    align-items: center;                                        /* Vertical centering of header content */
    justify-content: space-between;                             /* Pushes chevron to right edge */
    padding: var(--space-sm) var(--space-md);                   /* Matches modal item padding for consistency */
    padding-left: calc(var(--space-md) + 20px);                 /* Adds space for 20px rainbow border plus small gap */
    min-height: 60px;                                           /* Consistent height with modal items */
    position: relative;                                         /* Establishes positioning context */
    z-index: 2;                                                 /* Ensures content appears above rainbow border */
    
    /* Subtle background gradient for visual separation */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
}

/* Soda info section matching modal item information layout */
.custom-soda-header .soda-info {
    flex-grow: 1;                                               /* Takes available space, pushing chevron right */
    display: flex;                                              /* Column layout for title and subtitle */
    flex-direction: column;                                     /* Stacks title above subtitle */
    gap: var(--space-xs);                                       /* Consistent spacing between title elements */
}

/* Card title styled to match modal item names */
.custom-soda-header .card-title {
    margin: 0;                                                  /* Removes default heading margins */
    font-size: var(--font-size-100);                            /* Matches modal item name font size */
    font-weight: var(--font-weight-medium);                     /* Consistent weight with other item names */
    color: var(--color-text-primary);                           /* Ensures readable text color */
    display: flex;                                              /* Horizontal layout for icon and text */
    align-items: center;                                        /* Vertical centering of icon and text */
    gap: var(--space-sm);                                       /* Space between icon and text */
}

/* Card subtitle styled to match modal item type descriptions */
.custom-soda-header .card-subtitle {
    margin: 0;                                                  /* Removes default paragraph margins */
    font-size: var(--font-size-90);                             /* Matches modal item type font size */
    color: var(--color-text-secondary);                         /* Secondary text color for hierarchy */
    opacity: 0.8;                                               /* Subtle transparency to de-emphasize */
}


/* Form group spacing for clean layout */
.custom-soda-form .form-group {
    margin-bottom: var(--space-md);                             /* Consistent spacing between form fields */
}

/* Form label styling for clear field identification */
.custom-soda-form .form-label {
    display: block;                                             /* Full width for proper label positioning */
    margin-bottom: var(--space-xs);                             /* Space between label and input */
    font-weight: var(--font-weight-medium);                     /* Medium weight for hierarchy */
    color: var(--color-text-primary);                           /* Primary color for readability */
    font-size: var(--font-size-95);                             /* Slightly smaller than body text */
}

/* Form input styling for consistent appearance with site forms */
.custom-soda-form .form-input {
    width: 100%;                                                /* Full width within container */
    padding: var(--space-sm);                                   /* Comfortable input padding */
    border: 1px solid var(--color-border-light);                /* Subtle border for definition */
    border-radius: var(--input-radius);                         /* Consistent rounding with other inputs */
    font-size: var(--font-size-100);                            /* Standard body text size */
    color: var(--color-text-primary);                           /* Primary text color for readability */
    background: var(--color-white);                             /* Clean background for input fields */
    transition: border-color var(--transition-fast), 
                box-shadow var(--transition-fast);              /* Smooth focus transitions */
}

/* Focus state for improved accessibility and user feedback */
.custom-soda-form .form-input:focus {
    outline: none;                                              /* Removes default browser outline */
    border-color: var(--color-soda-blue-raspberry);             /* Brand color for focus indication */
    box-shadow: 0 0 0 2px var(--color-soda-blue-raspberry-tint-subtle); /* Subtle glow effect */
}

/* Base button styling for consistent appearance */
.custom-soda-form .btn {
    display: inline-flex;                                       /* Flexible layout for icon and text */
    align-items: center;                                        /* Vertical centering of button content */
    gap: var(--space-xs);                                       /* Space between icon and text */
    padding: var(--space-sm) var(--space-md);                   /* Comfortable button padding */
    border: none;                                               /* Clean appearance without border */
    border-radius: var(--input-radius);                         /* Consistent rounding with other elements */
    font-size: var(--font-size-95);                             /* Appropriate size for button text */
    font-weight: var(--font-weight-medium);                     /* Medium weight for button hierarchy */
    cursor: pointer;                                            /* Indicates interactive element */
    transition: all var(--transition-fast);                     /* Smooth hover and focus transitions */
    text-decoration: none;                                      /* Removes link underlines if used as anchor */
}

/* Primary button styling for main actions */
.custom-soda-form .btn--primary {
    background: var(--color-soda-blue-raspberry);               /* Brand color for primary actions */
    color: white;                                             /* High contrast text on colored background */
}

/* Primary button hover state for interactive feedback */
.custom-soda-form .btn--primary:hover {
    background: var(--color-soda-blue-raspberry-dark);          /* Darker shade for hover state */
    transform: translateY(-1px);                                /* Subtle lift effect for interaction */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);                /* Enhanced shadow for depth */
}

/* Secondary button styling for cancel/alternative actions */
.custom-soda-form .btn--secondary {
    background: var(--color-bg-subtle);                         /* Subtle background for secondary actions */
    color: var(--color-text-primary);                           /* Primary text color for readability */
    border: 1px solid var(--color-border-light);                /* Light border for definition */
}

/* Secondary button hover state */
.custom-soda-form .btn--secondary:hover {
    background: var(--color-white);                             /* Lighter background on hover */
    transform: translateY(-1px);                                /* Consistent lift effect */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);                 /* Subtle shadow for feedback */
}

/* Form status display for submission feedback */
.form-status {
    margin-top: var(--space-md);                                /* Space above status message */
    padding: var(--space-sm) var(--space-md);                   /* Comfortable padding around message */
    border-radius: var(--input-radius);                         /* Consistent rounding with other elements */
    display: none;                                              /* Hidden by default until needed */
    align-items: center;                                        /* Vertical centering of icon and text */
    gap: var(--space-sm);                                       /* Space between status icon and message */
    font-size: var(--font-size-95);                             /* Appropriate size for status text */
}

/* Success status styling for positive feedback */
.form-status.success {
    background-color: #d1fae5;                                /* Light green background for success */
    border: 1px solid #10b981;                                /* Green border for emphasis */
    color: #065f46;                                           /* Dark green text for readability */
}

/* Error status styling for negative feedback */
.form-status.error {
    background-color: #fee2e2;                                /* Light red background for errors */
    border: 1px solid #ef4444;                                /* Red border for emphasis */
    color: #991b1b;                                           /* Dark red text for readability */
}

/* Loading status styling for in-progress feedback */
.form-status.loading {
    background-color: #dbeafe;                                /* Light blue background for loading */
    border: 1px solid #3b82f6;                                /* Blue border for emphasis */
    color: #1e40af;                                           /* Dark blue text for readability */
}

/* Error message styling for form validation feedback */
.form-error {
    color: var(--color-error);                                  /* Error color for clear indication */
    font-size: var(--font-size-85);                             /* Smaller text for error messages */
    margin-top: var(--space-xs);                                /* Space above error text */
    display: none;                                              /* Hidden by default until validation fails */
}

/* Visible state for error messages */
.form-error.visible {
    display: block;                                             /* Shows error message when validation fails */
}

/* Duplicate warning alert for form feedback */
.duplicate-warning {
    padding: var(--space-md);                                   /* Comfortable padding around warning content */
    border-radius: var(--input-radius);                         /* Consistent rounding with other elements */
    margin-bottom: var(--space-md);                             /* Space below warning before form */
    display: none;                                              /* Hidden by default until duplicates found */
    align-items: flex-start;                                    /* Top-aligns icon with multi-line text */
    gap: var(--space-md);                                       /* Space between warning icon and message */
    background-color: #fef3c7;                                /* Light yellow background for warnings */
    border: 1px solid #f59e0b;                                /* Orange border for attention */
    color: #92400e;                                           /* Dark orange text for readability */
}

/* Visible state for duplicate warning */
.duplicate-warning.visible {
    display: flex;                                              /* Shows warning when duplicates are detected */
}

/* Enhanced styling for community sodas in modal */
.modal-soda-item--community {
    position: relative;                                         /* Establishes positioning context for pseudo-element */
    overflow: hidden;                                           /* Ensures border-radius is respected */
    border-left: none !important;                               /* Removes default border for rainbow replacement */
    border-radius: var(--input-radius) !important;              /* Ensures rounded corners are applied */
    padding-left: calc(var(--space-md) + 20px);                 /* Adds space for 20px rainbow border plus small gap */
    
    /* Background is shared with custom-soda-accordion-card in a separate definition */
}

/* Rainbow border for community modal items using pseudo-element */
.modal-soda-item--community::before {
    content: '';                                                /* Required for pseudo-element display */
    position: absolute;                                         /* Positioned relative to modal item */
    top: 0;                                                     /* Aligns to top edge */
    left: 0;                                                    /* Aligns to left edge */
    width: 20px;                                                /* Standard modal item border width */
    height: 100%;                                               /* Spans full height of item */    
    background: var(--color-rainbow-gradient-bottom);           /* Rainbow gradient matching custom soda card */    
    border-radius: var(--input-radius) 0 0 var(--input-radius); /* Rounded left edge only */
    z-index: 1;                                                 /* Places border behind content */
}

/* Mottled tie-dye effect for community modal items */
.modal-soda-item--community,
.custom-soda-accordion-card {
    background: 
        radial-gradient(circle at 30% 20%, rgba(255, 0, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 50% 70%, rgba(255, 255, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 0, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(0, 255, 0, 0.4) 0%, transparent 50%),
        var(--color-text-offwhite) !important;
}

/* Ensures community modal item content appears above rainbow border */
.modal-soda-item--community .modal-soda-item-info,
.modal-soda-item--community .action-button {
    position: relative;                                         /* Establishes positioning context */
    z-index: 2;                                                 /* Ensures content appears above rainbow border */
}

/* Enhanced hover effect for community modal items */
.modal-soda-item--community:hover {
    transform: translateY(-1px);                                /* Subtle lift effect for interaction */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);                /* Enhanced shadow for hover feedback */
}

/* Enhanced community badge styling */
.soda-source-badge {
    background: linear-gradient(135deg, #ff4757, #ff6b7a); /* Gradient background for visual interest */
    color: white;                                            /* High contrast text on colored background */
    padding: 3px 8px;                                           /* Comfortable padding for badge text */
    border-radius: 12px;                                        /* Pill shape for modern appearance */
    font-size: var(--font-size-75);                             /* Small text appropriate for badge */
    font-weight: var(--font-weight-bold);                       /* Bold weight for emphasis */
    margin-left: var(--space-xs);                               /* Space from soda name */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);               /* Text shadow for better readability */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);                /* Subtle shadow for depth */
    text-transform: uppercase;                                  /* Uppercase for badge styling convention */
    letter-spacing: 0.5px;                                      /* Slight letter spacing for readability */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    /* Reduced header padding on mobile for better space utilization */
    .custom-soda-header {
        padding: var(--space-sm);                               /* Smaller padding on mobile */
        padding-left: calc(var(--space-sm) + 24px);             /* Maintains rainbow border space plus gap */
        min-height: 50px;                                       /* Reduced height for mobile */
    }
}


/* ==========================================
   CUSTOM SODA LIVE SEARCH DROPDOWN
   ========================================== */

/* Live search variant for custom soda search results */
.custom-select-dropdown--live-search {
  top: 100%;
  left: 0;
  min-width: 350px;
  max-width: 500px;
  width: 100%;
}

/* Base container for a custom soda match result, using CSS Grid for a two-column layout */
.custom-soda-match-card {
  padding: var(--space-sm) var(--space-md);     /* Sets padding on the top/bottom and left/right */
  border-bottom: 1px solid var(--color-border-light); /* Adds a subtle separator at the bottom of the card */
  display: grid;                                /* Enables a CSS Grid layout */
  grid-template-columns: 1fr auto;              /* Creates a main column that fills available space and a second column sized to its content */
  align-items: center;                          /* Vertically aligns content in the grid cells */
  gap: var(--space-md);                         /* Adds consistent spacing between the grid columns */
  cursor: default;                              /* Sets a default cursor to indicate the item is not clickable */
  transition: background-color var(--transition-fast); /* Smoothly animates the background color on state changes */
}

.custom-soda-match-card:hover {
  background-color: var(--color-bg-subtle);
}

.custom-soda-match-card:last-child {
  border-bottom: none;
}


/* --- Left Column: Soda Information --- */

/* Container for the soda's name and details, designed to stack vertically */
.custom-soda-match-info {
  min-width: 0;                                 /* Allows the content to shrink and truncate if necessary */
  display: flex;                                /* Enables flexbox layout */
  flex-direction: column;                       /* Stacks the child elements vertically */
  gap: 0.25rem;                                 /* Creates a small gap between the stacked name and details */
}

.custom-soda-match-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 0.25rem 0;
  font-size: var(--font-size-90);
}

/* Container for the soda's descriptive details */
.custom-soda-match-details {
  color: var(--color-text-secondary);           /* Sets a secondary color for the details text */
  font-size: var(--font-size-80);               /* Applies a small font size */
  margin: 0;                                    /* Removes default margins */
  display: flex;                                /* Enables flexbox layout for aligning the details */
  align-items: center;                          /* Vertically aligns any nested items (like icons) */
  gap: var(--space-xs);                         /* Adds a very small gap between details items */
}

.custom-soda-match-badge {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: var(--font-size-70);
  font-weight: var(--font-weight-semibold);
}


/* --- Right Column: Action Buttons and Votes --- */

/* Style for the vote count text */
.custom-soda-match-votes {
  color: var(--color-text-tertiary);            /* Sets a tertiary color for the vote count text */
  font-size: var(--font-size-80);               /* Applies a small font size */
  white-space: nowrap;                          /* Prevents the text from wrapping to a new line */
}

/* Container for the vote count and upvote button */
.custom-soda-match-action {
  display: flex;                                /* Enables flexbox layout for aligning its children */
  align-items: center;                          /* Centers the children vertically */
  gap: var(--space-sm);                         /* Adds consistent spacing between the vote count and the button */
}

/* Loading state for the dropdown */
.custom-soda-search-loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Empty state for the dropdown */
.custom-soda-search-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Position the dropdown relative to the input field */
.custom-soda-search-container {
  position: relative;
  width: 100%;
}