/* ==========================================================================
   TALHA AI ENTERPRISE - EXPANDED DESIGN SYSTEM (style.css v2)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Dark Theme Color Palette */
    --bg-main: #0b0f19;
    --bg-secondary: #111827;
    --bg-tertiary: #1f293d;
    --bg-card: rgba(30, 41, 59, 0.5);
    --bg-card-hover: rgba(30, 41, 59, 0.8);
    --bg-glass: rgba(15, 23, 42, 0.65);
    --bg-glass-heavy: rgba(11, 15, 25, 0.88);

    /* Accent Colors */
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: rgba(99, 102, 241, 0.15);
    --accent-cyan: #06b6d4;
    --accent-emerald: #10b981;
    --accent-rose: #f43f5e;
    --accent-amber: #f59e0b;
    --accent-purple: #8b5cf6;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    --gradient-user: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.14);
    --border-glow: rgba(99, 102, 241, 0.4);

    /* Radii & Shadows */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 16px 36px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 25px rgba(99,102,241,0.25);
    --glass-backdrop: blur(16px) saturate(180%);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
    --transition-normal: 0.25s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
    --transition-bounce: 0.5s cubic-bezier(0.34,1.56,0.64,1);

    /* Typography */
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    --font-base-size: 15px;

    /* Layout */
    --sidebar-width: 288px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
}

/* Light Theme */
[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(255,255,255,0.85);
    --bg-card-hover: rgba(255,255,255,0.95);
    --bg-glass-heavy: rgba(255,255,255,0.92);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0,0,0,0.08);
    --border-light: rgba(0,0,0,0.14);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
}

/* Midnight Theme */
[data-theme="midnight"] {
    --bg-main: #05070e; --bg-secondary: #0a0d18; --bg-tertiary: #121729;
    --primary: #3b82f6; --primary-hover: #2563eb;
    --gradient-primary: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
}

/* Cyber Theme */
[data-theme="cyber"] {
    --bg-main: #0d0d12; --bg-secondary: #14141d; --bg-tertiary: #1f1f2e;
    --primary: #10b981; --primary-hover: #059669;
    --gradient-primary: linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
}

/* Font Size Overrides */
[data-fontSize="small"] { --font-base-size: 13.5px; }
[data-fontSize="large"] { --font-base-size: 16.5px; }

/* Reset */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg-main); color:var(--text-primary); font-family:var(--font-main); font-size:var(--font-base-size); line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; outline:none; }
button { cursor:pointer; user-select:none; }
button:disabled { cursor:not-allowed; opacity:0.45; }
a { color:var(--accent-cyan); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--primary); }

#app { display:flex; width:100vw; height:100vh; overflow:hidden; position:relative;
    background-image:radial-gradient(circle at 10% 15%,rgba(99,102,241,0.07) 0%,transparent 40%),radial-gradient(circle at 90% 85%,rgba(139,92,246,0.05) 0%,transparent 40%); }

/* Custom Scrollbars */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); }

/* Glass Card Utility */
.glass-card { background:var(--bg-card); backdrop-filter:var(--glass-backdrop); -webkit-backdrop-filter:var(--glass-backdrop); border:1px solid var(--border-color); border-radius:var(--radius-md); }

/* Toasts */
#toast-container { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:12px; min-width:280px; max-width:420px; padding:12px 18px; background:rgba(17,24,39,0.95); backdrop-filter:var(--glass-backdrop); border:1px solid var(--border-light); border-radius:var(--radius-md); box-shadow:var(--shadow-md); font-size:14px; font-weight:500; animation:toastIn 0.35s var(--transition-bounce) forwards; }
.toast.toast-exit { animation:toastOut 0.25s ease forwards; }
.toast-info { border-left:4px solid var(--primary); }
.toast-success { border-left:4px solid var(--accent-emerald); }
.toast-warning { border-left:4px solid var(--accent-amber); }
.toast-error { border-left:4px solid var(--accent-rose); }

/* Modal System */
.modal-backdrop { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); z-index:9000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }
.modal-backdrop.active { opacity:1; pointer-events:auto; }
.modal-container { width:90%; max-width:560px; background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg),var(--shadow-glow); overflow:hidden; transform:scale(0.92); transition:transform var(--transition-bounce); }
.modal-backdrop.active .modal-container { transform:scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border-color); }
.modal-title { font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; }
.modal-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-full); color:var(--text-muted); transition:all var(--transition-fast); }
.modal-close:hover { background:rgba(255,255,255,0.1); color:var(--text-primary); }
.modal-body { padding:24px; display:flex; flex-direction:column; gap:20px; max-height:70vh; overflow-y:auto; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:12px; background:rgba(0,0,0,0.2); }

/* Form Controls */
.setting-item { display:flex; flex-direction:column; gap:8px; }
.setting-label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.setting-input,.setting-select { width:100%; padding:10px 14px; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); transition:border-color var(--transition-fast); }
.setting-input:focus,.setting-select:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.setting-textarea { min-height:120px; resize:vertical; line-height:1.5; font-family:inherit; }
.setting-hint { margin:6px 0 0; font-size:12px; color:var(--text-muted); line-height:1.4; }
.setting-toggle-row { display:flex; align-items:center; justify-content:space-between; }
.toggle-switch { position:relative; display:inline-block; width:46px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--bg-tertiary); border:1px solid var(--border-color); transition:.3s; border-radius:24px; }
.toggle-slider:before { position:absolute; content:""; height:18px; width:18px; left:2px; bottom:2px; background:var(--text-secondary); transition:.3s; border-radius:50%; }
input:checked + .toggle-slider { background:var(--primary); border-color:var(--primary); }
input:checked + .toggle-slider:before { transform:translateX(22px); background:#fff; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; transition:all var(--transition-fast); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:var(--shadow-glow); }
.btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); }
.btn-secondary:hover { background:rgba(255,255,255,0.08); }
.btn-danger { background:rgba(244,63,94,0.15); color:var(--accent-rose); border:1px solid rgba(244,63,94,0.3); }
.btn-danger:hover { background:var(--accent-rose); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:rgba(255,255,255,0.07); color:var(--text-primary); }