/* ================================================================
   sql-complexity-analyzer.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;
    /* Grade colours */
    --grade-simple:   #10b981;
    --grade-moderate: #3b82f6;
    --grade-complex:  #f59e0b;
    --grade-advanced: #ef4444;
    --grade-extreme:  #7c2d12;
}

[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-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:first-child {
    display:flex; align-items:center; gap:8px;
}
.panel-header > span:first-child i { color:var(--primary); }

/* ── BADGE COUNT (header pill) ────────────────────────────── */
.badge-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 7px;
    border-radius:999px; font-size:.76rem; font-weight:700;
    background:rgba(139,92,246,.14); color:var(--primary);
    border:1px solid rgba(139,92,246,.22);
}
.badge-count.has-items {
    background:rgba(239,68,68,.12); color:#ef4444;
    border-color:rgba(239,68,68,.24);
}

/* ── BUTTON GROUP ─────────────────────────────────────────── */
.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);
}

/* Analyze CTA */
.btn-analyze {
    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-analyze:hover  { transform:translateY(-2px); box-shadow:0 10px 28px rgba(139,92,246,.45); }
.btn-analyze:active { transform:translateY(0); }
.btn-analyze.running {
    opacity:.8; pointer-events:none;
    animation:pulse-btn 1s ease-in-out infinite;
}
@keyframes pulse-btn { 0%,100%{opacity:.8} 50%{opacity:.5} }

/* Copy copied state */
.btn-copy.copied {
    border-color:var(--secondary); color:var(--secondary);
    background:rgba(16,185,129,.08);
}

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

/* ── 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);
}

/* ── TEXTAREA ─────────────────────────────────────────────── */
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::placeholder { color:rgba(205,214,244,.28); }

/* ── 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; }

/* ══════════════════════════════════════════
   SCORE PANEL
══════════════════════════════════════════ */

/* Score dial / gauge */
.score-display {
    display:flex; flex-direction:column; align-items:center;
    padding:24px 20px 14px; gap:12px;
}
.score-dial-wrap { position:relative; width:200px; height:120px; }
.score-dial { width:100%; height:100%; overflow:visible; }

.dial-track {
    stroke:var(--border);
    stroke-dasharray:none;
}
.dial-fill {
    stroke:url(#dialGrad);
    stroke-dasharray:0 251.2;
    transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1);
}

.score-center {
    position:absolute; bottom:4px; left:50%;
    transform:translateX(-50%);
    display:flex; align-items:baseline; gap:2px;
}
.score-number {
    font-family:var(--mono); font-size:2.8rem; font-weight:800;
    color:var(--text-primary); line-height:1;
    transition:color .4s ease;
}
.score-max {
    font-family:var(--mono); font-size:.9rem;
    color:var(--text-secondary); font-weight:600;
}

.score-grade-wrap { text-align:center; }
.score-grade {
    display:block; font-size:1.25rem; font-weight:800;
    color:var(--text-primary); letter-spacing:-.01em;
    transition:color .4s ease;
}
.score-label {
    display:block; font-size:.82rem; color:var(--text-secondary);
    margin-top:2px;
}

/* Grade colour modifiers */
.grade-simple   { --gc:#10b981; }
.grade-moderate { --gc:#3b82f6; }
.grade-complex  { --gc:#f59e0b; }
.grade-advanced { --gc:#ef4444; }
.grade-extreme  { --gc:#dc2626; }
.score-number.grade-simple   { color:#10b981; }
.score-number.grade-moderate { color:#3b82f6; }
.score-number.grade-complex  { color:#f59e0b; }
.score-number.grade-advanced { color:#ef4444; }
.score-number.grade-extreme  { color:#dc2626; }
.score-grade.grade-simple    { color:#10b981; }
.score-grade.grade-moderate  { color:#3b82f6; }
.score-grade.grade-complex   { color:#f59e0b; }
.score-grade.grade-advanced  { color:#ef4444; }
.score-grade.grade-extreme   { color:#dc2626; }

/* KPI grid */
.kpi-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; padding:0 20px 18px;
}
.kpi-card {
    display:flex; flex-direction:column; align-items:center;
    gap:4px; padding:12px 8px;
    border-radius:12px; border:1.5px solid var(--border);
    background:var(--bg-secondary);
    transition:border-color .2s ease, transform .2s ease;
}
.kpi-card:hover { border-color:var(--primary); transform:translateY(-1px); }
.kpi-card i { font-size:1rem; color:var(--primary); }
.kpi-value {
    font-family:var(--mono); font-size:1.4rem; font-weight:800;
    color:var(--text-primary); line-height:1;
    transition:color .3s ease;
}
.kpi-value.nonzero { color:var(--primary); }
.kpi-label { font-size:.72rem; font-weight:600; color:var(--text-secondary); text-align:center; }

/* Clause breakdown */
.clause-breakdown {
    border-top:2px solid var(--border);
    padding:0 20px 18px;
}
.clause-header {
    padding:12px 0 10px;
    display:flex; align-items:center; gap:8px;
}
.clause-title {
    display:flex; align-items:center; gap:7px;
    font-size:.82rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-secondary);
}
.clause-title i { color:var(--primary); }
.clause-empty {
    font-size:.84rem; color:var(--text-secondary);
    font-style:italic; padding:4px 0;
}
.clause-list { display:flex; flex-direction:column; gap:7px; }
.clause-row {
    display:flex; align-items:center; gap:10px;
}
.clause-name {
    font-family:var(--mono); font-size:.78rem; font-weight:700;
    color:var(--primary); min-width:90px; flex-shrink:0;
}
.clause-bar-wrap {
    flex:1; height:8px; border-radius:999px;
    background:var(--border); overflow:hidden;
}
.clause-bar {
    height:100%; border-radius:999px;
    background:var(--gradient);
    transition:width .6s cubic-bezier(.4,0,.2,1);
}
.clause-pts {
    font-family:var(--mono); font-size:.76rem; font-weight:600;
    color:var(--text-secondary); min-width:32px; text-align:right;
    flex-shrink: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;
    animation:fadeInUp .3s ease both;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.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.critical::before { background:rgba(220,38,38,.9); }
.insight-item strong {
    display:block; margin-bottom:5px;
    font-size:.8rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--secondary);
    display:flex; align-items:center; gap:6px;
}
.insight-item.warning  strong { color:var(--warning-color); }
.insight-item.critical strong { color:var(--danger-color); }
.insight-item strong i { font-size:.85rem; }
.insight-item span { color:var(--text-secondary); display:block; }

/* ── CHEAT SHEET (Scoring reference) ─────────────────────── */
.cheat-sheet { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.cheat-item.cheat-grade {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:10px;
    border:1.5px solid var(--border);
    background:var(--bg-secondary);
    transition:border-color .2s ease;
}
.cheat-item.cheat-grade:hover { border-color:var(--border); }

.cheat-grade-badge {
    display:flex; align-items:center; justify-content:center;
    width:48px; height:32px; border-radius:8px; flex-shrink:0;
    font-family:var(--mono); font-size:.8rem; font-weight:800;
}
.grade-simple   .cheat-grade-badge { background:rgba(16,185,129,.12);  color:#10b981; }
.grade-moderate .cheat-grade-badge { background:rgba(59,130,246,.12);  color:#3b82f6; }
.grade-complex  .cheat-grade-badge { background:rgba(245,158,11,.12);  color:#f59e0b; }
.grade-advanced .cheat-grade-badge { background:rgba(239,68,68,.12);   color:#ef4444; }
.grade-extreme  .cheat-grade-badge { background:rgba(220,38,38,.14);   color:#dc2626; }

.cheat-grade-info { display:flex; flex-direction:column; gap:2px; }
.cheat-grade-info strong { font-size:.88rem; font-weight:700; color:var(--text-primary); }
.cheat-grade-info span   { font-size:.76rem; color:var(--text-secondary); }

/* ── 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 ───────────────────────────────────── */
.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); }

/* ── SVG GRADIENT DEF (inline in CSS for dial) ────────────── */

/* ── 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; }
    .cheat-item.cheat-grade { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:1024px) {
    .workspace { grid-template-columns:1fr; }
    textarea { min-height:280px; }
    .kpi-grid { grid-template-columns:repeat(6,1fr); }
}
@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; }
    .insights { grid-template-columns:1fr; }
    .insights .insight-panel:last-child { grid-column:auto; }
    .cheat-sheet { display:flex; flex-direction:column; }
    .kpi-grid { grid-template-columns:repeat(3,1fr); }
    .panel-header { flex-wrap:wrap; }
    .action-row { flex-direction:column; align-items:flex-start; }
}
@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; }
    .kpi-grid { padding:0 14px 14px; grid-template-columns:repeat(3,1fr); gap:8px; }
    .clause-breakdown { padding:0 14px 14px; }
    .score-display { padding:18px 14px 10px; }
    textarea { min-height:220px; 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; }
}