/**
 * Newburgh Brewing Tools - Shared Styles
 * Based on Food Cost Manager design system
 *
 * Usage: <link rel="stylesheet" href="../shared/nb-styles.css">
 */

/* ============================================
   CSS VARIABLES (Brand Colors)
   ============================================ */
:root {
    /* ===== PRIMARY BRAND ===== */
    --nb-purple: #702082;
    --nb-purple-dark: #5A1A6A;
    --nb-purple-light: #8B3A9F;
    --nb-coral: #ee7470;
    --nb-coral-dark: #D45A56;
    --nb-coral-light: #FF9B98;
    --nb-salmon: #EE7470;  /* Alias for coral */
    --nb-mint: #98D4C4;
    --nb-mint-dark: #7BC4B4;
    --nb-mint-light: #B8E4D8;

    /* ===== NEUTRALS ===== */
    --nb-cream: #FDFBF9;
    --nb-cream-dark: #F5F0EB;
    --nb-dark: #2D2926;
    --nb-gray: #6B6460;
    --nb-white: #FFFFFF;

    /* ===== SUPPORTING ===== */
    --nb-lilac: #CBA3D8;
    --nb-tan: #cfc493;
    --nb-dusty-rose: #cda3b8;

    /* ===== BEER THEME PALETTES ===== */
    /* Brown Ale - Parties */
    --brown-primary: #5C3D2E;
    --brown-dark: #3D2920;
    --brown-orange: #E67E22;
    --brown-orange-dark: #C66A1A;

    /* MegaBoss IPA - Music (Green + Gold) */
    --mega-green: #1B5E20;
    --mega-green-dark: #0D3D12;
    --mega-gold: #F5C518;
    --mega-gold-dark: #D4A500;

    /* NanoBoss - Offsite (Pink + Yellow) */
    --nano-pink: #E91E63;
    --nano-pink-dark: #C2185B;
    --nano-yellow: #F5C518;

    /* GigaBoss DIPA - Programming (Navy + Yellow) */
    --giga-navy: #1A237E;
    --giga-navy-dark: #0D1642;
    --giga-yellow: #F5C518;
    --giga-accent: #C5CAE9;

    /* TeraBoss - Private Events (Cyan + Yellow) */
    --tera-cyan: #00ACC1;
    --tera-cyan-dark: #00838F;
    --tera-yellow: #F5C518;

    /* InfinityBoss - Urgent (Purple + Cyan) */
    --infinity-purple: #7B1FA2;
    --infinity-cyan: #80DEEA;

    /* Litmus Test - Kitchen/Lab (Teal + Orange) */
    --litmus-teal: #00838F;
    --litmus-teal-dark: #006064;
    --litmus-teal-light: #4DD0E1;
    --litmus-orange: #FF6F00;
    --litmus-orange-light: #FFB300;
    --litmus-bg: #E0F7FA;

    /* Charity (Coral + Warm) */
    --charity-coral: #ee7470;
    --charity-coral-dark: #D45A56;
    --charity-pink: #FF8A80;
    --charity-warm: #FFF3E0;

    /* ===== DYNAMIC THEME (Default: Cream Ale) ===== */
    --theme-primary: var(--nb-purple);
    --theme-secondary: var(--nb-coral);
    --theme-accent: var(--nb-mint);
    --theme-bg-tint: rgba(112, 32, 130, 0.04);
}

/* ============================================
   THEME CLASSES
   ============================================ */
.theme-cream-ale {
    --theme-primary: var(--nb-purple);
    --theme-secondary: var(--nb-coral);
    --theme-accent: var(--nb-mint);
    --theme-bg-tint: rgba(112, 32, 130, 0.04);
}

.theme-brown-ale {
    --theme-primary: var(--brown-primary);
    --theme-secondary: var(--brown-orange);
    --theme-accent: #F5DEB3;
    --theme-bg-tint: rgba(92, 61, 46, 0.04);
}

.theme-megaboss {
    --theme-primary: var(--mega-green);
    --theme-secondary: var(--mega-gold);
    --theme-accent: #81C784;
    --theme-bg-tint: rgba(27, 94, 32, 0.04);
}

.theme-gigaboss {
    --theme-primary: var(--giga-navy);
    --theme-secondary: var(--giga-yellow);
    --theme-accent: var(--giga-accent);
    --theme-bg-tint: rgba(26, 35, 126, 0.04);
}

.theme-teraboss {
    --theme-primary: var(--tera-cyan);
    --theme-secondary: var(--tera-yellow);
    --theme-accent: #80DEEA;
    --theme-bg-tint: rgba(0, 172, 193, 0.04);
}

.theme-nanoboss {
    --theme-primary: var(--nano-pink);
    --theme-secondary: var(--nano-yellow);
    --theme-accent: #F8BBD9;
    --theme-bg-tint: rgba(233, 30, 99, 0.04);
}

.theme-litmus {
    --theme-primary: var(--litmus-teal);
    --theme-secondary: var(--litmus-orange);
    --theme-accent: var(--litmus-teal-light);
    --theme-bg-tint: rgba(0, 131, 143, 0.04);
}

.theme-charity {
    --theme-primary: var(--nb-purple);
    --theme-secondary: var(--charity-coral);
    --theme-accent: var(--charity-pink);
    --theme-bg-tint: rgba(238, 116, 112, 0.08);
}

/* Theme-aware button */
.nb-btn-primary {
    background: var(--theme-primary);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nb-btn-primary:hover {
    filter: brightness(0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.nb-btn-secondary {
    background: white;
    color: var(--theme-primary);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 2px solid var(--theme-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.nb-btn-secondary:hover {
    background: var(--nb-cream-dark);
}

/* ============================================
   BODY BACKGROUND
   ============================================ */
body {
    font-family: "Poppins", system-ui, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(203,163,216,0.35), transparent 60%),
        radial-gradient(circle at bottom right, rgba(238,116,112,0.25), transparent 55%),
        #fdf9f1;
    min-height: 100vh;
    color: #1f2933;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */
.nb-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.nb-section-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background-color: var(--nb-salmon);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all 0.1s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover:not(:disabled) {
    background-color: #e35f59;
    box-shadow: 0 10px 22px rgba(227, 95, 89, 0.35);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--nb-purple);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #5a1a6a;
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-outline {
    background-color: transparent;
    color: var(--nb-purple);
    border: 2px solid var(--nb-purple);
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover:not(:disabled) {
    background-color: rgba(112, 32, 130, 0.05);
}

.btn-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

/* ============================================
   HERO HEADER
   ============================================ */
.hero-bg {
    background: linear-gradient(120deg, var(--nb-purple), var(--nb-salmon)) !important;
    color: white;
}

.hero-title {
    color: white;
    font-weight: bold;
}

/* Tools navigation bar — sits above the hero header */
.tools-nav-bar {
    background: var(--nb-purple);
    padding: 8px 16px;
    display: flex;
    justify-content: flex-end;
}
/* In standalone PWA mode, add top padding to clear the system back button */
@media all and (display-mode: standalone) {
    .tools-nav-bar {
        padding-top: max(12px, env(safe-area-inset-top));
    }
}

/* ============================================
   TABLE STYLES
   ============================================ */
.table-header {
    background: linear-gradient(120deg, #f3f4f6, #e5e7eb);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #374151;
}

.table-row-hover:hover {
    background-color: #f9fafb;
    transition: all 0.2s;
}

.ingredient-row:hover {
    background: #fef3c7;
    transition: all 0.2s;
}

/* ============================================
   FORM INPUTS
   ============================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--nb-purple);
    outline-offset: -2px;
    border-color: var(--nb-purple);
    box-shadow: 0 0 0 3px rgba(112, 32, 130, 0.1);
}

input[type="text"]:focus:not(:focus-visible),
input[type="number"]:focus:not(:focus-visible),
input[type="email"]:focus:not(:focus-visible),
input[type="password"]:focus:not(:focus-visible),
input[type="date"]:focus:not(:focus-visible),
input[type="time"]:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Global focus-visible ring for buttons and interactive elements */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nb-purple);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.badge-green {
    background: #d1fae5;
    color: #065f46;
}

.badge-yellow {
    background: #fef3c7;
    color: #92400e;
}

.badge-red {
    background: #fee2e2;
    color: #991b1b;
}

.badge-gray {
    background: #f3f4f6;
    color: #374151;
}

.badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.badge-purple {
    background: #e9d5ff;
    color: #6b21a8;
}

/* ============================================
   FINANCIAL COST INDICATORS
   ============================================ */
.cost-good {
    color: #059669;
    font-weight: 600;
}

.cost-warning {
    color: #d97706;
    font-weight: 600;
}

.cost-bad {
    color: #dc2626;
    font-weight: 600;
}

.trend-up {
    color: #dc2626;
}

.trend-down {
    color: #059669;
}

.trend-flat {
    color: #6b7280;
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.modal-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* ============================================
   TAB NAVIGATION
   ============================================ */
.tab-active {
    border-bottom: 3px solid var(--nb-salmon);
    color: var(--nb-purple);
    font-weight: 600;
}

.tab-inactive {
    color: #6b7280;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.tab-inactive:hover {
    color: #374151;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid var(--nb-purple);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 3.75rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

/* ============================================
   TRANSITIONS
   ============================================ */
.transition-default {
    transition: all 0.2s ease;
}

.transition-fast {
    transition: all 0.1s ease;
}

.transition-slow {
    transition: all 0.3s ease;
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */
.shadow-nb-sm {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.shadow-nb-md {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.shadow-nb-lg {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}

/* ============================================
   FILE UPLOAD ZONE
   ============================================ */
.file-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.file-upload-zone:hover {
    border-color: var(--nb-purple);
    background-color: rgba(112, 32, 130, 0.02);
}

.file-upload-zone.drag-active {
    border-color: var(--nb-purple);
    background-color: rgba(112, 32, 130, 0.05);
}

/* ============================================
   STAT CARDS (Dashboard)
   ============================================ */
.stat-card-icon {
    opacity: 0.3;
    font-size: 2.5rem;
}

/* ============================================
   FORM LABELS
   ============================================ */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #374151;
}

.form-helper {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.form-error {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

/* ============================================
   TOAST NOTIFICATIONS (Optional)
   ============================================ */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 1rem 1.5rem;
    max-width: 400px;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    border-left: 4px solid #059669;
}

.toast-error {
    border-left: 4px solid #dc2626;
}

.toast-warning {
    border-left: 4px solid #d97706;
}

.toast-info {
    border-left: 4px solid #2563eb;
}

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

/* Screen-reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--nb-purple);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-to-content:focus {
    top: 0;
}