/* App appearance knobs (corners / color scheme / font / font size).
   Driven by data-bb-corners, data-bb-color-scheme, data-bb-font,
   data-bb-font-size on .app-app.
   Defaults match stock Bootstrap when attributes are normal/white/open_sans/normal. */

/* ---- Font family ---- */
.app-app[data-bb-font="titillium_web"] {
    --bs-font-sans-serif: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}
.app-app[data-bb-font="space_grotesk"] {
    --bs-font-sans-serif: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}
.app-app[data-bb-font="plus_jakarta_sans"] {
    --bs-font-sans-serif: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}
.app-app[data-bb-font="dm_sans"] {
    --bs-font-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}
.app-app[data-bb-font="ibm_plex_sans"] {
    --bs-font-sans-serif: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ---- Corners ---- */
.app-app[data-bb-corners="sharp"] {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
}
.app-app[data-bb-corners="sharp"] .form-control,
.app-app[data-bb-corners="sharp"] .form-select,
.app-app[data-bb-corners="sharp"] .btn,
.app-app[data-bb-corners="sharp"] .card,
.app-app[data-bb-corners="sharp"] .modal-content,
.app-app[data-bb-corners="sharp"] .dropdown-menu,
.app-app[data-bb-corners="sharp"] .breadcrumb,
.app-app[data-bb-corners="sharp"] .input-group > * {
    border-radius: 0 !important;
}

.app-app[data-bb-corners="rounded"] {
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-pill: 50rem;
}
.app-app[data-bb-corners="rounded"] .card,
.app-app[data-bb-corners="rounded"] .modal-content,
.app-app[data-bb-corners="rounded"] .dropdown-menu {
    border-radius: var(--bs-border-radius-lg);
}

/* ---- Font size ---- */
.app-app[data-bb-font-size="small"] {
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.4;
}
.app-app[data-bb-font-size="small"] .form-control,
.app-app[data-bb-font-size="small"] .form-select,
.app-app[data-bb-font-size="small"] .btn {
    font-size: 0.875rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.app-app[data-bb-font-size="small"] .table {
    font-size: 0.875rem;
}
.app-app[data-bb-font-size="small"] .table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}

.app-app[data-bb-font-size="large"] {
    --bs-body-font-size: 1.125rem;
    --bs-body-line-height: 1.55;
}
.app-app[data-bb-font-size="large"] .form-control,
.app-app[data-bb-font-size="large"] .form-select,
.app-app[data-bb-font-size="large"] .btn {
    font-size: 1.125rem;
}
.app-app[data-bb-font-size="large"] .table {
    font-size: 1.0625rem;
}

/* ---- Color schemes ---- */
.app-app[data-bb-color-scheme="light"] {
    --bs-body-bg: #f4f6f8;
    --bs-body-bg-rgb: 244, 246, 248;
    --bs-secondary-bg: #eef1f4;
    --bs-tertiary-bg: #e8ecf0;
    --bs-border-color: #d8dee6;
    --bs-body-color: #1e293b;
    --bs-secondary-color: #64748b;
}
.app-app[data-bb-color-scheme="light"],
.app-app[data-bb-color-scheme="light"] #main-container {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.app-app[data-bb-color-scheme="light"] .card,
.app-app[data-bb-color-scheme="light"] .modal-content,
.app-app[data-bb-color-scheme="light"] .dropdown-menu,
.app-app[data-bb-color-scheme="light"] .list-group-item {
    background-color: #ffffff;
    border-color: var(--bs-border-color);
}
.app-app[data-bb-color-scheme="light"] .form-control,
.app-app[data-bb-color-scheme="light"] .form-select,
.app-app[data-bb-color-scheme="light"] .input-group-text {
    background-color: #ffffff;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.app-app[data-bb-color-scheme="light"] .table {
    --bs-table-bg: #ffffff;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #eef2f6;
}
.app-app[data-bb-color-scheme="light"] > .navbar {
    --bb-navbar-gradient: none;
}

.app-app[data-bb-color-scheme="medium"] {
    --bs-body-bg: #e8ecf0;
    --bs-body-bg-rgb: 232, 236, 240;
    --bs-secondary-bg: #dde3ea;
    --bs-tertiary-bg: #d1d9e2;
    --bs-border-color: #c0c9d4;
    --bs-body-color: #1e293b;
    --bs-secondary-color: #475569;
    --bs-emphasis-color: #0f172a;
}
.app-app[data-bb-color-scheme="medium"],
.app-app[data-bb-color-scheme="medium"] #main-container {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.app-app[data-bb-color-scheme="medium"] .card,
.app-app[data-bb-color-scheme="medium"] .modal-content,
.app-app[data-bb-color-scheme="medium"] .dropdown-menu,
.app-app[data-bb-color-scheme="medium"] .list-group-item {
    background-color: #f8fafc;
    border-color: var(--bs-border-color);
}
.app-app[data-bb-color-scheme="medium"] .form-control,
.app-app[data-bb-color-scheme="medium"] .form-select,
.app-app[data-bb-color-scheme="medium"] .input-group-text {
    background-color: #f8fafc;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.app-app[data-bb-color-scheme="medium"] .table {
    --bs-table-bg: #f8fafc;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: #eef2f6;
    --bs-table-hover-bg: #e2e8f0;
}
.app-app[data-bb-color-scheme="medium"] > .navbar {
    --bb-navbar-gradient: none;
}

.app-app[data-bb-color-scheme="dark"],
.app-app[data-bb-color-scheme="very_dark"] {
    color-scheme: dark;
    --bs-emphasis-color: #fff;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-code-color: #e685b5;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bb-navbar-gradient: linear-gradient(rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.2));
}

.app-app[data-bb-color-scheme="dark"] {
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-bg: #343a40;
    --bs-tertiary-bg: #2b3035;
    --bs-border-color: #495057;
}

.app-app[data-bb-color-scheme="very_dark"] {
    --bs-body-color: #c8d1e0;
    --bs-body-color-rgb: 200, 209, 224;
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-emphasis-color: #e8eef8;
    --bs-secondary-color: rgba(200, 209, 224, 0.72);
    --bs-secondary-bg: #1a2332;
    --bs-tertiary-bg: #151e2c;
    --bs-border-color: #2a3548;
    --bs-link-color: #7aa2f7;
    --bs-link-hover-color: #9bbcff;
    --bs-heading-color: #e8eef8;
    --bb-navbar-gradient: linear-gradient(rgba(122, 162, 247, 0.08), rgba(0, 0, 0, 0.25));
}

.app-app[data-bb-color-scheme="dark"],
.app-app[data-bb-color-scheme="dark"] #main-container,
.app-app[data-bb-color-scheme="very_dark"],
.app-app[data-bb-color-scheme="very_dark"] #main-container {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.app-app[data-bb-color-scheme="dark"] .card,
.app-app[data-bb-color-scheme="dark"] .modal-content,
.app-app[data-bb-color-scheme="dark"] .dropdown-menu,
.app-app[data-bb-color-scheme="dark"] .list-group-item,
.app-app[data-bb-color-scheme="very_dark"] .card,
.app-app[data-bb-color-scheme="very_dark"] .modal-content,
.app-app[data-bb-color-scheme="very_dark"] .dropdown-menu,
.app-app[data-bb-color-scheme="very_dark"] .list-group-item {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.app-app[data-bb-color-scheme="dark"] .modal-header,
.app-app[data-bb-color-scheme="dark"] .modal-footer,
.app-app[data-bb-color-scheme="dark"] .card-header,
.app-app[data-bb-color-scheme="dark"] .card-footer,
.app-app[data-bb-color-scheme="very_dark"] .modal-header,
.app-app[data-bb-color-scheme="very_dark"] .modal-footer,
.app-app[data-bb-color-scheme="very_dark"] .card-header,
.app-app[data-bb-color-scheme="very_dark"] .card-footer {
    border-color: var(--bs-border-color);
}

.app-app[data-bb-color-scheme="dark"] .form-control,
.app-app[data-bb-color-scheme="dark"] .form-select,
.app-app[data-bb-color-scheme="dark"] .input-group-text,
.app-app[data-bb-color-scheme="very_dark"] .form-control,
.app-app[data-bb-color-scheme="very_dark"] .form-select,
.app-app[data-bb-color-scheme="very_dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.app-app[data-bb-color-scheme="dark"] .form-control::placeholder,
.app-app[data-bb-color-scheme="very_dark"] .form-control::placeholder {
    color: var(--bs-secondary-color);
}

.app-app[data-bb-color-scheme="dark"] .table,
.app-app[data-bb-color-scheme="very_dark"] .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: #3d444b;
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-body-color);
}
.app-app[data-bb-color-scheme="very_dark"] .table {
    --bs-table-hover-bg: #243044;
}

.app-app[data-bb-color-scheme="dark"] .breadcrumb,
.app-app[data-bb-color-scheme="very_dark"] .breadcrumb {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.app-app[data-bb-color-scheme="dark"] .text-muted,
.app-app[data-bb-color-scheme="dark"] .form-text,
.app-app[data-bb-color-scheme="very_dark"] .text-muted,
.app-app[data-bb-color-scheme="very_dark"] .form-text {
    color: var(--bs-secondary-color) !important;
}

.app-app[data-bb-color-scheme="dark"] .btn-light,
.app-app[data-bb-color-scheme="dark"] .btn-outline-secondary,
.app-app[data-bb-color-scheme="very_dark"] .btn-light,
.app-app[data-bb-color-scheme="very_dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
}

.app-app[data-bb-color-scheme="dark"] .selectize-input,
.app-app[data-bb-color-scheme="dark"] .selectize-dropdown,
.app-app[data-bb-color-scheme="very_dark"] .selectize-input,
.app-app[data-bb-color-scheme="very_dark"] .selectize-dropdown {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}