/* SQL to Excel Converter - Modern Developer Utility
   โทน: Deep Navy / Blue / White / Light Gray */

:root {
    --navy: #0b1f3a;
    --navy-2: #12315c;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #e8efff;
    --gray: #f3f5f9;
    --line: #dfe5ee;
    --text: #1b2a41;
    --muted: #64748b;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .06);

    --bs-primary: var(--blue);
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-font-family: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--gray);
    --bs-link-color: var(--blue);
}

html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gray);
}
main { flex: 1 0 auto; }

.btn-primary {
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-bg: var(--blue-dark);
    --bs-btn-hover-border-color: var(--blue-dark);
    --bs-btn-active-bg: var(--blue-dark);
    --bs-btn-active-border-color: var(--blue-dark);
    --bs-btn-disabled-bg: var(--blue);
    --bs-btn-disabled-border-color: var(--blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-bg: var(--blue);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-active-bg: var(--blue-dark);
    --bs-btn-active-border-color: var(--blue-dark);
}
.btn:focus-visible, .form-control:focus, .form-check-input:focus, .dropzone:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .25);
}

/* ---------- Top bar ---------- */
.app-topbar {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: .85rem 0;
    box-shadow: 0 2px 12px rgba(11, 31, 58, .25);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 600; letter-spacing: .2px; }
.brand:hover { color: #fff; }
.brand-icon {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--blue); color: #fff; font-size: 1rem;
}

/* ---------- Cards ---------- */
.app-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.setup-card { max-width: 640px; }

/* ---------- Hero ---------- */
.hero { background: #fff; }
.hero-flow { display: flex; align-items: center; gap: .85rem; }
.hero-bubble {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; border-radius: 18px;
    font-size: 1.7rem; color: #fff;
}
.hero-bubble-db { background: var(--navy); }
.hero-bubble-xls { background: var(--blue); }
.hero-arrow { color: var(--muted); font-size: 1.4rem; }
.hero-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--navy); letter-spacing: -.5px; margin-bottom: .25rem; }
.hero-sub { font-size: 1.1rem; color: var(--text); }

/* ---------- Dropzone ---------- */
.dropzone {
    border: 2px dashed #b9c6dd;
    border-radius: var(--radius);
    background: var(--gray);
    text-align: center;
    padding: 2rem 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--blue); background: var(--blue-soft); }
.dropzone.is-over { transform: scale(1.01); }
.dropzone-icon { font-size: 2.4rem; color: var(--blue); margin-bottom: .5rem; }
.dropzone-title { font-weight: 600; font-size: 1.15rem; color: var(--navy); }

.file-info {
    display: flex; align-items: center; gap: .85rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .75rem 1rem; margin-top: .85rem; background: #fff;
}
.file-info.d-none { display: none; }
.file-info-icon {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: grid; place-items: center; border-radius: 12px;
    background: var(--blue-soft); color: var(--blue); font-size: 1.25rem;
}
.file-info-body { min-width: 0; flex: 1 1 auto; }
.file-info-name { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info-meta { font-size: .875rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Stats ---------- */
.stat {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.1rem; height: 100%; box-shadow: var(--shadow);
}
.stat-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.stat-value small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.stat-text { font-size: 1.05rem; word-break: break-all; }

/* ---------- Table list ---------- */
.tables-list thead th {
    background: var(--gray); color: var(--muted);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tables-list .col-check { width: 44px; }
.tables-list td { vertical-align: middle; }
.tables-list .table-name { font-weight: 600; color: var(--navy); word-break: break-word; }
.tables-list tr.is-checked > td { background: var(--blue-soft); }
.sort-btn {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.sort-btn:hover { color: var(--blue); }
.sort-btn.active { color: var(--blue); }
.row-actions { white-space: nowrap; }
.format-group .btn { min-width: 96px; }

/* ---------- Preview ---------- */
.preview-table { font-size: .85rem; }
.preview-table th { background: var(--navy); color: #fff; white-space: nowrap; position: sticky; top: 0; }
.preview-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-table .is-null { color: #94a3b8; font-style: italic; }
.preview-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- History ---------- */
.history-item { display: flex; gap: .85rem; align-items: center; }
.history-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
    display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.history-name { font-weight: 600; word-break: break-all; }

/* ---------- Progress (SweetAlert) ---------- */
.s2e-progress { margin-top: .5rem; }
.s2e-progress .progress { height: 12px; border-radius: 99px; }
.swal2-popup { font-family: var(--bs-body-font-family); border-radius: var(--radius); }
.swal2-html-container .summary-list { text-align: left; font-size: .95rem; line-height: 1.7; }
.swal2-html-container .summary-list dt { float: left; clear: left; width: 6.5rem; color: var(--muted); font-weight: 500; }
.swal2-html-container .summary-list dd { margin-left: 6.5rem; word-break: break-all; }

/* ---------- SEO content ---------- */
.hero-title { margin-bottom: .25rem; }
h1.hero-sub { font-size: 1.15rem; font-weight: 500; line-height: 1.5; }
.seo-content h2 { color: var(--navy); font-weight: 700; }
.step, .feature {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; height: 100%; box-shadow: var(--shadow);
}
.step p, .feature p { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }
.step-no {
    display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: .5rem;
    border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: .85rem;
}
.feature > i { font-size: 1.3rem; color: var(--blue); margin-bottom: .4rem; }
.faq-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: .6rem; padding: .85rem 1.1rem;
}
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.faq-item[open] summary { margin-bottom: .5rem; }
.faq-item p { margin: 0; color: var(--text); }

/* ---------- Footer ---------- */
.app-footer {
    flex-shrink: 0; margin-top: 2rem; padding: 1.5rem 0;
    background: var(--navy); color: #c9d6ee;
}
.app-footer .fw-semibold { color: #fff; }

@media (max-width: 575.98px) {
    .hero-bubble { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 14px; }
    .stat-value { font-size: 1.25rem; }
    .dropzone { padding: 1.5rem .75rem; }
    .tables-list .row-actions .btn { padding: .25rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}