/* ==========================================================================
   Mise Design System
   Version: 1.0
   Everything in its place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT IMPORT
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --mise-navy: #1B2A4E;
    --mise-red: #B5402F;
    --mise-red-dark: #922F21;
    --mise-green: #2D8A4E;
    --mise-green-dark: #236B3C;
    --mise-cream: #F9F6F1;
    --mise-cream-payroll: #F0FAF0;
    --mise-cream-inventory: #FEF2F2;

    /* Shadows */
    --mise-shadow-sm: 0 1px 2px rgba(27, 42, 78, 0.06);
    --mise-shadow: 0 2px 8px rgba(27, 42, 78, 0.08);
    --mise-shadow-md: 0 4px 16px rgba(27, 42, 78, 0.10);
    --mise-shadow-lg: 0 8px 32px rgba(27, 42, 78, 0.12);
    --mise-shadow-hover: 0 8px 24px rgba(27, 42, 78, 0.14);

    /* Radii */
    --mise-radius: 12px;
    --mise-radius-sm: 8px;
    --mise-radius-lg: 16px;
    --mise-radius-full: 9999px;

    /* Transitions */
    --mise-transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --mise-transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   3. GLOBAL STYLES
   -------------------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   4. SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--mise-navy);
    border-radius: 2px;
    opacity: 0.3;
}

/* Payroll-themed scrollbar */
.scrollbar-payroll::-webkit-scrollbar-track { background: #E0F0E0; }
.scrollbar-payroll::-webkit-scrollbar-thumb { background: var(--mise-green); }

/* Inventory-themed scrollbar */
.scrollbar-inventory::-webkit-scrollbar-track { background: #FECACA; }
.scrollbar-inventory::-webkit-scrollbar-thumb { background: var(--mise-red); }

/* --------------------------------------------------------------------------
   5. FROSTED GLASS - Header & Bottom Nav
   -------------------------------------------------------------------------- */
.mise-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(27, 42, 78, 0.08);
}

.mise-bottom-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(27, 42, 78, 0.06);
}

/* --------------------------------------------------------------------------
   6. CARD COMPONENTS
   -------------------------------------------------------------------------- */
.mise-card {
    background: white;
    border-radius: var(--mise-radius);
    box-shadow: var(--mise-shadow);
    border: 1px solid rgba(27, 42, 78, 0.06);
    transition: box-shadow var(--mise-transition), transform var(--mise-transition);
}

.mise-card-interactive {
    background: white;
    border-radius: var(--mise-radius);
    box-shadow: var(--mise-shadow);
    border: 1px solid rgba(27, 42, 78, 0.06);
    transition: box-shadow var(--mise-transition), transform var(--mise-transition);
    cursor: pointer;
}

.mise-card-interactive:hover {
    box-shadow: var(--mise-shadow-hover);
    transform: translateY(-1px);
}

.mise-card-interactive:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--mise-shadow-sm);
}

/* --------------------------------------------------------------------------
   7. ACCENT LEFT BORDERS
   -------------------------------------------------------------------------- */
.mise-accent-left-navy {
    border-left: 3px solid var(--mise-navy);
}

.mise-accent-left-red {
    border-left: 3px solid var(--mise-red);
}

.mise-accent-left-green {
    border-left: 3px solid var(--mise-green);
}

/* --------------------------------------------------------------------------
   8. BUTTON
   -------------------------------------------------------------------------- */
.mise-btn-primary {
    transition: box-shadow var(--mise-transition), transform var(--mise-transition);
}

.mise-btn-primary:hover {
    box-shadow: var(--mise-shadow-md);
    transform: translateY(-1px);
}

.mise-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--mise-shadow-sm);
}

/* --------------------------------------------------------------------------
   9. BADGES
   -------------------------------------------------------------------------- */
.mise-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--mise-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mise-badge-green {
    background: rgba(45, 138, 78, 0.1);
    color: var(--mise-green);
}

.mise-badge-yellow {
    background: rgba(234, 179, 8, 0.15);
    color: #92400e;
}

.mise-badge-gray {
    background: rgba(27, 42, 78, 0.08);
    color: rgba(27, 42, 78, 0.5);
}

/* --------------------------------------------------------------------------
   10. ANIMATIONS
   -------------------------------------------------------------------------- */

/* Page entrance: fade up */
@keyframes mise-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mise-animate-in {
    animation: mise-fade-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Breathing animation for idle record button */
@keyframes mise-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 24px rgba(27, 42, 78, 0.15);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 8px 32px rgba(27, 42, 78, 0.2);
    }
}

.mise-breathe {
    animation: mise-breathe 3s ease-in-out infinite;
}

/* Staggered list entrance */
.mise-stagger > * {
    opacity: 0;
    animation: mise-fade-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.mise-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.mise-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.mise-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.mise-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.mise-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.mise-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.mise-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.mise-stagger > *:nth-child(8) { animation-delay: 0.4s; }
.mise-stagger > *:nth-child(9) { animation-delay: 0.45s; }
.mise-stagger > *:nth-child(10) { animation-delay: 0.5s; }
.mise-stagger > *:nth-child(11) { animation-delay: 0.55s; }
.mise-stagger > *:nth-child(12) { animation-delay: 0.6s; }
.mise-stagger > *:nth-child(13) { animation-delay: 0.65s; }
.mise-stagger > *:nth-child(14) { animation-delay: 0.7s; }

/* --------------------------------------------------------------------------
   11. RECORDING PULSE
   -------------------------------------------------------------------------- */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 138, 78, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(45, 138, 78, 0); }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(181, 64, 47, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(181, 64, 47, 0); }
}

.recording-green { animation: pulse-green 1.5s infinite; }
.recording-red { animation: pulse-red 1.5s infinite; }
/* Legacy class name — payroll uses .recording */
.recording { animation: pulse-green 1.5s infinite; }

/* --------------------------------------------------------------------------
   12. SPINNER
   -------------------------------------------------------------------------- */
.spinner {
    border: 3px solid rgba(27, 42, 78, 0.1);
    border-top: 3px solid var(--mise-green);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 0.8s linear infinite;
}

.spinner-red {
    border: 3px solid rgba(27, 42, 78, 0.1);
    border-top: 3px solid var(--mise-red);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 0.8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   13. PROCESSING OVERLAY
   -------------------------------------------------------------------------- */
.mise-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   14. FOCUS RINGS
   -------------------------------------------------------------------------- */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 42, 78, 0.12);
}

/* --------------------------------------------------------------------------
   15. CONTENT CONTAINER
   -------------------------------------------------------------------------- */
.mise-container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   16. (Reserved — kitchen texture removed)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   17. DECORATIVE DIVIDER
   A little flourish between sections
   -------------------------------------------------------------------------- */
.mise-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(27, 42, 78, 0.2);
}

.mise-divider::before,
.mise-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}

/* --------------------------------------------------------------------------
   18. GREETING / WARM TEXT STYLES
   -------------------------------------------------------------------------- */
.mise-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mise-subtitle {
    font-size: 0.9rem;
    color: rgba(27, 42, 78, 0.5);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   19. AGENT CARD ICONS (inline SVG styling)
   -------------------------------------------------------------------------- */
.mise-agent-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   20. TAGLINE FLOURISH
   -------------------------------------------------------------------------- */
.mise-tagline {
    font-style: italic;
    color: rgba(27, 42, 78, 0.35);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}