/* ============================================================
   AURA AI OS — Design System v1.4.0
   Light Orange — Canonical CSS
   ============================================================
   Import order: aura.css → aura-components.css
   Tailwind CDN + aura-tailwind-config.js must load first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── 1. Design Tokens (CSS Custom Properties) ── */
:root {
    /* Brand */
    --primary:          #FF7A20;
    --primary-hover:    #E96A10;
    --primary-light:    #FFF5EB;
    --primary-container:#FFE8D6;
    --on-primary:       #FFFFFF;

    /* Accents */
    --secondary:        #00C292;
    --tertiary:         #6366F1;

    /* Backgrounds */
    --background:       #F8FAFC;
    --on-background:    #0F172A;

    /* Surfaces */
    --surface:                  #FFFFFF;
    --on-surface:               #0F172A;
    --surface2:                 #F1F5F9;
    --surface-variant:          #F1F5F9;
    --on-surface-variant:       #475569;
    --surface-container-low:    #FFFFFF;
    --surface-container:        #F1F5F9;
    --surface-container-high:   #E2E8F0;

    /* Borders */
    --border:           #E2E8F0;
    --outline:          #CBD5E1;

    /* Text */
    --text-main:        #0F172A;
    --text-muted:       #64748B;

    /* Semantic */
    --error:            #EF4444;
    --on-error:         #FFFFFF;
    --error-container:  #FEE2E2;
    --success:          #22C55E;
    --warning:          #F59E0B;

    /* Radius tokens */
    --radius-xl:    1.5rem;
    --radius-lg:    1rem;
    --radius-md:    0.75rem;
    --radius-sm:    0.5rem;
    --radius-xs:    0.25rem;

    /* Shadows */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.08);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.10);
    --shadow-aura:  0 20px 40px -10px rgba(0,0,0,0.05);
    --shadow-primary: 0 4px 12px rgba(255,122,32,0.20);
}

/* ── 2. Dark Mode Overrides ── */
.dark {
    --primary:          #FB923C;
    --primary-hover:    #F97316;
    --primary-light:    rgba(249,115,22,0.12);
    --primary-container:rgba(249,115,22,0.15);
    --on-primary:       #FFFFFF;

    --background:       #0F172A;
    --on-background:    #F1F5F9;

    --surface:                  #1E293B;
    --on-surface:               #F1F5F9;
    --surface2:                 #334155;
    --surface-variant:          #334155;
    --on-surface-variant:       #94A3B8;
    --surface-container-low:    #0F172A;
    --surface-container:        #1E293B;
    --surface-container-high:   #334155;

    --border:           #334155;
    --outline:          #475569;

    --text-main:        #F1F5F9;
    --text-muted:       #94A3B8;

    --error:            #F87171;
    --error-container:  rgba(248,113,113,0.15);
    --success:          #4ADE80;
    --warning:          #FBB540;
}

/* ── 3. Global Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--background);
    color: var(--on-background);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ── 4. Material Symbols Helper ── */
.ms,
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

/* ── 5. Utility Classes ── */
.bg-aura        { background-color: var(--background); }
.text-aura      { color: var(--on-background); }
.border-aura    { border-color: var(--border); }

.bg-surface     { background-color: var(--surface); }
.text-surface   { color: var(--on-surface); }

/* ── 6. Card Component ── */
.aura-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.aura-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ── 7. Button Components ── */
.aura-btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-primary);
}
.aura-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255,122,32,0.25);
}
.aura-btn-primary:active { transform: scale(0.98); }

.aura-btn-secondary {
    background: var(--surface-variant);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.aura-btn-secondary:hover {
    background: var(--surface-container-high);
    border-color: var(--outline);
}

.aura-btn-danger {
    background: var(--error);
    color: var(--on-error);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.aura-btn-danger:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── 8. Input & Form Components ── */
.aura-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: var(--surface-container-low);
    color: var(--on-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.aura-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* ── 9. Badge ── */
.aura-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.aura-badge-primary  { background: var(--primary-light); color: var(--primary); }
.aura-badge-success  { background: #F0FDF4; color: #16A34A; }
.aura-badge-error    { background: var(--error-container); color: var(--error); }
.aura-badge-warning  { background: #FFFBEB; color: #B45309; }
.aura-badge-neutral  { background: var(--surface-variant); color: var(--text-muted); }

/* ── 10. Modal Base ── */
.aura-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.aura-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.aura-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.aura-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.aura-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── 11. Toast / Notifications ── */
.aura-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 600;
    animation: aura-toast-in 0.3s ease;
}
.aura-toast-success { background: #16A34A; color: #fff; }
.aura-toast-error   { background: var(--error); color: #fff; }
.aura-toast-info    { background: var(--surface-container-high); color: var(--text-main); border: 1px solid var(--border); }

@keyframes aura-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 12. Table ── */
.aura-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.aura-table th {
    background: var(--surface-variant);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.aura-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}
.aura-table tr:last-child td { border-bottom: none; }
.aura-table tbody tr:hover { background: var(--surface-variant); }

/* ── 13. Sidebar Overrides (ensures homogeneity with Tailwind) ── */
#aura-sidebar {
    background-color: var(--background) !important;
    border-right: 1px solid var(--border) !important;
}

/* ── 14. Dark Mode — Comprehensive Tailwind Overrides ──────────────────────
   These override hardcoded Tailwind utilities so dark mode works even when
   pages use raw TW classes instead of CSS var()-based AURA tokens.
   All rules are scoped to .dark to avoid affecting light mode.
   ──────────────────────────────────────────────────────────────────────── */

/* Anti-flash: hide html until theme class is applied */
html { background-color: var(--background); }

/* ── Backgrounds ── */
.dark .bg-white          { background-color: var(--surface) !important; }
.dark .bg-gray-50        { background-color: var(--surface-container-low) !important; }
.dark .bg-gray-100       { background-color: var(--surface-variant) !important; }
.dark .bg-gray-200       { background-color: var(--surface-container-high) !important; }
.dark .bg-slate-50       { background-color: var(--surface-container-low) !important; }
.dark .bg-slate-100      { background-color: var(--surface-variant) !important; }
.dark .bg-slate-200      { background-color: var(--surface-container-high) !important; }
.dark .bg-zinc-50        { background-color: var(--surface-container-low) !important; }
.dark .bg-zinc-100       { background-color: var(--surface-variant) !important; }
.dark .bg-neutral-50     { background-color: var(--surface-container-low) !important; }
.dark .bg-neutral-100    { background-color: var(--surface-variant) !important; }

/* ── Text ── */
.dark .text-gray-900     { color: var(--text-main) !important; }
.dark .text-gray-800     { color: var(--text-main) !important; }
.dark .text-gray-700     { color: var(--on-surface-variant) !important; }
.dark .text-gray-600     { color: var(--text-muted) !important; }
.dark .text-gray-500     { color: var(--text-muted) !important; }
.dark .text-gray-400     { color: var(--text-muted) !important; }
.dark .text-slate-900    { color: var(--text-main) !important; }
.dark .text-slate-800    { color: var(--text-main) !important; }
.dark .text-slate-700    { color: var(--on-surface-variant) !important; }
.dark .text-slate-600    { color: var(--text-muted) !important; }
.dark .text-slate-500    { color: var(--text-muted) !important; }
.dark .text-black        { color: var(--text-main) !important; }

/* ── Borders ── */
.dark .border-gray-100   { border-color: var(--border) !important; }
.dark .border-gray-200   { border-color: var(--border) !important; }
.dark .border-gray-300   { border-color: var(--outline) !important; }
.dark .border-slate-100  { border-color: var(--border) !important; }
.dark .border-slate-200  { border-color: var(--border) !important; }

/* ── Rings (focus outlines) ── */
.dark .ring-gray-200     { --tw-ring-color: var(--border) !important; }

/* ── Divide ── */
.dark .divide-gray-100   > * + * { border-color: var(--border) !important; }
.dark .divide-gray-200   > * + * { border-color: var(--border) !important; }

/* ── Hover states ── */
.dark .hover\:bg-gray-50:hover   { background-color: var(--surface-variant) !important; }
.dark .hover\:bg-gray-100:hover  { background-color: var(--surface-container-high) !important; }
.dark .hover\:bg-slate-50:hover  { background-color: var(--surface-variant) !important; }
.dark .hover\:bg-slate-100:hover { background-color: var(--surface-container-high) !important; }
.dark .hover\:bg-white:hover     { background-color: var(--surface-container) !important; }

/* ── Placeholders ── */
.dark ::placeholder { color: var(--text-muted); opacity: 0.7; }

/* ── <dialog> element ── */
.dark dialog { background-color: var(--surface); color: var(--text-main); border: 1px solid var(--border); }

/* ── Selection ── */
.dark ::selection { background-color: rgba(255,122,32,0.3); color: var(--text-main); }

/* ── 15. Glassmorphism ── */
.glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
}
.dark .glass {
    background: rgba(30,41,59,0.75);
}

/* ── 16. Tab Pill ── */
.tab-active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

/* ── 17. Status Dot ── */
@keyframes pulse-ring {
    0%   { transform: scale(0.33); }
    80%, 100% { opacity: 0; }
}
.status-dot-active {
    position: relative;
}
.status-dot-active::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
    animation: pulse-ring 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

/* ── 18. Custom Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.custom-scrollbar::-webkit-scrollbar       { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 10px; }

/* ── 19. Spinner ── */
@keyframes aura-spin {
    to { transform: rotate(360deg); }
}
.aura-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: aura-spin 0.6s linear infinite;
}

/* ── 20. Page Layout Helpers ── */
.aura-page {
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    background: var(--background);
    color: var(--text-main);
    font-family: 'Manrope', system-ui, sans-serif;
}
.aura-main {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem;
}
.aura-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.aura-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-main);
    margin: 0;
}
.aura-header p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* ── 21. Light Mode Corrections for Hardcoded Dark-Mode Classes ──────────
   Overrules hardcoded `.text-white` classes in light mode (where .dark is not active)
   on headers, inputs, text, and containers so they display beautifully on a light canvas.
   ──────────────────────────────────────────────────────────────────────── */
html:not(.dark) body.text-white {
    color: var(--text-main) !important;
}

html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) h5.text-white,
html:not(.dark) h6.text-white,
html:not(.dark) .title.text-white {
    color: var(--text-main) !important;
}

html:not(.dark) p.text-white,
html:not(.dark) td.text-white,
html:not(.dark) th.text-white,
html:not(.dark) li.text-white,
html:not(.dark) div.text-white:not(.glass):not(.aura-toast):not(.aura-toast *):not(.bg-primary):not([class*="bg-primary"]):not([class*="bg-orange"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-indigo"]),
html:not(.dark) span.text-white:not(.material-symbols-outlined):not(.aura-badge):not(.aura-btn-primary):not([class*="bg-primary"]):not([class*="bg-orange"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-indigo"]) {
    color: var(--text-main) !important;
}

html:not(.dark) input.text-white,
html:not(.dark) textarea.text-white,
html:not(.dark) select.text-white,
html:not(.dark) .aura-input.text-white {
    color: var(--on-surface) !important;
}

/* Fix input backgrounds that are hardcoded with bg-surface-container-high or similar */
html:not(.dark) input[class*="bg-surface-container"],
html:not(.dark) textarea[class*="bg-surface-container"],
html:not(.dark) select[class*="bg-surface-container"] {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
}