/*!
 * Stadsbrouwerij Veenendaal - Unified Icon System
 * Modern Lucide-based icons for all applications
 * Version: 1.0.1
 * Based on: Lucide Icons (https://lucide.dev)
 */

/* ===== ICON BASE STYLES ===== */
.sbv-icon {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    stroke-width: 1.5;
    fill: none;
    stroke: currentColor;
}

/* Icon sizes */
.sbv-icon-xs { width: 12px; height: 12px; }
.sbv-icon-sm { width: 16px; height: 16px; }
.sbv-icon-md { width: 24px; height: 24px; }  /* Default */
.sbv-icon-lg { width: 32px; height: 32px; }
.sbv-icon-xl { width: 48px; height: 48px; }
.sbv-icon-xxl { width: 64px; height: 64px; }

/* Icon colors - Brand palette */
.sbv-icon-primary { color: #FFD900; }  /* Brand yellow */
.sbv-icon-secondary { color: #e0e6ed; }  /* Light text */
.sbv-icon-muted { color: #b0b0b0; }  /* Muted text */
.sbv-icon-success { color: #22c55e; }  /* Success green */
.sbv-icon-warning { color: #f59e0b; }  /* Warning amber */
.sbv-icon-danger { color: #ef4444; }   /* Error red */
.sbv-icon-white { color: #ffffff; }    /* Pure white */
.sbv-icon-dark { color: #282828; }     /* Brand dark */

/* Icon weights */
.sbv-icon-thin { stroke-width: 1; }
.sbv-icon-normal { stroke-width: 1.5; }  /* Default */
.sbv-icon-bold { stroke-width: 2; }
.sbv-icon-heavy { stroke-width: 2.5; }

/* Hover effects */
.sbv-icon-hover:hover {
    color: #FFD900;
    transition: color 0.2s ease;
}

/* ==========================================================================
   Icon tile — the small rounded square that sits top-left of a card.

   One tile, one hue, one meaning. A grid of cards that all wear the same
   brand yellow tells the eye nothing; giving each category its own hue makes
   the grid scannable before a single word is read.

   Usage (opt-in — nothing re-styles on its own):
     <span class="sbv-icon-tile sbv-icon-tile--info">
       <i data-lucide="message-square" class="sbv-icon"></i>
     </span>

   RULES
   - Icons only. Never put text in a tile. The background is a translucent
     tint, so over a dark surface it composites dark and a text colour picked
     against the *intended* hue will fail contrast. An icon is a shape and
     survives that; a label does not.
   - Pick the hue by MEANING, not by looks. If two cards do the same kind of
     thing they get the same hue, or the colour stops carrying information.
   - The tint is deliberately low (18%) so the saturated icon stays the
     brightest thing in the square. Raising it flattens that contrast.
   - `--danger` uses #f87171 rather than --sbv-danger (#ef4444). Perceived
     luminance is dominated by the green channel, so the deeper red goes muddy
     on a dark surface. Same reasoning as the transaction pills in brew_track.
   ========================================================================== */
/* Hue and tint are both written out per modifier rather than derived with color-mix(). In a token
   file the literal value IS the documentation: you can read the palette without evaluating it, and
   a designer can copy a value straight out. The cost is one duplicated colour per modifier. */
.sbv-icon-tile {
    --sbv-icon-tile-hue: #FFD900;
    background-color: rgba(255, 217, 0, 0.18);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sbv-icon-tile-hue);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.sbv-icon-tile .sbv-icon,
.sbv-icon-tile svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
}

/* Hover belongs on the CARD, not the tile — the tile is never the click target. */
.sbv-icon-tile-card:hover .sbv-icon-tile,
.sbv-icon-tile-card:focus-visible .sbv-icon-tile {
    transform: translateY(-1px);
}

.sbv-icon-tile--brand { --sbv-icon-tile-hue: #FFD900; background-color: rgba(255, 217, 0, 0.18); }
.sbv-icon-tile--info { --sbv-icon-tile-hue: #3b82f6; background-color: rgba(59, 130, 246, 0.20); }
.sbv-icon-tile--success { --sbv-icon-tile-hue: #22c55e; background-color: rgba(34, 197, 94, 0.18); }
.sbv-icon-tile--warning { --sbv-icon-tile-hue: #f59e0b; background-color: rgba(245, 158, 11, 0.18); }
.sbv-icon-tile--danger { --sbv-icon-tile-hue: #f87171; background-color: rgba(248, 113, 113, 0.18); }
.sbv-icon-tile--accent { --sbv-icon-tile-hue: #a78bfa; background-color: rgba(167, 139, 250, 0.20); }
.sbv-icon-tile--neutral { --sbv-icon-tile-hue: #a3a3a3; background-color: rgba(163, 163, 163, 0.16); }

/* Card icon styles (for navigation cards) */
.sbv-card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sbv-card-icon .sbv-icon {
    width: 48px;
    height: 48px;
    color: #FFD900;
    stroke-width: 1.5;
}

/* Status indicator icons */
.sbv-status-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sbv-status-online .sbv-icon { color: #22c55e; }
.sbv-status-offline .sbv-icon { color: #ef4444; }
.sbv-status-working .sbv-icon { 
    color: #f59e0b; 
    animation: sbv-pulse 2s infinite;
}

@keyframes sbv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== COMMON ICON MAPPINGS ===== */
/*
Common semantic mappings for consistent icon usage across apps:
- dashboard: home, layout-dashboard, gauge
- faq: help-circle, message-square, book  
- database: database, server, hard-drive
- learning: brain, graduation-cap, trending-up
- settings: settings, cog, sliders
- activity: activity, bar-chart, pulse
- edit: edit, pencil, file-text
- filter: filter, search, funnel
- palette: palette, brush, color-wheel
- refresh: refresh-cw, rotate-cw, repeat
- user: user, users, user-circle
- mail: mail, send, inbox
- calendar: calendar, clock, schedule
- chart: bar-chart, line-chart, pie-chart
- folder: folder, folder-open, archive
- security: shield, lock, key
- download: download, arrow-down, save
- upload: upload, arrow-up, cloud-upload
- delete: trash, x-circle, minus
- add: plus, plus-circle, plus-square
*/

/* ===== APP-SPECIFIC ICON THEMES ===== */

/* OpsDash - Task management theme */
.opsdash-theme .sbv-icon { color: #FFD900; }
.opsdash-theme .sbv-card-icon .sbv-icon { color: #FFD900; }

/* Relatiecheck - Relationship theme */
.relatiecheck-theme .sbv-icon { color: var(--sbv-app-accent); }
.relatiecheck-theme .sbv-card-icon .sbv-icon { color: var(--sbv-app-accent); }

/* BrewTrack - Brewery theme */
.brewtrack-theme .sbv-icon { color: #d4a574; }
.brewtrack-theme .sbv-card-icon .sbv-icon { color: #d4a574; }

/* MailAgent - Communication theme */
.mailagent-theme .sbv-icon { color: #FFD900; }
.mailagent-theme .sbv-card-icon .sbv-icon { color: #FFD900; }

/* Klusjes - Jobs theme */
.klusjes-theme .sbv-icon { color: #3498db; }
.klusjes-theme .sbv-card-icon .sbv-icon { color: #3498db; }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .sbv-card-icon .sbv-icon {
        width: 40px;
        height: 40px;
    }
    
    .sbv-icon-xl { width: 40px; height: 40px; }
    .sbv-icon-xxl { width: 48px; height: 48px; }
}

/* ===== UTILITY CLASSES ===== */
.sbv-icon-spin {
    animation: sbv-spin 1s linear infinite;
}

@keyframes sbv-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sbv-icon-bounce {
    animation: sbv-bounce 1s ease-in-out infinite;
}

@keyframes sbv-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.sbv-icon-fade-in {
    animation: sbv-fade-in 0.5s ease-in-out;
}

@keyframes sbv-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}