/* ==========================================================================
   Icon System — annaijo
   Three-tier SVG icon system for navigation, cards, and status indicators.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tier 1: Nav Icons (.icon-nav)
   Gradient rounded-rect with white SVG stroke icon inside.
   32x32px, border-radius 8px, glass overlay via ::after.
   -------------------------------------------------------------------------- */

.icon-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  /* macOS-style layered shadow using design tokens + inner highlight */
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  flex-shrink: 0;
}

/* Glass shine overlay — macOS-style top highlight + subtle bottom edge */
.icon-nav::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
}

/* Bottom edge shadow for 3D "pill" depth */
.icon-nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  pointer-events: none;
  z-index: 0;
}

/* White SVG icon inside */
.icon-nav svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

/* --- Tier 1 Color Variants --- */

.icon-nav.blue    { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.icon-nav.teal    { background: linear-gradient(160deg, #5eead4, #0d9488); }
.icon-nav.green   { background: linear-gradient(160deg, #6ee7b7, #059669); }
.icon-nav.red     { background: linear-gradient(160deg, #fca5a5, #dc2626); }
.icon-nav.purple  { background: linear-gradient(160deg, #c4b5fd, #7c3aed); }
.icon-nav.pink    { background: linear-gradient(160deg, #f9a8d4, #db2777); }
.icon-nav.orange  { background: linear-gradient(160deg, #fdba74, #ea580c); }
.icon-nav.indigo  { background: linear-gradient(160deg, #a5b4fc, #4f46e5); }
.icon-nav.slate   { background: linear-gradient(160deg, #94a3b8, #475569); }
.icon-nav.amber   { background: linear-gradient(160deg, #fcd34d, #d97706); }
.icon-nav.gray    { background: linear-gradient(160deg, #a8a8a8, #8e8e93); }
.icon-nav.brown   { background: linear-gradient(160deg, #c4956a, #a2845e); }
.icon-nav.mint    { background: linear-gradient(160deg, #63e6be, #00c7a1); }


/* --------------------------------------------------------------------------
   Tier 2: Card Title Icons (.icon-card)
   Soft tinted circle with colored stroke SVG.
   30x30px, fully round.
   -------------------------------------------------------------------------- */

.icon-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  /* macOS-style subtle depth using design tokens */
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 0.5px solid var(--color-border);
}

.icon-card svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  fill: none;
}

/* --- Tier 2 Color Variants (background + stroke) --- */

.icon-card.blue    { background: rgba(96, 165, 250, 0.12);  }
.icon-card.blue    svg { stroke: #2563eb; }

.icon-card.teal    { background: rgba(94, 234, 212, 0.12);  }
.icon-card.teal    svg { stroke: #0d9488; }

.icon-card.green   { background: rgba(110, 231, 183, 0.12); }
.icon-card.green   svg { stroke: #059669; }

.icon-card.red     { background: rgba(252, 165, 165, 0.12); }
.icon-card.red     svg { stroke: #dc2626; }

.icon-card.purple  { background: rgba(196, 181, 253, 0.12); }
.icon-card.purple  svg { stroke: #7c3aed; }

.icon-card.pink    { background: rgba(249, 168, 212, 0.12); }
.icon-card.pink    svg { stroke: #db2777; }

.icon-card.orange  { background: rgba(253, 186, 116, 0.12); }
.icon-card.orange  svg { stroke: #ea580c; }

.icon-card.indigo  { background: rgba(165, 180, 252, 0.12); }
.icon-card.indigo  svg { stroke: #4f46e5; }

.icon-card.slate   { background: rgba(148, 163, 184, 0.12); }
.icon-card.slate   svg { stroke: #475569; }

.icon-card.amber   { background: rgba(252, 211, 77, 0.12);  }
.icon-card.amber   svg { stroke: #d97706; }

.icon-card.gray    { background: rgba(168, 168, 168, 0.12); }
.icon-card.gray    svg { stroke: #8e8e93; }

.icon-card.brown   { background: rgba(196, 149, 106, 0.12); }
.icon-card.brown   svg { stroke: #a2845e; }

.icon-card.mint    { background: rgba(99, 230, 190, 0.12);  }
.icon-card.mint    svg { stroke: #00c7a1; }


/* --------------------------------------------------------------------------
   Tier 3: Status Dots (.icon-dot)
   Small 8px colored circles with optional pulse animation.
   -------------------------------------------------------------------------- */

.icon-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* macOS-style glowing dot with subtle inner highlight */
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- Tier 3 Color Variants --- */

.icon-dot.blue    { background: #2563eb; }
.icon-dot.teal    { background: #0d9488; }
.icon-dot.green   { background: #059669; }
.icon-dot.red     { background: #dc2626; }
.icon-dot.purple  { background: #7c3aed; }
.icon-dot.pink    { background: #db2777; }
.icon-dot.orange  { background: #ea580c; }
.icon-dot.indigo  { background: #4f46e5; }
.icon-dot.slate   { background: #475569; }
.icon-dot.amber   { background: #d97706; }
.icon-dot.gray    { background: #8e8e93; }
.icon-dot.brown   { background: #a2845e; }
.icon-dot.mint    { background: #00c7a1; }

/* Pulse animation for active/live status */
.icon-dot.pulse {
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(5, 150, 105, 0);
  }
}


/* --------------------------------------------------------------------------
   Sidebar Layout Override (.nav-icon)
   When .nav-icon wraps an .icon-nav, reset spacing for sidebar fit.
   -------------------------------------------------------------------------- */

.nav-icon {
  display: inline-flex;
  width: 32px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.nav-icon .icon-nav {
  /* Remove any inherited margin/padding to sit flush in sidebar */
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   Dark Mode
   [data-theme="dark"] or .dark
   ========================================================================== */

/* --- Tier 1: Slightly muted gradients (~10% less brightness) --- */

[data-theme="dark"] .icon-nav.blue,
.dark .icon-nav.blue       { background: linear-gradient(160deg, #5393e0, #1f54cc); }

[data-theme="dark"] .icon-nav.teal,
.dark .icon-nav.teal       { background: linear-gradient(160deg, #50cfbb, #0b847a); }

[data-theme="dark"] .icon-nav.green,
.dark .icon-nav.green      { background: linear-gradient(160deg, #5ecfa3, #04875e); }

[data-theme="dark"] .icon-nav.red,
.dark .icon-nav.red        { background: linear-gradient(160deg, #e49393, #c52222); }

[data-theme="dark"] .icon-nav.purple,
.dark .icon-nav.purple     { background: linear-gradient(160deg, #b0a1e4, #6d33d4); }

[data-theme="dark"] .icon-nav.pink,
.dark .icon-nav.pink       { background: linear-gradient(160deg, #e097be, #c4236a); }

[data-theme="dark"] .icon-nav.orange,
.dark .icon-nav.orange     { background: linear-gradient(160deg, #e4a768, #d24f0b); }

[data-theme="dark"] .icon-nav.indigo,
.dark .icon-nav.indigo     { background: linear-gradient(160deg, #939fe4, #453ece); }

[data-theme="dark"] .icon-nav.slate,
.dark .icon-nav.slate      { background: linear-gradient(160deg, #8493a6, #3e4c5f); }

[data-theme="dark"] .icon-nav.amber,
.dark .icon-nav.amber      { background: linear-gradient(160deg, #e4be45, #c36b06); }

[data-theme="dark"] .icon-nav.gray,
.dark .icon-nav.gray       { background: linear-gradient(160deg, #979797, #7f7f84); }

[data-theme="dark"] .icon-nav.brown,
.dark .icon-nav.brown      { background: linear-gradient(160deg, #b0865f, #917654); }

[data-theme="dark"] .icon-nav.mint,
.dark .icon-nav.mint       { background: linear-gradient(160deg, #57cfaa, #00b391); }

/* Dark mode: reduce glass shine */
[data-theme="dark"] .icon-nav::after,
.dark .icon-nav::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

/* Dark mode: bottom edge slightly stronger */
[data-theme="dark"] .icon-nav::before,
.dark .icon-nav::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

/* Dark mode: deeper shadows + subtle border for floating feel */
[data-theme="dark"] .icon-nav,
.dark .icon-nav {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.45),
    0 4px 10px -2px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode: icon-card deeper tinted shadows */
[data-theme="dark"] .icon-card,
.dark .icon-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 2px 6px -1px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.05);
}

/* Dark mode: dots glow slightly */
[data-theme="dark"] .icon-dot,
.dark .icon-dot {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* --- Tier 2: Darker tinted backgrounds --- */

[data-theme="dark"] .icon-card.blue,
.dark .icon-card.blue      { background: rgba(37, 99, 235, 0.18);  }
[data-theme="dark"] .icon-card.blue svg,
.dark .icon-card.blue svg  { stroke: #60a5fa; }

[data-theme="dark"] .icon-card.teal,
.dark .icon-card.teal      { background: rgba(13, 148, 136, 0.18); }
[data-theme="dark"] .icon-card.teal svg,
.dark .icon-card.teal svg  { stroke: #5eead4; }

[data-theme="dark"] .icon-card.green,
.dark .icon-card.green     { background: rgba(5, 150, 105, 0.18);  }
[data-theme="dark"] .icon-card.green svg,
.dark .icon-card.green svg { stroke: #6ee7b7; }

[data-theme="dark"] .icon-card.red,
.dark .icon-card.red       { background: rgba(220, 38, 38, 0.18);  }
[data-theme="dark"] .icon-card.red svg,
.dark .icon-card.red svg   { stroke: #fca5a5; }

[data-theme="dark"] .icon-card.purple,
.dark .icon-card.purple    { background: rgba(124, 58, 237, 0.18); }
[data-theme="dark"] .icon-card.purple svg,
.dark .icon-card.purple svg { stroke: #c4b5fd; }

[data-theme="dark"] .icon-card.pink,
.dark .icon-card.pink      { background: rgba(219, 39, 119, 0.18); }
[data-theme="dark"] .icon-card.pink svg,
.dark .icon-card.pink svg  { stroke: #f9a8d4; }

[data-theme="dark"] .icon-card.orange,
.dark .icon-card.orange    { background: rgba(234, 88, 12, 0.18);  }
[data-theme="dark"] .icon-card.orange svg,
.dark .icon-card.orange svg { stroke: #fdba74; }

[data-theme="dark"] .icon-card.indigo,
.dark .icon-card.indigo    { background: rgba(79, 70, 229, 0.18);  }
[data-theme="dark"] .icon-card.indigo svg,
.dark .icon-card.indigo svg { stroke: #a5b4fc; }

[data-theme="dark"] .icon-card.slate,
.dark .icon-card.slate     { background: rgba(71, 85, 105, 0.18);  }
[data-theme="dark"] .icon-card.slate svg,
.dark .icon-card.slate svg { stroke: #94a3b8; }

[data-theme="dark"] .icon-card.amber,
.dark .icon-card.amber     { background: rgba(217, 119, 6, 0.18);  }
[data-theme="dark"] .icon-card.amber svg,
.dark .icon-card.amber svg { stroke: #fcd34d; }

[data-theme="dark"] .icon-card.gray,
.dark .icon-card.gray      { background: rgba(142, 142, 147, 0.18); }
[data-theme="dark"] .icon-card.gray svg,
.dark .icon-card.gray svg  { stroke: #a8a8a8; }

[data-theme="dark"] .icon-card.brown,
.dark .icon-card.brown     { background: rgba(162, 132, 94, 0.18); }
[data-theme="dark"] .icon-card.brown svg,
.dark .icon-card.brown svg { stroke: #c4956a; }

[data-theme="dark"] .icon-card.mint,
.dark .icon-card.mint      { background: rgba(0, 199, 161, 0.18);  }
[data-theme="dark"] .icon-card.mint svg,
.dark .icon-card.mint svg  { stroke: #63e6be; }

/* --- Tier 3: Dots slightly brighter in dark mode --- */

[data-theme="dark"] .icon-dot.blue,
.dark .icon-dot.blue       { background: #60a5fa; }

[data-theme="dark"] .icon-dot.teal,
.dark .icon-dot.teal       { background: #5eead4; }

[data-theme="dark"] .icon-dot.green,
.dark .icon-dot.green      { background: #6ee7b7; }

[data-theme="dark"] .icon-dot.red,
.dark .icon-dot.red        { background: #fca5a5; }

[data-theme="dark"] .icon-dot.purple,
.dark .icon-dot.purple     { background: #c4b5fd; }

[data-theme="dark"] .icon-dot.pink,
.dark .icon-dot.pink       { background: #f9a8d4; }

[data-theme="dark"] .icon-dot.orange,
.dark .icon-dot.orange     { background: #fdba74; }

[data-theme="dark"] .icon-dot.indigo,
.dark .icon-dot.indigo     { background: #a5b4fc; }

[data-theme="dark"] .icon-dot.slate,
.dark .icon-dot.slate      { background: #94a3b8; }

[data-theme="dark"] .icon-dot.amber,
.dark .icon-dot.amber      { background: #fcd34d; }

[data-theme="dark"] .icon-dot.gray,
.dark .icon-dot.gray       { background: #a8a8a8; }

[data-theme="dark"] .icon-dot.brown,
.dark .icon-dot.brown      { background: #c4956a; }

[data-theme="dark"] .icon-dot.mint,
.dark .icon-dot.mint       { background: #63e6be; }

/* Dark mode pulse uses brighter green */
[data-theme="dark"] .icon-dot.pulse,
.dark .icon-dot.pulse {
  animation: dot-pulse-dark 2s ease-in-out infinite;
}

@keyframes dot-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(110, 231, 183, 0);
  }
}