/*
 * sqlite-web styles, layered over the Bootswatch theme.
 *
 * The design language, in brief. Two type voices, the body sans for
 * chrome and mono for data and SQL. Primary color appears once per page
 * on the page's verb, danger only on destructive actions. Icons only in
 * data rows, labels everywhere else.
 */

/* Typography. Minimal overrides to the theme. Its body stack begins
   with a bare "sans" token that fontconfig resolves unpredictably, and
   it puts a display face on headings and buttons. */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.btn,
.navbar-brand {
    font-family: inherit;
}
textarea.form-control,
pre {
    /* SQL and cell data, one mono size matching the result tables. */
    font-family: var(--font-family-monospace);
    font-size: 12px;
}

/* Chrome: navbar, sidebar, dropdowns, buttons. */
nav.primary-nav {
    margin-bottom: 20px;
}
.navbar, .dropdown-item {
    font-size: 0.9rem;
}
#sidebar .nav > li > a {
    padding: 3px 10px;
}
.btn-group .dropdown-menu {
    /* The theme drops the top border to merge a menu into its split
       button, but our menus are offset and right-aligned. Restore the
       Bootstrap default. */
    border-top-width: 1px;
}
.create-table-menu {
    min-width: 16rem;
}
/* Compact menus on the query toolbar, SQL Help and Bookmarks. */
div#bookmarks {
    min-width: 250px;
}
form#query-form .dropdown-item,
form#query-form .dropdown-item-text {
    font-size: 0.8rem;
    padding: 0.2rem 1rem;
}
form#query-form .dropdown-divider {
    margin: 0.25rem 0;
}
.btn-outline-secondary {
    /* The theme's secondary is too pale for outline buttons on white. */
    color: #555555;
    border-color: #aaaaaa;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):active {
    color: #ffffff;
    background-color: #888888;
    border-color: #888888;
}

/* Result tables. Fully mono, headers included, since column names are
   SQL identifiers. */
div.table-wrapper {
    clear: both;
    margin-bottom: 1rem;
    overflow-x: auto;
}
div.table-wrapper table {
    margin-bottom: 0;
    min-width: 100%;
    width: max-content;
}
table.cell-content th,
table.cell-content td {
    padding: 3px 8px;
    border: 1px dotted #cccccc;
    font-family: var(--font-family-monospace);
    font-size: 12px;
}
table.cell-content th {
    white-space: nowrap;
}
table.cell-content td {
    max-width: 60ch;
    overflow-wrap: anywhere;
}
table.cell-content td code {
    font-size: inherit;  /* Bootstrap sizes code at 87.5%. */
}
table.cell-content td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
span.pre {
    white-space: pre-line;
}
table.cell-content td span.full {
    white-space: pre-wrap;
}

/* Row tracking. A wide table scrolls sideways, so the row under the
   pointer and any selected rows are tinted across their full width to
   keep them tied to their action icons. The theme's hover tint sits too
   close to the stripe to follow, and its contextual row classes are no
   use for selection, being either solid primary or that same grey. */
table.cell-content tbody tr:hover > td {
    background-color: rgba(0, 0, 0, .1);
}
table.cell-content tbody tr.row-selected > td {
    background-color: #d9edf7;
}
table.cell-content tbody tr.row-selected:hover > td {
    background-color: #c4e3f3;
}

/* Row action icons. */
svg.icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    vertical-align: -2px;
}

/* Cell copy feedback. Double-clicking a cell copies its value and the
   cell flashes, no overlay chrome. */
td.cell-copied {
    animation: cell-copied .8s ease-out;
}
@keyframes cell-copied {
    from { background-color: #c3e6cb; }
    to { background-color: transparent; }
}

/* Pagination. */
ul.pagination .page-item .page-link {
    border-color: #aaaaaa !important;
    color: #888888;
}
ul.pagination .page-item.disabled .page-link {
    border-color: #dee2e6 !important;
    color: #aaaaaa;
}


/* Small screens. */
@media (max-width: 1200px) {
    h3 { font-size: 1.2rem; }
    ul.nav li { font-size: .9rem; }
}
@media (max-width: 767px) {
    #sidebar ul.nav {
        max-height: 30vh;
        overflow-y: auto;
    }
}