/*
 * Mono skin for the Backpack Tabler theme.
 *
 * Black on white, white on black. Sharp corners, hairline borders, no
 * shadows, a monospace face for labels and numbers. The look of a
 * developer platform. Loads after backpack-color-palette.css and makes
 * the accent monochrome: black in light mode, white in dark mode.
 *
 * Sections: 0. fonts  1. tokens (light)  2. tokens (dark)  3. components
 */

/* 0. Fonts ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* 1. Tokens: light ------------------------------------------------------ */
:root,
[data-bs-theme=light],
[data-menu-theme=light] {
    --tblr-font-sans-serif: "Geist", "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tblr-font-monospace: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tblr-body-bg: #ffffff;
    --tblr-body-bg-rgb: 255, 255, 255;
    --tblr-body-color: #171717;
    --tblr-body-color-rgb: 23, 23, 23;
    --tblr-emphasis-color: #000000;
    --tblr-emphasis-color-rgb: 0, 0, 0;
    --tblr-secondary-color: #666666;
    --tblr-secondary-color-rgb: 102, 102, 102;
    --tblr-tertiary-color: rgba(23, 23, 23, 0.5);
    --tblr-tertiary-color-rgb: 23, 23, 23;
    --tblr-tertiary-bg: #f5f5f5;
    --tblr-tertiary-bg-rgb: 245, 245, 245;

    --tblr-bg-surface: #ffffff;
    --tblr-bg-surface-primary: #ffffff;
    --tblr-bg-surface-secondary: #fafafa;
    --tblr-bg-surface-tertiary: #fafafa;

    --tblr-border-color: #eaeaea;
    --tblr-border-color-translucent: rgba(0, 0, 0, 0.08);
    --tblr-navbar-border-color: #eaeaea;

    --tblr-primary: #000000;
    --tblr-primary-rgb: 0, 0, 0;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text-emphasis: #000000;
    --tblr-primary-bg-subtle: #f0f0f0;
    --tblr-primary-border-subtle: #d4d4d4;
    --tblr-link-color: #000000;
    --tblr-link-color-rgb: 0, 0, 0;
    --tblr-link-hover-color: #666666;
    --tblr-link-hover-color-rgb: 102, 102, 102;
    --tblr-focus-ring-color: rgba(0, 0, 0, 0.2);

    --tblr-border-radius-scale: 0.67;
    --tblr-shadow-card: none;
    --tblr-shadow-card-hover: none;
    --tblr-shadow-input: none;
    --tblr-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.1);
    --tblr-box-shadow: none;
    --tblr-box-shadow-inset: none;
}

/* 2. Tokens: dark ------------------------------------------------------- */
[data-bs-theme=dark],
[data-menu-theme=dark] {
    --tblr-body-bg: #000000;
    --tblr-body-bg-rgb: 0, 0, 0;
    --tblr-body-color: #ededed;
    --tblr-body-color-rgb: 237, 237, 237;
    --tblr-emphasis-color: #ffffff;
    --tblr-emphasis-color-rgb: 255, 255, 255;
    --tblr-secondary-color: #a1a1a1;
    --tblr-secondary-color-rgb: 161, 161, 161;
    --tblr-tertiary-color: rgba(237, 237, 237, 0.5);
    --tblr-tertiary-color-rgb: 237, 237, 237;
    --tblr-tertiary-bg: #111111;
    --tblr-tertiary-bg-rgb: 17, 17, 17;

    --tblr-bg-surface: #0a0a0a;
    --tblr-bg-surface-primary: #0a0a0a;
    --tblr-bg-surface-secondary: #111111;
    --tblr-bg-surface-tertiary: #0f0f0f;

    --tblr-border-color: #2a2a2a;
    --tblr-border-color-translucent: rgba(255, 255, 255, 0.1);
    --tblr-navbar-border-color: #2a2a2a;

    --tblr-primary: #ffffff;
    --tblr-primary-rgb: 255, 255, 255;
    --tblr-primary-fg: #000000;
    --tblr-primary-text-emphasis: #ffffff;
    --tblr-primary-bg-subtle: #1f1f1f;
    --tblr-primary-border-subtle: #3a3a3a;
    --tblr-link-color: #ffffff;
    --tblr-link-color-rgb: 255, 255, 255;
    --tblr-link-hover-color: #a1a1a1;
    --tblr-link-hover-color-rgb: 161, 161, 161;
    --tblr-focus-ring-color: rgba(255, 255, 255, 0.25);

    --tblr-shadow-card: none;
    --tblr-shadow-card-hover: none;
    --tblr-shadow-input: none;
    --tblr-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px #2a2a2a;
    --tblr-box-shadow: none;
}

/* 3. Components --------------------------------------------------------- */

/* Type: tight headings, monospace for the small print */
h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title {
    letter-spacing: -0.03em;
    font-weight: 600;
}
.h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--tblr-font-monospace);
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.page-pretitle,
.subheader,
.badge,
.breadcrumb,
.form-label,
.table th,
.table thead th,
.table tfoot th,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
.dropdown-header,
.nav-separator {
    font-family: var(--tblr-font-monospace);
}

/* Buttons and badges: black or white, sharp, no shadow */
.btn {
    --tblr-btn-box-shadow: none;
    --tblr-btn-border-color: var(--tblr-border-color);
    --tblr-btn-font-weight: 500;
}
.btn-primary {
    --tblr-btn-color: var(--tblr-primary-fg);
    --tblr-btn-hover-color: var(--tblr-primary-fg);
    --tblr-btn-active-color: var(--tblr-primary-fg);
    --tblr-btn-border-color: var(--tblr-primary);
    --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-primary) 85%, var(--tblr-body-bg));
    --tblr-btn-hover-border-color: color-mix(in srgb, var(--tblr-primary) 85%, var(--tblr-body-bg));
}
.btn-outline-primary {
    --tblr-btn-hover-color: var(--tblr-primary-fg);
}
.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    border-radius: var(--tblr-border-radius-sm);
}
.bg-primary-lt,
.bg-primary-lt.badge {
    background: var(--tblr-primary-bg-subtle) !important;
    color: var(--tblr-primary-text-emphasis) !important;
}
.avatar {
    color: var(--tblr-body-color);
}
.avatar.bg-primary,
.avatar.bg-primary-lt {
    color: var(--tblr-primary-fg);
}
.avatar.bg-primary-lt {
    color: var(--tblr-primary-text-emphasis);
}

/* Cards and tables: lines only */
.card {
    --tblr-card-border-color: var(--tblr-border-color);
    --tblr-card-cap-bg: transparent;
    --tblr-card-box-shadow: none;
}
.card .card-header,
.card .card-footer {
    border-color: var(--tblr-border-color);
}
.card .card-footer {
    background: var(--tblr-bg-surface-secondary);
}
.table > :not(caption) > * > *,
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th,
table.dataTable > tfoot > tr > th {
    padding: 0.55rem 0.75rem;
}
.table th,
.table thead th,
.table tfoot th,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tblr-secondary-color);
    border-bottom: 1px solid var(--tblr-border-color);
}
.table {
    --tblr-table-border-color: var(--tblr-border-color);
    --tblr-table-hover-bg: var(--tblr-bg-surface-secondary);
    --tblr-table-striped-bg: transparent;
}

/* Inputs: hairline, focus ring is a solid black or white line */
.form-control,
.form-select,
.form-selectgroup-label,
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--tblr-border-color);
    background-color: var(--tblr-bg-surface);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 1px var(--tblr-primary);
}
.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}
.form-selectgroup-input:checked + .form-selectgroup-label {
    border-color: var(--tblr-primary);
    color: var(--tblr-emphasis-color);
    background: var(--tblr-primary-bg-subtle);
}

/* Chrome: hairlines, no fills */
.navbar,
.navbar-vertical.navbar-expand-lg {
    --tblr-navbar-bg: var(--tblr-body-bg);
    --tblr-navbar-active-bg: var(--tblr-primary-bg-subtle);
    box-shadow: none;
}
.navbar-expand-lg.top,
header.navbar-expand-lg {
    border-bottom: 1px solid var(--tblr-navbar-border-color);
}
.navbar-vertical.navbar-expand-lg {
    border-right: 1px solid var(--tblr-navbar-border-color);
}
[dir="rtl"] .navbar-vertical.navbar-expand-lg {
    border-right: 0;
    border-left: 1px solid var(--tblr-navbar-border-color);
}
.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
    color: var(--tblr-emphasis-color);
}

/* Progress bars, links, small things */
.progress-bar {
    background-color: var(--tblr-primary);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
    text-decoration: underline;
}
.dropdown-menu {
    --tblr-dropdown-border-color: var(--tblr-border-color);
    box-shadow: var(--tblr-shadow-dropdown);
}
.alert {
    box-shadow: none;
    border-color: var(--tblr-border-color);
}
.offcanvas {
    border-left: 1px solid var(--tblr-border-color);
}
.navbar.navbar-filters {
    --tblr-card-border-color: var(--tblr-border-color);
    --tblr-card-box-shadow: none;
}

body[bp-layout=horizontal] .single-top-bar,
body[bp-layout=horizontal] .double-top-bar {
    padding-left: 0;
    padding-right: 0;
}