/*
 * Design system on top of Bootstrap 5.3 (public/assets/vendor/bootstrap) +
 * Bootstrap Icons (public/assets/vendor/bootstrap-icons). Bootstrap's own
 * compiled CSS bakes color values into each component's local custom
 * properties (e.g. .btn-primary{--bs-btn-bg:#0d6efd}) rather than reading
 * --bs-primary, so re-theming means redeclaring those same local properties
 * here, after the Bootstrap stylesheet loads — not just setting --bs-primary.
 *
 * Look and feel: soft neutral canvas, cards that actually float (real
 * shadow + generous radius, not just a flat border), a colored left-accent
 * on the active nav item / alerts, pill-shaped soft-tinted badges, and
 * gentle hover transitions throughout — a "contemporary SaaS dashboard"
 * read, in contrast to the flat/dense Adminer skin (public/assets/css/app.css).
 */

:root {
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-darker: #3730a3;
    --brand-light: #eef2ff;
    --brand-rgb: 79, 70, 229;

    --ink: #111827;
    --ink-soft: #374151;
    --muted: #6b7280;
    --muted-soft: #9ca3af;
    --border: #e5e7eb;
    --surface: #ffffff;
    --surface-sunken: #f4f5f8;

    /* Generous radius + real (if soft) elevation — the two things that most
       separate a "modern dashboard" feel from a flat/dense admin-tool one. */
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 10px 24px -4px rgba(16, 24, 40, 0.14), 0 4px 8px -2px rgba(16, 24, 40, 0.08);

    --sidebar-w: 240px;
}

* { scrollbar-color: var(--muted-soft) transparent; }

html, body { height: 100%; }

/*
 * Bootstrap sizes almost everything (padding, headings, buttons, badges,
 * form controls) in rem, which is relative to this root font-size, not
 * body's — so this one line is what actually makes the whole app as dense
 * as intended, rather than the more spaced-out default Bootstrap scale.
 */
html { font-size: 14px; }

body {
    background-color: var(--surface-sunken);
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

a { color: var(--brand); transition: color .12s ease; }
a:hover { color: var(--brand-dark); }

code { font-size: 0.85em; color: #c0255e; }

/* ---------- Brand re-theme over Bootstrap's baked-in blue ---------- */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn-sm { border-radius: var(--radius-sm); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker);
    --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    box-shadow: 0 1px 2px rgba(var(--brand-rgb), 0.3);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(var(--brand-rgb), 0.3); }

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-soft);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--ink-soft);
    --bs-btn-hover-border-color: var(--ink-soft);
}

.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }

.badge.text-bg-primary { background-color: var(--brand) !important; }

.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border-radius: 0.35em;
    border-width: 1.5px;
    border-color: var(--border);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15);
}

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border);
}

.form-label { font-weight: 500; color: var(--ink-soft); font-size: 0.875rem; }

.page-link {
    color: var(--brand);
    border-radius: var(--radius-sm);
    margin-inline: 2px;
    border-color: var(--border);
    transition: background-color .12s ease, color .12s ease;
}
.page-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); box-shadow: 0 1px 2px rgba(var(--brand-rgb), 0.3); }
.page-item.disabled .page-link { color: var(--muted-soft); }

/* Table-scoped page tabs (Select data | Show structure | Alter table | New
   item) as soft pill-topped tabs with a colored underline on the active one,
   instead of Bootstrap's boxy bordered-tab look. */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 0.15rem; }
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--muted);
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    margin-bottom: -1px;
    transition: color .12s ease, background-color .12s ease;
}
.nav-tabs .nav-link:hover { color: var(--ink); background: var(--surface-sunken); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--brand); background: var(--brand-light); border: 0; border-bottom: 2px solid var(--brand); }

.dropdown-menu { border-radius: var(--radius-sm); border-color: var(--border); box-shadow: var(--shadow-lg); padding: 0.35rem; }
.dropdown-item { border-radius: calc(var(--radius-sm) - 2px); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--brand-light); color: var(--brand-darker); }

/* Colored left accent instead of a flat tinted background — a common,
   friendlier way to signal an alert's kind without it feeling like a solid
   block of color. */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border); border-inline-start-width: 4px; box-shadow: var(--shadow-sm); }
.alert-danger { border-inline-start-color: #dc3545; }
.alert-success { border-inline-start-color: #198754; }
.alert-warning { border-inline-start-color: #ffc107; }
.alert-info { border-inline-start-color: #0dcaf0; }

/* Soft pastel-on-tint badges read friendlier than Bootstrap's saturated
   solid-color ones, and a pill shape matches the rest of this theme's
   rounder language. */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; padding: 0.3em 0.65em; }
.badge.text-bg-secondary { background-color: var(--surface-sunken) !important; color: var(--ink-soft) !important; }
.badge.text-bg-success { background-color: #ecfdf3 !important; color: #027a48 !important; }
.badge.text-bg-danger { background-color: #fef3f2 !important; color: #b42318 !important; }

/* ---------- App shell: sidebar + topbar ---------- */

.db-shell { min-height: 100vh; display: flex; }

.db-sidebar {
    --bs-offcanvas-width: var(--sidebar-w);
    width: var(--sidebar-w);
    /* Without this, .db-shell's flexbox treats the sidebar as shrinkable
       (the CSS default) just like .db-content — so any wide content (e.g.
       the row browser's Select/Search/Sort fieldsets) squeezes the sidebar
       narrower instead of the content area scrolling/wrapping on its own. */
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.db-sidebar .offcanvas-header { border-bottom: 1px solid var(--border); }

/* Keep the sidebar pinned to the viewport while page content scrolls — scoped to
   the desktop breakpoint only, since below it .offcanvas-lg needs its own
   `position: fixed` (set by Bootstrap) for the mobile slide-in/out overlay to work;
   overriding that with `sticky` here would break the toggle animation. */
@media (min-width: 992px) {
    .db-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.db-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.db-brand:hover { color: var(--ink); }
.db-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand), var(--brand-darker));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(var(--brand-rgb), 0.35);
}
.db-brand-mark-logo { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.db-brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; }

.db-nav { padding: 0.75rem 0.75rem 1rem; flex: 1 1 auto; overflow-y: auto; }
.db-nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-soft);
    padding: 1rem 0.75rem 0.4rem;
}
.db-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.db-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: var(--muted); flex-shrink: 0; }
.db-nav-link:hover { background: var(--surface-sunken); color: var(--ink); }
/* Inset box-shadow as a left accent bar — a common "current section" marker
   in modern dashboard sidebars — layered on top of the existing tint/color
   change rather than replacing them. */
.db-nav-link.active { background: var(--brand-light); color: var(--brand-darker); box-shadow: inset 3px 0 0 var(--brand); }
.db-nav-link.active i { color: var(--brand); }

.db-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.db-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.db-user-menu {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background: var(--surface);
    text-decoration: none;
    color: var(--ink-soft);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.db-user-menu:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.db-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand-darker);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* min-width: 0 overrides the flex default (min-width: auto, i.e. "never
   shrink below your content's natural width") — without it, a wide-enough
   descendant (a long unwrapped line, a row of fieldsets) would force this
   flex item wider than the viewport instead of reflowing/scrolling within it. */
.db-content { flex: 1 1 auto; min-width: 0; padding: 1.25rem 1.5rem 2rem; }
@media (min-width: 992px) { .db-content { padding: 1.5rem 2rem 2.5rem; } }
.db-content-inner { max-width: 1320px; margin-inline: auto; }

/* Opt-in narrow wrapper for standalone single-card forms (create/edit pages). */
.form-card-wrap { max-width: 640px; margin-inline: auto; }
.form-card-wrap-lg { max-width: 820px; margin-inline: auto; }

.db-footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1rem; border-top: 1px solid var(--border); background: var(--surface); }

/* ---------- Page header ---------- */

.page-header { margin-bottom: 1.75rem; }
.page-header h1 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.page-header .page-subtitle { color: var(--muted); font-size: 0.9rem; }
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    margin-bottom: 0.35rem;
}

/* ---------- Cards, tables, lists ---------- */

.card {
    --bs-card-spacer-y: 0.85rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-cap-padding-y: 0.6rem;
    --bs-card-cap-padding-x: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* No `overflow: hidden` here (tempting, to clip a nested table's square
       corners to the card's rounded ones) — a wide table (e.g. the
       permission matrix's per-module checkbox row) puts a horizontally
       *scrolling* `.table-responsive` right up against that clipped,
       rounded edge, and the two fight: the scrollbar/content rendered right
       at the rounded corner boundary, producing a visibly broken-looking
       seam instead of a clean curve. A few inner elements keep visibly
       square corners inside a rounded card as the trade-off. */
}
.card-header { background: var(--surface); font-weight: 600; color: var(--ink); }

.table { color: var(--ink-soft); font-size: 0.8125rem; }
/* Column-wise borders: Bootstrap's base .table only draws a horizontal rule
   under each row — add a vertical one between columns too, so it reads as a
   grid rather than a stack of rules. Last column skipped so it doesn't
   double up against .table-responsive's/.card's own right edge. */
.table > :not(caption) > * > *:not(:last-child) { border-inline-end: 1px solid var(--border); }
.table thead.table-light th {
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-width: 1px;
}
/* Regular tables get a touch more breathing room than .table-sm; .table-sm keeps
   Bootstrap's own tighter padding untouched — this used to hardcode 0.65rem for
   both, which fought .table-sm and made every table denser than intended less dense. */
.table:not(.table-sm) > :not(caption) > * > * { padding-block: 0.3rem; }
/* Zebra striping — alternating row shading like a typical dense data grid
   (e.g. DataTables' own "compact" example: https://datatables.net/examples/core/styling/compact.html),
   applied globally so every table in the app gets it consistently rather
   than opt-in per table. A touch lighter than --surface-sunken (reserved
   for hover below) so hovering a striped row still reads as a clear change,
   not just a swap between two near-identical grays. Placed before
   .table-hover so hover (equal specificity) wins the tie for a striped row
   that's also hovered. */
.table > tbody > tr:nth-of-type(even) > * { background-color: #fafbfc; }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-sunken); }
.table .btn-sm { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.table .badge { font-size: 0.7rem; }
.table .form-control-sm, .table .form-select-sm { font-size: 0.8125rem; padding: 0.15rem 0.4rem; }

/* Compact icon-only action buttons (row-browser Edit/Delete, etc.) — square,
   just big enough for the glyph, so a row of actions doesn't read as a
   stack of pill-shaped text buttons. */
.row-actions { white-space: nowrap; }
.row-actions .btn-icon + .btn-icon { margin-inline-start: 0.35rem; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    line-height: 1;
    border-radius: var(--radius-sm, 6px);
}
.btn-icon i { font-size: 0.9rem; }

/* Adminer-style label/control table rows (export options, and any similar dense
   settings form) — a plain table instead of Bootstrap's spacious .row/.col grid. */
.label-rows-table > :not(caption) > * > th { width: 170px; font-weight: 600; color: var(--ink-soft); vertical-align: middle; white-space: nowrap; }
.label-rows-table > :not(caption) > * > td { vertical-align: middle; }

/* Adminer's recurring structural signature — a bordered box with a label cut
   into the top border ("Selected (N)", "Export (N)", etc.) — reworked here
   into a plainer, more contemporary shape: the <legend> sits as a small
   caption *above* a soft rounded/shadowed panel instead of overlapping its
   border, which reads as a dated/technical convention next to this theme's
   rounder, shadowed cards. Still a real <fieldset>/<legend> (semantics,
   no JS needed) — only its layout changes. */
fieldset.field-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
    padding: 0.9rem 1rem 0.75rem;
    margin: 0;
    min-width: 0;
}
fieldset.field-box > legend {
    width: auto;
    float: none;
    display: block;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* Row browser's "Select data" query preview line — the literal SQL that
   produced the current result set, Adminer-style. */
.sql-preview-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
    background: var(--surface-sunken);
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    color: var(--ink);
}

.list-group-item { border-color: var(--border); transition: background-color .12s ease; }
.list-group-item.interactive:hover { background: var(--surface-sunken); }

/* Delete/remove actions rendered as inline forms next to links/buttons in a table cell. */
.table td form.d-inline { display: inline; }

/* Row browser data grid: long values stay on one line, ellipsized, with the
   full value available as a native hover tooltip (title="..." set server-side
   in the view) rather than wrapping and inflating row height. */
.data-grid-table td, .data-grid-table th {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-grid-table .editable-cell.editing {
    max-width: none;
    overflow: visible;
    white-space: normal;
}
/* The row browser's own table lacks Bootstrap's .table-hover class (it isn't
   DataTables-driven like the other grids), so without this, the only hover
   feedback was .editable-cell:hover below — one column lighting up instead
   of the whole row. This covers every cell in the row, editable or not;
   .data-grid-table-prefixed selectors below (cell-saving/-saved/-error/
   .editing) are kept a notch more specific so an in-progress save's own
   feedback color still wins over a stale mouse-over. */
.data-grid-table tbody tr:hover > * { background-color: var(--surface-sunken); }

/* Click-to-edit / blur-to-save cells in the row browser (table_data/index.php). */
.editable-cell { cursor: text; transition: background-color .12s ease; }
.editable-cell:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.data-grid-table .editable-cell.editing { padding: 0.25rem; background: var(--surface); }
.editable-cell.editing .form-control { border-color: var(--brand); }
.data-grid-table .editable-cell.cell-saving { opacity: 0.6; }
.data-grid-table .editable-cell.cell-saved { background: #d1f4e0; transition: background 0.9s ease; }
.data-grid-table .editable-cell.cell-error { background: #fbd5d5; }

/* A genuine SQL NULL, marked server-side (table_data/index.php) — shown as a
   muted "NULL" rather than a plain blank cell, so it doesn't read as a
   rendering glitch now that every cell has a border on every side. Not
   `:empty`, since indentation in the PHP template leaves whitespace text
   nodes even when the value itself is blank. Suppressed while `.editing` so
   it doesn't sit behind the text input a click swaps in. */
.cell-null:not(.editing)::before { content: "NULL"; color: var(--muted); font-style: italic; }

/* ---------- Card grids that shouldn't stretch a lone item full-width ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 300px));
    justify-content: start;
    gap: 1rem;
}

/* ---------- Stat / resource cards (dashboard, connections) ---------- */

.resource-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); color: inherit; }
/* .card-body's padding is a Bootstrap custom property defined only on .card itself
   (--bs-card-spacer-y/-x) — .resource-card deliberately isn't a .card, so that
   property never exists here and the padding silently drops. Set it explicitly. */
.resource-card .card-body { padding: 1.25rem 1.25rem 1.5rem; }
.resource-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--brand-light);
    color: var(--brand-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
}

/* ---------- Empty states ---------- */

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted);
}
.empty-state i {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 1.5rem;
}
.empty-state p { margin-bottom: 0; }

/* ---------- Permission matrix ---------- */

.perm-matrix-card .table { margin-bottom: 0; }
.perm-matrix-card .form-check { display: flex; justify-content: center; }
.perm-matrix-table th, .perm-matrix-table td { text-align: center; white-space: nowrap; }
.perm-matrix-table td:nth-child(2), .perm-matrix-table th:nth-child(2) { text-align: left; white-space: normal; }
.perm-matrix-table th .select-all-column { margin-bottom: 0.25rem; }

/* ---------- SQL / code blocks ---------- */

pre.sql-output {
    background: #1e1e2e;
    color: #d4d4e0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 400px;
    overflow: auto;
    font-size: 0.85rem;
}

.CodeMirror {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    height: auto;
    font-size: 0.8125rem;
    /* CodeMirror hides the original <textarea> and inserts this div as its sibling,
       so a `flex-grow-1`/similar class on the textarea (e.g. the SQL console's editor
       row) never reaches the thing that's actually visible — give every CodeMirror
       instance real flex sizing here instead. A no-op outside a flex container. */
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
}
.CodeMirror-focused { border-color: var(--brand); box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.15); }

textarea.form-control[name="sql"],
textarea.form-control[style*="monospace"],
textarea[name="body"],
textarea[name="select_sql"] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
}

/* ---------- Misc ---------- */

.text-muted { color: var(--muted) !important; }

@media (max-width: 991.98px) {
    .db-content { padding: 1.25rem 1rem 2rem; }
}

/* ---------- Toast notifications ---------- */
/* A transient bottom-of-screen confirmation ("Row updated.", "Table
   dropped.") for any mutating action — queued server-side via the flash()
   helper and/or fired client-side via window.dbmToast(), see app.js. Same
   dark-pill look in both themes on purpose: this is a floating system
   notice, not part of either page skin. */
#dbmToastContainer {
    position: fixed;
    right: 20px;
    bottom: 56px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    pointer-events: none;
}
.dbm-toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #1e2129;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 20, 30, 0.35);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: min(90vw, 420px);
}
.dbm-toast-in { opacity: 1; transform: translateY(0); }
.dbm-toast i { font-size: 1.05rem; flex: none; }
.dbm-toast-success i { color: #3ecf6e; }
.dbm-toast-error i { color: #f2564c; }
.dbm-toast-info i { color: #4c9df2; }