/*
 * Adminer skin, built as an override layer on top of Bootstrap 5.3
 * (public/assets/vendor/bootstrap) + Bootstrap Icons. Bootstrap bakes color
 * values into each component's local custom properties (e.g.
 * .btn-primary{--bs-btn-bg:#0d6efd}) rather than reading a single theme
 * variable, so re-theming means redeclaring those same local properties
 * here, after the Bootstrap stylesheet loads.
 *
 * Palette/typography/spacing are taken directly from Adminer's own
 * default.css (bg/fg/dim/lit tokens, Verdana/Arial stack, blue links that
 * turn red on hover, zero shadows, near-zero radius, centered+shaded table
 * headers) so the app reads as an Adminer skin rather than a modern SaaS
 * dashboard wearing Adminer colors.
 */

:root {
    /* Adminer's own four tokens, same names it uses internally. */
    --bg: #ffffff;
    --fg: #000000;
    --dim: #eeeeee;
    --lit: #dde0ff;

    --brand: #0000ee;
    --brand-visited: #000080;
    --brand-hover: #cc0000;
    --brand-rgb: 0, 0, 238;

    --ink: #000000;
    --ink-soft: #222222;
    --muted: #767676;
    --muted-soft: #999999;
    --border: #cccccc;
    --border-strong: #999999;
    --surface: var(--bg);
    --surface-sunken: var(--dim);

    /* Adminer is almost entirely square; only fieldsets and small chips get
       any curve at all, and there is no elevation anywhere. */
    --radius: 0;
    --radius-sm: 2px;
    --radius-fieldset: 5px;
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;

    --sidebar-w: 250px;
}

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

html, body { height: 100%; }

html { font-size: 14px; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: normal;
    letter-spacing: normal;
}

a { color: var(--brand); text-decoration: none; }
a:visited { color: var(--brand-visited); }
a:hover { color: var(--brand-hover); text-decoration: underline; }

code { font-size: 0.9em; padding: 1px 3px; background: var(--dim); color: inherit; }

/* ---------- Buttons: Adminer has no primary/secondary/danger color coding —
   every button is the same plain box, styled close to a native OS button.
   Destructive actions stay safe via the existing confirm() dialogs in the
   markup, not via a red button. ---------- */

.btn,
.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--dim);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: #e2e2e2;
    --bs-btn-hover-border-color: var(--muted);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: #d8d8d8;
    --bs-btn-active-border-color: var(--muted);
    --bs-btn-disabled-color: var(--muted-soft);
    --bs-btn-disabled-bg: var(--dim);
    --bs-btn-disabled-border-color: var(--border);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    box-shadow: none;
}

.btn { border-radius: var(--radius-sm); font-weight: normal; }
.btn-sm { border-radius: var(--radius-sm); }
.btn i.bi, .dropdown-item i.bi, .dropdown-toggle i.bi { display: none; }
/* Exception: the mobile sidebar toggle is icon-only (no label text) — hiding
   its glyph like every other button's decorative icon would leave a blank,
   unusable button. Adminer's own skin has the same idea (a small #menuopen
   hamburger toggle on narrow screens), so an icon here is in keeping. */
button[data-bs-toggle="offcanvas"] i.bi { display: inline-block !important; }

/* Adminer has no icons outside its base skin's own tiny set (none of which
   this app uses) — these are the decorative Bootstrap Icons glyphs that
   survive outside a .btn/.card-header/etc (breadcrumb "back" arrows, the
   user-menu caret, a plain link's leading icon), hidden by context so the
   handful of *informative* icons elsewhere (the row browser's sort arrow,
   its foreign-key indicator) stay visible. */
.bi-chevron-left,
.db-user-menu i.bi,
.table tbody td a > i.bi {
    display: none;
}

.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; }

/* Native-looking checkboxes/radios (Adminer never restyles form controls) —
   tinted with the link blue via accent-color instead of Bootstrap's custom
   SVG-checkmark-on-colored-square widget. */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--brand);
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
input[type="radio"] { border-radius: 50% !important; }

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--muted);
    box-shadow: none;
    outline: 1px solid var(--ink);
    outline-offset: -1px;
}

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

.form-label { font-weight: normal; color: var(--ink); font-size: 0.9rem; }

.page-link {
    color: var(--brand);
    border-radius: 0;
    margin-inline: 0;
    border-color: var(--border);
    background: var(--bg);
}
.page-link:hover { color: var(--brand-hover); background: var(--dim); }
.page-item.active .page-link { background: var(--dim); border-color: var(--border-strong); color: var(--ink); font-weight: bold; }
.page-item.disabled .page-link { color: var(--muted-soft); }

/* Table-page tab bar (Select data | Show structure | Alter table | New item) —
   Adminer renders this as a plain row of links, current page bold, not boxed
   tabs with an active-pill background. */
.nav-tabs {
    border-bottom: 1px solid var(--border-strong);
    gap: 1.25rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--brand);
    padding: 0.3em 0;
}
.nav-tabs .nav-link i.bi { display: none; }
.nav-tabs .nav-link:hover { color: var(--brand-hover); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--ink); font-weight: bold; background: none; border: 0; border-bottom: 2px solid var(--ink); }

/* The user-menu dropdown also carries Bootstrap's own .shadow-sm utility
   (box-shadow: ...!important, set directly rather than through a variable) —
   beats --bs-dropdown-box-shadow below no matter what that's set to. */
.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }

.dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-color: var(--border-strong);
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-link-hover-bg: var(--dim);
    --bs-dropdown-link-active-bg: var(--dim);
    --bs-dropdown-link-active-color: var(--ink);
    --bs-dropdown-color: var(--ink);
}

.alert {
    --bs-alert-border-radius: 0;
    box-shadow: none;
}
.alert-success { --bs-alert-bg: #eeffee; --bs-alert-color: #070; --bs-alert-border-color: #cceecc; }
.alert-danger { --bs-alert-bg: #ffeeee; --bs-alert-color: #c00; --bs-alert-border-color: #eecccc; }
.alert-warning { --bs-alert-bg: #ffffdd; --bs-alert-color: #665500; --bs-alert-border-color: #eeeecc; }
.alert-info { --bs-alert-bg: var(--lit); --bs-alert-color: var(--ink); --bs-alert-border-color: #ccccee; }

.badge {
    background: var(--dim) !important;
    color: var(--ink) !important;
    font-weight: bold;
    letter-spacing: normal;
    border-radius: 0;
    padding: 0.05em 0.4em;
    border: 1px solid var(--border);
}
.badge.text-bg-success { color: #070 !important; }
.badge.text-bg-danger { color: #c00 !important; }

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

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

.db-sidebar {
    --bs-offcanvas-width: var(--sidebar-w);
    --bs-offcanvas-box-shadow: none;
    width: var(--sidebar-w);
    background: var(--bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

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

@media (min-width: 992px) {
    .db-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.db-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--muted);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.db-brand:hover { color: var(--muted); text-decoration: none; }
/* !important: this span also carries Bootstrap's .d-inline-flex/.d-flex utility
   (display:...!important) on the login/home screens, which would otherwise win. */
.db-brand-mark { display: none !important; }
.db-brand-mark-logo {
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
}
.db-brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; }

.db-nav { padding: 0 0 1rem; flex: 1 1 auto; overflow-y: auto; }
.db-nav-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    color: var(--muted);
    padding: 0.7rem 1rem 0.3rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.db-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem;
    border-radius: 0;
    color: var(--brand);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: normal;
    margin-bottom: 0;
}
.db-nav-link i { display: none; }
.db-nav-link:hover { background: var(--dim); color: var(--brand-hover); text-decoration: underline; }
.db-nav-link.active { background: none; color: var(--ink); font-weight: bold; }

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

.db-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--dim);
    border-bottom: 1px solid var(--border-strong);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.db-user-menu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    text-decoration: none;
    color: var(--brand);
}
.db-user-menu:hover { color: var(--brand-hover); }
.db-avatar {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-weight: bold;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-content { flex: 1 1 auto; 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; }

.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: 0.75rem; border-top: 1px solid var(--border); background: var(--bg); }

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

/* Adminer's h2 treatment (light-blue "lit" fill, black underline, no shadow)
   applied to every page's <h1>. It's a block element, not full-bleed — most
   page headers wrap the title + a breadcrumb link in their own flex item
   alongside a separate row of action buttons, so the title only needs to
   push that breadcrumb onto its own line below it, not span the whole row
   (which belongs to the actions next to it). Inside .page-header
   (dashboard-style pages with no adjacent button row) that same block
   behavior naturally spans the full content width instead.
   Selector + !important: views still carry Bootstrap's own heading-size
   utilities (h1 class="h3 mb-0"/"h4 mb-4"/etc, same markup the modern theme
   also uses) — `.h3`'s font-size and `.mb-*`'s `!important` margin-bottom
   would otherwise win; `h1[class]` gives this at least as much specificity
   as any single utility class so the `!important` here actually settles it. */
h1[class], h1 {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: normal !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
    background: var(--lit);
    border-bottom: 2px solid var(--ink);
    padding: 0.35em 0.6em;
    margin: 0 0 0.35rem !important;
}

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { display: block; width: 100%; }
.page-header .page-subtitle { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.page-eyebrow i { display: none; }

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

/* A .card becomes Adminer's other recurring shape: a plain bordered box with
   its title rendered as an h2-style bar (light-blue "lit" fill, black
   underline, no shadow) — reused everywhere ("Columns", "Insert a row",
   "Indexes", "CREATE TABLE", "Select data", ...) without touching each
   view's markup. */
.card {
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-cap-padding-y: 0.55rem;
    --bs-card-cap-padding-x: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: none;
}
/* !important on background/font-weight: markup still carries Bootstrap's
   own "bg-white"/"fw-semibold" utilities (same markup the modern theme
   reads), both declared `!important` there — same specificity as this class
   selector, so only `!important` (plus this file loading after Bootstrap's)
   settles it in our favor. */
.card-header {
    background: var(--lit) !important;
    color: var(--ink);
    font-weight: normal !important;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--ink);
}
.card-header i.bi { display: none; }
.card-footer { background: var(--bg) !important; border-top: 1px solid var(--border); }

.table { color: var(--ink); font-size: 0.85rem; }
.table thead th, .table thead td {
    background: var(--lit);
    color: var(--ink);
    font-size: inherit;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    text-align: center;
    border-bottom: 1px solid var(--ink);
}
.table thead th:first-child, .table thead td:first-child { text-align: center; }
.table > :not(caption) > * > * {
    border-bottom: 1px solid var(--border-strong);
    border-inline-end: 1px solid var(--border-strong);
}
.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. Placed before .table-hover below so hover (equal
   specificity) wins on the tie for a striped row that's also hovered. */
.table > tbody > tr:nth-of-type(even) > * { background-color: #f5f5f5; }
.table-hover > tbody > tr:hover > * { background-color: var(--dim); }
.table .btn-sm { font-size: 0.78rem; padding: 0.1rem 0.5rem; }
.table .badge { font-size: 0.75rem; }
.table .form-control-sm, .table .form-select-sm { font-size: 0.85rem; padding: 0.15rem 0.4rem; }

/* 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: bold; color: var(--ink); vertical-align: middle; white-space: nowrap; background: var(--dim); text-align: start; }
.label-rows-table > :not(caption) > * > td { vertical-align: middle; }

/* Adminer's other recurring structural signature: a bordered box with a label cut
   into the top border — "Selected (N)", "Whole result", "Export (N)", "Partition
   by", etc. A real <fieldset><legend>, not a .card, since that's the semantically
   correct element and needs no JS. */
fieldset.field-box {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-fieldset);
    padding: 0.55em 0.8em;
    margin: 0;
    min-width: 0;
}
fieldset.field-box > legend {
    width: auto;
    float: none;
    padding: 0 0.4em;
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}

.list-group-item { border-color: var(--border-strong); border-radius: 0 !important; }
.list-group-item.interactive:hover { background: var(--dim); }

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

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

/* 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(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: none;
    transition: none;
    text-decoration: none;
    color: inherit;
    display: block;
}
.resource-card:hover { background: var(--dim); border-color: var(--ink); color: inherit; }
.resource-card .card-body { padding: 1rem 1.1rem; }
.resource-icon { display: none; }

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

.empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    color: var(--muted);
}
.empty-state i { display: none; }
.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 — Adminer never uses a dark "IDE" theme here,
   just a plain bordered box matching the rest of the page. ---------- */

pre.sql-output {
    background: var(--dim);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    padding: 0.75rem 1rem;
    border-radius: 0;
    max-height: 400px;
    overflow: auto;
    font-size: 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.CodeMirror {
    border: 1px solid var(--border-strong);
    border-radius: 0;
    height: auto;
    font-size: 0.85rem;
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
}
.CodeMirror-focused { border-color: var(--ink); box-shadow: none; }

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; }
}