/* ================================================================
   sql-to-pyspark.css — Sqlism Theme
   ================================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
    --primary:        #8b5cf6;
    --primary-dark:   #7c3aed;
    --secondary:      #10b981;
    --bg-primary:     #ffffff;
    --bg-secondary:   #f8fafc;
    --bg-card:        #ffffff;
    --text-primary:   #1f2937;
    --text-secondary: #6b7280;
    --border:         #e5e7eb;
    --shadow:         rgba(0,0,0,0.10);
    --shadow-lg:      rgba(0,0,0,0.15);
    --navbar-bg:      #ffffff;
    --gradient:       linear-gradient(135deg, #8b5cf6 0%, #10b981 100%);
    --code-bg:        #1e1e2e;
    --code-text:      #cdd6f4;
    --mono:           'IBM Plex Mono', monospace;
    --warning-color:  #f59e0b;
    --danger-color:   #ef4444;
}

[data-theme="dark"] {
    --bg-primary:    #111827;
    --bg-secondary:  #1f2937;
    --bg-card:       #1f2937;
    --text-primary:  #f9fafb;
    --text-secondary:#d1d5db;
    --border:        #374151;
    --shadow:        rgba(0,0,0,0.30);
    --shadow-lg:     rgba(0,0,0,0.50);
    --navbar-bg:     #111827;
    --code-bg:       #0d1117;
    --code-text:     #c9d1d9;
}

html  { scroll-behavior:smooth; }
body  {
    font-family:'Inter',sans-serif;
    background:var(--bg-secondary);
    color:var(--text-primary);
    line-height:1.6;
    transition:background-color .3s ease, color .3s ease;
    min-height:100vh;
}
button, textarea, input { font:inherit; }
code, kbd { font-family:var(--mono); }
a { color:var(--primary); text-decoration:none; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
    background:var(--gradient);
    padding:3.8rem 2rem 4.2rem;
    text-align:center; color:#fff;
    position:relative; overflow:hidden;
    border-bottom:2px solid var(--border);
}
.hero::before {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:26px 26px; opacity:.4; pointer-events:none;
}
.hero::after {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 55% 70% at 8% 60%, rgba(255,255,255,.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 92% 20%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:820px; margin:0 auto; }

.hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.18); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3);
    padding:6px 18px; border-radius:50px;
    font-size:.82rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; margin-bottom:18px;
}
.hero-h1 {
    font-size:clamp(2rem,5vw,3.4rem); font-weight:800; margin-bottom:14px;
    display:block; letter-spacing:-.02em;
}
.hero-para {
    font-size:clamp(.95rem,2vw,1.15rem); opacity:.92;
    margin-bottom:24px; max-width:660px; margin-left:auto; margin-right:auto;
}
.hero-para code {
    background:rgba(255,255,255,.22); padding:2px 7px;
    border-radius:5px; font-size:.88em;
}
.hero-stats { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }
.hero-stats span {
    background:rgba(255,255,255,.18); padding:7px 18px; border-radius:50px;
    display:flex; align-items:center; gap:7px;
    backdrop-filter:blur(10px); font-size:.88rem;
}

[data-theme="dark"] .hero { background:linear-gradient(to right,#111827,#1f2937); }
[data-theme="dark"] .hero-h1,
[data-theme="dark"] .hero-para,
[data-theme="dark"] .hero-eyebrow {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .hero-stats span {
    background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    border:1px solid #7c3aed;
}

/* ── CONTAINER ────────────────────────────────────────────── */
.container { max-width:1380px; margin:0 auto; padding:2rem 2rem 3rem; }

/* ── PANEL (base card) ────────────────────────────────────── */
.panel {
    background:var(--bg-card);
    border-radius:16px;
    border:2px solid var(--border);
    box-shadow:0 4px 20px var(--shadow);
    overflow:hidden;
}

/* ── PANEL HEADER ─────────────────────────────────────────── */
.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background:rgba(139,92,246,.1);
    border-bottom:2px solid var(--border);
    font-weight:700; font-size:.95rem; color:var(--text-primary);
    flex-wrap:wrap; gap:10px;
}
.panel-header > span {
    display:flex; align-items:center; gap:8px;
}
.panel-header > span i { color:var(--primary); }

/* ── BUTTON GROUP inside panel-header ────────────────────── */
.panel-btn-group {
    display:flex; gap:8px; align-items:center; flex-shrink:0;
}

/* ── SHARED BUTTON BASE ───────────────────────────────────── */
.btn-format, .btn-clear, .btn-copy, .btn-download, .btn-save, .btn-share {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    color:var(--text-secondary);
    font-size:.82rem; font-weight:600;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:all .2s ease; white-space:nowrap;
}
.btn-format:hover, .btn-clear:hover, .btn-copy:hover,
.btn-download:hover, .btn-save:hover, .btn-share:hover {
    border-color:var(--primary); color:var(--primary);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(139,92,246,.15);
}

/* convert button — primary gradient CTA */
.btn-convert {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 26px; border-radius:999px; border:none;
    background:var(--gradient); color:#fff;
    font-size:.95rem; font-weight:700;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 6px 20px rgba(139,92,246,.35);
    white-space:nowrap;
}
.btn-convert:hover  { transform:translateY(-2px); box-shadow:0 10px 28px rgba(139,92,246,.45); }
.btn-convert:active { transform:translateY(0); }

/* ── WORKSPACE (two-column) ───────────────────────────────── */
.workspace {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

/* ── EXAMPLE CHIPS ────────────────────────────────────────── */
.example-strip {
    display:flex; gap:10px; flex-wrap:wrap;
    padding:16px 20px 0;
}
.example-chip {
    text-align:left; padding:10px 14px;
    border:1.5px solid var(--border); border-radius:12px;
    background:var(--bg-secondary);
    color:var(--text-primary);
    cursor:pointer; transition:all .22s ease;
    display:flex; flex-direction:column; gap:2px;
}
.example-chip:hover {
    border-color:var(--primary);
    background:rgba(139,92,246,.06);
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(139,92,246,.12);
}
.example-chip strong { font-size:.88rem; font-weight:600; color:var(--text-primary); }
.example-chip span   { font-size:.76rem; color:var(--text-secondary); }

/* ── EDITOR WRAP + LABEL ──────────────────────────────────── */
.editor-wrap { padding:14px 20px 0; }
.editor-label {
    display:block; margin-bottom:8px;
    font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
    color:var(--text-secondary);
}

/* ── TEXTAREAS ────────────────────────────────────────────── */
textarea {
    display:block; width:100%;
    min-height:400px;
    padding:16px 18px;
    border:2px solid var(--border); border-radius:12px;
    resize:vertical;
    background:var(--code-bg);
    color:var(--code-text);
    line-height:1.7; font-size:.88rem;
    font-family:var(--mono);
    tab-size:4;
    transition:border-color .25s ease;
}
textarea:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
textarea[readonly]    { opacity:.95; cursor:default; }
textarea::placeholder { color:rgba(205,214,244,.28); }

#pythonOutput { min-height:380px; }

/* ── ACTION ROW ───────────────────────────────────────────── */
.action-row {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:14px 20px 20px;
}
.microcopy {
    display:flex; align-items:center; gap:6px;
    font-size:.82rem; color:var(--text-secondary); line-height:1.5;
}
.microcopy i  { color:var(--primary); flex-shrink:0; }
.microcopy code {
    background:rgba(139,92,246,.1); color:var(--primary);
    padding:1px 5px; border-radius:4px;
    font-family:var(--mono); font-size:.85em;
    border:1px solid rgba(139,92,246,.18);
}

/* ── MODE SWITCH ──────────────────────────────────────────── */
.mode-switch {
    display:flex; gap:8px; padding:16px 20px 0; flex-wrap:wrap;
}
.mode-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:999px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    color:var(--text-secondary);
    font-size:.86rem; font-weight:600;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition:all .22s ease;
}
.mode-tab:hover { border-color:var(--primary); color:var(--primary); }
.mode-tab.active {
    background:var(--gradient); color:#fff;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(139,92,246,.32);
}

/* ── STATUS GRID ──────────────────────────────────────────── */
.status-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px; padding:14px 20px 0;
}
.status-card {
    padding:14px 16px; border-radius:12px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
}
.status-label {
    display:flex; align-items:center; gap:6px;
    font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-secondary); margin-bottom:6px;
}
.status-label i { color:var(--primary); font-size:.8rem; }
.status-card strong {
    display:block; font-size:.9rem; font-weight:700;
    color:var(--text-primary); margin-bottom:4px;
}
.status-card p {
    font-size:.78rem; color:var(--text-secondary);
    line-height:1.5; margin:0;
}

/* ── INSIGHTS ROW ─────────────────────────────────────────── */
.insights {
    display:grid;
    grid-template-columns:1.1fr 1.1fr 0.8fr;
    gap:20px;
}

/* ── INSIGHT LIST ─────────────────────────────────────────── */
.insight-list {
    padding:16px 18px;
    display:flex; flex-direction:column; gap:10px;
    min-height:60px;
}
.insight-list.empty-state {
    font-size:.87rem; color:var(--text-secondary);
    line-height:1.6; font-style:italic;
}
.insight-item {
    position:relative;
    padding:12px 14px 12px 18px;
    border-radius:10px; border:1.5px solid var(--border);
    background:var(--bg-secondary);
    font-size:.86rem; line-height:1.6;
}
.insight-item::before {
    content:''; position:absolute;
    left:0; top:12px; bottom:12px;
    width:4px; border-radius:999px;
    background:rgba(16,185,129,.55);
}
.insight-item.warning::before { background:rgba(239,68,68,.65); }
.insight-item strong {
    display:block; margin-bottom:4px;
    font-size:.76rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--secondary);
}
.insight-item.warning strong { color:var(--danger-color); }
.insight-item span { color:var(--text-secondary); }

/* ── CHEAT SHEET ──────────────────────────────────────────── */
.cheat-sheet { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.cheat-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:10px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
}
.cheat-sql {
    font-family:var(--mono); font-size:.82rem; font-weight:700;
    color:var(--primary); min-width:80px; flex-shrink:0;
}
.cheat-arrow { color:var(--text-secondary); font-size:.75rem; flex-shrink:0; }
.cheat-code {
    font-family:var(--mono); font-size:.8rem;
    background:rgba(139,92,246,.1); color:var(--primary);
    padding:2px 8px; border-radius:5px;
    border:1px solid rgba(139,92,246,.18);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── SYNTAX HIGHLIGHT TOKENS ──────────────────────────────── */
.keyword  { color:#c084fc; font-weight:600; }
.function { color:#6ee7b7; }
.string   { color:#fca5a5; }
.number   { color:#fcd34d; }
.comment  { color:#64748b; font-style:italic; }
.operator { color:#94a3b8; }

/* ── NOTIFICATION TOAST ───────────────────────────────────── */
/* Positioned below the navbar (top: 80px matches navbar height) */
.notification {
    position:fixed; top:80px; right:20px;
    padding:14px 22px;
    background:var(--gradient); color:#fff;
    border-radius:10px;
    box-shadow:0 4px 20px rgba(139,92,246,.4);
    transform:translateX(calc(100% + 40px)); opacity:0;
    transition:transform .4s ease, opacity .4s ease;
    z-index:1000; font-weight:500;
    display:flex; align-items:center; gap:9px; font-size:.92rem;
    pointer-events:none; cursor:pointer;
}
.notification.show    { transform:translateX(0); opacity:1; pointer-events:auto; }
.notification.success { background:linear-gradient(135deg,#10b981,#059669); }
.notification.error   { background:linear-gradient(135deg,#ef4444,#dc2626); }
.notification.warning { background:linear-gradient(135deg,#f59e0b,#d97706); }

/* ── COPIED FEEDBACK STATE on copy button ─────────────────── */
.btn-copy.copied {
    border-color:var(--secondary); color:var(--secondary);
    background:rgba(16,185,129,.08);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1200px) {
    .insights {
        grid-template-columns:1fr 1fr;
    }
    .insights .insight-panel:last-child {
        grid-column:1 / -1;
    }
    .cheat-sheet {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }
}

@media (max-width:1024px) {
    .workspace { grid-template-columns:1fr; }
    textarea, #pythonOutput { min-height:280px; }
}

@media (max-width:768px) {
    .container { padding:1.5rem 1.2rem 2.5rem; }
    .hero { padding:2.8rem 1.5rem 3.2rem; }
    .hero-h1 { font-size:1.9rem; }
    .hero-para { font-size:.95rem; }
    .hero-stats { gap:.8rem; }
    .status-grid { grid-template-columns:1fr; }
    .insights { grid-template-columns:1fr; }
    .insights .insight-panel:last-child { grid-column:auto; }
    .cheat-sheet { display:flex; flex-direction:column; }
    .panel-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .action-row { flex-direction:column; align-items:flex-start; }
    .mode-switch { flex-wrap:wrap; }
}

@media (max-width:576px) {
    .container { padding:1rem 1rem 2rem; }
    .hero { padding:2.2rem 1rem 2.8rem; }
    .hero-h1 { font-size:1.65rem; }
    .panel-header { padding:12px 14px; }
    .editor-wrap { padding:12px 14px 0; }
    .action-row { padding:12px 14px 16px; }
    .example-strip { padding:12px 14px 0; }
    .status-grid { padding:12px 14px 0; }
    .mode-switch { padding:12px 14px 0; }
    textarea { min-height:240px; font-size:.82rem; }
    .notification {
        left:10px; right:10px; width:calc(100% - 20px);
        top:70px; transform:translateY(-100px); opacity:0;
    }
    .notification.show { transform:translateY(0); opacity:1; }
}