/*! Minora UI Kit v0.1.0 — https://github.com/ilzamafif/minora */

/* ============================================================
   ELEGANT MINIMALIST UI KIT — Design Tokens
   tokens.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ──────────────────────────────────────────────────────────
     COLOR: NEUTRAL SCALE
     Base: cool gray dengan sentuhan warm — cocok untuk
     background, text, dan border minimal.
  ────────────────────────────────────────────────────────── */
  --color-neutral-50:  #fafaf9;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;

  /* ──────────────────────────────────────────────────────────
     COLOR: ACCENT — Warm Gold (Champagne)
     Dipilih karena: timeless, sophisticated, dan menonjol
     secara subtle di atas neutral. Cocok untuk CTA, highlight,
     dan elemen dekoratif minimalis.
  ────────────────────────────────────────────────────────── */
  --color-accent-50:  #fdf8ef;
  --color-accent-100: #faefd9;
  --color-accent-200: #f4dbb0;
  --color-accent-300: #eac07c;
  --color-accent-400: #dfa04a;
  --color-accent-500: #d4872e;   /* — primary accent — */
  --color-accent-600: #bb6b21;
  --color-accent-700: #9a531e;
  --color-accent-800: #7c421f;
  --color-accent-900: #65371c;
  --color-accent-950: #381b0c;

  /* ──────────────────────────────────────────────────────────
     COLOR: SEMANTIC
     Minimal — hanya 3 shade per semantic (light/default/dark)
     agar tidak berlebihan.
  ────────────────────────────────────────────────────────── */

  /* Success */
  --color-success-light:   #f0fdf4;
  --color-success:         #16a34a;
  --color-success-dark:    #14532d;
  --color-success-border:  #bbf7d0;

  /* Warning */
  --color-warning-light:   #fffbeb;
  --color-warning:         #b45309;
  --color-warning-dark:    #78350f;
  --color-warning-border:  #fde68a;

  /* Error */
  --color-error-light:     #fef2f2;
  --color-error:           #dc2626;
  --color-error-dark:      #7f1d1d;
  --color-error-border:    #fecaca;

  /* Info */
  --color-info-light:      #f0f9ff;
  --color-info:            #0284c7;
  --color-info-dark:       #0c4a6e;
  --color-info-border:     #bae6fd;

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     Pairing: Playfair Display (serif) + Inter (sans-serif)
     — Klasik bertemu modern. Playfair memberi kesan mewah
       pada heading; Inter memastikan keterbacaan di body.
  ────────────────────────────────────────────────────────── */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Scale */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */

  /* Line Height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* Font Weight */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ──────────────────────────────────────────────────────────
     SPACING — Base 4px
     Setiap unit = 4px. Scale mengikuti pola Tailwind default
     sehingga class seperti p-4 = 16px (4 × 4px).
  ────────────────────────────────────────────────────────── */
  --space-px:  1px;
  --space-0:   0px;
  --space-0-5: 2px;    /* 0.5 × 4 */
  --space-0-25: 1px;   /* 0.25 × 4 — hairline */
  --space-0-75: 3px;   /* 0.75 × 4 — fine detail */
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* ──────────────────────────────────────────────────────────
     BORDER RADIUS — Minimal
     Hanya dua level: sm (4px) dan md (8px).
     Filosofi: sudut tajam memberi kesan tegas dan refined.
  ────────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* ──────────────────────────────────────────────────────────
     SHADOW — 2 Level, Subtle
     Tidak dramatis. Hanya memberi kedalaman yang halus.
     sm: untuk card dan input hover.
     md: untuk dropdown dan modal.
  ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04),
               0 1px 3px 0 rgb(0 0 0 / 0.03);

  --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.07),
               0 4px 6px -2px rgb(0 0 0 / 0.04);

  /* ──────────────────────────────────────────────────────────
     TRANSITION — Smooth & Fast
     Fast: interaksi micro (hover, focus).
     Normal: perpindahan state (expand, collapse).
  ────────────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-colors:   color var(--duration-fast) var(--ease-in-out),
                         background-color var(--duration-fast) var(--ease-in-out),
                         border-color var(--duration-fast) var(--ease-in-out);

  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out);

  --transition-all:      all var(--duration-normal) var(--ease-in-out);

  /* ──────────────────────────────────────────────────────────
     BORDER
  ────────────────────────────────────────────────────────── */
  --border-width:   1px;
  --border-width-2: 2px;
  --border-color:   var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);

  /* ──────────────────────────────────────────────────────────
     FOCUS RING
  ────────────────────────────────────────────────────────── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-accent-500);

  /* ──────────────────────────────────────────────────────────
     PILL RADIUS (for fully rounded elements: badges, avatars)
  ────────────────────────────────────────────────────────── */
  --radius-pill: 9999px;

  /* ──────────────────────────────────────────────────────────
     TRANSFORM — Active/pressed states
  ────────────────────────────────────────────────────────── */
  --scale-active: 0.97;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Status indicator sizes
  ────────────────────────────────────────────────────────── */
  --avatar-status-xs-size: 8px;
  --avatar-status-xs-dot:  4px;
  --avatar-status-xs-border: var(--border-width);

  --avatar-status-sm-size: 10px;
  --avatar-status-sm-dot:  5px;
  --avatar-status-sm-border: 1.5px;

  --avatar-status-md-size: 12px;
  --avatar-status-md-dot:  6px;
  --avatar-status-md-border: var(--border-width-2);

  --avatar-status-lg-size: 16px;
  --avatar-status-lg-dot:  8px;
  --avatar-status-lg-border: var(--border-width-2);

  --avatar-status-xl-size: 20px;
  --avatar-status-xl-dot:  10px;
  --avatar-status-xl-border: 2.5px;

  /* ──────────────────────────────────────────────────────────
     AVATAR GROUP — Overlap spacing
  ────────────────────────────────────────────────────────── */
  --avatar-group-sm-overlap: -6px;
  --avatar-group-md-overlap: -8px;
  --avatar-group-lg-overlap: -12px;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Group border and hover
  ────────────────────────────────────────────────────────── */
  --avatar-group-border: var(--color-neutral-50);
  --avatar-group-hover-lift: -2px;

  /* ──────────────────────────────────────────────────────────
     AVATAR — Tooltip
  ────────────────────────────────────────────────────────── */
  --avatar-tooltip-offset-y: 4px;

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Button
  ────────────────────────────────────────────────────────── */
  --btn-sm-height:   var(--space-8);   /* 32px */
  --btn-md-height:   var(--space-10);  /* 40px */
  --btn-lg-height:   var(--space-12);  /* 48px */

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Badge & Tag
  ────────────────────────────────────────────────────────── */
  --badge-sm-height: 20px;
  --badge-md-height: 24px;
  --tag-sm-height:   24px;
  --tag-md-height:   28px;

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Input & Textarea
  ────────────────────────────────────────────────────────── */
  --input-sm-height:   var(--space-8);   /* 32px */
  --input-md-height:   var(--space-10);  /* 40px */
  --input-lg-height:   var(--space-12);  /* 48px */

  --textarea-min-rows: 3;
  --textarea-max-rows: 10;

  /* ──────────────────────────────────────────────────────────
     INPUT — Focus ring variant (overrides default accent)
  ────────────────────────────────────────────────────────── */
  --input-focus-color:      var(--color-accent-500);
  --input-focus-error:       var(--color-error);
  --input-focus-success:     var(--color-success);
  --input-focus-warning:     var(--color-warning);

  /* ──────────────────────────────────────────────────────────
     INPUT — Placeholder & icon color
  ────────────────────────────────────────────────────────── */
  --input-placeholder-color: var(--color-neutral-400);
  --input-icon-color:        var(--color-neutral-400);
  --input-addon-text-color:  var(--color-neutral-500);
  --input-addon-bg:          var(--color-neutral-100);
  --input-helper-color:      var(--color-neutral-500);
  --input-label-color:       var(--color-neutral-700);
  --input-text-color:        var(--color-neutral-800);
  --input-bg:                #ffffff;
  --input-filled-bg:         var(--color-neutral-50);
  --input-disabled-opacity:  0.5;
  --input-disabled-cursor:   not-allowed;
  --input-clear-size:        var(--space-4);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Select
  ────────────────────────────────────────────────────────── */
  --select-sm-height:   var(--space-8);   /* 32px */
  --select-md-height:   var(--space-10);  /* 40px */
  --select-lg-height:   var(--space-12);  /* 48px */
  --select-dropdown-max-height: 240px;
  --select-option-height: 36px;

  /* ──────────────────────────────────────────────────────────
     SELECT — Colors & shadows
  ────────────────────────────────────────────────────────── */
  --select-bg:             #ffffff;
  --select-dropdown-shadow: var(--shadow-md);
  --select-option-hover-bg: var(--color-neutral-50);
  --select-option-active-bg: var(--color-neutral-100);
  --select-group-label-color: var(--color-neutral-500);
  --select-search-border: var(--color-neutral-200);
  --select-counter-bg: var(--color-neutral-200);
  --select-counter-min-width: var(--space-6);
  --select-counter-height: var(--badge-sm-height);
  --select-search-min-width: var(--space-20);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Checkbox & Radio
  ────────────────────────────────────────────────────────── */
  --checkbox-sm: var(--space-3);    /* 12px */
  --checkbox-md: var(--space-4);    /* 16px */
  --checkbox-lg: var(--space-5);    /* 20px */

  /* ──────────────────────────────────────────────────────────
     CHECKBOX & RADIO — Colors
  ────────────────────────────────────────────────────────── */
  --control-bg:              var(--color-neutral-100);
  --control-border:          var(--color-neutral-300);
  --control-checked-bg:      var(--color-accent-500);
  --control-checked-border:  var(--color-accent-500);
  --control-disabled-opacity: 0.4;
  --control-gap:             var(--space-2);

  /* ──────────────────────────────────────────────────────────
     COMPONENT SIZES — Toggle / Switch
  ────────────────────────────────────────────────────────── */
  --switch-sm-track-w:       32px;
  --switch-sm-track-h:       18px;
  --switch-sm-thumb:         14px;
  --switch-sm-translate:     14px;

  --switch-md-track-w:       40px;
  --switch-md-track-h:       22px;
  --switch-md-thumb:         18px;
  --switch-md-translate:     18px;

  --switch-lg-track-w:       48px;
  --switch-lg-track-h:       26px;
  --switch-lg-thumb:         22px;
  --switch-lg-translate:     22px;

  /* ──────────────────────────────────────────────────────────
     TOGGLE / SWITCH — Colors
  ────────────────────────────────────────────────────────── */
  --switch-track-off:        var(--color-neutral-300);
  --switch-track-on:         var(--color-accent-500);
  --switch-thumb:            #ffffff;
  --switch-disabled-opacity: 0.5;
  --switch-thumb-shadow:     0 1px 2px 0 rgb(0 0 0 / 0.15);
  --switch-label-font-size:  9px;
  --switch-spinner-inset:    2px;

  /* ──────────────────────────────────────────────────────────
     TOAST / NOTIFICATION
  ────────────────────────────────────────────────────────── */
  --toast-max-width:       384px;
  --toast-min-width:       280px;
  --toast-font-size:       var(--text-sm);
  --toast-icon-size:       var(--space-5);
  --toast-shadow:          0 4px 12px -2px rgb(0 0 0 / 0.08),
                           0 2px 6px -1px rgb(0 0 0 / 0.06);
  --toast-border-radius:   var(--radius-md);
  --toast-bg:              #ffffff;
  --toast-progress-height: 3px;
  --toast-default-duration: 4000ms;
  --toast-slide-duration:  300ms;
  --toast-stack-gap:       var(--space-3);
  --toast-icon-margin:     var(--space-0-25);
  --toast-close-margin:    -2px;
  --toast-action-underline-offset: 2px;

  /* ──────────────────────────────────────────────────────────
     NOTIFICATION PANEL
  ────────────────────────────────────────────────────────── */
  --notif-panel-width:       384px;
  --notif-panel-max-height:  480px;
  --notif-avatar-size:       var(--space-10);

  /* ──────────────────────────────────────────────────────────
     MODAL / DIALOG
  ────────────────────────────────────────────────────────── */
  --modal-overlay-bg:      rgb(0 0 0 / 0.3);
  --modal-overlay-blur:    4px;
  --modal-bg:              #ffffff;
  --modal-shadow:          0 8px 24px -4px rgb(0 0 0 / 0.08),
                           0 20px 48px -8px rgb(0 0 0 / 0.06);
  --modal-radius:          var(--radius-md);
  --modal-sm:              400px;
  --modal-md:              560px;
  --modal-lg:              720px;
  --modal-xl:              900px;
  --modal-max-w:           calc(100vw - var(--space-8));
  --modal-max-h:           calc(100vh - var(--space-12));
  --modal-padding:         var(--space-6);
  --modal-header-padding:  var(--space-4) var(--space-6);
  --modal-footer-padding:  var(--space-4) var(--space-6);
  --modal-body-padding:    var(--space-6);
  --modal-open-duration:   250ms;
  --modal-open-ease:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ──────────────────────────────────────────────────────────
     TOOLTIP / POPOVER
  ────────────────────────────────────────────────────────── */
  --tooltip-bg:              var(--color-neutral-900);
  --tooltip-color:           var(--color-neutral-50);
  --tooltip-font-size:       var(--text-xs);
  --tooltip-padding:         var(--space-1-5) var(--space-2-5);
  --tooltip-border-radius:   var(--radius-sm);
  --tooltip-arrow-size:      6px;
  --tooltip-shadow:          0 2px 4px 0 rgb(0 0 0 / 0.1);
  --tooltip-light-bg:        var(--color-neutral-50);
  --tooltip-light-color:     var(--color-neutral-800);
  --tooltip-light-border:    var(--color-neutral-200);
  --tooltip-in-duration:     150ms;
  --tooltip-out-duration:    80ms;
  --tooltip-show-delay:      300ms;
  --tooltip-hide-delay:      100ms;
  --tooltip-max-width:       240px;
  --tooltip-rich-max-width:  280px;

  --popover-bg:              #ffffff;
  --popover-color:           var(--color-neutral-800);
  --popover-min-width:       280px;
  --popover-max-width:       384px;
  --popover-border-radius:   var(--radius-md);
  --popover-shadow:          var(--shadow-md);
  --popover-border:          var(--color-neutral-200);

  /* ──────────────────────────────────────────────────────────
     ALERT / INLINE MESSAGE / PAGE BANNER
  ────────────────────────────────────────────────────────── */
  --alert-padding:           var(--space-4);
  --alert-padding-compact:   var(--space-2-5) var(--space-3);
  --alert-radius:            var(--radius-sm);
  --alert-border-accent:     3px;
  --alert-icon-size:         var(--space-5);
  --alert-font-size:         var(--text-sm);
  --alert-max-width:         720px;
  --alert-slide-duration:    var(--duration-normal);

  --alert-subtle-success-bg:   var(--color-success-light);
  --alert-subtle-success-accent: var(--color-success);
  --alert-subtle-error-bg:     var(--color-error-light);
  --alert-subtle-error-accent:   var(--color-error);
  --alert-subtle-warning-bg:   var(--color-warning-light);
  --alert-subtle-warning-accent: var(--color-warning);
  --alert-subtle-info-bg:      var(--color-info-light);
  --alert-subtle-info-accent:    var(--color-info);
  --alert-subtle-neutral-bg:   var(--color-neutral-100);
  --alert-subtle-neutral-accent: var(--color-neutral-400);

  --alert-filled-success-bg:   var(--color-success);
  --alert-filled-error-bg:     var(--color-error);
  --alert-filled-warning-bg:   var(--color-warning);
  --alert-filled-info-bg:      var(--color-info);
  --alert-filled-neutral-bg:   var(--color-neutral-700);

  --inline-msg-font-size:    var(--text-xs);
  --inline-msg-icon-size:    var(--space-3-5);

  --page-banner-padding:   var(--space-2-5) var(--space-4);
  --page-banner-font-size: var(--text-sm);
  --page-banner-bg:        var(--color-accent-500);
  --page-banner-color:     var(--color-neutral-50);
  --page-banner-text-max:  640px;
  --page-banner-max-h:     200px;
  --alert-max-h:           2000px;
  --alert-hover-underline: 2px;

  /* ──────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ────────────────────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-overlay:   200;
  --z-tooltip:   250;
  --z-modal:     300;
  --z-toast:     400;

  /* ──────────────────────────────────────────────────────────
     ANIMATION — Spinner / loading
  ────────────────────────────────────────────────────────── */
  --anim-spin-duration:    0.8s;
  --anim-spinner-fast:     0.6s;
  --anim-check-draw-delay: 200ms;
}

/* ──────────────────────────────────────────────────────────────
   BASE RESET — Terapkan token sebagai default
────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-50);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-900);
}


/* ─── src\components\C:\DEV\minora\src\components\alert.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Alert Banner, Inline Message
   & Page Banner Components
   alert.css

   ANATOMY — ALERT BANNER
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="alert alert-subtle alert-success">
       <svg class="alert-icon">…</svg>
       <div class="alert-body">
         <strong class="alert-title">Success!</strong>
         <p class="alert-desc">Your changes have been saved.</p>
         <!-- optional: list of items -->
         <ul class="alert-list">
           <li>Item one</li>
         </ul>
         <!-- optional: action link/button -->
         <a class="alert-action" href="#">View details</a>
       </div>
       <button class="alert-close" aria-label="Dismiss">
         <svg>×</svg>
       </button>
     </div>

   Class layers:
     1. .alert                 → Base layout
     2. .alert-{variant}       → Style (subtle/filled/outline)
     3. .alert-{type}          → Color (success/error/warning/info/neutral)
     4. .alert-compact        → Smaller padding
     5. .alert-icon             → Type-appropriate SVG icon
     6. .alert-body             → Title + desc + optional list/action
     7. .alert-close            → Dismiss button
     8. .alert-action           → CTA link/button
   ─────────────────────────────────────────────────────────────

   ANATOMY — INLINE MESSAGE
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="inline-message inline-message-success">
       <svg class="inline-message-icon">…</svg>
       <span class="inline-message-text">Saved.</span>
     </div>
   ─────────────────────────────────────────────────────────────

   ANATOMY — PAGE BANNER
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="page-banner">
       <span class="page-banner-text">Maintenance notice…</span>
       <a class="page-banner-action" href="#">Learn more</a>
       <button class="page-banner-close" aria-label="Dismiss">
         <svg>×</svg>
       </button>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   ICON SVGs — Shared for alert types
   ═══════════════════════════════════════════════════════════ */

.alert-icon-svg {
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
  flex-shrink: 0;
  margin-top: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Base
   ═══════════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--alert-padding);
  border-radius: var(--alert-radius);
  font-size: var(--alert-font-size);
  line-height: var(--leading-relaxed);
  position: relative;
  overflow: hidden;
  max-height: var(--alert-max-h);
  opacity: 1;
  transition: max-height var(--alert-slide-duration) var(--ease-out),
              opacity var(--alert-slide-duration) var(--ease-in-out),
              margin-bottom var(--alert-slide-duration) var(--ease-out),
              padding-top var(--alert-slide-duration) var(--ease-out),
              padding-bottom var(--alert-slide-duration) var(--ease-out);
}

/* Dismiss animation: slide up + fade out + collapse */
.alert.is-dismissing {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Entrance animation */
.alert.is-entering {
  animation: alert-slide-in var(--alert-slide-duration) var(--ease-out) forwards;
}

@keyframes alert-slide-in {
  from {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    max-height: var(--alert-max-h);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Body
   ═══════════════════════════════════════════════════════════ */

.alert-body {
  flex: 1;
  min-width: 0;
}

.alert-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-0-5);
}

.alert-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.alert-desc + .alert-list {
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — List of items
   ═══════════════════════════════════════════════════════════ */

.alert-list {
  margin: var(--space-2) 0 0 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.alert-list li {
  margin-bottom: var(--space-0-5);
}

.alert-list li:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Action link/button
   ═══════════════════════════════════════════════════════════ */

.alert-action {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-0-5);
  cursor: pointer;
  margin-top: var(--space-2);
  background: transparent;
  border: none;
  padding: 0;
}

.alert-action:hover {
  text-decoration-thickness: var(--alert-hover-underline);
}

.alert-desc + .alert-action {
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Close/dismiss button
   ═══════════════════════════════════════════════════════════ */

.alert-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
}

.alert-close svg {
  width: var(--space-3-5);
  height: var(--space-3-5);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Variant: Subtle
   Light background + thick left accent border
   ═══════════════════════════════════════════════════════════ */

.alert-subtle {
  border: var(--border-width) solid transparent;
  border-left: var(--alert-border-accent) solid;
}

/* Subtle type colors */
.alert-subtle.alert-success {
  background-color: var(--alert-subtle-success-bg);
  border-left-color: var(--alert-subtle-success-accent);
}

.alert-subtle.alert-success .alert-icon-svg {
  color: var(--alert-subtle-success-accent);
}

.alert-subtle.alert-success .alert-action {
  color: var(--alert-subtle-success-accent);
}

.alert-subtle.alert-error {
  background-color: var(--alert-subtle-error-bg);
  border-left-color: var(--alert-subtle-error-accent);
}

.alert-subtle.alert-error .alert-icon-svg {
  color: var(--alert-subtle-error-accent);
}

.alert-subtle.alert-error .alert-action {
  color: var(--alert-subtle-error-accent);
}

.alert-subtle.alert-warning {
  background-color: var(--alert-subtle-warning-bg);
  border-left-color: var(--alert-subtle-warning-accent);
}

.alert-subtle.alert-warning .alert-icon-svg {
  color: var(--alert-subtle-warning-accent);
}

.alert-subtle.alert-warning .alert-action {
  color: var(--alert-subtle-warning-accent);
}

.alert-subtle.alert-info {
  background-color: var(--alert-subtle-info-bg);
  border-left-color: var(--alert-subtle-info-accent);
}

.alert-subtle.alert-info .alert-icon-svg {
  color: var(--alert-subtle-info-accent);
}

.alert-subtle.alert-info .alert-action {
  color: var(--alert-subtle-info-accent);
}

.alert-subtle.alert-neutral {
  background-color: var(--alert-subtle-neutral-bg);
  border-left-color: var(--alert-subtle-neutral-accent);
}

.alert-subtle.alert-neutral .alert-icon-svg {
  color: var(--alert-subtle-neutral-accent);
}

.alert-subtle.alert-neutral .alert-action {
  color: var(--color-neutral-600);
}

/* Subtle close button colors per type */
.alert-subtle.alert-success .alert-close { color: var(--color-success-dark); }
.alert-subtle.alert-success .alert-close:hover { background-color: var(--color-success-border); }

.alert-subtle.alert-error .alert-close { color: var(--color-error-dark); }
.alert-subtle.alert-error .alert-close:hover { background-color: var(--color-error-border); }

.alert-subtle.alert-warning .alert-close { color: var(--color-warning-dark); }
.alert-subtle.alert-warning .alert-close:hover { background-color: var(--color-warning-border); }

.alert-subtle.alert-info .alert-close { color: var(--color-info-dark); }
.alert-subtle.alert-info .alert-close:hover { background-color: var(--color-info-border); }

.alert-subtle.alert-neutral .alert-close { color: var(--color-neutral-600); }
.alert-subtle.alert-neutral .alert-close:hover { background-color: var(--color-neutral-200); }

/* ═══════════════════════════════════════════════════════════
   ALERT — Variant: Filled
   Full background color, white text
   ═══════════════════════════════════════════════════════════ */

.alert-filled {
  border: none;
  color: var(--color-neutral-50);
}

.alert-filled.alert-success {
  background-color: var(--alert-filled-success-bg);
}

.alert-filled.alert-error {
  background-color: var(--alert-filled-error-bg);
}

.alert-filled.alert-warning {
  background-color: var(--alert-filled-warning-bg);
  color: var(--color-neutral-900);
}

.alert-filled.alert-info {
  background-color: var(--alert-filled-info-bg);
}

.alert-filled.alert-neutral {
  background-color: var(--alert-filled-neutral-bg);
}

/* Filled text overrides */
.alert-filled .alert-title {
  color: inherit;
}

.alert-filled .alert-desc {
  color: inherit;
  opacity: 0.9;
}

.alert-filled .alert-list {
  color: inherit;
  opacity: 0.9;
}

.alert-filled .alert-icon-svg {
  color: inherit;
}

.alert-filled .alert-action {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.alert-filled .alert-action:hover {
  text-decoration-color: rgba(255, 255, 255, 0.8);
}

.alert-filled.alert-warning .alert-action {
  text-decoration-color: rgba(0, 0, 0, 0.3);
}

.alert-filled .alert-close {
  color: inherit;
  opacity: 0.7;
}

.alert-filled .alert-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.alert-filled.alert-warning .alert-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Variant: Outline
   Border only, no colored background
   ═══════════════════════════════════════════════════════════ */

.alert-outline {
  background-color: transparent;
  border: var(--border-width) solid;
}

.alert-outline.alert-success {
  border-color: var(--color-success-border);
}

.alert-outline.alert-success .alert-icon-svg {
  color: var(--color-success);
}

.alert-outline.alert-success .alert-action {
  color: var(--color-success);
}

.alert-outline.alert-error {
  border-color: var(--color-error-border);
}

.alert-outline.alert-error .alert-icon-svg {
  color: var(--color-error);
}

.alert-outline.alert-error .alert-action {
  color: var(--color-error);
}

.alert-outline.alert-warning {
  border-color: var(--color-warning-border);
}

.alert-outline.alert-warning .alert-icon-svg {
  color: var(--color-warning);
}

.alert-outline.alert-warning .alert-action {
  color: var(--color-warning);
}

.alert-outline.alert-info {
  border-color: var(--color-info-border);
}

.alert-outline.alert-info .alert-icon-svg {
  color: var(--color-info);
}

.alert-outline.alert-info .alert-action {
  color: var(--color-info);
}

.alert-outline.alert-neutral {
  border-color: var(--color-neutral-300);
}

.alert-outline.alert-neutral .alert-icon-svg {
  color: var(--color-neutral-500);
}

.alert-outline.alert-neutral .alert-action {
  color: var(--color-neutral-600);
}

.alert-outline .alert-close {
  color: var(--color-neutral-500);
}

.alert-outline .alert-close:hover {
  background-color: var(--color-neutral-100);
}

/* ═══════════════════════════════════════════════════════════
   ALERT — Size: Compact
   ═══════════════════════════════════════════════════════════ */

.alert-compact {
  padding: var(--alert-padding-compact);
  gap: var(--space-2);
}

.alert-compact .alert-icon-svg {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: 0;
}

.alert-compact .alert-title {
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.alert-compact .alert-desc {
  font-size: var(--text-sm);
}

.alert-compact .alert-action {
  margin-top: var(--space-1);
}

.alert-compact .alert-close {
  width: var(--space-5);
  height: var(--space-5);
}

.alert-compact .alert-close svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════
   INLINE MESSAGE — Mini alert for inside components
   ═══════════════════════════════════════════════════════════ */

.inline-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-family: var(--font-sans);
  font-size: var(--inline-msg-font-size);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.inline-message-icon {
  width: var(--inline-msg-icon-size);
  height: var(--inline-msg-icon-size);
  flex-shrink: 0;
}

/* Inline message type colors */
.inline-message-success {
  color: var(--color-success);
}

.inline-message-error {
  color: var(--color-error);
}

.inline-message-warning {
  color: var(--color-warning);
}

.inline-message-info {
  color: var(--color-info);
}

.inline-message-neutral {
  color: var(--color-neutral-500);
}

/* ═══════════════════════════════════════════════════════════
   PAGE BANNER — Full-width banner above content
   ═══════════════════════════════════════════════════════════ */

.page-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--page-banner-padding);
  background-color: var(--page-banner-bg);
  color: var(--page-banner-color);
  font-family: var(--font-sans);
  font-size: var(--page-banner-font-size);
  line-height: var(--leading-tight);
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  overflow: hidden;
  max-height: var(--page-banner-max-h);
  opacity: 1;
  transition: max-height var(--alert-slide-duration) var(--ease-out),
              opacity var(--alert-slide-duration) var(--ease-in-out),
              padding-top var(--alert-slide-duration) var(--ease-out),
              padding-bottom var(--alert-slide-duration) var(--ease-out);
}

.page-banner.is-dismissing {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.page-banner-text {
  flex: 1;
  text-align: center;
  max-width: var(--page-banner-text-max);
}

.page-banner-text strong {
  font-weight: var(--font-semibold);
}

.page-banner-action {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--space-0-5);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.page-banner-action:hover {
  opacity: 0.8;
  text-decoration-thickness: var(--alert-hover-underline);
}

.page-banner-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.page-banner-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.15);
}

.page-banner-close svg {
  width: var(--space-3-5);
  height: var(--space-3-5);
}

/* Page banner color variants */
.page-banner-success {
  background-color: var(--color-success);
}

.page-banner-error {
  background-color: var(--color-error);
}

.page-banner-warning {
  background-color: var(--color-warning);
  color: var(--color-neutral-900);
}

.page-banner-info {
  background-color: var(--color-info);
}

.page-banner-neutral {
  background-color: var(--color-neutral-700);
}


/* ─── src\components\C:\DEV\minora\src\components\avatar.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Avatar & Avatar Group Components
   avatar.css

   ANATOMY — SINGLE AVATAR
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="avatar avatar-md">
       <img src="..." alt="..." class="avatar-img" />
       <div class="avatar-status" data-status="online"></div>  <!-- optional -->
     </div>

     <!-- Initials fallback (auto-generated via JS from data-name) -->
     <div class="avatar avatar-md" data-name="Budi Santoso">
       <span class="avatar-initials">BS</span>
     </div>

     <!-- Icon fallback -->
     <div class="avatar avatar-md">
       <svg class="avatar-fallback" ...></svg>
     </div>

   Class layers:
     1. .avatar                → Base layout, shape, overflow hidden
     2. .avatar-{size}         → Width, height, font-size
     3. .avatar-img            → Image styling (object-fit: cover)
     4. .avatar-initials       → Text initials styling
     5. .avatar-fallback       → Generic person icon SVG
     6. .avatar-status         → Status dot indicator
     7. .avatar-rounded        → Modifier: rounded square instead of circle
   ─────────────────────────────────────────────────────────────

   ANATOMY — AVATAR GROUP
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="avatar-group avatar-group-md">
       <div class="avatar avatar-md">...</div>
       <div class="avatar avatar-md">...</div>
       <div class="avatar avatar-md">...</div>
       <span class="avatar-group-counter">+12</span>
     </div>

   Class layers:
     1. .avatar-group          → Base flex layout
     2. .avatar-group-{size}   → Controls child avatar sizes
     3. .avatar-group-item     → Wrapper for negative margin overlap
     4. .avatar-group-counter  → "+N" overflow indicator
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   AVATAR — Base
   ═══════════════════════════════════════════════════════════ */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-color: var(--color-neutral-200);
  vertical-align: middle;
}

/* ── Avatar image ───────────────────────────────────────── */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Avatar initials ────────────────────────────────────── */
.avatar-initials {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
  user-select: none;
  -webkit-user-select: none;
}

/* ── Avatar icon fallback ───────────────────────────────── */
.avatar-fallback {
  color: var(--color-neutral-400);
  line-height: 0;
}

/* ── Sizes ──────────────────────────────────────────────── */
.avatar-xs {
  width: var(--space-6);
  height: var(--space-6);
}

.avatar-xs .avatar-initials {
  font-size: var(--text-xs);
}

.avatar-xs .avatar-fallback {
  width: var(--space-3);
  height: var(--space-3);
}

.avatar-sm {
  width: var(--space-8);
  height: var(--space-8);
}

.avatar-sm .avatar-initials {
  font-size: var(--text-xs);
}

.avatar-sm .avatar-fallback {
  width: var(--space-4);
  height: var(--space-4);
}

.avatar-md {
  width: var(--space-10);
  height: var(--space-10);
}

.avatar-md .avatar-initials {
  font-size: var(--text-sm);
}

.avatar-md .avatar-fallback {
  width: var(--space-5);
  height: var(--space-5);
}

.avatar-lg {
  width: var(--space-14);
  height: var(--space-14);
}

.avatar-lg .avatar-initials {
  font-size: var(--text-lg);
}

.avatar-lg .avatar-fallback {
  width: var(--space-7);
  height: var(--space-7);
}

.avatar-xl {
  width: var(--space-20);
  height: var(--space-20);
}

.avatar-xl .avatar-initials {
  font-size: var(--text-3xl);
}

.avatar-xl .avatar-fallback {
  width: var(--space-10);
  height: var(--space-10);
}

/* ── Shape: Rounded square modifier ─────────────────────── */
.avatar-rounded {
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   AVATAR — Status indicator
   ═══════════════════════════════════════════════════════════ */

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--avatar-group-border);
  z-index: var(--z-raised);
  line-height: 0;
}

/* Status dot — size varies by avatar size */
.avatar-status::after {
  content: '';
  display: block;
  border-radius: var(--radius-pill);
}

/* Status colors */
.avatar-status[data-status="online"] {
  background-color: var(--color-success);
}

.avatar-status[data-status="away"] {
  background-color: var(--color-warning);
}

.avatar-status[data-status="busy"] {
  background-color: var(--color-error);
}

.avatar-status[data-status="offline"] {
  background-color: var(--color-neutral-400);
}

/* Status dot sizing per avatar size */
.avatar-xs .avatar-status {
  width: var(--avatar-status-xs-size);
  height: var(--avatar-status-xs-size);
  border-width: var(--avatar-status-xs-border);
}

.avatar-xs .avatar-status::after {
  width: var(--avatar-status-xs-dot);
  height: var(--avatar-status-xs-dot);
}

.avatar-sm .avatar-status {
  width: var(--avatar-status-sm-size);
  height: var(--avatar-status-sm-size);
  border-width: var(--avatar-status-sm-border);
}

.avatar-sm .avatar-status::after {
  width: var(--avatar-status-sm-dot);
  height: var(--avatar-status-sm-dot);
}

.avatar-md .avatar-status {
  width: var(--avatar-status-md-size);
  height: var(--avatar-status-md-size);
  border-width: var(--avatar-status-md-border);
}

.avatar-md .avatar-status::after {
  width: var(--avatar-status-md-dot);
  height: var(--avatar-status-md-dot);
}

.avatar-lg .avatar-status {
  width: var(--avatar-status-lg-size);
  height: var(--avatar-status-lg-size);
  border-width: var(--avatar-status-lg-border);
}

.avatar-lg .avatar-status::after {
  width: var(--avatar-status-lg-dot);
  height: var(--avatar-status-lg-dot);
}

.avatar-xl .avatar-status {
  width: var(--avatar-status-xl-size);
  height: var(--avatar-status-xl-size);
  border-width: var(--avatar-status-xl-border);
}

.avatar-xl .avatar-status::after {
  width: var(--avatar-status-xl-dot);
  height: var(--avatar-status-xl-dot);
}

/* ═══════════════════════════════════════════════════════════
   AVATAR — Accent color backgrounds
   For initials avatars, different accent colors for variety.
   ═══════════════════════════════════════════════════════════ */

.avatar-accent-1 { background-color: var(--color-accent-500); }
.avatar-accent-2 { background-color: var(--color-accent-600); }
.avatar-accent-3 { background-color: var(--color-accent-700); }
.avatar-accent-4 { background-color: var(--color-accent-800); }
.avatar-accent-5 { background-color: var(--color-accent-900); }
.avatar-accent-6 { background-color: var(--color-accent-400); }

/* ═══════════════════════════════════════════════════════════
   AVATAR GROUP — Base
   ═══════════════════════════════════════════════════════════ */

.avatar-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.avatar-group-item {
  display: inline-flex;
  position: relative;
}

/* Negative margin overlap — first item has no margin */
.avatar-group-item + .avatar-group-item {
  margin-left: var(--avatar-group-md-overlap);
}

/* Border between overlapping avatars */
.avatar-group .avatar {
  border: var(--border-width-2) solid var(--avatar-group-border);
  transition: transform var(--duration-fast) var(--ease-out),
              z-index var(--duration-fast) var(--ease-out);
}

/* Hover lifts the avatar slightly */
.avatar-group .avatar:hover {
  transform: translateY(var(--avatar-group-hover-lift));
  z-index: var(--z-raised);
}

/* ── Group sizes ────────────────────────────────────────── */
.avatar-group-sm .avatar {
  width: var(--space-8);
  height: var(--space-8);
}

.avatar-group-sm .avatar .avatar-initials {
  font-size: var(--text-xs);
}

.avatar-group-sm .avatar .avatar-fallback {
  width: var(--space-4);
  height: var(--space-4);
}

.avatar-group-sm .avatar-group-item + .avatar-group-item {
  margin-left: var(--avatar-group-sm-overlap);
}

.avatar-group-md .avatar {
  width: var(--space-10);
  height: var(--space-10);
}

.avatar-group-md .avatar .avatar-initials {
  font-size: var(--text-sm);
}

.avatar-group-md .avatar .avatar-fallback {
  width: var(--space-5);
  height: var(--space-5);
}

.avatar-group-md .avatar-group-item + .avatar-group-item {
  margin-left: var(--avatar-group-md-overlap);
}

.avatar-group-lg .avatar {
  width: var(--space-14);
  height: var(--space-14);
}

.avatar-group-lg .avatar .avatar-initials {
  font-size: var(--text-lg);
}

.avatar-group-lg .avatar .avatar-fallback {
  width: var(--space-7);
  height: var(--space-7);
}

.avatar-group-lg .avatar-group-item + .avatar-group-item {
  margin-left: var(--avatar-group-lg-overlap);
}

/* ── Group counter (+N) ─────────────────────────────────── */
.avatar-group-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  background-color: var(--color-neutral-100);
  border: var(--border-width-2) solid var(--avatar-group-border);
  border-radius: var(--radius-pill);
  line-height: var(--leading-none);
  user-select: none;
  -webkit-user-select: none;
}

.avatar-group-sm .avatar-group-counter {
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--text-xs);
  margin-left: var(--avatar-group-sm-overlap);
}

.avatar-group-md .avatar-group-counter {
  width: var(--space-10);
  height: var(--space-10);
  font-size: var(--text-sm);
  margin-left: var(--avatar-group-md-overlap);
}

.avatar-group-lg .avatar-group-counter {
  width: var(--space-14);
  height: var(--space-14);
  font-size: var(--text-sm);
  margin-left: var(--avatar-group-lg-overlap);
}

/* ═══════════════════════════════════════════════════════════
   AVATAR — Hover tooltip (optional)
   ═══════════════════════════════════════════════════════════ */

.avatar[data-tooltip] {
  cursor: default;
}

.avatar[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(var(--avatar-tooltip-offset-y));
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  color: var(--color-neutral-50);
  background-color: var(--color-neutral-800);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out);
  z-index: var(--z-dropdown);
}

.avatar[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   CONTEXTUAL: Avatar with badge (for badge.html showcase)
   ═══════════════════════════════════════════════════════════ */

.avatar-badge {
  position: relative;
  display: inline-block;
}

.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-600);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: var(--font-sans);
  line-height: var(--leading-none);
}

.avatar-circle-lg {
  width: var(--space-12);
  height: var(--space-12);
  font-size: var(--text-base);
}


/* ─── src\components\C:\DEV\minora\src\components\badge.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Badge & Tag Components
   badge.css

   ANATOMY — BADGE
   ─────────────────────────────────────────────────────────────
   Structure:
     <span class="badge badge-success badge-md">
       <span class="badge-dot"></span>    <!-- optional -->
       Active
     </span>

   Class layers:
     1. .badge                → Base reset, layout, typography
     2. .badge-{variant}      → Color scheme (solid/subtle/outline)
     3. .badge-{size}         → Padding, font-size, height
     4. .badge-dot            → Dot indicator modifier
     5. .badge-notification   → Position modifier (for avatar/button overlay)

   Usage contexts:
     - Standalone: just <span class="badge ...">
     - On avatar:  <span class="badge badge-notification"> (absolute positioned)
     - On button:  inside button element, inline
   ─────────────────────────────────────────────────────────────

   ANATOMY — TAG
   ─────────────────────────────────────────────────────────────
   Structure:
     <span class="tag tag-dismissible tag-md" role="group">
       <svg class="tag-icon">...</svg>       <!-- optional -->
       <span class="tag-label">Design</span>
       <button class="tag-dismiss" aria-label="Remove">
         <svg>...</svg>
       </button>
     </span>

   Class layers:
     1. .tag                  → Base layout, typography, border
     2. .tag-{variant}        → Color scheme (default/clickable/outline)
     3. .tag-{size}           → Padding, font-size, height
     4. .tag-dismissible      → Modifier: includes dismiss button
     5. .tag-clickable        → Modifier: hover state like ghost button
     6. .tag-dismissing       → Animation state (fade + scale-down)

   Content model:
     .tag
     ├── .tag-icon            → Optional leading icon (SVG)
     ├── .tag-label           → Text content
     └── .tag-dismiss         → Optional close button (only with .tag-dismissible)
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   BADGE — Base
   ═══════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  text-decoration: none;

  /* Transisi */
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out);
}

/* ── Dot indicator ──────────────────────────────────────── */
.badge-dot {
  display: inline-block;
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  /* Warna ikut parent — di-override per variant */
}

/* ── Sizes ──────────────────────────────────────────────── */
.badge-sm {
  min-height: var(--badge-sm-height);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
}

.badge-sm .badge-dot {
  width: var(--space-1);
  height: var(--space-1);
}

.badge-md {
  min-height: var(--badge-md-height);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
}

.badge-md .badge-dot {
  width: var(--space-1-5);
  height: var(--space-1-5);
}

/* ── Notification badge (positioned overlay) ────────────── */
.badge-notification {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: var(--z-raised);
  min-width: var(--space-4);
  min-height: var(--space-4);
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--color-neutral-50);
  line-height: var(--leading-none);
}

.badge-notification .badge-dot {
  display: none;
}

/* ============================================================
   BADGE — Variant: SOLID
   Background penuh, teks kontras.
   ============================================================ */

/* Solid — Primary (Accent Gold) */
.badge-primary {
  color: var(--color-neutral-50);
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
}

.badge-primary .badge-dot {
  background-color: var(--color-neutral-50);
}

/* Solid — Success */
.badge-success {
  color: var(--color-neutral-50);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.badge-success .badge-dot {
  background-color: var(--color-neutral-50);
}

/* Solid — Warning */
.badge-warning {
  color: var(--color-neutral-50);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.badge-warning .badge-dot {
  background-color: var(--color-neutral-50);
}

/* Solid — Error */
.badge-error {
  color: var(--color-neutral-50);
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.badge-error .badge-dot {
  background-color: var(--color-neutral-50);
}

/* Solid — Neutral */
.badge-neutral {
  color: var(--color-neutral-50);
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
}

.badge-neutral .badge-dot {
  background-color: var(--color-neutral-50);
}

/* ============================================================
   BADGE — Variant: SUBTLE
   Background sangat light, teks berwarna gelap.
   ============================================================ */

/* Subtle — Primary */
.badge-subtle-primary {
  color: var(--color-accent-700);
  background-color: var(--color-accent-50);
  border-color: var(--color-accent-200);
}

.badge-subtle-primary .badge-dot {
  background-color: var(--color-accent-500);
}

/* Subtle — Success */
.badge-subtle-success {
  color: var(--color-success-dark);
  background-color: var(--color-success-light);
  border-color: var(--color-success-border);
}

.badge-subtle-success .badge-dot {
  background-color: var(--color-success);
}

/* Subtle — Warning */
.badge-subtle-warning {
  color: var(--color-warning-dark);
  background-color: var(--color-warning-light);
  border-color: var(--color-warning-border);
}

.badge-subtle-warning .badge-dot {
  background-color: var(--color-warning);
}

/* Subtle — Error */
.badge-subtle-error {
  color: var(--color-error-dark);
  background-color: var(--color-error-light);
  border-color: var(--color-error-border);
}

.badge-subtle-error .badge-dot {
  background-color: var(--color-error);
}

/* Subtle — Neutral */
.badge-subtle-neutral {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
}

.badge-subtle-neutral .badge-dot {
  background-color: var(--color-neutral-500);
}

/* ============================================================
   BADGE — Variant: OUTLINE
   Border solid, background transparan.
   ============================================================ */

/* Outline — Primary */
.badge-outline-primary {
  color: var(--color-accent-600);
  background-color: transparent;
  border-color: var(--color-accent-400);
}

.badge-outline-primary .badge-dot {
  background-color: var(--color-accent-500);
}

/* Outline — Success */
.badge-outline-success {
  color: var(--color-success);
  background-color: transparent;
  border-color: var(--color-success-border);
}

.badge-outline-success .badge-dot {
  background-color: var(--color-success);
}

/* Outline — Warning */
.badge-outline-warning {
  color: var(--color-warning);
  background-color: transparent;
  border-color: var(--color-warning-border);
}

.badge-outline-warning .badge-dot {
  background-color: var(--color-warning);
}

/* Outline — Error */
.badge-outline-error {
  color: var(--color-error);
  background-color: transparent;
  border-color: var(--color-error-border);
}

.badge-outline-error .badge-dot {
  background-color: var(--color-error);
}

/* Outline — Neutral */
.badge-outline-neutral {
  color: var(--color-neutral-700);
  background-color: transparent;
  border-color: var(--color-neutral-300);
}

.badge-outline-neutral .badge-dot {
  background-color: var(--color-neutral-500);
}

/* ═══════════════════════════════════════════════════════════
   TAG — Base
   ═══════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-neutral-200);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);

  /* Transisi */
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out),
              opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* ── Tag icon (leading) ─────────────────────────────────── */
.tag-icon {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  color: var(--color-neutral-500);
}

/* ── Tag label ──────────────────────────────────────────── */
.tag-label {
  display: inline;
}

/* ── Tag dismiss button ─────────────────────────────────── */
.tag-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3-5);
  height: var(--space-3-5);
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: var(--space-0);
  line-height: var(--leading-none);

  /* Transisi */
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.tag-dismiss:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-200);
}

.tag-dismiss:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.tag-dismiss svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ── Dismiss animation (fade + scale-down) ──────────────── */
.tag-dismissing {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* ── Sizes ──────────────────────────────────────────────── */
.tag-sm {
  min-height: var(--tag-sm-height);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
}

.tag-sm .tag-icon {
  width: var(--space-2-5);
  height: var(--space-2-5);
}

.tag-sm .tag-dismiss {
  width: var(--space-3);
  height: var(--space-3);
}

.tag-sm .tag-dismiss svg {
  width: var(--space-2-5);
  height: var(--space-2-5);
}

.tag-md {
  min-height: var(--tag-md-height);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
}

.tag-md .tag-icon {
  width: var(--space-3);
  height: var(--space-3);
}

.tag-md .tag-dismiss {
  width: var(--space-3-5);
  height: var(--space-3-5);
}

.tag-md .tag-dismiss svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ── Variant: Clickable tag (ghost-like hover) ──────────── */
.tag-clickable {
  cursor: pointer;
  border-color: transparent;
  background-color: transparent;
  color: var(--color-neutral-600);
}

.tag-clickable:hover {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-100);
}

.tag-clickable:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.tag-clickable:active {
  background-color: var(--color-neutral-200);
}

/* ── Variant: Outline tag ───────────────────────────────── */
.tag-outline {
  background-color: transparent;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-700);
}

.tag-outline:hover {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
}

/* ── Variant: Accent tag (primary color) ────────────────── */
.tag-accent {
  background-color: var(--color-accent-50);
  border-color: var(--color-accent-200);
  color: var(--color-accent-700);
}

.tag-accent .tag-icon {
  color: var(--color-accent-500);
}

.tag-accent .tag-dismiss {
  color: var(--color-accent-400);
}

.tag-accent .tag-dismiss:hover {
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
}

.tag-accent.tag-clickable {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent-600);
}

.tag-accent.tag-clickable:hover {
  background-color: var(--color-accent-50);
  color: var(--color-accent-700);
}

.tag-accent.tag-clickable:active {
  background-color: var(--color-accent-100);
}

.tag-accent.tag-outline {
  background-color: transparent;
  border-color: var(--color-accent-300);
  color: var(--color-accent-700);
}

.tag-accent.tag-outline:hover {
  background-color: var(--color-accent-50);
  border-color: var(--color-accent-400);
}

/* ── Variant: Semantic color tags ───────────────────────── */

/* Success tag */
.tag-success {
  background-color: var(--color-success-light);
  border-color: var(--color-success-border);
  color: var(--color-success-dark);
}

.tag-success .tag-icon {
  color: var(--color-success);
}

.tag-success .tag-dismiss {
  color: var(--color-success);
}

.tag-success .tag-dismiss:hover {
  color: var(--color-success-dark);
  background-color: var(--color-success-border);
}

/* Warning tag */
.tag-warning {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning-border);
  color: var(--color-warning-dark);
}

.tag-warning .tag-icon {
  color: var(--color-warning);
}

.tag-warning .tag-dismiss {
  color: var(--color-warning);
}

.tag-warning .tag-dismiss:hover {
  color: var(--color-warning-dark);
  background-color: var(--color-warning-border);
}

/* Error tag */
.tag-error {
  background-color: var(--color-error-light);
  border-color: var(--color-error-border);
  color: var(--color-error-dark);
}

.tag-error .tag-icon {
  color: var(--color-error);
}

.tag-error .tag-dismiss {
  color: var(--color-error);
}

.tag-error .tag-dismiss:hover {
  color: var(--color-error-dark);
  background-color: var(--color-error-border);
}


/* ─── src\components\C:\DEV\minora\src\components\button.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Button Component
   button.css

   ANATOMY OF A BUTTON
   ─────────────────────────────────────────────────────────────
   Structure:
     <button class="btn btn-primary btn-md">
       <!-- optional: <svg class="btn-spinner" ...> -->
       <span class="btn-label">Label</span>
     </button>

   Class layers:
     1. .btn               → Base reset, layout, typography, interaction
     2. .btn-{variant}     → Color scheme (solid/outline/ghost/destructive)
     3. .btn-{size}        → Padding, font-size, min-height
     4. .btn-icon          → Icon-only modifier (circular)
     5. .btn-loading       → Loading state (disables label, shows spinner)
     6. :disabled          → Disabled visual state
     7. :focus-visible     → Focus ring (accessible, not default outline)
     8. :active            → Pressed state

   Content model:
     .btn
     ├── .btn-spinner      → SVG spinner (hidden by default)
     └── .btn-label        → Text or icon content
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. BASE BUTTON RESET & LAYOUT
   ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-normal);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  line-height: var(--leading-none);
  text-decoration: none;

  /* Transisi */
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out);

  /* Default: tidak ada outline/box-shadow */
  outline: none;
  box-shadow: none;

  /* Prevent double-tap zoom di mobile */
  touch-action: manipulation;

  /* Reset default button styles */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Focus ring — visible, elegant, bukan default browser */
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Active / pressed state */
.btn:active:not(:disabled):not(.btn-loading) {
  transform: scale(var(--scale-active));
}

/* Disabled state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   2. SPINNER (Loading state)
   ────────────────────────────────────────────────────────── */
.btn-spinner {
  display: none;
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
  animation: btn-spin 0.6s linear infinite;
}

.btn-loading .btn-spinner {
  display: block;
}

.btn-loading .btn-label {
  opacity: 0.7;
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────
   3. SIZE VARIANTS
   ────────────────────────────────────────────────────────── */

/* Small */
.btn-sm {
  min-height: var(--btn-sm-height);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
}

.btn-sm.btn-icon {
  width: var(--btn-sm-height);
  height: var(--btn-sm-height);
  padding: var(--space-0);
}

.btn-sm .btn-spinner {
  width: var(--space-3-5);
  height: var(--space-3-5);
}

/* Medium (default) */
.btn-md {
  min-height: var(--btn-md-height);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-md.btn-icon {
  width: var(--btn-md-height);
  height: var(--btn-md-height);
  padding: var(--space-0);
}

.btn-md .btn-spinner {
  width: var(--space-4);
  height: var(--space-4);
}

/* Large */
.btn-lg {
  min-height: var(--btn-lg-height);
  padding: var(--space-2-5) var(--space-6);
  font-size: var(--text-base);
}

.btn-lg.btn-icon {
  width: var(--btn-lg-height);
  height: var(--btn-lg-height);
  padding: var(--space-0);
}

.btn-lg .btn-spinner {
  width: var(--space-5);
  height: var(--space-5);
}

/* ──────────────────────────────────────────────────────────
   4. VARIANT: SOLID
   Background penuh, text kontras.
   ────────────────────────────────────────────────────────── */

/* Solid — Primary (Accent Gold) */
.btn-primary {
  color: var(--color-neutral-50);
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

.btn-primary:focus-visible {
  outline-color: var(--color-accent-500);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

/* Solid — Secondary (Neutral) */
.btn-secondary {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-200);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-neutral-300);
  border-color: var(--color-neutral-300);
}

.btn-secondary:focus-visible {
  outline-color: var(--color-neutral-500);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--color-neutral-400);
  border-color: var(--color-neutral-400);
}

/* Solid — Neutral Dark (untuk emphasis lebih tinggi) */
.btn-neutral {
  color: var(--color-neutral-50);
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
}

.btn-neutral:hover:not(:disabled) {
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
}

.btn-neutral:focus-visible {
  outline-color: var(--color-neutral-600);
}

.btn-neutral:active:not(:disabled) {
  background-color: var(--color-neutral-600);
  border-color: var(--color-neutral-600);
}

/* ──────────────────────────────────────────────────────────
   5. VARIANT: OUTLINE
   Border solid, background transparan.
   ────────────────────────────────────────────────────────── */

/* Outline — Primary */
.btn-outline-primary {
  color: var(--color-accent-600);
  background-color: transparent;
  border-color: var(--color-accent-400);
}

.btn-outline-primary:hover:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
}

.btn-outline-primary:focus-visible {
  outline-color: var(--color-accent-500);
}

.btn-outline-primary:active:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

/* Outline — Secondary */
.btn-outline-secondary {
  color: var(--color-neutral-700);
  background-color: transparent;
  border-color: var(--color-neutral-300);
}

.btn-outline-secondary:hover:not(:disabled) {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}

.btn-outline-secondary:focus-visible {
  outline-color: var(--color-neutral-500);
}

.btn-outline-secondary:active:not(:disabled) {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-500);
}

/* Outline — Neutral */
.btn-outline-neutral {
  color: var(--color-neutral-800);
  background-color: transparent;
  border-color: var(--color-neutral-400);
}

.btn-outline-neutral:hover:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
}

.btn-outline-neutral:focus-visible {
  outline-color: var(--color-neutral-600);
}

.btn-outline-neutral:active:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
}

/* ──────────────────────────────────────────────────────────
   6. VARIANT: GHOST
   Tidak ada border, hanya hover state.
   ────────────────────────────────────────────────────────── */

/* Ghost — Primary */
.btn-ghost-primary {
  color: var(--color-accent-600);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-primary:hover:not(:disabled) {
  color: var(--color-accent-700);
  background-color: var(--color-accent-50);
}

.btn-ghost-primary:focus-visible {
  outline-color: var(--color-accent-500);
}

.btn-ghost-primary:active:not(:disabled) {
  color: var(--color-accent-800);
  background-color: var(--color-accent-100);
}

/* Ghost — Secondary */
.btn-ghost-secondary {
  color: var(--color-neutral-700);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-secondary:hover:not(:disabled) {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-100);
}

.btn-ghost-secondary:focus-visible {
  outline-color: var(--color-neutral-500);
}

.btn-ghost-secondary:active:not(:disabled) {
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-200);
}

/* Ghost — Neutral */
.btn-ghost-neutral {
  color: var(--color-neutral-600);
  background-color: transparent;
  border-color: transparent;
}

.btn-ghost-neutral:hover:not(:disabled) {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-100);
}

.btn-ghost-neutral:focus-visible {
  outline-color: var(--color-neutral-500);
}

.btn-ghost-neutral:active:not(:disabled) {
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-200);
}

/* ──────────────────────────────────────────────────────────
   7. VARIANT: DESTRUCTIVE
   Untuk aksi berbahaya (delete, remove, dst).
   ────────────────────────────────────────────────────────── */

/* Destructive — Solid */
.btn-destructive {
  color: var(--color-neutral-50);
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.btn-destructive:hover:not(:disabled) {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

.btn-destructive:focus-visible {
  outline-color: var(--color-error);
}

.btn-destructive:active:not(:disabled) {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

/* Destructive — Outline */
.btn-destructive-outline {
  color: var(--color-error);
  background-color: transparent;
  border-color: var(--color-error-border);
}

.btn-destructive-outline:hover:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.btn-destructive-outline:focus-visible {
  outline-color: var(--color-error);
}

.btn-destructive-outline:active:not(:disabled) {
  color: var(--color-neutral-50);
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

/* Destructive — Ghost */
.btn-destructive-ghost {
  color: var(--color-error);
  background-color: transparent;
  border-color: transparent;
}

.btn-destructive-ghost:hover:not(:disabled) {
  color: var(--color-error-dark);
  background-color: var(--color-error-light);
}

.btn-destructive-ghost:focus-visible {
  outline-color: var(--color-error);
}

.btn-destructive-ghost:active:not(:disabled) {
  color: var(--color-error-dark);
  background-color: var(--color-error-border);
}

/* ──────────────────────────────────────────────────────────
   8. ICON-ONLY BUTTON MODIFIER
   Membuat button bulat (radius-md) untuk icon saja.
   ────────────────────────────────────────────────────────── */
.btn-icon {
  border-radius: var(--radius-md);
  padding: var(--space-0);
}

/* ──────────────────────────────────────────────────────────
   9. LOADING STATE OVERRIDE
   Saat loading, cursor tetap not-allowed.
   ────────────────────────────────────────────────────────── */
.btn.btn-loading {
  cursor: wait;
  pointer-events: auto; /* tetap bisa di-render, tapi tidak trigger aksi */
}

.btn.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════
   CONTEXTUAL: Button with embedded badge (for badge.html showcase)
   ═══════════════════════════════════════════════════════════ */

.btn-with-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.btn-with-badge .badge {
  position: static;
  transform: none;
  border: none;
}


/* ─── src\components\C:\DEV\minora\src\components\checkbox.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Checkbox, Radio & Groups
   checkbox.css

   ANATOMY — CHECKBOX
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="checkbox checkbox-md">
       <input type="checkbox" class="checkbox-native" />
       <span class="checkbox-box">
         <svg class="checkbox-check">...</svg>
         <svg class="checkbox-indeterminate">...</svg>
       </span>
       <span class="checkbox-label">Label text</span>
     </label>

   Class layers:
     1. .checkbox             → Wrapper label, flex layout
     2. .checkbox-{size}      → Box size (sm/md/lg)
     3. .checkbox-{variant}   → Style (filled/card)
     4. .checkbox-label-{pos} → Label position (right/left/bottom)
     5. .checkbox-native      → Hidden native input (accessible)
     6. .checkbox-box         → Visible box element
     7. .checkbox-check       → Checkmark SVG (animated)
   ─────────────────────────────────────────────────────────────

   ANATOMY — RADIO
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="radio radio-md">
       <input type="radio" class="radio-native" />
       <span class="radio-circle">
         <span class="radio-dot"></span>
       </span>
       <span class="radio-label">Label text</span>
     </label>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input — accessible but invisible */
.checkbox-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── The visible box ────────────────────────────────────── */
.checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--checkbox-md);
  height: var(--checkbox-md);
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-sm);
  background-color: var(--select-bg);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}

/* ── Checkmark SVG ──────────────────────────────────────── */
.checkbox-check,
.checkbox-indeterminate {
  position: absolute;
  width: 60%;
  height: 60%;
  stroke: var(--color-neutral-50);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}

.checkbox-indeterminate {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}

/* Checked: animate checkmark */
.checkbox-native:checked ~ .checkbox-box .checkbox-check {
  stroke-dashoffset: 0;
}

/* Indeterminate: animate minus */
.checkbox-native:indeterminate ~ .checkbox-box .checkbox-indeterminate,
.checkbox-box.is-indeterminate .checkbox-indeterminate {
  stroke-dashoffset: 0;
}

/* ── Unchecked: hide icons ──────────────────────────────── */
.checkbox-check,
.checkbox-indeterminate {
  opacity: 0;
}

.checkbox-native:checked ~ .checkbox-box .checkbox-check {
  opacity: 1;
}

.checkbox-native:indeterminate ~ .checkbox-box .checkbox-indeterminate,
.checkbox-box.is-indeterminate .checkbox-indeterminate {
  opacity: 1;
}

/* ── Checked state ──────────────────────────────────────── */
.checkbox-native:checked ~ .checkbox-box,
.checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: var(--control-checked-border);
}

/* ── Sizes ──────────────────────────────────────────────── */
.checkbox-sm {
  font-size: var(--text-sm);
}

.checkbox-sm .checkbox-box {
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
}

.checkbox-md {
  font-size: var(--text-sm);
}

.checkbox-md .checkbox-box {
  width: var(--checkbox-md);
  height: var(--checkbox-md);
}

.checkbox-lg {
  font-size: var(--text-base);
}

.checkbox-lg .checkbox-box {
  width: var(--checkbox-lg);
  height: var(--checkbox-lg);
}

/* ── Label positions ────────────────────────────────────── */

/* Label left (checkbox on right) */
.checkbox-label-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}

/* Label bottom (card style) */
.checkbox-label-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.checkbox-label-bottom .checkbox-box {
  margin-bottom: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Variant: Filled
   Background accent when checked, no border change.
   ═══════════════════════════════════════════════════════════ */

.checkbox-filled .checkbox-box {
  border-color: transparent;
  background-color: var(--control-bg);
}

.checkbox-filled .checkbox-native:checked ~ .checkbox-box,
.checkbox-filled .checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: transparent;
}

.checkbox-filled .checkbox-native:hover ~ .checkbox-box {
  background-color: var(--color-neutral-200);
}

.checkbox-filled .checkbox-native:checked ~ .checkbox-box:hover,
.checkbox-filled .checkbox-native:indeterminate ~ .checkbox-box:hover {
  background-color: var(--color-accent-600);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Variant: Card
   Entire card clickable, highlighted border on check.
   ═══════════════════════════════════════════════════════════ */

.checkbox-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.checkbox-card .checkbox-box {
  order: -1;
  align-self: flex-start;
}

.checkbox-card .checkbox-native:checked ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: var(--control-checked-border);
}

.checkbox-card:has(.checkbox-native:checked),
.checkbox-card:has(.checkbox-native:indeterminate) {
  border-color: var(--control-checked-border);
  background-color: var(--color-accent-50);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-accent-200);
}

.checkbox-card:hover {
  border-color: var(--border-color-strong);
}

.checkbox-card .checkbox-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.checkbox-card .checkbox-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — States
   ═══════════════════════════════════════════════════════════ */

/* Focus */
.checkbox-native:focus-visible ~ .checkbox-box {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled unchecked */
.checkbox.is-disabled {
  opacity: var(--control-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Disabled checked — keep visual */
.checkbox.is-disabled .checkbox-native:checked ~ .checkbox-box,
.checkbox.is-disabled .checkbox-native:indeterminate ~ .checkbox-box {
  opacity: 0.8;
}

/* Error */
.checkbox-error .checkbox-box {
  border-color: var(--color-error);
}

.checkbox-error .checkbox-native:checked ~ .checkbox-box,
.checkbox-error .checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.checkbox-error .checkbox-label {
  color: var(--color-error);
}

.checkbox-error.checkbox-card:has(.checkbox-native:checked) {
  border-color: var(--color-error);
  background-color: var(--color-error-light);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input */
.radio-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── The visible circle ─────────────────────────────────── */
.radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--checkbox-md);
  height: var(--checkbox-md);
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-pill);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}

/* ── Inner dot ──────────────────────────────────────────── */
.radio-dot {
  width: 45%;
  height: 45%;
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-50);
  transform: scale(0);
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Selected: show dot */
.radio-native:checked ~ .radio-circle .radio-dot {
  transform: scale(1);
}

/* Selected state */
.radio-native:checked ~ .radio-circle {
  border-color: var(--control-checked-border);
  background-color: var(--control-checked-bg);
}

/* ── Sizes ──────────────────────────────────────────────── */
.radio-sm {
  font-size: var(--text-sm);
}

.radio-sm .radio-circle {
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
}

.radio-md {
  font-size: var(--text-sm);
}

.radio-md .radio-circle {
  width: var(--checkbox-md);
  height: var(--checkbox-md);
}

.radio-lg {
  font-size: var(--text-base);
}

.radio-lg .radio-circle {
  width: var(--checkbox-lg);
  height: var(--checkbox-lg);
}

/* ── Label positions ────────────────────────────────────── */
.radio-label-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.radio-label-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.radio-label-bottom .radio-circle {
  margin-bottom: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Variant: Card
   ═══════════════════════════════════════════════════════════ */

.radio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.radio-card .radio-circle {
  order: -1;
  align-self: flex-start;
}

.radio-card:has(.radio-native:checked) {
  border-color: var(--control-checked-border);
  background-color: var(--color-accent-50);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-accent-200);
}

.radio-card:hover {
  border-color: var(--border-color-strong);
}

.radio-card .radio-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.radio-card .radio-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Variant: Button Group (Segmented Control)
   ═══════════════════════════════════════════════════════════ */

.radio-group-btn {
  display: inline-flex;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--control-bg);
}

.radio-group-btn .radio-btn {
  position: relative;
}

.radio-group-btn .radio-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

.radio-group-btn .radio-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1-5) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
}

.radio-group-btn .radio-btn:hover .radio-btn-label {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-200);
}

.radio-group-btn .radio-native:checked ~ .radio-btn-label {
  color: var(--color-neutral-50);
  background-color: var(--control-checked-bg);
}

.radio-group-btn .radio-btn + .radio-btn .radio-btn-label {
  border-left: var(--border-width) solid var(--border-color);
}

/* Focus on button group */
.radio-group-btn .radio-native:focus-visible ~ .radio-btn-label {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
  z-index: var(--z-raised);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   RADIO — States
   ═══════════════════════════════════════════════════════════ */

/* Focus */
.radio-native:focus-visible ~ .radio-circle {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled */
.radio.is-disabled {
  opacity: var(--control-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Error */
.radio-error .radio-circle {
  border-color: var(--color-error);
}

.radio-error .radio-native:checked ~ .radio-circle {
  border-color: var(--color-error);
  background-color: var(--color-error);
}

.radio-error .radio-label {
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX GROUP
   ═══════════════════════════════════════════════════════════ */

.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkbox-group-horizontal,
.radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.checkbox-group-label,
.radio-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--input-label-color);
  margin-bottom: var(--space-1);
  display: block;
}

.checkbox-group-helper,
.radio-group-helper {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}

.checkbox-group-error,
.radio-group-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-error);
  line-height: var(--leading-tight);
}

.checkbox-group-error svg,
.radio-group-error svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  color: var(--color-error);
}


/* ─── src\components\C:\DEV\minora\src\components\divider.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Divider & Separator Components
   divider.css

   ANATOMY — HORIZONTAL DIVIDER
   ─────────────────────────────────────────────────────────────
   Structure:
     <!-- Simple line -->
     <hr class="divider" />

     <!-- With centered text -->
     <div class="divider divider-label">
       <span>atau</span>
     </div>

     <!-- With centered icon -->
     <div class="divider divider-icon">
       <svg class="divider-icon-svg">...</svg>
     </div>

     <!-- With left/right label -->
     <div class="divider divider-label divider-label-left">
       <span>Section</span>
     </div>

   Class layers:
     1. .divider               → Base: full-width horizontal rule
     2. .divider-{weight}      → Thickness (thin/thick)
     3. .divider-{style}       → Line style (solid/dashed)
     4. .divider-{color}       → Color (subtle/muted/accent)
     5. .divider-label         → Wrapper for text/icon variant
     6. .divider-label-left    → Modifier: label aligned left
     7. .divider-label-right   → Modifier: label aligned right
     8. .divider-{spacing}     → Margin utility (sm/md/lg)
   ─────────────────────────────────────────────────────────────

   ANATOMY — VERTICAL SEPARATOR
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="flex-row">
       <span>Home</span>
       <span class="separator"></span>
       <span>Components</span>
       <span class="separator separator-dashed"></span>
       <span>Divider</span>
     </div>

   Class layers:
     1. .separator             → Base: vertical line, stretches in flex
     2. .separator-{weight}    → Thickness (thin/thick)
     3. .separator-{style}     → Line style (solid/dashed)
     4. .separator-{color}     → Color (subtle/muted/accent)
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   DIVIDER — Base (Horizontal)
   ═══════════════════════════════════════════════════════════ */

/* Simple <hr> divider */
.divider {
  display: block;
  width: 100%;
  border: none;
  border-top: var(--border-width) solid var(--color-neutral-200);
  margin: 0;
}

/* Divider wrapper — for text/icon variants */
.divider-label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-4);
}

/* The line — left side */
.divider-label::before {
  content: '';
  flex: 1;
  border-top: var(--border-width) solid var(--color-neutral-200);
}

/* The line — right side */
.divider-label::after {
  content: '';
  flex: 1;
  border-top: var(--border-width) solid var(--color-neutral-200);
}

/* Centered label */
.divider-label > span,
.divider-label > svg {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-400);
  line-height: var(--leading-none);
  text-transform: lowercase;
}

/* Icon inside divider */
.divider-icon-svg {
  flex-shrink: 0;
  color: var(--color-neutral-400);
}

/* ── Label alignment modifiers ──────────────────────────── */

/* Label aligned left — only right line visible */
.divider-label-left::before {
  display: none;
}

/* Label aligned right — only left line visible */
.divider-label-right::after {
  display: none;
}

/* Override text-transform for left/right labels */
.divider-label-left > span,
.divider-label-right > span {
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER — Weight (Thickness)
   ═══════════════════════════════════════════════════════════ */

/* Thin (1px — default) */
.divider-thin {
  border-top-width: var(--border-width);
}

.divider-thin.divider-label::before,
.divider-thin.divider-label::after {
  border-top-width: var(--border-width);
}

/* Thick (2px) */
.divider-thick {
  border-top-width: var(--border-width-2);
}

.divider-thick.divider-label::before,
.divider-thick.divider-label::after {
  border-top-width: var(--border-width-2);
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER — Style
   ═══════════════════════════════════════════════════════════ */

/* Dashed */
.divider-dashed {
  border-top-style: dashed;
}

.divider-dashed.divider-label::before,
.divider-dashed.divider-label::after {
  border-top-style: dashed;
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER — Color
   ═══════════════════════════════════════════════════════════ */

/* Subtle (default — neutral-200) */
.divider-subtle {
  border-top-color: var(--color-neutral-200);
}

.divider-subtle.divider-label::before,
.divider-subtle.divider-label::after {
  border-top-color: var(--color-neutral-200);
}

.divider-subtle.divider-label > span,
.divider-subtle.divider-label > svg {
  color: var(--color-neutral-400);
}

/* Muted — more visible (neutral-300) */
.divider-muted {
  border-top-color: var(--color-neutral-300);
}

.divider-muted.divider-label::before,
.divider-muted.divider-label::after {
  border-top-color: var(--color-neutral-300);
}

.divider-muted.divider-label > span,
.divider-muted.divider-label > svg {
  color: var(--color-neutral-500);
}

/* Accent — warm gold */
.divider-accent {
  border-top-color: var(--color-accent-300);
}

.divider-accent.divider-label::before,
.divider-accent.divider-label::after {
  border-top-color: var(--color-accent-300);
}

.divider-accent.divider-label > span,
.divider-accent.divider-label > svg {
  color: var(--color-accent-500);
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER — Spacing Utility
   Margin top and bottom for consistent spacing
   ═══════════════════════════════════════════════════════════ */

.divider-sm {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.divider-md {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.divider-lg {
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

/* ═══════════════════════════════════════════════════════════
   DIVIDER — On dark background
   ═══════════════════════════════════════════════════════════ */

.divider-dark {
  border-top-color: var(--color-neutral-700);
}

.divider-dark.divider-label::before,
.divider-dark.divider-label::after {
  border-top-color: var(--color-neutral-700);
}

.divider-dark.divider-label > span,
.divider-dark.divider-label > svg {
  color: var(--color-neutral-500);
}

/* ═══════════════════════════════════════════════════════════
   SEPARATOR — Vertical
   ═══════════════════════════════════════════════════════════ */

.separator {
  display: inline-block;
  align-self: stretch;
  width: 0;
  border-right: var(--border-width) solid var(--color-neutral-200);
  margin: 0 var(--space-4);
  flex-shrink: 0;
}

/* ── Weight ─────────────────────────────────────────────── */
.separator-thin {
  border-right-width: var(--border-width);
}

.separator-thick {
  border-right-width: var(--border-width-2);
}

/* ── Style ──────────────────────────────────────────────── */
.separator-dashed {
  border-right-style: dashed;
}

/* ── Color ──────────────────────────────────────────────── */
.separator-subtle {
  border-right-color: var(--color-neutral-200);
}

.separator-muted {
  border-right-color: var(--color-neutral-300);
}

.separator-accent {
  border-right-color: var(--color-accent-300);
}

.separator-dark {
  border-right-color: var(--color-neutral-700);
}


/* ─── src\components\C:\DEV\minora\src\components\form-validation.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Form Validation System
   form-validation.css

   Covers:
     - Inline field validation (error/success/warning)
     - Password strength indicator
     - Form-level alert banner
     - Form success state
     - Validation message animations (slide + fade)
     - Field highlight effects
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   FIELD ERROR / WARNING / SUCCESS MESSAGES
   Animation: slide down + fade in on appear
   ═══════════════════════════════════════════════════════════ */

.field-error-message,
.field-warning-message,
.field-success-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  opacity: 0;
  transform: translateY(-4px);
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

@keyframes field-msg-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-error-message.fade-out,
.field-warning-message.fade-out,
.field-success-message.fade-out {
  animation: field-msg-out var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes field-msg-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.field-error-message svg,
.field-warning-message svg,
.field-success-message svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  margin-top: var(--space-0-25);
}

/* Error */
.field-error-message {
  color: var(--color-error);
}

.field-error-message svg {
  color: var(--color-error);
}

/* Warning */
.field-warning-message {
  color: var(--color-warning);
}

.field-warning-message svg {
  color: var(--color-warning);
}

/* Success */
.field-success-message {
  color: var(--color-success);
}

.field-success-message svg {
  color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   INPUT VALIDATION STATES
   Applies to .input-wrapper from input.css
   ═══════════════════════════════════════════════════════════ */

/* Error — override input.css defaults */
.input-wrapper.field-error {
  border-color: var(--color-error);
}

.input-wrapper.field-error .input {
  color: var(--input-text-color);
}

.input-wrapper.field-error:focus-within {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

/* Validation icon inside input (trailing position) */
.field-validation-icon {
  display: none;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-3);
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

.input-wrapper.field-error .field-validation-icon.icon-error {
  display: inline-flex;
  color: var(--color-error);
}

.input-wrapper.field-success .field-validation-icon.icon-success {
  display: inline-flex;
  color: var(--color-success);
}

.input-wrapper.field-warning .field-validation-icon.icon-warning {
  display: inline-flex;
  color: var(--color-warning);
}

/* Success state */
.input-wrapper.field-success {
  border-color: var(--color-success);
}

.input-wrapper.field-success:focus-within {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

/* Warning state */
.input-wrapper.field-warning {
  border-color: var(--color-warning);
}

.input-wrapper.field-warning:focus-within {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   SELECT VALIDATION STATES
   ═══════════════════════════════════════════════════════════ */

.select.field-error .select-trigger {
  border-color: var(--color-error);
}

.select.field-error.select-open .select-trigger {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

.select.field-success .select-trigger {
  border-color: var(--color-success);
}

.select.field-success.select-open .select-trigger {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

.select.field-warning .select-trigger {
  border-color: var(--color-warning);
}

.select.field-warning.select-open .select-trigger {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   TEXTAREA VALIDATION STATES
   ═══════════════════════════════════════════════════════════ */

.textarea.field-error {
  border-color: var(--color-error);
}

.textarea.field-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

.textarea.field-success {
  border-color: var(--color-success);
}

.textarea.field-success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

.textarea.field-warning {
  border-color: var(--color-warning);
}

.textarea.field-warning:focus {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX / RADIO VALIDATION
   ═══════════════════════════════════════════════════════════ */

.checkbox.field-error .checkbox-box {
  border-color: var(--color-error);
}

.checkbox.field-error .checkbox-native:checked ~ .checkbox-box {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.checkbox.field-error .checkbox-label {
  color: var(--color-error);
}

.radio.field-error .radio-circle {
  border-color: var(--color-error);
}

.radio.field-error .radio-native:checked ~ .radio-circle {
  border-color: var(--color-error);
  background-color: var(--color-error);
}

.radio.field-error .radio-label {
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE / SWITCH VALIDATION
   ═══════════════════════════════════════════════════════════ */

.switch-card.field-error {
  border-color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   CHARACTER COUNTER — State colors
   ═══════════════════════════════════════════════════════════ */

.input-counter.limit-near {
  color: var(--color-warning);
  font-weight: var(--font-medium);
}

.input-counter.limit-reached {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}

/* ═══════════════════════════════════════════════════════════
   PASSWORD STRENGTH INDICATOR
   ═══════════════════════════════════════════════════════════ */

.password-strength {
  margin-top: var(--space-2);
}

.password-strength-bar-track {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-1-5);
}

.password-strength-segment {
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  transition: background-color var(--duration-normal) var(--ease-in-out);
}

/* Strength levels */
.password-strength[data-strength="weak"] .password-strength-segment:nth-child(1) {
  background-color: var(--color-error);
}

.password-strength[data-strength="fair"] .password-strength-segment:nth-child(-n+2) {
  background-color: var(--color-warning);
}

.password-strength[data-strength="good"] .password-strength-segment:nth-child(-n+3) {
  background-color: var(--color-accent-500);
}

.password-strength[data-strength="strong"] .password-strength-segment {
  background-color: var(--color-success);
}

/* Strength label */
.password-strength-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--color-neutral-500);
  transition: color var(--duration-fast) var(--ease-in-out);
}

.password-strength[data-strength="weak"] .password-strength-label {
  color: var(--color-error);
}

.password-strength[data-strength="fair"] .password-strength-label {
  color: var(--color-warning);
}

.password-strength[data-strength="good"] .password-strength-label {
  color: var(--color-accent-600);
}

.password-strength[data-strength="strong"] .password-strength-label {
  color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   FORM-LEVEL ALERT BANNER
   ═══════════════════════════════════════════════════════════ */

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: translateY(-8px);
  animation: form-alert-in var(--duration-normal) var(--ease-out) forwards;
}

@keyframes form-alert-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-alert.fade-out {
  animation: form-alert-out var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes form-alert-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Error alert */
.form-alert-error {
  background-color: var(--color-error-light);
  border: var(--border-width) solid var(--color-error-border);
}

.form-alert-error .form-alert-icon {
  color: var(--color-error);
}

.form-alert-error .form-alert-title {
  color: var(--color-error-dark);
}

.form-alert-error .form-alert-list li {
  color: var(--color-error-dark);
}

.form-alert-error .form-alert-list a {
  color: var(--color-error);
}

/* Warning alert */
.form-alert-warning {
  background-color: var(--color-warning-light);
  border: var(--border-width) solid var(--color-warning-border);
}

.form-alert-warning .form-alert-icon {
  color: var(--color-warning);
}

.form-alert-warning .form-alert-title {
  color: var(--color-warning-dark);
}

.form-alert-warning .form-alert-list li {
  color: var(--color-warning-dark);
}

.form-alert-warning .form-alert-list a {
  color: var(--color-warning);
}

/* Success alert */
.form-alert-success {
  background-color: var(--color-success-light);
  border: var(--border-width) solid var(--color-success-border);
}

.form-alert-success .form-alert-icon {
  color: var(--color-success);
}

.form-alert-success .form-alert-title {
  color: var(--color-success-dark);
}

.form-alert-success .form-alert-list li {
  color: var(--color-success-dark);
}

/* Alert content */
.form-alert-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: var(--space-0-5);
}

.form-alert-body {
  flex: 1;
  min-width: 0;
}

.form-alert-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.form-alert-list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.form-alert-list li {
  margin-bottom: var(--space-0-5);
}

.form-alert-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: var(--font-medium);
}

.form-alert-list a:hover {
  text-decoration-thickness: 2px;
}

/* Dismiss button */
.form-alert-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.form-alert-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-neutral-700);
}

.form-alert-dismiss svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   FORM SUCCESS STATE
   ═══════════════════════════════════════════════════════════ */

.form-success-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  gap: var(--space-4);
  animation: form-success-in var(--duration-slow) var(--ease-out) forwards;
}

.form-success-state.is-visible {
  display: flex;
}

@keyframes form-success-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.form-success-icon {
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background-color: var(--color-success-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.form-success-icon svg {
  width: var(--space-8);
  height: var(--space-8);
  color: var(--color-success);
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: success-check-draw var(--duration-slow) var(--ease-out) var(--anim-check-draw-delay) forwards;
}

@keyframes success-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.form-success-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
}

.form-success-desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  line-height: var(--leading-relaxed);
  max-width: 360px;
}

/* ═══════════════════════════════════════════════════════════
   FORM LOADING / SUBMITTING STATE
   ═══════════════════════════════════════════════════════════ */

.form.is-submitting {
  opacity: 0.6;
  pointer-events: none;
}

.form.is-submitting .btn-submit-text {
  opacity: 0;
}

.form.is-submitting .btn-submit-spinner {
  display: inline-flex;
}

.btn-submit-spinner {
  display: none;
  width: var(--space-4);
  height: var(--space-4);
  position: absolute;
  animation: btn-spin var(--anim-spinner-fast) linear infinite;
}

.btn-submit-spinner .spinner-circle {
  stroke: currentColor;
  stroke-dasharray: 20;
  stroke-dashoffset: 15;
  stroke-linecap: round;
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   VALIDATING STATE — Inline indicator
   ═══════════════════════════════════════════════════════════ */

.field-validating-indicator {
  display: none;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

.field-validating-indicator.is-visible {
  display: inline-flex;
}

.field-validating-indicator .validating-spinner {
  width: var(--space-3);
  height: var(--space-3);
  animation: btn-spin var(--anim-spin-duration) linear infinite;
}

.field-validating-indicator .validating-spinner .spinner-circle {
  stroke: currentColor;
  stroke-dasharray: 12;
  stroke-dashoffset: 9;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════
   FORM — Hide/Show transitions
   ═══════════════════════════════════════════════════════════ */

.form-contents {
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.form-contents.is-hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY: Helper for field spacing with validation
   ═══════════════════════════════════════════════════════════ */

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   CONFIRM PASSWORD MATCH INDICATOR
   ═══════════════════════════════════════════════════════════ */

.password-match-message {
  display: none;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.password-match-message.is-visible {
  display: flex;
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

.password-match-message.is-error {
  color: var(--color-error);
}

.password-match-message.is-error svg {
  color: var(--color-error);
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}

.password-match-message.is-success {
  color: var(--color-success);
}

.password-match-message.is-success svg {
  color: var(--color-success);
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}


/* ─── src\components\C:\DEV\minora\src\components\input.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Input & Textarea Components
   input.css

   ANATOMY — INPUT GROUP
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="input-group">
       <label class="input-label" for="...">
         Email <span class="input-required">*</span>
       </label>
       <div class="input-wrapper">
         <!-- optional: icon/Addon prefix -->
         <svg class="input-icon-leading">...</svg>
         <span class="input-addon">https://</span>

         <!-- The actual input -->
         <input class="input input-md" id="..." type="text" />

         <!-- optional: icon/button suffix -->
         <button class="input-icon-trailing input-clear">...</button>
         <span class="input-addon">.com</span>
       </div>
       <!-- optional: helper / error / counter text -->
       <span class="input-helper">Helper text</span>
       <span class="input-message input-message-error">Error msg</span>
       <span class="input-counter">0 / 50</span>
     </div>

   Class layers:
     1. .input-group          → Wrapper for label + input + helper
     2. .input                → Base reset, layout, typography
     3. .input-{variant}      → Style (default/filled/underline)
     4. .input-{size}         → Height, padding, font-size
     5. .input-{state}        → Error/success/warning/disabled/readonly
     6. .input-wrapper        → Flex container for addons + input
     7. .input-icon-leading   → Prefix icon (SVG)
     8. .input-icon-trailing  → Suffix icon/button (eye toggle, clear)
     9. .input-addon          → Text prefix/suffix
    10. .input-label          → Label above input
    11. .input-helper          → Helper text below input
    12. .input-message         → Validation message (error/success/warning)
    13. .input-counter         → Character counter
   ─────────────────────────────────────────────────────────────

   ANATOMY — TEXTAREA
   ─────────────────────────────────────────────────────────────
   Structure: same as input but uses .textarea class instead.
     <div class="input-group">
       <label class="input-label" for="...">Bio</label>
       <textarea class="textarea textarea-md" id="..."></textarea>
       <span class="input-helper">Optional helper</span>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   INPUT GROUP — Wrapper
   ═══════════════════════════════════════════════════════════ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   INPUT LABEL
   ═══════════════════════════════════════════════════════════ */

.input-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--input-label-color);
  line-height: var(--leading-tight);
}

.input-label .input-required {
  color: var(--color-error);
  margin-left: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   INPUT WRAPPER — flex container for addons + input
   ═══════════════════════════════════════════════════════════ */

.input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-color);
  background-color: var(--input-bg);
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  overflow: hidden;
}

/* Focus state on wrapper (triggered when child input:focus) */
.input-wrapper:has(.input:focus),
.input-wrapper:has(.textarea:focus) {
  border-color: var(--input-focus-color);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-color);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Base
   ═══════════════════════════════════════════════════════════ */

.input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--input-text-color);
  line-height: var(--leading-none);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder {
  color: var(--input-placeholder-color);
}

.input:focus {
  outline: none;
}

/* Disabled */
.input:disabled {
  opacity: var(--input-disabled-opacity);
  cursor: var(--input-disabled-cursor);
}

/* Readonly */
.input:read-only {
  background-color: var(--input-addon-bg);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Sizes
   ═══════════════════════════════════════════════════════════ */

.input-sm {
  min-height: var(--input-sm-height);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
}

.input-md {
  min-height: var(--input-md-height);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

.input-lg {
  min-height: var(--input-lg-height);
  font-size: var(--text-base);
  padding: var(--space-2-5) var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Variants
   ═══════════════════════════════════════════════════════════ */

/* Default (bordered) — base style is already this */

/* Filled (subtle background, no border) */
.input-filled {
  border-color: transparent;
  background-color: var(--input-filled-bg);
}

.input-filled.input-wrapper {
  border-color: transparent;
  background-color: var(--input-filled-bg);
}

.input-filled.input-wrapper:has(.input:focus),
.input-filled.input-wrapper:has(.textarea:focus) {
  border-color: transparent;
  background-color: var(--input-bg);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-color);
}

/* Underline (only bottom border) */
.input-underline.input-wrapper {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--border-color);
  border-radius: var(--radius-none);
  background-color: transparent;
}

.input-underline.input-wrapper:has(.input:focus),
.input-underline.input-wrapper:has(.textarea:focus) {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--input-focus-color);
  box-shadow: none;
}

.input-underline .input {
  padding-left: 0;
  padding-right: 0;
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Semantic States (Error, Success, Warning)
   Applied on the .input-wrapper
   ═══════════════════════════════════════════════════════════ */

/* Error */
.input-error.input-wrapper {
  border-color: var(--color-error);
}

.input-error.input-wrapper:has(.input:focus),
.input-error.input-wrapper:has(.textarea:focus) {
  border-color: var(--input-focus-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-error);
}

.input-error.input-filled.input-wrapper {
  border-color: transparent;
}

.input-error.input-filled.input-wrapper:has(.input:focus),
.input-error.input-filled.input-wrapper:has(.textarea:focus) {
  border-color: transparent;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-error);
}

.input-error.input-underline.input-wrapper {
  border-bottom-color: var(--color-error);
}

.input-error.input-underline.input-wrapper:has(.input:focus),
.input-error.input-underline.input-wrapper:has(.textarea:focus) {
  border-bottom-color: var(--input-focus-error);
  box-shadow: none;
}

/* Success */
.input-success.input-wrapper {
  border-color: var(--color-success);
}

.input-success.input-wrapper:has(.input:focus),
.input-success.input-wrapper:has(.textarea:focus) {
  border-color: var(--input-focus-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-success);
}

.input-success.input-filled.input-wrapper {
  border-color: transparent;
}

.input-success.input-filled.input-wrapper:has(.input:focus),
.input-success.input-filled.input-wrapper:has(.textarea:focus) {
  border-color: transparent;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-success);
}

.input-success.input-underline.input-wrapper {
  border-bottom-color: var(--color-success);
}

.input-success.input-underline.input-wrapper:has(.input:focus),
.input-success.input-underline.input-wrapper:has(.textarea:focus) {
  border-bottom-color: var(--input-focus-success);
  box-shadow: none;
}

/* Warning */
.input-warning.input-wrapper {
  border-color: var(--color-warning);
}

.input-warning.input-wrapper:has(.input:focus),
.input-warning.input-wrapper:has(.textarea:focus) {
  border-color: var(--input-focus-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-warning);
}

.input-warning.input-filled.input-wrapper {
  border-color: transparent;
}

.input-warning.input-filled.input-wrapper:has(.input:focus),
.input-warning.input-filled.input-wrapper:has(.textarea:focus) {
  border-color: transparent;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-warning);
}

.input-warning.input-underline.input-wrapper {
  border-bottom-color: var(--color-warning);
}

.input-warning.input-underline.input-wrapper:has(.input:focus),
.input-warning.input-underline.input-wrapper:has(.textarea:focus) {
  border-bottom-color: var(--input-focus-warning);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Icons (Leading & Trailing)
   ═══════════════════════════════════════════════════════════ */

.input-icon-leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--input-icon-color);
  margin-left: var(--space-3);
  width: var(--space-4);
  height: var(--space-4);
}

.input-icon-leading svg {
  width: var(--space-4);
  height: var(--space-4);
}

.input-icon-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--input-icon-color);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-3);
  transition: color var(--duration-fast) var(--ease-in-out);
}

.input-icon-trailing svg {
  width: var(--space-4);
  height: var(--space-4);
}

.input-icon-trailing:hover {
  color: var(--color-neutral-600);
}

/* Password eye toggle */
.input-icon-trailing:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Clear button (X) — hidden by default, shown via JS */
.input-clear {
  display: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
}

.input-clear.is-visible {
  display: inline-flex;
  opacity: 1;
}

.input-clear:hover {
  color: var(--color-neutral-700);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Addon (text prefix/suffix)
   ═══════════════════════════════════════════════════════════ */

.input-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--input-addon-text-color);
  background-color: var(--input-addon-bg);
  line-height: var(--leading-none);
  padding: var(--space-1) var(--space-2-5);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.input-addon:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: var(--border-width) solid var(--border-color);
  padding-right: var(--space-2);
}

.input-addon:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: var(--border-width) solid var(--border-color);
  padding-left: var(--space-2);
}

/* Adjust input padding when addons present */
.input-wrapper:has(.input-icon-leading) .input {
  padding-left: var(--space-1);
}

.input-wrapper:has(.input-icon-trailing) .input {
  padding-right: var(--space-1);
}

.input-wrapper:has(.input-addon:first-child) .input,
.input-wrapper .input-addon + .input {
  padding-left: var(--space-1);
}

.input-wrapper:has(.input-addon:last-child) .input,
.input-wrapper .input + .input-addon {
  padding-right: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Helper text
   ═══════════════════════════════════════════════════════════ */

.input-helper {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Validation messages (error/success/warning)
   ═══════════════════════════════════════════════════════════ */

.input-message {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.input-message svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}

.input-message-error {
  color: var(--color-error);
}

.input-message-error svg {
  color: var(--color-error);
}

.input-message-success {
  color: var(--color-success);
}

.input-message-success svg {
  color: var(--color-success);
}

.input-message-warning {
  color: var(--color-warning);
}

.input-message-warning svg {
  color: var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════
   INPUT — Character counter
   ═══════════════════════════════════════════════════════════ */

.input-counter {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

.input-counter.limit-near {
  color: var(--color-warning);
}

.input-counter.limit-reached {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}

/* ═══════════════════════════════════════════════════════════
   TEXTAREA
   ═══════════════════════════════════════════════════════════ */

.textarea {
  display: block;
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--input-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--input-text-color);
  line-height: var(--leading-relaxed);
  padding: var(--space-2) var(--space-3);
  outline: none;
  resize: vertical;
  min-height: calc(var(--textarea-min-rows) * 1.625 * var(--text-sm) + var(--space-4));
  max-height: calc(var(--textarea-max-rows) * 1.625 * var(--text-sm) + var(--space-4));
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  overflow-y: auto;
}

.textarea::placeholder {
  color: var(--input-placeholder-color);
}

.textarea:focus {
  outline: none;
  border-color: var(--input-focus-color);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-color);
}

.textarea:disabled {
  opacity: var(--input-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  resize: none;
}

.textarea:read-only {
  background-color: var(--input-addon-bg);
}

/* Textarea sizes */
.textarea-sm {
  font-size: var(--text-sm);
  padding: var(--space-1-5) var(--space-3);
}

.textarea-md {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.textarea-lg {
  font-size: var(--text-base);
  padding: var(--space-2-5) var(--space-4);
}

/* Textarea semantic states */
.textarea-error {
  border-color: var(--color-error);
}

.textarea-error:focus {
  border-color: var(--input-focus-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-error);
}

.textarea-success {
  border-color: var(--color-success);
}

.textarea-success:focus {
  border-color: var(--input-focus-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-success);
}

.textarea-warning {
  border-color: var(--color-warning);
}

.textarea-warning:focus {
  border-color: var(--input-focus-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-warning);
}

/* ═══════════════════════════════════════════════════════════
   DISABLED STATE ON GROUP
   ═══════════════════════════════════════════════════════════ */

.input-group.is-disabled {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
}

.input-group.is-disabled .input-wrapper {
  cursor: var(--input-disabled-cursor);
}

/* ═══════════════════════════════════════════════════════════
   READONLY STATE ON GROUP
   ═══════════════════════════════════════════════════════════ */

.input-group.is-readonly .input-wrapper {
  background-color: var(--input-addon-bg);
  cursor: default;
}


/* ─── src\components\C:\DEV\minora\src\components\modal.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Modal & Dialog Components
   modal.css

   ANATOMY — MODAL
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="modal-overlay" id="modal-id" role="dialog" aria-modal="true">
       <div class="modal modal-md">
         <div class="modal-header">
           <h2 class="modal-title">Title</h2>
           <button class="modal-close" aria-label="Close">
             <svg>×</svg>
           </button>
         </div>
         <div class="modal-body">
           Content here…
         </div>
         <div class="modal-footer">
           <button class="btn btn-secondary">Cancel</button>
           <button class="btn btn-primary">Confirm</button>
         </div>
       </div>
     </div>

   Class layers:
     1. .modal-overlay        → Backdrop, fixed, blur, z-index
     2. .modal                → Container, shadow, animation
     3. .modal-{size}         → Width (sm/md/lg/xl/fullscreen)
     4. .modal-header          → Title + close button
     5. .modal-body            → Scrollable content area
     6. .modal-footer          → Action buttons
     7. .modal-{variant}       → No-header, scrollable, multi-step
   ─────────────────────────────────────────────────────────────

   ANATOMY — DIALOG
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="modal-overlay" role="alertdialog" aria-modal="true">
       <div class="dialog dialog-md">
         <div class="dialog-icon">
           <svg>…</svg>
         </div>
         <h2 class="dialog-title">Are you sure?</h2>
         <p class="dialog-desc">This action cannot be undone.</p>
         <!-- optional: input field -->
         <div class="dialog-actions">
           <button class="btn btn-secondary">Cancel</button>
           <button class="btn btn-destructive">Delete</button>
         </div>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   MODAL OVERLAY — Backdrop
   ═══════════════════════════════════════════════════════════ */

.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--modal-overlay-bg);
  backdrop-filter: blur(var(--modal-overlay-blur));
  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--modal-open-duration) var(--ease-in-out),
              visibility var(--modal-open-duration) var(--ease-in-out);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Nested modal stacking */
.modal-overlay + .modal-overlay {
  z-index: calc(var(--z-modal) + 10);
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Container
   ═══════════════════════════════════════════════════════════ */

.modal {
  position: relative;
  width: 100%;
  max-width: var(--modal-max-w);
  max-height: var(--modal-max-h);
  background-color: var(--modal-bg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  transition: transform var(--modal-open-duration) var(--modal-open-ease),
              opacity var(--modal-open-duration) var(--ease-in-out);
}

.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Sizes
   ═══════════════════════════════════════════════════════════ */

.modal-sm {
  max-width: min(var(--modal-sm), var(--modal-max-w));
}

.modal-md {
  max-width: min(var(--modal-md), var(--modal-max-w));
}

.modal-lg {
  max-width: min(var(--modal-lg), var(--modal-max-w));
}

.modal-xl {
  max-width: min(var(--modal-xl), var(--modal-max-w));
}

.modal-fullscreen {
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100vh - var(--space-4));
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Header
   ═══════════════════════════════════════════════════════════ */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--modal-header-padding);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Close button
   ═══════════════════════════════════════════════════════════ */

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.modal-close:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
}

.modal-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.modal-close svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Body
   ═══════════════════════════════════════════════════════════ */

.modal-body {
  padding: var(--modal-body-padding);
  overflow-y: auto;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Footer
   ═══════════════════════════════════════════════════════════ */

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--modal-footer-padding);
  border-top: var(--border-width) solid var(--color-neutral-100);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Variant: No header
   ═══════════════════════════════════════════════════════════ */

.modal-no-header .modal-header {
  display: none;
}

.modal-no-header .modal-body {
  padding-top: var(--modal-body-padding);
}

.modal-no-header .modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-raised);
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Variant: Scrollable
   Header and footer fixed, body scrolls.
   ═══════════════════════════════════════════════════════════ */

.modal-scrollable .modal-body {
  overflow-y: auto;
  max-height: var(--modal-max-h);
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Variant: Multi-step
   ═══════════════════════════════════════════════════════════ */

.modal-steps {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) 0;
}

.modal-step-indicator {
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  transition: background-color var(--duration-normal) var(--ease-in-out);
}

.modal-step-indicator.is-active {
  background-color: var(--color-accent-500);
}

.modal-step-indicator.is-complete {
  background-color: var(--color-accent-300);
}

.modal-step-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-2);
}

.modal-step-label strong {
  color: var(--color-neutral-700);
  font-weight: var(--font-medium);
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — Container
   ═══════════════════════════════════════════════════════════ */

.dialog {
  position: relative;
  width: 100%;
  max-width: min(var(--modal-sm), var(--modal-max-w));
  background-color: var(--modal-bg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  padding: var(--space-6);
  text-align: center;
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  transition: transform var(--modal-open-duration) var(--modal-open-ease),
              opacity var(--modal-open-duration) var(--ease-in-out);
}

.modal-overlay.is-open .dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Dialog sizes */
.dialog-sm {
  max-width: min(320px, var(--modal-max-w));
}

.dialog-md {
  max-width: min(var(--modal-sm), var(--modal-max-w));
}

.dialog-lg {
  max-width: min(var(--modal-md), var(--modal-max-w));
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — Icon
   ═══════════════════════════════════════════════════════════ */

.dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  background-color: var(--color-neutral-100);
}

.dialog-icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

/* Confirm icon — accent gold */
.dialog-confirm .dialog-icon {
  background-color: var(--color-accent-50);
  color: var(--color-accent-500);
}

/* Destructive icon — error red */
.dialog-destructive .dialog-icon {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* Info icon — info blue */
.dialog-info .dialog-icon {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — Title & Description
   ═══════════════════════════════════════════════════════════ */

.dialog-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.dialog-desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-6);
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — Input field
   ═══════════════════════════════════════════════════════════ */

.dialog-input {
  width: 100%;
  margin-bottom: var(--space-5);
  text-align: left;
}

.dialog-input .input-wrapper {
  width: 100%;
}

.dialog-input .input {
  width: 100%;
}

.dialog-hint {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-top: var(--space-1-5);
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   DIALOG — Actions
   ═══════════════════════════════════════════════════════════ */

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.dialog-actions-full {
  justify-content: stretch;
}

.dialog-actions-full .btn {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   BODY SCROLL LOCK
   ═══════════════════════════════════════════════════════════ */

body.is-modal-open {
  overflow: hidden;
}


/* ─── src\components\C:\DEV\minora\src\components\select.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Select & Multiselect Components
   select.css

   ANATOMY — SINGLE SELECT
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="select select-md" data-select>
       <label class="input-label">Category</label>
       <div class="select-trigger" role="combobox" aria-expanded="false">
         <span class="select-placeholder">Choose...</span>
         <span class="select-value" hidden>Selected value</span>
         <svg class="select-chevron">...</svg>
       </div>
       <!-- Hidden native select for form submission -->
       <select name="category" hidden></select>
       <div class="select-dropdown" role="listbox">
         <div class="select-search-wrapper">
           <input class="select-search-input" type="text" placeholder="Search..." />
         </div>
         <div class="select-options">
           <div class="select-option" role="option" data-value="a">
             <span>Option A</span>
             <svg class="select-check">...</svg>
           </div>
           <!-- Group separator -->
           <div class="select-group-label">Group Name</div>
           <div class="select-option" role="option" data-value="b">
             <span>Option B</span>
             <svg class="select-check">...</svg>
           </div>
         </div>
       </div>
       <span class="input-helper">Helper text</span>
     </div>

   Class layers:
     1. .select                → Wrapper, layout
     2. .select-{size}         → Height, font-size
     3. .select-trigger         → Visible button (fake select)
     4. .select-dropdown        → Dropdown panel (hidden by default)
     5. .select-open            → Modifier: dropdown is visible
     6. .select-disabled        → Modifier: non-interactive
     7. .select-error           → Modifier: error state
     8. .select-success         → Modifier: success state
     9. .select-option          → Individual option
    10. .select-option-selected → Selected option style
    11. .select-group-label     → Group separator
    12. .select-chevron          → Dropdown arrow (rotates on open)
   ─────────────────────────────────────────────────────────────

   ANATOMY — MULTISELECT
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="multiselect multiselect-md" data-multiselect>
       <label class="input-label">Tags</label>
       <div class="select-trigger" role="combobox" aria-expanded="false">
         <div class="multiselect-tags">
           <span class="multiselect-tag" data-value="x">
             <span class="multiselect-tag-label">Tag X</span>
             <button class="multiselect-tag-remove" type="button">
               <svg>×</svg>
             </button>
           </span>
           <span class="multiselect-counter">+5</span>
           <input class="multiselect-search-input" placeholder="Search..." />
         </div>
         <svg class="select-chevron">...</svg>
       </div>
       <select name="tags" multiple hidden></select>
       <div class="select-dropdown" role="listbox">
         <div class="multiselect-actions">
           <button class="multiselect-select-all">Select All</button>
           <button class="multiselect-clear-all">Clear All</button>
         </div>
         <!-- options same as single select -->
       </div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   SELECT — Base wrapper
   ═══════════════════════════════════════════════════════════ */

.select,
.multiselect {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  width: 100%;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Trigger (visible button)
   ═══════════════════════════════════════════════════════════ */

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--select-bg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  overflow: hidden;
}

.select-trigger:hover:not(:disabled) {
  border-color: var(--border-color-strong);
}

/* Chevron icon */
.select-chevron {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-3);
  color: var(--input-icon-color);
  transition: transform var(--duration-normal) var(--ease-in-out);
}

.select-chevron svg {
  width: 100%;
  height: 100%;
}

/* Rotate chevron on open */
.select-open .select-chevron {
  transform: rotate(180deg);
}

/* Placeholder / value display */
.select-placeholder,
.select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-none);
}

.select-placeholder {
  color: var(--input-placeholder-color);
}

.select-value {
  color: var(--input-text-color);
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Sizes
   ═══════════════════════════════════════════════════════════ */

.select-sm .select-trigger {
  min-height: var(--select-sm-height);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.select-md .select-trigger {
  min-height: var(--select-md-height);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.select-lg .select-trigger {
  min-height: var(--select-lg-height);
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Dropdown panel
   ═══════════════════════════════════════════════════════════ */

.select-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  width: 100%;
  max-height: var(--select-dropdown-max-height);
  background-color: var(--select-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--select-dropdown-shadow);
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Flip above if .select-flip-up is set by JS */
.select-flip-up {
  top: auto;
  bottom: calc(100% + var(--space-1));
  transform: translateY(4px);
}

.select-open .select-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.select-flip-up.select-open .select-dropdown {
  transform: translateY(0);
}

/* Options container with scroll */
.select-options {
  overflow-y: auto;
  max-height: var(--select-dropdown-max-height);
  padding: var(--space-1) 0;
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Search input inside dropdown
   ═══════════════════════════════════════════════════════════ */

.select-search-wrapper {
  padding: var(--space-2) var(--space-2) var(--space-1);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
}

.select-search-input {
  width: 100%;
  border: var(--border-width) solid var(--select-search-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-2-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  background-color: var(--color-neutral-50);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-in-out);
}

.select-search-input::placeholder {
  color: var(--input-placeholder-color);
}

.select-search-input:focus {
  border-color: var(--input-focus-color);
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Individual option
   ═══════════════════════════════════════════════════════════ */

.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: var(--select-option-height);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
  user-select: none;
  -webkit-user-select: none;
}

.select-option:hover {
  background-color: var(--select-option-hover-bg);
}

.select-option:active {
  background-color: var(--select-option-active-bg);
}

/* Keyboard-focused option */
.select-option.is-focused {
  background-color: var(--select-option-hover-bg);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 0;
}

/* Selected option */
.select-option.is-selected {
  background-color: var(--select-option-active-bg);
  color: var(--input-text-color);
  font-weight: var(--font-medium);
}

/* Checkmark (hidden until selected) */
.select-check {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--input-focus-color);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out);
}

.select-option.is-selected .select-check {
  opacity: 1;
  transform: scale(1);
}

/* Hidden option (filtered out by search) */
.select-option.is-hidden {
  display: none;
}

/* Disabled option */
.select-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SELECT — Group label separator
   ═══════════════════════════════════════════════════════════ */

.select-group-label {
  padding: var(--space-1-5) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--select-group-label-color);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-top: var(--border-width) solid var(--color-neutral-100);
  margin-top: var(--space-1);
}

.select-group-label:first-child {
  margin-top: 0;
  border-top: none;
}

/* ═══════════════════════════════════════════════════════════
   SELECT — States
   ═══════════════════════════════════════════════════════════ */

/* Disabled */
.select-disabled .select-trigger {
  opacity: var(--input-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

.select-disabled .select-chevron {
  opacity: 0.5;
}

/* Error */
.select-error .select-trigger {
  border-color: var(--color-error);
}

.select-error.select-open .select-trigger {
  border-color: var(--input-focus-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-error);
}

.select-error .select-chevron {
  color: var(--color-error);
}

/* Success */
.select-success .select-trigger {
  border-color: var(--color-success);
}

.select-success.select-open .select-trigger {
  border-color: var(--input-focus-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-success);
}

.select-success .select-chevron {
  color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   MULTISELECT — Trigger with tags
   ═══════════════════════════════════════════════════════════ */

.multiselect-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  padding: var(--space-0-5) 0;
}

/* Tag inside multiselect */
.multiselect-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-25) var(--space-1-5) var(--space-0-25) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  line-height: var(--leading-none);
  white-space: nowrap;
  animation: tag-fade-in var(--duration-normal) var(--ease-out);
}

@keyframes tag-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.multiselect-tag-label {
  max-width: var(--space-32);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove button on tag */
.multiselect-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3-5);
  height: var(--space-3-5);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.multiselect-tag-remove:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-200);
}

.multiselect-tag-remove svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* Counter badge for overflow tags */
.multiselect-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--select-counter-min-width);
  height: var(--select-counter-height);
  padding: 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  background-color: var(--select-counter-bg);
  border-radius: var(--radius-pill);
  line-height: var(--leading-none);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

/* Search input inside multiselect trigger */
.multiselect-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  min-width: var(--select-search-min-width);
  flex: 1;
  padding: var(--space-1) 0;
  line-height: var(--leading-none);
}

.multiselect-search-input::placeholder {
  color: var(--input-placeholder-color);
}

/* ═══════════════════════════════════════════════════════════
   MULTISELECT — Select All / Clear All actions
   ═══════════════════════════════════════════════════════════ */

.multiselect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
  gap: var(--space-2);
}

.multiselect-actions button {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--input-focus-color);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
}

.multiselect-actions button:hover {
  background-color: var(--color-accent-50);
}

.multiselect-actions button:active {
  background-color: var(--color-accent-100);
}

.multiselect-actions .multiselect-clear-all {
  color: var(--color-error);
}

.multiselect-actions .multiselect-clear-all:hover {
  background-color: var(--color-error-light);
}

/* ═══════════════════════════════════════════════════════════
   MULTISELECT — Sizes
   ═══════════════════════════════════════════════════════════ */

.multiselect-sm .select-trigger {
  min-height: var(--select-sm-height);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.multiselect-md .select-trigger {
  min-height: var(--select-md-height);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.multiselect-lg .select-trigger {
  min-height: var(--select-lg-height);
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════
   MULTISELECT — States
   ═══════════════════════════════════════════════════════════ */

.select-disabled.multiselect .select-trigger {
  opacity: var(--input-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

.select-error.multiselect .select-trigger {
  border-color: var(--color-error);
}

.select-error.multiselect.select-open .select-trigger {
  border-color: var(--input-focus-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-error);
}

.select-success.multiselect .select-trigger {
  border-color: var(--color-success);
}

.select-success.multiselect.select-open .select-trigger {
  border-color: var(--input-focus-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--input-focus-success);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY: No results message
   ═══════════════════════════════════════════════════════════ */

.select-no-results {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  font-style: italic;
}


/* ─── src\components\C:\DEV\minora\src\components\toast.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Toast & Notification Components
   toast.css

   ANATOMY — TOAST
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="toast toast-success" role="alert" aria-live="assertive">
       <svg class="toast-icon">...</svg>
       <div class="toast-body">
         <span class="toast-message">Changes saved successfully.</span>
         <button class="toast-action">Undo</button>
       </div>
       <button class="toast-close" aria-label="Close">
         <svg>×</svg>
       </button>
       <div class="toast-progress" style="--progress:1"></div>
     </div>

   Class layers:
     1. .toast               → Base card, shadow, layout
     2. .toast-{type}        → Color scheme (success/error/warning/info/loading/neutral)
     3. .toast-icon           → Icon on left (type-appropriate)
     4. .toast-body           → Message + optional action
     5. .toast-action         → Optional action button (e.g., "Undo")
     6. .toast-close          → Dismiss button
     7. .toast-progress       → Auto-dismiss progress bar
   ─────────────────────────────────────────────────────────────

   ANATOMY — NOTIFICATION PANEL
   ─────────────────────────────────────────────────────────────
     <div class="notification-panel">
       <div class="notification-panel-header">
         <h3>Notifications</h3>
         <button class="notification-mark-all">Mark all as read</button>
       </div>
       <div class="notification-group-label">Today</div>
       <div class="notification-item notification-unread">
         <span class="notification-unread-dot"></span>
         <div class="notification-avatar">...</div>
         <div class="notification-content">
           <p class="notification-text">...</p>
           <span class="notification-time">...</span>
         </div>
       </div>
       <!-- more items -->
       <div class="notification-empty">
         <svg>...</svg>
         <p>No notifications yet</p>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   TOAST STACK — Container
   ═══════════════════════════════════════════════════════════ */

.toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--toast-stack-gap);
  position: fixed;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast-stack-bottom-right {
  bottom: var(--space-6);
  right: var(--space-6);
}

.toast-stack-bottom-left {
  bottom: var(--space-6);
  left: var(--space-6);
}

.toast-stack-bottom-center {
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
}

.toast-stack-top-right {
  top: var(--space-6);
  right: var(--space-6);
}

.toast-stack-top-left {
  top: var(--space-6);
  left: var(--space-6);
}

.toast-stack-top-center {
  top: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Base
   ═══════════════════════════════════════════════════════════ */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  max-width: var(--toast-max-width);
  min-width: var(--toast-min-width);
  background-color: var(--toast-bg);
  border-radius: var(--toast-border-radius);
  box-shadow: var(--toast-shadow);
  border: var(--border-width) solid var(--color-neutral-200);
  font-size: var(--toast-font-size);
  color: var(--color-neutral-800);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--toast-slide-duration) var(--ease-out),
              transform var(--toast-slide-duration) var(--ease-out),
              max-height var(--toast-slide-duration) var(--ease-out),
              margin-bottom var(--toast-slide-duration) var(--ease-out),
              padding-top var(--toast-slide-duration) var(--ease-out),
              padding-bottom var(--toast-slide-duration) var(--ease-out);
}

/* Entrance animation */
.toast.toast-enter {
  animation: toast-slide-in var(--toast-slide-duration) var(--ease-out) forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exit animation */
.toast.toast-exit {
  animation: toast-slide-out var(--toast-slide-duration) var(--ease-in-out) forwards;
}

@keyframes toast-slide-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Icon ─────────────────────────────────────────────────── */
.toast-icon {
  flex-shrink: 0;
  width: var(--toast-icon-size);
  height: var(--toast-icon-size);
  margin-top: var(--toast-icon-margin);
}

/* ── Body ─────────────────────────────────────────────────── */
.toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.toast-message {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-neutral-800);
}

.toast-action {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent-600);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-0-5) 0;
  margin-top: var(--space-0-5);
  text-decoration: underline;
  text-underline-offset: var(--toast-action-underline-offset);
  transition: color var(--duration-fast) var(--ease-in-out);
  align-self: flex-start;
}

.toast-action:hover {
  color: var(--color-accent-700);
}

/* ── Close button ─────────────────────────────────────────── */
.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0;
  margin-top: -2px;
  margin-right: -2px;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.toast-close:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
}

.toast-close svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ── Progress bar ─────────────────────────────────────────── */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--toast-progress-height);
  background-color: transparent;
  overflow: hidden;
}

.toast-progress::after {
  content: '';
  display: block;
  height: 100%;
  background-color: var(--color-neutral-300);
  transform-origin: left;
  transform: scaleX(var(--progress, 1));
  transition: transform linear;
}

.toast-progress.running::after {
  animation: toast-progress var(--toast-default-duration) linear forwards;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Success
   ═══════════════════════════════════════════════════════════ */

.toast-success {
  border-color: var(--color-success-border);
}

.toast-success .toast-icon {
  color: var(--color-success);
}

.toast-success .toast-progress::after {
  background-color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Error
   ═══════════════════════════════════════════════════════════ */

.toast-error {
  border-color: var(--color-error-border);
}

.toast-error .toast-icon {
  color: var(--color-error);
}

.toast-error .toast-progress::after {
  background-color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Warning
   ═══════════════════════════════════════════════════════════ */

.toast-warning {
  border-color: var(--color-warning-border);
}

.toast-warning .toast-icon {
  color: var(--color-warning);
}

.toast-warning .toast-progress::after {
  background-color: var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Info
   ═══════════════════════════════════════════════════════════ */

.toast-info {
  border-color: var(--color-info-border);
}

.toast-info .toast-icon {
  color: var(--color-info);
}

.toast-info .toast-progress::after {
  background-color: var(--color-info);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Neutral
   ═══════════════════════════════════════════════════════════ */

.toast-neutral .toast-icon {
  color: var(--color-neutral-500);
}

.toast-neutral .toast-progress::after {
  background-color: var(--color-neutral-400);
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Type: Loading (no auto-dismiss, spinner icon)
   ═══════════════════════════════════════════════════════════ */

.toast-loading {
  border-color: var(--color-neutral-200);
}

.toast-loading .toast-icon {
  color: var(--color-neutral-500);
  animation: toast-spinner-spin var(--anim-spin-duration) linear infinite;
}

.toast-loading .toast-progress {
  display: none;
}

@keyframes toast-spinner-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION PANEL
   ═══════════════════════════════════════════════════════════ */

.notification-panel {
  width: var(--notif-panel-width);
  max-height: var(--notif-panel-max-height);
  background-color: var(--toast-bg);
  border: var(--border-width) solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
  flex-shrink: 0;
}

.notification-panel-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin: 0;
}

.notification-mark-all {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-accent-600);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
}

.notification-mark-all:hover {
  background-color: var(--color-accent-50);
  color: var(--color-accent-700);
}

/* ── List container ───────────────────────────────────────── */
.notification-list {
  overflow-y: auto;
  flex: 1;
}

/* ── Group label ──────────────────────────────────────────── */
.notification-group-label {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
  background-color: var(--color-neutral-50);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

/* ── Notification item ────────────────────────────────────── */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  border-bottom: var(--border-width) solid var(--color-neutral-50);
  transition: background-color var(--duration-fast) var(--ease-in-out);
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: var(--color-neutral-50);
}

/* Unread state */
.notification-unread {
  background-color: var(--color-info-light);
}

.notification-unread:hover {
  background-color: var(--color-info-light);
}

.notification-unread-dot {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-info);
  flex-shrink: 0;
}

/* When unread: shift content to make room for dot */
.notification-unread .notification-avatar,
.notification-unread .notification-content,
.notification-unread .notification-time-indicator {
  margin-left: var(--space-2);
}

/* ── Avatar ───────────────────────────────────────────────── */
.notification-avatar {
  flex-shrink: 0;
  width: var(--notif-avatar-size);
  height: var(--notif-avatar-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-neutral-500);
  overflow: hidden;
}

.notification-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.notification-text {
  font-size: var(--text-sm);
  color: var(--color-neutral-800);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-1) 0;
}

.notification-text strong {
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
}

.notification-time {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
}

/* ── Time indicator (right side) ──────────────────────────── */
.notification-time-indicator {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-top: var(--space-0-5);
  white-space: nowrap;
}

/* ── Empty state ──────────────────────────────────────────── */
.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  gap: var(--space-3);
}

.notification-empty svg {
  width: var(--notif-avatar-size);
  height: var(--notif-avatar-size);
  color: var(--color-neutral-300);
}

.notification-empty p {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin: 0;
}

/* ── Footer ───────────────────────────────────────────────── */
.notification-panel-footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--color-neutral-100);
  text-align: center;
  flex-shrink: 0;
}

.notification-panel-footer a {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-accent-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.notification-panel-footer a:hover {
  color: var(--color-accent-700);
  text-decoration: underline;
}


/* ─── src\components\C:\DEV\minora\src\components\toggle.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Toggle / Switch Component
   toggle.css

   ANATOMY — SWITCH
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="switch switch-md">
       <input type="checkbox" class="switch-native" />
       <span class="switch-track">
         <span class="switch-thumb">
           <!-- optional icon inside thumb -->
         </span>
         <!-- optional ON/OFF labels inside track -->
       </span>
       <span class="switch-label">Label text</span>
     </label>

   Class layers:
     1. .switch              → Wrapper label, flex layout
     2. .switch-{size}       → Track & thumb sizes (sm/md/lg)
     3. .switch-{variant}    → Style (card/icon/labels)
     4. .switch-label-{pos}  → Label position (right/left/top)
     5. .switch-native       → Hidden native checkbox (accessible)
     6. .switch-track        → Pill-shaped background
     7. .switch-thumb        → Circle that slides via translateX
   ─────────────────────────────────────────────────────────────

   ANATOMY — SWITCH GROUP
   ─────────────────────────────────────────────────────────────
     <div class="switch-group">
       <span class="switch-group-label">Settings</span>
       <div class="switch-group-item">
         <label class="switch switch-md">...</label>
       </div>
       <div class="switch-separator"></div>
       <div class="switch-group-item">
         <label class="switch switch-md">...</label>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   SWITCH — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input — accessible but invisible */
.switch-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── Track (pill shape) ─────────────────────────────────── */
.switch-track {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: var(--switch-md-track-w);
  height: var(--switch-md-track-h);
  border-radius: var(--radius-pill);
  background-color: var(--switch-track-off);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
  padding: var(--space-0-5);
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Thumb (circle that slides) ─────────────────────────── */
.switch-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--switch-md-thumb);
  height: var(--switch-md-thumb);
  border-radius: var(--radius-pill);
  background-color: var(--switch-thumb);
  box-shadow: var(--switch-thumb-shadow);
  transform: translateX(0);
  transition: transform var(--duration-normal) var(--ease-out);
  position: relative;
  flex-shrink: 0;
}

/* Checked: slide thumb to right, change track color */
.switch-native:checked ~ .switch-track {
  background-color: var(--switch-track-on);
}

.switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-md-translate));
}

/* ── Sizes ──────────────────────────────────────────────── */

/* Small */
.switch-sm .switch-track {
  width: var(--switch-sm-track-w);
  height: var(--switch-sm-track-h);
}

.switch-sm .switch-thumb {
  width: var(--switch-sm-thumb);
  height: var(--switch-sm-thumb);
}

.switch-sm .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-sm-translate));
}

/* Medium (default) — sizes already set on base */

/* Large */
.switch-lg .switch-track {
  width: var(--switch-lg-track-w);
  height: var(--switch-lg-track-h);
}

.switch-lg .switch-thumb {
  width: var(--switch-lg-thumb);
  height: var(--switch-lg-thumb);
}

.switch-lg .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-lg-translate));
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Icon inside thumb
   ═══════════════════════════════════════════════════════════ */

.switch-thumb-icon {
  width: 55%;
  height: 55%;
  stroke: var(--color-accent-500);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Show icon when on */
.switch-native:checked ~ .switch-track .switch-thumb-icon.is-on {
  opacity: 1;
  transform: scale(1);
}

/* Show off icon when off */
.switch-track .switch-thumb-icon.is-off {
  opacity: 0.4;
  stroke: var(--color-neutral-400);
  transform: scale(1);
}

.switch-native:checked ~ .switch-track .switch-thumb-icon.is-off {
  opacity: 0;
  transform: scale(0.7);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — ON/OFF labels inside track
   ═══════════════════════════════════════════════════════════ */

.switch-track .switch-label-on,
.switch-track .switch-label-off {
  font-family: var(--font-sans);
  font-size: var(--switch-label-font-size);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.switch-track .switch-label-off {
  left: var(--space-1-5);
  color: var(--color-neutral-500);
}

.switch-track .switch-label-on {
  right: var(--space-1-5);
  color: var(--color-neutral-50);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.switch-native:checked ~ .switch-track .switch-label-on {
  opacity: 1;
}

/* Hide labels when thumb covers them */
.switch-track .switch-label-off {
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.switch-native:checked ~ .switch-track .switch-label-off {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Variant: Card
   Entire row clickable, like a settings item.
   ═══════════════════════════════════════════════════════════ */

.switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
  cursor: pointer;
}

.switch-card:hover {
  border-color: var(--border-color-strong);
  background-color: var(--color-neutral-50);
}

.switch-card .switch-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.switch-card-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-neutral-500);
}

.switch-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.switch-card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--input-text-color);
}

.switch-card-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
}

.switch-card .switch-track {
  flex-shrink: 0;
}

.switch-card .switch-native:checked ~ .switch-track {
  background-color: var(--switch-track-on);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — Label positions
   ═══════════════════════════════════════════════════════════ */

/* Label left (switch on right) */
.switch-label-left {
  flex-direction: row-reverse;
}

/* Label top (switch below) */
.switch-label-top {
  flex-direction: column;
  align-items: flex-start;
}

.switch-label-top .switch-track {
  margin-top: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH — States
   ═══════════════════════════════════════════════════════════ */

/* Focus visible */
.switch-native:focus-visible ~ .switch-track {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled */
.switch.is-disabled {
  opacity: var(--switch-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

.switch-card.is-disabled {
  opacity: var(--switch-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Loading state — thumb spins */
.switch.is-loading .switch-thumb {
  animation: switch-spin var(--anim-spin-duration) linear infinite;
  background-image: none;
  position: relative;
}

.switch.is-loading .switch-thumb::before {
  content: '';
  position: absolute;
  inset: var(--switch-spinner-inset);
  border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--color-neutral-300);
  border-top-color: var(--color-accent-500);
  animation: switch-spinner-ring var(--anim-spinner-fast) linear infinite;
}

.switch.is-loading .switch-track {
  background-color: var(--color-neutral-200);
  cursor: wait;
}

@keyframes switch-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes switch-spinner-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Override translate during loading so thumb stays centered */
.switch.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  animation: switch-spin var(--anim-spin-duration) linear infinite;
  transform: translateX(var(--switch-md-translate));
}

.switch-sm.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-sm-translate));
}

.switch-lg.is-loading .switch-native:checked ~ .switch-track .switch-thumb {
  transform: translateX(var(--switch-lg-translate));
}

/* ═══════════════════════════════════════════════════════════
   SWITCH GROUP — Container with separators
   ═══════════════════════════════════════════════════════════ */

.switch-group {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  overflow: hidden;
}

.switch-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--input-label-color);
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: block;
}

.switch-group-helper {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  padding: var(--space-2) var(--space-4) var(--space-4);
  display: block;
}

.switch-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.switch-group-item:hover {
  background-color: var(--color-neutral-50);
}

/* Separator between items */
.switch-separator {
  height: var(--border-width);
  background-color: var(--color-neutral-100);
  margin: 0 var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   SWITCH GROUP — Error state
   ═══════════════════════════════════════════════════════════ */

.switch-group-error .switch-group {
  border-color: var(--color-error);
}

.switch-group-error-msg {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-error);
  line-height: var(--leading-tight);
}

.switch-group-error-msg svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  color: var(--color-error);
}


/* ─── src\components\C:\DEV\minora\src\components\tooltip.css ─── */
/* ============================================================
   ELEGANT MINIMALIST UI KIT — Tooltip & Popover Components
   tooltip.css

   ANATOMY — TOOLTIP
   ─────────────────────────────────────────────────────────────
   Structure (injected to body by JS):
     <div class="tooltip tooltip-top" role="tooltip" style="position:fixed;">
       <span class="tooltip-arrow"></span>
       <span class="tooltip-content">Tooltip text</span>
     </div>

   Class layers:
     1. .tooltip              → Base container, fixed position
     2. .tooltip-{position}   → Arrow placement (top/bottom/left/right variants)
     3. .tooltip-light         → Light bg variant
     4. .tooltip-rich          → With bold title + body text
     5. .tooltip-icon         → With leading icon
     6. .tooltip-interactive  → With action button, stays on hover
   ─────────────────────────────────────────────────────────────

   ANATOMY — POPOVER
   ─────────────────────────────────────────────────────────────
   Structure:
     <div class="popover" role="dialog" style="position:fixed;">
       <div class="popover-header">Title + close</div>
       <div class="popover-body">Freeform content</div>
       <div class="popover-footer">Actions</div>
     </div>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Base
   ═══════════════════════════════════════════════════════════ */

.tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: var(--tooltip-max-width);
  font-family: var(--font-sans);
  font-size: var(--tooltip-font-size);
  line-height: var(--leading-tight);
  padding: var(--tooltip-padding);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: var(--tooltip-border-radius);
  box-shadow: var(--tooltip-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity var(--tooltip-out-duration) var(--ease-in-out),
              transform var(--tooltip-out-duration) var(--ease-in-out),
              visibility var(--tooltip-out-duration) var(--ease-in-out);
  word-wrap: break-word;
}

.tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity var(--tooltip-in-duration) var(--ease-out),
              transform var(--tooltip-in-duration) var(--ease-out),
              visibility var(--tooltip-in-duration) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Arrow
   ═══════════════════════════════════════════════════════════ */

.tooltip-arrow {
  position: absolute;
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  background-color: var(--tooltip-bg);
  transform: rotate(45deg);
}

/* Arrow positions */
.tooltip-top .tooltip-arrow,
.tooltip-top-start .tooltip-arrow,
.tooltip-top-end .tooltip-arrow {
  bottom: calc(var(--tooltip-arrow-size) * -1 + 1px);
}

.tooltip-bottom .tooltip-arrow,
.tooltip-bottom-start .tooltip-arrow,
.tooltip-bottom-end .tooltip-arrow {
  top: calc(var(--tooltip-arrow-size) * -1 + 1px);
}

.tooltip-left .tooltip-arrow,
.tooltip-left-start .tooltip-arrow,
.tooltip-left-end .tooltip-arrow {
  right: calc(var(--tooltip-arrow-size) * -1 + 1px);
}

.tooltip-right .tooltip-arrow,
.tooltip-right-start .tooltip-arrow,
.tooltip-right-end .tooltip-arrow {
  left: calc(var(--tooltip-arrow-size) * -1 + 1px);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Slide-in directions
   Different translate based on position for smooth entrance
   ═══════════════════════════════════════════════════════════ */

.tooltip-top.is-visible,
.tooltip-top-start.is-visible,
.tooltip-top-end.is-visible {
  transform: translateY(0) scale(1);
}

.tooltip-top:not(.is-visible),
.tooltip-top-start:not(.is-visible),
.tooltip-top-end:not(.is-visible) {
  transform: translateY(4px) scale(0.95);
}

.tooltip-bottom.is-visible,
.tooltip-bottom-start.is-visible,
.tooltip-bottom-end.is-visible {
  transform: translateY(0) scale(1);
}

.tooltip-bottom:not(.is-visible),
.tooltip-bottom-start:not(.is-visible),
.tooltip-bottom-end:not(.is-visible) {
  transform: translateY(-4px) scale(0.95);
}

.tooltip-left.is-visible,
.tooltip-left-start.is-visible,
.tooltip-left-end.is-visible {
  transform: translateX(0) scale(1);
}

.tooltip-left:not(.is-visible),
.tooltip-left-start:not(.is-visible),
.tooltip-left-end:not(.is-visible) {
  transform: translateX(4px) scale(0.95);
}

.tooltip-right.is-visible,
.tooltip-right-start.is-visible,
.tooltip-right-end.is-visible {
  transform: translateX(0) scale(1);
}

.tooltip-right:not(.is-visible),
.tooltip-right-start:not(.is-visible),
.tooltip-right-end:not(.is-visible) {
  transform: translateX(-4px) scale(0.95);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Variant: Light
   ═══════════════════════════════════════════════════════════ */

.tooltip-light {
  background-color: var(--tooltip-light-bg);
  color: var(--tooltip-light-color);
  border: var(--border-width) solid var(--tooltip-light-border);
}

.tooltip-light .tooltip-arrow {
  background-color: var(--tooltip-light-bg);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Variant: Rich (title + body)
   ═══════════════════════════════════════════════════════════ */

.tooltip-rich {
  padding: var(--space-3);
  max-width: var(--tooltip-rich-max-width);
}

.tooltip-rich .tooltip-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-50);
  margin-bottom: var(--space-0-5);
  display: block;
}

.tooltip-rich .tooltip-body {
  font-size: var(--text-xs);
  color: var(--color-neutral-300);
  line-height: var(--leading-snug);
}

.tooltip-light.tooltip-rich .tooltip-title {
  color: var(--color-neutral-800);
}

.tooltip-light.tooltip-rich .tooltip-body {
  color: var(--color-neutral-600);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Variant: With Icon
   ═══════════════════════════════════════════════════════════ */

.tooltip-with-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.tooltip-icon-img {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-neutral-400);
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP — Variant: Interactive
   Stays visible when mouse enters tooltip content
   ═══════════════════════════════════════════════════════════ */

.tooltip-interactive {
  pointer-events: auto;
}

.tooltip-interactive .tooltip-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2-5);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.tooltip-light.tooltip-interactive .tooltip-actions {
  border-top-color: var(--color-neutral-200);
}

.tooltip-action-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-neutral-50);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.tooltip-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.tooltip-light .tooltip-action-btn {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.tooltip-light .tooltip-action-btn:hover {
  background-color: var(--color-neutral-200);
}

/* ═══════════════════════════════════════════════════════════
   TRIGGER ELEMENTS — Elements with tooltips
   ═══════════════════════════════════════════════════════════ */

[data-tooltip] {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   POPOVER — Container
   ═══════════════════════════════════════════════════════════ */

.popover {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: var(--popover-min-width);
  max-width: var(--popover-max-width);
  max-height: calc(100vh - var(--space-8));
  background-color: var(--popover-bg);
  color: var(--popover-color);
  border: var(--border-width) solid var(--popover-border);
  border-radius: var(--popover-border-radius);
  box-shadow: var(--popover-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-4px);
  transition: opacity var(--tooltip-in-duration) var(--ease-out),
              transform var(--tooltip-in-duration) var(--ease-out),
              visibility var(--tooltip-in-duration) var(--ease-out);
}

.popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.popover.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-4px);
  transition: opacity var(--tooltip-out-duration) var(--ease-in-out),
              transform var(--tooltip-out-duration) var(--ease-in-out),
              visibility var(--tooltip-out-duration) var(--ease-in-out);
}

/* ═══════════════════════════════════════════════════════════
   POPOVER — Header
   ═══════════════════════════════════════════════════════════ */

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-neutral-100);
  flex-shrink: 0;
}

.popover-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin: 0;
}

.popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.popover-close:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
}

.popover-close svg {
  width: var(--space-3-5);
  height: var(--space-3-5);
}

/* ═══════════════════════════════════════════════════════════
   POPOVER — Body
   ═══════════════════════════════════════════════════════════ */

.popover-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.popover-body p {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.popover-body p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   POPOVER — Footer
   ═══════════════════════════════════════════════════════════ */

.popover-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--color-neutral-100);
  flex-shrink: 0;
}