/* ==========================================================================
   EnjazAssist Consular Sovereign Design System - White Cream Edition
   Tailored for Cross-Border Recruitment, Consular Visas & Gov Portals
   Bespoke Warm White Cream, Soft Alabaster, Sovereign Pine & Warm Amber Palette
   (Strictly No generic blue, No purple, No AI-vibe neon gradients)
   ========================================================================== */

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Sovereign Consular Primary (Deep Forest & Pine Emerald) */
    --color-primary: #047857;
    --color-primary-hover: #065f46;
    --color-primary-active: #064e3b;
    --color-primary-light: #ecfdf5;
    --color-primary-border: #a7f3d0;
    --color-primary-text: #064e3b;

    /* Diplomatic Warm Gold & Consular Amber Accent */
    --color-gold: #c28833;
    --color-gold-hover: #a16c20;
    --color-gold-light: #fef9ee;
    --color-gold-border: #f5deb3;
    --color-gold-text: #8a5712;

    /* Functional Amber & Warning */
    --color-amber: #d97706;
    --color-amber-light: #fffbeb;
    --color-amber-border: #fde68a;
    --color-amber-text: #92400e;

    /* Functional Crimson & Danger */
    --color-rose: #be123c;
    --color-rose-light: #fff1f2;
    --color-rose-border: #fecdd3;
    --color-rose-text: #9f1239;

    /* White Cream Palette Surfaces */
    --color-surface-bg: #faf8f5;           /* Main Warm White Cream Canvas */
    --color-surface-cream: #f4efe6;        /* Secondary Warm Cream Section */
    --color-surface-card: #ffffff;         /* Crisp White Card */
    --color-surface-elevated: #ffffff;
    --color-surface-subtle: #f0eade;       /* Subtle Warm Cream Hover */
    --color-border: #e8e2d6;               /* Delicate Warm Border */
    --color-border-subtle: #ede7dd;        /* Light Inner Divider */

    /* Typography */
    --color-text-title: #1c1917;           /* Deep Warm Charcoal */
    --color-text-body: #292524;            /* Espresso Body */
    --color-text-muted: #57534e;           /* Stone 600 Muted */
    --color-text-subtle: #78716c;          /* Stone 500 Metadata */
}

/* Base resets & typography */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text-body);
    background-color: var(--color-surface-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Tabular figures for passport, visa, flight, and currency figures */
.font-mono, td.tabular, .stat-value, .passport-id, .visa-id {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Tactile Buttons & Interactive Elements (Better-UI scale 0.98)
   -------------------------------------------------------------------------- */
button, .btn-tactile, a.btn-tactile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1),
                background-color 140ms ease-out,
                border-color 140ms ease-out,
                box-shadow 140ms ease-out,
                color 140ms ease-out;
}

button:active, .btn-tactile:active {
    transform: scale(0.98);
}

button:focus-visible, .btn-tactile:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Button Variants */
.btn-primary {
    background-color: #047857;
    color: #ffffff !important;
    border: 1px solid #065f46;
    box-shadow: 0 1px 2px rgba(4, 120, 87, 0.15), 0 2px 4px rgba(4, 120, 87, 0.1);
}
.btn-primary:hover {
    background-color: #065f46;
    border-color: #064e3b;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25);
}

.btn-secondary {
    background-color: #ffffff;
    color: var(--color-text-title);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
    background-color: var(--color-surface-subtle);
    border-color: #dcd4c7;
}

.btn-gold {
    background-color: #c28833;
    color: #ffffff !important;
    border: 1px solid #a16c20;
    box-shadow: 0 1px 2px rgba(194, 136, 51, 0.18);
}
.btn-gold:hover {
    background-color: #a16c20;
}

/* --------------------------------------------------------------------------
   Surfaces, Cards & Elevations
   -------------------------------------------------------------------------- */
.surface-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem; /* 16px */
    box-shadow: 0 1px 3px 0 rgba(28, 25, 23, 0.03), 0 1px 2px -1px rgba(28, 25, 23, 0.02);
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.surface-card:hover {
    border-color: #dcd4c7;
    box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.05), 0 4px 8px -2px rgba(28, 25, 23, 0.02);
}

.surface-card-subtle {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}

/* White Cream Command Surfaces */
.dark-surface-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(28, 25, 23, 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.dark-surface-card:hover {
    border-color: #dcd4c7;
    box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.07);
}

/* --------------------------------------------------------------------------
   Data Tables
   -------------------------------------------------------------------------- */
.data-table-container {
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(28, 25, 23, 0.02);
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.data-table thead th {
    background: #f7f4ee;
    color: var(--color-text-muted);
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background-color 120ms ease;
    border-bottom: 1px solid var(--color-border-subtle);
}

.data-table tbody tr:hover {
    background-color: #f7f3eb;
}

.data-table td {
    padding: 0.875rem 1rem;
    color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   Pill Badges & Status Indicators
   -------------------------------------------------------------------------- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    line-height: 1;
}

.badge-emerald {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-gold {
    background-color: #fef9ee;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-amber {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-rose {
    background-color: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.badge-neutral {
    background-color: #f3eee6;
    color: #57534e;
    border: 1px solid #e8e2d6;
}

/* --------------------------------------------------------------------------
   Input Controls & Focus States
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    color: var(--color-text-title);
    font-size: 0.8125rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #047857 !important;
    box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.15);
}

/* --------------------------------------------------------------------------
   Sidebar Navigation (White Cream Executive)
   -------------------------------------------------------------------------- */
.sidebar-consular {
    background-color: #f7f4ee !important;
    border-right: 1px solid var(--color-border) !important;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #57534e;
    transition: all 130ms ease-out;
}

.nav-link-item:hover {
    color: #1c1917;
    background-color: #ede7dc;
}

.nav-link-item.active, 
.nav-link-item.bg-blue-800, 
.nav-link-item.bg-emerald-700, 
.nav-link-item.active-module {
    color: #ffffff !important;
    background-color: #047857 !important;
    font-weight: 600;
    box-shadow: 0 2px 6px -1px rgba(4, 120, 87, 0.3);
    border: 1px solid #065f46;
}

.nav-section-title {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #78716c;
    padding: 0.75rem 0.875rem 0.25rem;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-floating {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: #ffffff;
    color: #1c1917;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.875rem;
    box-shadow: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.05);
    border: 1px solid #e8e2d6;
    animation: toastSlideUp 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
   Consular Textures & Subtle Background Grid
   -------------------------------------------------------------------------- */
.consular-grid-bg {
    background-image: radial-gradient(rgba(4, 120, 87, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.consular-dark-grid-bg {
    background-image: radial-gradient(rgba(194, 136, 51, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* --------------------------------------------------------------------------
   White Cream Executive Theme Overrides
   Guarantees all surfaces, sidebars, cards, and text use the refined White Cream palette
   -------------------------------------------------------------------------- */
.bg-\[\#060907\], .bg-\[\#070b09\], .bg-\[\#090d0b\], .bg-\[\#090e0c\], .bg-\[\#0a0f0d\], .bg-\[\#060a08\] {
    background-color: #faf8f5 !important;
}

aside.bg-\[\#060907\], aside.bg-\[\#090e0c\], .sidebar-consular {
    background-color: #f7f4ee !important;
    border-color: #e8e2d6 !important;
    color: #1c1917 !important;
}

.bg-\[\#0b100d\], .bg-\[\#0c120f\], .bg-\[\#0e1410\], .bg-\[\#121915\], .bg-\[\#111714\], .bg-\[\#16201b\], .bg-\[\#141e19\] {
    background-color: #ffffff !important;
}

.border-\[\#1b2520\], .border-\[\#212f27\], .border-\[\#16211b\], .border-\[\#1f2c25\], .border-\[\#23332a\] {
    border-color: #e8e2d6 !important;
}

.text-stone-100, .text-stone-200, .text-stone-300 {
    color: #292524 !important;
}

.text-stone-400 {
    color: #57534e !important;
}

.text-stone-500 {
    color: #78716c !important;
}

.bg-stone-900, .bg-stone-950 {
    background-color: #f7f4ee !important;
}

.border-stone-700, .border-stone-800 {
    border-color: #e8e2d6 !important;
}

/* --------------------------------------------------------------------------
   Graceful Color Overrides (Rewires any legacy blue/indigo/purple classes)
   Guarantees NO purple, NO blue anywhere in the rendered interface
   -------------------------------------------------------------------------- */
.bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-indigo-600, .bg-indigo-700 {
    background-color: #047857 !important;
}

.hover\:bg-blue-500:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-500:hover {
    background-color: #065f46 !important;
}

.text-blue-600, .text-blue-500, .text-indigo-600 {
    color: #047857 !important;
}

.text-blue-400, .text-indigo-400, .text-sky-400 {
    color: #059669 !important;
}

.text-blue-300, .text-indigo-300 {
    color: #10b981 !important;
}

.border-blue-500, .border-blue-600, .border-indigo-500 {
    border-color: #059669 !important;
}

.border-blue-500\/20, .border-blue-500\/30, .border-indigo-500\/20 {
    border-color: rgba(4, 120, 87, 0.25) !important;
}

.bg-blue-500\/10, .bg-blue-600\/20, .bg-indigo-500\/10, .bg-purple-500\/10 {
    background-color: rgba(4, 120, 87, 0.1) !important;
}

.bg-purple-600, .bg-purple-700 {
    background-color: #c28833 !important;
}

.text-purple-400, .text-purple-300 {
    color: #b45309 !important;
}

.border-purple-500\/20, .border-purple-500\/30 {
    border-color: rgba(194, 136, 51, 0.25) !important;
}

.shadow-blue-600\/20, .shadow-blue-600\/25, .shadow-blue-600\/30, .shadow-blue-500\/25 {
    box-shadow: 0 4px 14px 0 rgba(4, 120, 87, 0.15) !important;
}

.focus\:border-blue-500:focus, .focus\:ring-blue-500:focus {
    border-color: #047857 !important;
    --tw-ring-color: #047857 !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 113, 108, 0.25);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 113, 108, 0.45);
}