/* ============================================
FANCY2.CSS - Bootstrap Override Edition
Modernizes default Bootstrap classes with fancy.css styling
============================================ */
/* CUSTOM.css*/
/* make overlay display over everything */
.swal-overlay {
z-index: 100000;
}
div:where(.swal2-container) .swal2-html-container {
margin: 0;
}
#id-page-header-wrapper {
margin-right: 6px;
padding-top: 4px;
}
/* Make read only text field font darker so it's easy to read. */
input.form-control[type="text"]:read-only {
/*color: #040406 !important;*/
/*font-weight: bold !important;*/
}
input.form-control[type="number"]:read-only {
/*color: #040406 !important;*/
/*font-weight: bold !important;*/
}
input.form-control[type="tel"]:read-only {
/*color: #040406 !important;*/
/*font-weight: bold !important;*/
}
.main-panel .page-header {
margin-left: 0;
margin-bottom: 0;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 0;
border-left: 0;
margin-top: 0;
}
.breadcrumbs {
list-style: none !important;
display: inline !important;
width: auto !important;
margin-bottom: 0 !important;
padding-top: 8px !important;
height: 100%;
margin-left: 0;
padding-left: 0;
border-left: none;
padding-bottom: 0 !important;
}
.invalid-feedback {
display: block !important;
}
input[type=checkbox], input[type=radio] {
margin-left: .3rem;
margin-top: 6px;
}
.form-check-inline {
display: inline-flex !important;
flex-direction: row !important;
}
.form-check-inline .form-check-input {
margin-bottom: 8px;
}
.main-panel .page-header .d-flex .page-title {
padding-top: 5px;
}
.message-content .content {
margin-top: 0 !important;
}
/*custom scroll bar styles */
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
.card {
flex: 1 1 0;
overflow-x: auto;
margin: 5px;
}
.card-body {
overflow: auto;
}
.form-control {
padding: .43rem;
}
.custom-file {
padding: .25rem;
}
.custom-file label {
margin-bottom: 0 !important;
}
/* css class overlay "disables" the page, used by "disableScreen" function */
.overlay {
background-color:#EFEFEF;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0;
left: 0;
opacity: .1; /* in FireFox */
filter: alpha(opacity=50); /* in IE */
}
/* pulsing button */
@keyframes pulse_2 {
0% {
transform: scale(0.93);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.9);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.93);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.pulseBtn {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
animation: pulse_2 2s infinite;
}
/* Make normal select padding match inputs.
Scoped to skip `.form-control-sm` so the small variant keeps its
own padding and lines up with ``. */
select.form-control:not(.form-control-sm) {
padding: .52rem !important;
}
.nav-collapse li.active a .sub-item {
color: #1572e8;
}
.table td, .table th {
height: auto;
}
.no-hover:hover {
text-decoration: none;
}
.tooltip {
pointer-events: none;
}
.tooltip-inner {
max-width: 100% !important;
}
.nowrap {
white-space: nowrap;
}
.counter {
font-size: 9px;
position: relative;
left: auto;
z-index: 2;
padding: 1px 7px;
color: #fff;
border-radius: 10em;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.table th.col-form-label {
padding-left: 15px !important;
}
/* Remove padding from checkbox & radio input for table formsets. */
td .custom-control.custom-radio, td .custom-control.custom-checkbox {
padding-left: 0;
}
.table td.align-top, .table th.align-top {
vertical-align: top !important;
}
.page-inner .container-fluid {
padding-left: 10px;
padding-right: 10px
}
.popover-body {
margin: 0;
padding: 0;
}
/* Fix text color inside tables. */
.table {
color: unset;
}
/* Compact table styling (for crispy formsets). */
.compactTable {
margin-bottom: 0;
padding: 0 !important;
width: 100%;
min-width: 800px
}
.compactTable td {
white-space: nowrap;
}
.compactTable td, .compactTable th {
padding: 2px 2px !important;
}
.compactTable .form-group {
padding: 0 !important;
}
.compactTable th.col-form-label {
padding-left: 6px !important;
}
.hover-border:hover {
border: 1px solid lightgray !important;
cursor: pointer !important;
}
.hover-border a:hover {
text-decoration: none;
}
.badge-box-inner {
border-radius: 4px;
padding: 0 4px;
font-size: 13px;
font-weight: bold;
}
/* Used by custom_datatable.js */
.customDataTable td {
margin-bottom: 5px !important;
margin-top: 0 !important;
}
.customDataTable tfoot tr td input {
padding: 11px 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
}
.customDataTable tfoot tr td select {
padding: 1px 4px !important;
height: 26px !important;
font-size: 12px;
margin-bottom: 5px !important;
margin-top: 0 !important;
}
.customDataTable tfoot td input:disabled {
padding: 10px !important;
}
.customDataTable tfoot td {
border-left: 1px solid #dee2e6;
}
.customDataTable tfoot tr td:first-child {
border-left: none;
}
.custom-select.is-invalid:focus, .was-validated .custom-select:invalid:focus {
background-color: #171920;
}
.custom-select.is-invalid, .was-validated .custom-select:invalid{
background-color: #171920;
}
.form-control[readonly] {
margin: 2px 0;
}
.selectgroup-vertical .selectgroup-item {
margin-left: 0;
}
.selectgroup-vertical .selectgroup-button {
color: #31353d;
}
.form-control-white {
background-color: #fff !important;
color: black !important;
}
.form-floating-label .form-control:-webkit-autofill,
.form-floating-label .form-control:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
.form-floating-label select.form-control {
padding: 0.26rem !important;
}
.hover-text:hover {
text-decoration: underline;
color: lightblue;
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.hideWhenSmall {
display: none
}
}
.flex-basis-100 {
flex-basis: 100% !important;
}
/* On small screens set flex-basis to 100% */
@media only screen and (max-width: 600px) {
.flex-basis-100-sm {
flex-basis: 100% !important;
}
}
.w-1px {
width: 1px !important;
}
.hover-dark:hover {
color: #343a40 !important;
}
.hover-light:hover {
color: #f8f9fa !important;
}
.hover-pointer:hover {
cursor: pointer;
}
.wrapLabelCol {
white-space: unset !important;
}
/* fix modal overflow issue */
.main-header {
position: fixed !important;
}
body {
overflow-y: auto;
overflow-x: hidden;
}
/* Line the topbar's edge items up with the content gutter
(#id-main-content > .container-fluid). The parent .navbar contributes
its own 1rem, so this stacks on top of that. */
#topNavBar {
margin-right: 0;
padding: 0 40px;
}
body.modal-open #topNavBar .navbar-nav .nav-item:last-child {
margin-right: auto;
}
.paddedTable tr td {
padding-top: .2rem !important;
padding-bottom: .2rem !important;
}
.paddedTableLg tr td, .paddedTableLg tr th {
padding: .5rem .5rem !important;
}
.page-inner {
margin-left: 0 !important;
padding: 5px 0 1px 0;
}
body[data-background-color="dark"] .main-header {
box-shadow: unset;
border-bottom: 1px solid var(--chrome-seam);
}
/* Theme adds a stray light border-top to the mobile navbar drawer. */
@media screen and (max-width: 991px) {
.main-header[data-background-color] .navbar-header {
border-top: none;
}
}
body[data-compact-page="true"] .content {
max-width: 1920px;
}
#topNavBar .navbar-nav .nav-item:last-child {
margin-right: 0;
}
#topNavBar .navbar-nav .nav-item:first-child {
margin-left: 0;
}
body[data-compact-page="true"] .navbar-header {
max-width: 1920px;
}
body[data-compact-page]:not([data-compact-page="true"]) #topNavBar {
padding: 0 40px !important;
}
.avatar-sm {
width: auto;
}
.hover {
color: blue;
}
body[data-compact-page="true"] #id-page-header-wrapper {
max-width: 1920px;
}
.main-panel {
top: 62px;
min-height: calc(100vh - 62px);
height: calc(100% - 62px);
}
@media screen and (max-width: 991px) {
#topNavBar .page-header {
display: none;
}
.main-panel .page-header {
display: flex !important;
}
}
.wrapper {
height: auto;
}
.content {
height: 100%;
min-height: calc(100vh - 62px);
width: 100%;
border-top: none;
}
.btn-hover-icon:hover .fa {
color: #F0F1F3 !important;
}
.btn-sm {
line-height: 1.4;
}
/* Responsive tabs styling */
.responsive-tabs-dropdown .dropdown-item.active {
background-color: #f8f9fa;
color: #007bff;
}
.text-white-75 {
color: rgba(255, 255, 255, 0.75) !important;
}
.text-white-85 {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Disable pointer events on disabled elements */
a[disabled], button[disabled] {
pointer-events: none !important;
}
a.btn[disabled], button.btn[disabled] {
opacity: .65 !important;
}
/* Modal spinner overlay */
.modal-spinner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1060;
border-radius: 0.3rem;
}
.modal-spinner-overlay .spinner-border {
width: 3rem;
height: 3rem;
border-width: 0.3rem;
color: #fff;
}
/* END CUSTOM.css */
/* CSS Variables - Same as fancy.css */
:root {
--color-blue: #4a9eff;
--color-blue-hover: #6bb2ff;
--color-green: #34d399;
--color-orange: #fb923c;
--color-red: #ef4444;
--color-purple: #a855f7;
--color-gray: #94a3b8;
--color-gold: rgba(var(--bs-warning-rgb), 0.6);
--color-yellow: #eab308;
--color-teal: #14b8a6;
--color-pink: #f472b6;
--color-rose: #fb7185;
--color-lime: #a3e635;
--color-indigo: #818cf8;
--color-cyan: #22d3ee;
--color-brown: #c8a27c;
--color-deep-blue: rgba(var(--bs-primary-rgb), 0.4);
--surface-1: rgba(255, 255, 255, 0.02);
--surface-2: rgba(255, 255, 255, 0.05);
--surface-3: rgba(255, 255, 255, 0.08);
--border-subtle: rgba(255, 255, 255, 0.05);
--border-normal: rgba(255, 255, 255, 0.1);
--border-emphasis: rgba(255, 255, 255, 0.15);
/*--text-primary: rgba(255, 255, 255, 0.95);*/
/*--text-secondary: rgba(255, 255, 255, 0.8);*/
/*--text-tertiary: rgba(255, 255, 255, 0.6);*/
/*--text-muted: rgba(255, 255, 255, 0.4);*/
--text-primary: #f0f0f5;
--text-secondary: #c9cbd4;
--text-tertiary: #9497a8;
--text-tertiary-rgb: 148, 151, 168;
--text-muted: #6b6e7e;
--text-muted-rgb: 107, 110, 126;
/* alerts: low-opacity diagonal tint over a solid base reads as a
designed surface, not a flat translucent wash over the page */
--alert-base: #171920;
--alert-tint-strong: 0.08;
--alert-tint-faint: 0.02;
/* Form control backgrounds */
--input-bg: rgba(28, 30, 36, 0.85);
--input-bg-focus: rgba(32, 34, 42, 0.95);
--input-bg-disabled: rgba(20, 22, 28, 0.6);
--input-border: rgba(var(--bs-primary-rgb), 0.15);
--input-border-hover: rgba(var(--bs-primary-rgb), 0.25);
--input-border-focus: rgba(var(--bs-primary-rgb), 0.4);
/* Select option backgrounds */
--select-dropdown-bg: rgba(28, 30, 36);
--select-option-bg: var(--select-dropdown-bg);
--select-option-bg-hover: #1d2330;
--select-option-bg-active: #232a3a;
--select-option-border-active: rgba(var(--bs-primary-rgb), 0.45);
--select-arrow-color: rgba(255, 255, 255, 0.45);
/* Bootstrap-style color variables */
--bs-primary: var(--color-blue);
--bs-primary-rgb: 74, 158, 255;
--bs-success: var(--color-green);
--bs-success-rgb: 52, 211, 153;
--bs-warning: var(--color-orange);
--bs-warning-rgb: 251, 146, 60;
--bs-danger: var(--color-red);
--bs-danger-rgb: 239, 68, 68;
--bs-info: var(--color-purple);
--bs-info-rgb: 168, 85, 247;
--bs-secondary: var(--color-gray);
--bs-secondary-rgb: 148, 163, 184;
--bs-light: rgba(255, 255, 255, 0.9);
--bs-light-rgb: 255, 255, 255;
--bs-dark: rgba(255, 255, 255, 0.7);
--bs-dark-rgb: 255, 255, 255;
--surface-0: linear-gradient(
135deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.01) 100%
);
}
/* Gradient layered over a solid base color: the sidebar must be fully
opaque because the collapsed rail slides out OVER the page content. */
.sidebar[data-background-color="dark2"] {
background: var(--surface-0), #171920 !important;
}
/* ============================================
CARDS - Override Bootstrap .card
============================================ */
/* Base card - Medium darkness, standard container */
.card {
/*background: #24252a9c !important;*/
/*border: 1px solid var(--border-normal);*/
/*border-radius: 12px;*/
/*transition: all 0.2s ease;*/
/*margin: 0;*/
}
/* Customer Info Card */
.card {
background: var(--surface-0) !important;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
margin: 0;
}
.card-light2 {
background: #24252a9c !important;
border: 1px solid var(--border-normal);
}
/* Light card - For nested/secondary content */
.card-light {
background: var(--surface-1) !important;
border: 1px solid var(--border-subtle) !important;
}
/* Dark card - For emphasis/primary sections */
.card-dark {
background: linear-gradient(
135deg,
rgba(30, 30, 30, 0.95),
rgba(25, 25, 25, 0.95)
) !important;
border: 1px solid var(--border-emphasis) !important;
}
.card-dark .card-header {
border-bottom: 1px solid var(--border-emphasis) !important;
}
/* Deep dark background - GitHub-style #0d1117 */
.bg-deep-dark {
background: #0d1117 !important;
}
.card-deep-dark {
background: #0d1117 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-deep-dark .card-header {
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-deep-dark .card-body {
color: var(--text-secondary);
}
/* Card body padding */
.card-body {
padding: 1.5rem;
}
/* Card header */
.card-header {
background: var(--surface-2);
border-bottom: 1px solid var(--border-normal);
border-radius: 12px 12px 0 0;
padding: 1.25rem 1.5rem;
color: var(--text-primary);
font-weight: 600;
}
/* Card footer */
.card-footer {
background: var(--surface-1);
border-top: 1px solid var(--border-normal);
border-radius: 0 0 12px 12px;
padding: 1rem 1.5rem;
}
/* Card title */
.card-title {
color: var(--text-primary);
font-weight: 600;
margin-bottom: 0;
}
/* Card subtitle */
.card-subtitle {
color: var(--text-tertiary);
font-size: 0.875rem;
}
/* Card text */
.card-text {
color: var(--text-secondary);
}
/* Hoverable cards - Add lift effect */
.card-hover:hover {
/*transform: translateY(-2px);*/
/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
) !important;
}
/* ============================================
BADGES - Override Bootstrap .badge
============================================ */
.badge {
padding: 0.25rem 0.65rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
display: inline-flex;
align-items: center;
border: 1px solid;
line-height: 1;
height: fit-content;
min-height: 23px;
margin: 0;
}
.badge {
border-color: var(--border-normal)
}
/* Primary/Blue badges */
.badge-primary {
background: rgba(var(--bs-primary-rgb), 0.2) !important;
color: var(--bs-primary) !important;
border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
}
/* Success/Green badges */
.badge-success {
background: rgba(var(--bs-success-rgb), 0.2) !important;
color: var(--bs-success) !important;
border-color: rgba(var(--bs-success-rgb), 0.3) !important;
}
/* Warning/Orange badges */
.badge-warning {
background: rgba(var(--bs-warning-rgb), 0.2) !important;
color: var(--bs-warning) !important;
border-color: rgba(var(--bs-warning-rgb), 0.3) !important;
}
/* Danger/Red badges */
.badge-danger {
background: rgba(var(--bs-danger-rgb), 0.2) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
}
/* Info/Purple badges */
.badge-info {
background: rgba(var(--bs-info-rgb), 0.2) !important;
color: var(--bs-info) !important;
border-color: rgba(var(--bs-info-rgb), 0.3) !important;
}
/* Secondary/Gray badges */
.badge-secondary {
background: rgba(var(--bs-secondary-rgb), 0.2) !important;
color: var(--bs-secondary) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
}
/* Dark badges */
.badge-dark {
background: rgba(var(--bs-dark-rgb), 0.1) !important;
color: var(--bs-dark) !important;
border-color: rgba(var(--bs-dark-rgb), 0.2) !important;
}
/* Light badges */
.badge-light {
background: rgba(var(--bs-light-rgb), 0.15) !important;
color: var(--bs-light) !important;
border-color: rgba(var(--bs-light-rgb), 0.25) !important;
}
/* Gold badges */
.badge-gold {
background: rgba(255, 193, 7, 0.2) !important;
color: #d39e00 !important;
border-color: rgba(255, 193, 7, 0.3) !important;
}
/* Yellow badges */
.badge-yellow {
background: rgba(234, 179, 8, 0.2) !important;
color: #ca8a04 !important;
border-color: rgba(234, 179, 8, 0.3) !important;
}
/* Teal badges */
.badge-teal {
background: rgba(20, 184, 166, 0.2) !important;
color: #0d9488 !important;
border-color: rgba(20, 184, 166, 0.3) !important;
}
/* Pink badges */
.badge-pink {
background: rgba(244, 114, 182, 0.2) !important;
color: #f472b6 !important;
border-color: rgba(244, 114, 182, 0.3) !important;
}
/* Rose badges */
.badge-rose {
background: rgba(244, 63, 94, 0.2) !important;
color: #fb7185 !important;
border-color: rgba(244, 63, 94, 0.3) !important;
}
/* Lime badges */
.badge-lime {
background: rgba(132, 204, 22, 0.2) !important;
color: #a3e635 !important;
border-color: rgba(132, 204, 22, 0.3) !important;
}
/* Indigo badges */
.badge-indigo {
background: rgba(99, 102, 241, 0.2) !important;
color: #818cf8 !important;
border-color: rgba(99, 102, 241, 0.3) !important;
}
/* Cyan badges */
.badge-cyan {
background: rgba(6, 182, 212, 0.2) !important;
color: #22d3ee !important;
border-color: rgba(6, 182, 212, 0.3) !important;
}
/* Brown badges */
.badge-brown {
background: rgba(180, 120, 70, 0.2) !important;
color: #c8a27c !important;
border-color: rgba(180, 120, 70, 0.3) !important;
}
/* ============================================
CHIPS - Small pill-style tags (e.g. domain lists)
============================================ */
.chip {
display: inline-flex;
align-items: center;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
font-size: 11px;
line-height: 1;
padding: 3px 8px;
border-radius: 10px;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
white-space: nowrap;
}
/* Non-monospace variant — for label chips rather than code-like values. */
.chip-plain {
font-family: inherit;
color: var(--color-gray);
}
/* Optional hover affordance — opt-in via .chip-hover. */
.chip-hover {
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip-hover:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: var(--text-primary);
}
.chip-primary {
background: rgba(var(--bs-primary-rgb), 0.15) !important;
color: var(--bs-primary) !important;
border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
}
.chip-success {
background: rgba(var(--bs-success-rgb), 0.15) !important;
color: var(--bs-success) !important;
border-color: rgba(var(--bs-success-rgb), 0.3) !important;
}
.chip-warning {
background: rgba(var(--bs-warning-rgb), 0.15) !important;
color: var(--bs-warning) !important;
border-color: rgba(var(--bs-warning-rgb), 0.3) !important;
}
.chip-danger {
background: rgba(var(--bs-danger-rgb), 0.15) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
}
@keyframes smartgate-phone-warn-flash {
0% { opacity: 1; transform: scale(1); }
40% { opacity: 0.3; transform: scale(1.18); }
100% { opacity: 1; transform: scale(1); }
}
.smartgate-phone-warn {
animation: smartgate-phone-warn-flash 0.8s ease-in-out 3;
transform-origin: center;
will-change: transform, opacity;
}
.chip-info {
background: rgba(var(--bs-info-rgb), 0.15) !important;
color: var(--bs-info) !important;
border-color: rgba(var(--bs-info-rgb), 0.3) !important;
}
.chip-secondary {
background: rgba(var(--bs-secondary-rgb), 0.15) !important;
color: var(--bs-secondary) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
}
.chip-light {
background: rgba(var(--bs-light-rgb), 0.1) !important;
color: var(--bs-light) !important;
border-color: rgba(var(--bs-light-rgb), 0.25) !important;
}
.chip-dark {
background: rgba(0, 0, 0, 0.4) !important;
color: var(--text-secondary) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* ============================================
BUTTONS - Override Bootstrap .btn
============================================ */
.btn {
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid;
transition: all 0.2s ease;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
}
/* Apply flex centering only to buttons that need it */
.btn-group .btn,
.btn.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Ensure block buttons still take full width */
.btn-block {
display: block;
width: 100%;
}
.btn.btn-icon {
padding: 0;
text-decoration: none;
box-sizing: border-box;
flex-shrink: 0;
}
.btn-sm.btn-icon {
padding: 0;
}
.btn.btn-icon:hover {
text-decoration: none;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.btn:disabled:hover {
transform: none !important;
box-shadow: none !important;
}
.btn-xs:not(.btn-icon) {
padding: 0.25rem 0.5rem;
font-size: 0.55rem;
border-radius: 6px;
}
/* Small button */
.btn-sm:not(.btn-icon) {
/*padding: 0.375rem 0.65rem;*/
padding: 0.306rem 0.65rem;
font-size: 0.75rem;
border-radius: 6px;
line-height: 1.7;
}
.btn-sm:hover {
transform: translateY(-1px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Ghost button: quiet action button for list rows/toolbars — gray at
rest, brightens on hover. Add .btn-ghost-danger on destructive
actions so they go red on hover instead. */
.btn-ghost {
color: var(--text-tertiary);
background: transparent;
border: 0;
transition-property: color, background-color;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
.btn-ghost:hover,
.btn-ghost:focus {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.06);
}
.btn-ghost.btn-ghost-danger:hover,
.btn-ghost.btn-ghost-danger:focus {
color: var(--color-red);
background: rgba(var(--bs-danger-rgb), 0.12);
}
/* Large button */
.btn-lg {
padding: 0.65rem 1.25rem;
font-size: 1rem;
}
/* Button Colors */
/* Primary/Blue */
.btn-primary {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.15),
rgba(var(--bs-primary-rgb), 0.08)
) !important;
color: var(--bs-primary) !important;
border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.25),
rgba(var(--bs-primary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
color: var(--bs-primary) !important;
}
.btn-primary:focus,
.btn-primary.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.25),
rgba(var(--bs-primary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
color: var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}
.btn-primary:active,
.btn-primary.active {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.35),
rgba(var(--bs-primary-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.7) !important;
color: var(--bs-primary) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.08),
rgba(var(--bs-primary-rgb), 0.04)
) !important;
color: rgba(var(--bs-primary-rgb), 0.5) !important;
border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}
/* Success/Green */
.btn-success {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.15),
rgba(var(--bs-success-rgb), 0.08)
) !important;
color: var(--bs-success) !important;
border-color: rgba(var(--bs-success-rgb), 0.4) !important;
}
.btn-success:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.25),
rgba(var(--bs-success-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-success-rgb), 0.6) !important;
color: var(--bs-success) !important;
}
.btn-success:focus,
.btn-success.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.25),
rgba(var(--bs-success-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-success-rgb), 0.6) !important;
color: var(--bs-success) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
}
.btn-success:active,
.btn-success.active {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.35),
rgba(var(--bs-success-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-success-rgb), 0.7) !important;
color: var(--bs-success) !important;
}
.btn-success:disabled,
.btn-success.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.08),
rgba(var(--bs-success-rgb), 0.04)
) !important;
color: rgba(var(--bs-success-rgb), 0.5) !important;
border-color: rgba(var(--bs-success-rgb), 0.2) !important;
}
/* Warning/Orange */
.btn-warning {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.15),
rgba(var(--bs-warning-rgb), 0.08)
) !important;
color: var(--bs-warning) !important;
border-color: rgba(var(--bs-warning-rgb), 0.4) !important;
}
.btn-warning:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.25),
rgba(var(--bs-warning-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-warning-rgb), 0.6) !important;
color: var(--bs-warning) !important;
}
.btn-warning:focus,
.btn-warning.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.25),
rgba(var(--bs-warning-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-warning-rgb), 0.6) !important;
color: var(--bs-warning) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25) !important;
}
.btn-warning:active,
.btn-warning.active {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.35),
rgba(var(--bs-warning-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-warning-rgb), 0.7) !important;
color: var(--bs-warning) !important;
}
.btn-warning:disabled,
.btn-warning.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.08),
rgba(var(--bs-warning-rgb), 0.04)
) !important;
color: rgba(var(--bs-warning-rgb), 0.5) !important;
border-color: rgba(var(--bs-warning-rgb), 0.2) !important;
}
/* Danger/Red */
.btn-danger {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.15),
rgba(var(--bs-danger-rgb), 0.08)
) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}
.btn-danger:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.25),
rgba(var(--bs-danger-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
color: var(--bs-danger) !important;
}
.btn-danger:focus,
.btn-danger.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.25),
rgba(var(--bs-danger-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
color: var(--bs-danger) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
}
.btn-danger:active,
.btn-danger.active {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.35),
rgba(var(--bs-danger-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
color: var(--bs-danger) !important;
}
.btn-danger:disabled,
.btn-danger.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.08),
rgba(var(--bs-danger-rgb), 0.04)
) !important;
color: rgba(var(--bs-danger-rgb), 0.5) !important;
border-color: rgba(var(--bs-danger-rgb), 0.2) !important;
}
/* Info/Purple */
.btn-info {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.15),
rgba(var(--bs-info-rgb), 0.08)
) !important;
color: var(--bs-info) !important;
border-color: rgba(var(--bs-info-rgb), 0.4) !important;
}
.btn-info:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.25),
rgba(var(--bs-info-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-info-rgb), 0.6) !important;
color: var(--bs-info) !important;
}
.btn-info:focus,
.btn-info.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.25),
rgba(var(--bs-info-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-info-rgb), 0.6) !important;
color: var(--bs-info) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.25) !important;
}
.btn-info:active,
.btn-info.active {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.35),
rgba(var(--bs-info-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-info-rgb), 0.7) !important;
color: var(--bs-info) !important;
}
.btn-info:disabled,
.btn-info.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.08),
rgba(var(--bs-info-rgb), 0.04)
) !important;
color: rgba(var(--bs-info-rgb), 0.5) !important;
border-color: rgba(var(--bs-info-rgb), 0.2) !important;
}
/* Secondary/Gray */
.btn-secondary {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.15),
rgba(var(--bs-secondary-rgb), 0.08)
) !important;
color: var(--bs-secondary) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.4) !important;
}
.btn-secondary:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.25),
rgba(var(--bs-secondary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
color: var(--text-primary) !important;
}
.btn-secondary:focus,
.btn-secondary.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.25),
rgba(var(--bs-secondary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.25) !important;
}
.btn-secondary:active,
.btn-secondary.active {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.35),
rgba(var(--bs-secondary-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.7) !important;
color: var(--text-primary) !important;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.08),
rgba(var(--bs-secondary-rgb), 0.04)
) !important;
color: rgba(var(--bs-secondary-rgb), 0.5) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.2) !important;
}
/* Dark — semi-transparent dark-gray fill */
.btn-dark {
background: rgba(42, 44, 51, 0.55) !important;
color: var(--text-secondary) !important;
border-color: var(--border-normal) !important;
}
.btn-dark:hover:not(:disabled) {
background: rgba(52, 54, 62, 0.65) !important;
border-color: var(--border-emphasis) !important;
color: var(--text-primary) !important;
}
.btn-dark:focus,
.btn-dark.focus {
background: rgba(52, 54, 62, 0.65) !important;
border-color: var(--border-emphasis) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.18) !important;
}
.btn-dark:active,
.btn-dark.active {
background: rgba(60, 62, 70, 0.75) !important;
border-color: var(--border-emphasis) !important;
color: var(--text-primary) !important;
}
.btn-dark:disabled,
.btn-dark.disabled {
background: rgba(42, 44, 51, 0.3) !important;
color: var(--text-muted) !important;
border-color: var(--border-subtle) !important;
}
/* Light */
.btn-light {
background: linear-gradient(
135deg,
rgba(var(--bs-light-rgb), 0.1),
rgba(var(--bs-light-rgb), 0.05)
) !important;
color: var(--bs-light) !important;
border-color: rgba(var(--bs-light-rgb), 0.2) !important;
}
.btn-light:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-light-rgb), 0.15),
rgba(var(--bs-light-rgb), 0.08)
) !important;
border-color: rgba(var(--bs-light-rgb), 0.3) !important;
color: var(--text-primary) !important;
}
.btn-light:focus,
.btn-light.focus {
background: linear-gradient(
135deg,
rgba(var(--bs-light-rgb), 0.15),
rgba(var(--bs-light-rgb), 0.08)
) !important;
border-color: rgba(var(--bs-light-rgb), 0.3) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-light-rgb), 0.15) !important;
}
.btn-light:active,
.btn-light.active {
background: linear-gradient(
135deg,
rgba(var(--bs-light-rgb), 0.22),
rgba(var(--bs-light-rgb), 0.12)
) !important;
border-color: rgba(var(--bs-light-rgb), 0.4) !important;
color: var(--text-primary) !important;
}
.btn-light:disabled,
.btn-light.disabled {
background: linear-gradient(
135deg,
rgba(var(--bs-light-rgb), 0.05),
rgba(var(--bs-light-rgb), 0.02)
) !important;
color: rgba(var(--bs-light-rgb), 0.3) !important;
border-color: rgba(var(--bs-light-rgb), 0.1) !important;
}
/* Outline buttons */
.btn-outline-primary {
background: transparent !important;
color: var(--bs-primary) !important;
border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
}
.btn-outline-primary:hover:not(:disabled) {
background: rgba(var(--bs-primary-rgb), 0.15) !important;
border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
color: var(--bs-primary) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
background: rgba(var(--bs-primary-rgb), 0.15) !important;
border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
color: var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
background: rgba(var(--bs-primary-rgb), 0.25) !important;
border-color: rgba(var(--bs-primary-rgb), 0.7) !important;
color: var(--bs-primary) !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
background: transparent !important;
color: rgba(var(--bs-primary-rgb), 0.4) !important;
border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}
.btn-outline-success {
background: transparent !important;
color: var(--bs-success) !important;
border-color: rgba(var(--bs-success-rgb), 0.4) !important;
}
.btn-outline-success:hover:not(:disabled) {
background: rgba(var(--bs-success-rgb), 0.15) !important;
border-color: rgba(var(--bs-success-rgb), 0.6) !important;
color: var(--bs-success) !important;
}
.btn-outline-success:focus,
.btn-outline-success.focus {
background: rgba(var(--bs-success-rgb), 0.15) !important;
border-color: rgba(var(--bs-success-rgb), 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
}
.btn-outline-success:active,
.btn-outline-success.active {
background: rgba(var(--bs-success-rgb), 0.25) !important;
border-color: rgba(var(--bs-success-rgb), 0.7) !important;
}
.btn-outline-success:disabled,
.btn-outline-success.disabled {
background: transparent !important;
color: rgba(var(--bs-success-rgb), 0.4) !important;
border-color: rgba(var(--bs-success-rgb), 0.2) !important;
}
.btn-outline-warning {
background: transparent !important;
color: var(--bs-warning) !important;
border-color: rgba(var(--bs-warning-rgb), 0.4) !important;
}
.btn-outline-warning:hover:not(:disabled) {
background: rgba(var(--bs-warning-rgb), 0.15) !important;
border-color: rgba(var(--bs-warning-rgb), 0.6) !important;
color: var(--bs-warning) !important;
}
.btn-outline-warning:focus,
.btn-outline-warning.focus {
background: rgba(var(--bs-warning-rgb), 0.15) !important;
border-color: rgba(var(--bs-warning-rgb), 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25) !important;
}
.btn-outline-warning:active,
.btn-outline-warning.active {
background: rgba(var(--bs-warning-rgb), 0.25) !important;
border-color: rgba(var(--bs-warning-rgb), 0.7) !important;
}
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
background: transparent !important;
color: rgba(var(--bs-warning-rgb), 0.4) !important;
border-color: rgba(var(--bs-warning-rgb), 0.2) !important;
}
.btn-outline-danger {
background: transparent !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}
.btn-outline-danger:hover:not(:disabled) {
background: rgba(var(--bs-danger-rgb), 0.15) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
color: var(--bs-danger) !important;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
background: rgba(var(--bs-danger-rgb), 0.15) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
}
.btn-outline-danger:active,
.btn-outline-danger.active {
background: rgba(var(--bs-danger-rgb), 0.25) !important;
border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
}
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
background: transparent !important;
color: rgba(var(--bs-danger-rgb), 0.4) !important;
border-color: rgba(var(--bs-danger-rgb), 0.2) !important;
}
.btn-outline-info {
background: transparent !important;
color: var(--bs-info) !important;
border-color: rgba(var(--bs-info-rgb), 0.4) !important;
}
.btn-outline-info:hover:not(:disabled) {
background: rgba(var(--bs-info-rgb), 0.15) !important;
border-color: rgba(var(--bs-info-rgb), 0.6) !important;
color: var(--bs-info) !important;
}
.btn-outline-info:focus,
.btn-outline-info.focus {
background: rgba(var(--bs-info-rgb), 0.15) !important;
border-color: rgba(var(--bs-info-rgb), 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.25) !important;
}
.btn-outline-info:active,
.btn-outline-info.active {
background: rgba(var(--bs-info-rgb), 0.25) !important;
border-color: rgba(var(--bs-info-rgb), 0.7) !important;
}
.btn-outline-info:disabled,
.btn-outline-info.disabled {
background: transparent !important;
color: rgba(var(--bs-info-rgb), 0.4) !important;
border-color: rgba(var(--bs-info-rgb), 0.2) !important;
}
.btn-outline-secondary {
background: transparent !important;
color: var(--bs-secondary) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.4) !important;
}
.btn-outline-secondary:hover:not(:disabled) {
background: rgba(var(--bs-secondary-rgb), 0.15) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
color: var(--text-primary) !important;
}
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
background: rgba(var(--bs-secondary-rgb), 0.15) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.25) !important;
}
.btn-outline-secondary:active,
.btn-outline-secondary.active {
background: rgba(var(--bs-secondary-rgb), 0.25) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.7) !important;
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
background: transparent !important;
color: rgba(var(--bs-secondary-rgb), 0.4) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.2) !important;
}
.btn-outline-light {
background: transparent !important;
color: var(--bs-light) !important;
border-color: rgba(var(--bs-light-rgb), 0.2) !important;
}
.btn-outline-light:hover:not(:disabled) {
background: rgba(var(--bs-light-rgb), 0.08) !important;
border-color: rgba(var(--bs-light-rgb), 0.3) !important;
color: var(--text-primary) !important;
}
.btn-outline-light:focus,
.btn-outline-light.focus {
background: rgba(var(--bs-light-rgb), 0.08) !important;
border-color: rgba(var(--bs-light-rgb), 0.3) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-light-rgb), 0.15) !important;
}
.btn-outline-light:active,
.btn-outline-light.active {
background: rgba(var(--bs-light-rgb), 0.15) !important;
border-color: rgba(var(--bs-light-rgb), 0.4) !important;
color: var(--text-primary) !important;
}
.btn-outline-light:disabled,
.btn-outline-light.disabled {
background: transparent !important;
color: rgba(var(--bs-light-rgb), 0.3) !important;
border-color: rgba(var(--bs-light-rgb), 0.1) !important;
}
.btn-link:hover, .btn-link:focus {
box-shadow: none !important;
}
/* ============================================
MODALS - Override Bootstrap .modal
============================================ */
.modal-dialog {
max-height: calc(100vh - 3.5rem);
display: flex;
align-items: center;
}
.modal-content {
background: linear-gradient(
135deg,
rgba(26, 28, 34, 0.98),
rgba(22, 24, 30, 0.98)
) !important;
border: 1px solid rgba(var(--bs-primary-rgb), 0.2) !important;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
display: flex;
flex-direction: column;
max-height: calc(100vh - 3.5rem);
}
/* Use dynamic viewport height on mobile browsers that support it */
@supports (height: 100dvh) {
.modal {
max-height: 100dvh;
}
.modal-dialog,
.modal-content {
max-height: calc(100dvh - 3.5rem);
}
}
.modal-header {
background: rgba(30, 32, 38, 0.5) !important;
border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
border-radius: 12px 12px 0 0;
padding: 1.25rem 1.5rem;
flex-shrink: 0;
}
.modal-title {
color: var(--text-primary);
font-weight: 600;
font-size: 1.125rem;
}
.modal-header .close {
color: var(--text-secondary);
opacity: 0.8;
text-shadow: none;
font-size: 1.75rem;
font-weight: 300;
transition: all 0.2s ease;
}
.modal-header .close:hover {
color: var(--text-primary);
opacity: 1;
}
.modal-body {
padding: 1.5rem;
color: var(--text-secondary);
background: transparent !important;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.modal-footer {
background: rgba(18, 20, 26, 0.5) !important;
border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
border-radius: 0 0 12px 12px;
padding: 1rem 1.5rem;
flex-shrink: 0;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.7);
}
.modal-backdrop.show {
opacity: 1;
}
/* Prevent body scroll when modal is open on mobile */
body.modal-open {
position: fixed;
width: 100%;
overflow: hidden;
}
/* ============================================
ALERTS - Override Bootstrap .alert
============================================ */
/* override .alert .close in theme.css */
.alert:not([data-notify="container"]) .close {
background: transparent;
width: auto;
height: auto;
line-height: normal;
top: 0 !important;
border: none;
}
.alert:not([data-notify="container"]) .close:hover {
color: unset;
}
.alert {
/* Make alert text easier to read. */
margin: 0;
color: #121111;
border-left-width: 6px;
}
.alert:not([data-notify="container"]) {
border-radius: 8px;
border: 1px solid;
padding: 1rem 1.25rem;
}
.alert-primary:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-primary-rgb), var(--alert-tint-strong)),
rgba(var(--bs-primary-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-primary);
border-color: rgba(var(--bs-primary-rgb), 0.3);
}
.alert-success:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-success-rgb), var(--alert-tint-strong)),
rgba(var(--bs-success-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-success);
border-color: rgba(var(--bs-success-rgb), 0.3);
}
.alert-warning:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-warning-rgb), var(--alert-tint-strong)),
rgba(var(--bs-warning-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-warning);
border-color: rgba(var(--bs-warning-rgb), 0.3);
}
.alert-danger:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-danger-rgb), var(--alert-tint-strong)),
rgba(var(--bs-danger-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-danger);
border-color: rgba(var(--bs-danger-rgb), 0.3);
}
.alert-info:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-info-rgb), var(--alert-tint-strong)),
rgba(var(--bs-info-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-info);
border-color: rgba(var(--bs-info-rgb), 0.3);
}
.alert-secondary:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-secondary-rgb), var(--alert-tint-strong)),
rgba(var(--bs-secondary-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-secondary);
border-color: rgba(var(--bs-secondary-rgb), 0.3);
}
.alert-dark:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-dark-rgb), var(--alert-tint-strong)),
rgba(var(--bs-dark-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-dark);
border-color: rgba(var(--bs-dark-rgb), 0.2);
}
.alert-light:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(var(--bs-light-rgb), var(--alert-tint-strong)),
rgba(var(--bs-light-rgb), var(--alert-tint-faint))), var(--alert-base);
color: var(--bs-light);
border-color: rgba(var(--bs-light-rgb), 0.25);
}
.alert-notice:not([data-notify="container"]) {
background: linear-gradient(135deg,
rgba(80, 88, 100, var(--alert-tint-strong)),
rgba(80, 88, 100, var(--alert-tint-faint))), var(--alert-base);
color: #d0d3d8;
border-color: rgba(80, 88, 100, 0.45);
}
/* Notification Icons - Match theme colors */
.alert [data-notify="icon"]:before {
font-size: 1.15rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.alert-primary [data-notify="icon"]:before {
color: var(--bs-primary) !important;
background: rgba(var(--bs-primary-rgb), 0.15) !important;
}
.alert-success [data-notify="icon"]:before {
color: var(--bs-success) !important;
background: rgba(var(--bs-success-rgb), 0.15) !important;
}
.alert-warning [data-notify="icon"]:before {
color: var(--bs-warning) !important;
background: rgba(var(--bs-warning-rgb), 0.15) !important;
}
.alert-danger [data-notify="icon"]:before {
color: var(--bs-danger) !important;
background: rgba(var(--bs-danger-rgb), 0.15) !important;
}
.alert-info [data-notify="icon"]:before,
.alert-notice [data-notify="icon"]:before {
color: #d0d3d8 !important;
background: rgba(80, 88, 100, 0.3) !important;
}
.alert-secondary [data-notify="icon"]:before {
color: var(--bs-secondary) !important;
background: rgba(var(--bs-secondary-rgb), 0.15) !important;
}
/* Alert links - Styled to match theme */
.alert-primary .alert-link {
color: var(--color-blue-hover);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-primary-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
}
.alert-primary .alert-link:hover {
color: rgba(var(--bs-primary-rgb), 1);
text-decoration-color: rgba(var(--bs-primary-rgb), 0.8);
}
.alert-success .alert-link {
color: var(--color-green);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-success-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.2);
}
.alert-success .alert-link:hover {
color: var(--color-green);
text-decoration-color: rgba(var(--bs-success-rgb), 0.8);
filter: brightness(1.4);
}
.alert-warning .alert-link {
color: var(--color-orange);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-warning-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.2);
}
.alert-warning .alert-link:hover {
color: var(--color-orange);
text-decoration-color: rgba(var(--bs-warning-rgb), 0.8);
filter: brightness(1.4);
}
.alert-danger .alert-link {
color: var(--color-red);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-danger-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.2);
}
.alert-danger .alert-link:hover {
color: var(--color-red);
text-decoration-color: rgba(var(--bs-danger-rgb), 0.8);
filter: brightness(1.4);
}
.alert-info .alert-link {
color: var(--color-purple);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-info-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.2);
}
.alert-info .alert-link:hover {
color: var(--color-purple);
text-decoration-color: rgba(var(--bs-info-rgb), 0.8);
filter: brightness(1.4);
}
.alert-secondary .alert-link {
color: var(--bs-secondary);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-secondary-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.3);
}
.alert-secondary .alert-link:hover {
color: var(--text-primary);
text-decoration-color: rgba(var(--bs-secondary-rgb), 0.8);
filter: brightness(1.5);
}
.alert-dark .alert-link {
color: var(--bs-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-dark-rgb), 0.3);
text-underline-offset: 2px;
transition: all 0.2s ease;
filter: brightness(1.3);
}
.alert-dark .alert-link:hover {
color: var(--text-primary);
text-decoration-color: rgba(var(--bs-dark-rgb), 0.6);
filter: brightness(1.5);
}
.alert-light .alert-link {
color: var(--bs-light);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--bs-light-rgb), 0.4);
text-underline-offset: 2px;
transition: all 0.2s ease;
}
.alert-light .alert-link:hover {
color: var(--text-primary);
text-decoration-color: rgba(var(--bs-light-rgb), 0.7);
}
/* Notification alerts */
.alert[data-notify="container"] {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
padding: 1.25rem 1.5rem;
backdrop-filter: blur(12px);
z-index: 9999999 !important;
}
.alert [data-notify="message"] {
color: rgba(255, 255, 255, .95) !important;
}
.alert[data-notify="container"].alert-primary {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.25),
rgba(var(--bs-primary-rgb), 0.20)
), rgba(20, 25, 35, 0.98) !important;
}
.alert[data-notify="container"].alert-success {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.25),
rgba(var(--bs-success-rgb), 0.20)
), rgba(15, 30, 25, 0.98) !important;
}
.alert[data-notify="container"].alert-warning {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.25),
rgba(var(--bs-warning-rgb), 0.20)
), rgba(30, 25, 20, 0.98) !important;
}
.alert[data-notify="container"].alert-danger {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.25),
rgba(var(--bs-danger-rgb), 0.20)
), rgba(30, 20, 20, 0.98) !important;
}
.alert[data-notify="container"].alert-info {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.25),
rgba(var(--bs-info-rgb), 0.20)
), rgba(25, 20, 35, 0.98) !important;
}
.alert[data-notify="container"].alert-secondary {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.25),
rgba(var(--bs-secondary-rgb), 0.20)
), rgba(25, 28, 32, 0.98) !important;
}
.alert[data-notify="container"].alert-notice {
background: linear-gradient(
135deg,
rgba(60, 66, 78, 0.35),
rgba(50, 55, 65, 0.3)
), rgba(30, 33, 40, 0.98) !important;
}
/* ============================================
DROPDOWNS - Override Bootstrap .dropdown
============================================ */
.dropdown-menu {
color: var(--text-primary);
background: linear-gradient(
135deg,
rgba(24, 26, 32, 0.98),
rgba(20, 22, 28, 0.98)
) !important;
border: 1px solid rgba(var(--bs-primary-rgb), 0.25) !important;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
padding: 0.5rem 0;
}
/* While the domain switcher menu is open, focus moves to the search input,
so keep the toggle showing the topbar nav-link hover/focus highlight. The
open toggle and its menu then read as one connected unit. */
.main-header .navbar-header .navbar-nav .nav-item .nav-link.dropdown-toggle#domainDropdown[aria-expanded="true"] {
background: rgba(185, 185, 185, 0.18) !important;
}
.dropdown-item {
color: var(--text-secondary);
padding: 0.5rem 1rem;
transition: all 0.2s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: rgba(var(--bs-primary-rgb), 0.1) !important;
color: var(--text-primary) !important;
}
.dropdown-item:active {
background: rgba(var(--bs-primary-rgb), 0.15) !important;
color: var(--text-primary) !important;
}
.dropdown-item.active {
background: rgba(var(--bs-primary-rgb), 0.2) !important;
color: var(--color-blue) !important;
border-left: 3px solid var(--color-blue);
font-weight: 500;
}
.dropdown-divider {
border-top-color: var(--border-normal);
margin: 0.5rem 0;
}
/* Keep the danger cue on the Logout item's text/icon even on hover, where the
generic .dropdown-item:hover would otherwise force it to --text-primary. */
.dropdown-item.text-danger,
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
color: var(--bs-danger) !important;
}
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
background: rgba(var(--bs-danger-rgb), 0.12) !important;
}
.dropdown-header {
color: var(--text-tertiary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
padding: 0.5rem 1rem;
}
/* Custom scrollbar for dropdown menus */
.dropdown-menu ::-webkit-scrollbar {
width: 8px;
}
.dropdown-menu ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
}
.dropdown-menu ::-webkit-scrollbar-thumb {
background: rgba(var(--bs-primary-rgb), 0.3);
border-radius: 4px;
}
.dropdown-menu ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--bs-primary-rgb), 0.5);
}
/* Firefox scrollbar */
.dropdown-menu * {
scrollbar-width: thin;
scrollbar-color: rgba(var(--bs-primary-rgb), 0.3)
rgba(255, 255, 255, 0.03);
}
/* ============================================
FORMS - Override Bootstrap form controls
============================================ */
.form-control,
select.form-control {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
border-radius: 6px;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.form-control:focus,
select.form-control:focus {
background: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2) !important;
outline: none !important;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
}
.form-control:disabled,
select.form-control:disabled {
background: var(--input-bg-disabled) !important;
color: var(--text-muted) !important;
opacity: 0.6;
}
select.form-control option {
background-color: var(--select-option-bg);
color: var(--text-primary);
}
select.form-control option:checked,
select.form-control option:focus {
background-color: var(--select-option-bg-active);
color: var(--text-primary);
}
select.form-control option:hover {
background-color: var(--select-option-bg-hover) !important;
color: var(--text-primary);
}
/* File input custom styling */
input[type="file"]::file-selector-button {
background: rgba(var(--bs-primary-rgb), 0.15);
border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
color: var(--text-primary);
margin-right: 0.75rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
}
input[type="file"]::file-selector-button:hover {
background: rgba(var(--bs-primary-rgb), 0.25);
border-color: rgba(var(--bs-primary-rgb), 0.4);
color: var(--color-blue);
}
input[type="file"]::file-selector-button:active {
background: rgba(var(--bs-primary-rgb), 0.3);
}
.form-label,
label {
color: rgba(255, 255, 255, 0.95) !important;
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.form-text {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
/* Form group spacing */
.form-group label {
margin-bottom: 0.5rem;
}
/* bootstrap-toggle: the on/off button labels inherit a margin-bottom
from Bootstrap's default `label { margin-bottom: 0.5rem }`, which
shows as a gap inside the toggle pill. Zero it out. */
.toggle-on,
.toggle-off {
margin-bottom: 0 !important;
border: none;
border-radius: 0 !important;
}
.toggle.btn {
border-radius: 0.25rem !important;
border-width: 1px !important;
}
.toggle.btn:hover, .toggle-handle:hover, .toggle-on:hover, .toggle-off:hover, .toggle-group:hover {
transform: none !important;
box-shadow: none !important;
}
/* bootstrap-toggle: disabled state.
Match both the class bootstrap-toggle adds (`.disabled` / `:disabled`)
AND the actual `input:disabled` inside via `:has()` so we don't depend
on the plugin applying the class. Desaturate hard and block pointer
events so it's obviously inert. */
.toggle.btn.disabled,
.toggle.btn:disabled,
.toggle.btn:has(input:disabled) {
opacity: 0.55 !important;
cursor: not-allowed !important;
pointer-events: none !important;
filter: grayscale(0.7);
}
/* bootstrap-toggle: wrap the compact pill in a form-control-height
slot so it vertically aligns with sibling text inputs/selects. */
.toggle-field-slot {
display: flex;
align-items: center;
min-height: calc(1.5em + 0.75rem + 3px);
}
.form-group-sm .toggle-field-slot {
min-height: calc(1.5em + 0.5rem + 2px);
}
.toggle-field-slot .toggle.btn {
/*border-radius: 0.25rem;*/
}
/* Input groups */
.input-group-text {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-secondary) !important;
transition: all 0.2s ease;
}
/* Opt-in: make append/prepend buttons share the input's border color so
the group reads as one bordered control instead of a heavier btn-* seam. */
.input-group-unified > .input-group-append > .btn,
.input-group-unified > .input-group-prepend > .btn {
border-color: var(--input-border) !important;
}
/* Bootstrap shrinks every -sm control to a .2rem radius, leaving small
buttons/inputs less rounded than the base 6px controls. Use the app's
standard 6px across all sizes. Standalone controls and a group's
.form-control take the full shorthand safely (Bootstrap zeros their inner
corners at higher specificity). */
.btn-sm,
.form-control-sm,
.custom-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .custom-select {
border-radius: 6px;
}
/* A group's prepend/append button/text ties Bootstrap's inner-corner
zeroing in specificity, so only round the group's OUTER corners here and
leave the inner seam corners to Bootstrap. */
.input-group-sm > .input-group-prepend:first-child > .btn:first-child,
.input-group-sm > .input-group-prepend:first-child > .input-group-text:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.input-group-sm > .input-group-append:last-child > .btn:last-child,
.input-group-sm > .input-group-append:last-child > .input-group-text:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.input-group:focus-within {
border-radius: 6px;
}
/* Treat the whole input-group as one focus unit: a single ring on the
group, every inner border recolored to the focus color, and no inner
element drawing its own ring. This keeps the focus state consistent
whether the input or an append/prepend button holds focus. */
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text,
.input-group:focus-within .input-group-append > .btn,
.input-group:focus-within .input-group-prepend > .btn {
border-color: var(--input-border-focus) !important;
}
.input-group > .form-control:focus,
.input-group:focus-within .input-group-append > .btn:focus,
.input-group:focus-within .input-group-prepend > .btn:focus {
box-shadow: none !important;
}
/* Bootstrap lifts the focused .form-control to z-index 3, which reorders
the -1px overlap seams and shifts the visible border by a pixel. Keep
the stacking order constant so only border colors change on focus. */
.input-group > .form-control:focus {
z-index: auto;
}
/* The -1px margins overlap each prepend/append border with the input's,
and two semi-transparent borders composite darker at the seam (worst at
the corners). Drop the inward-facing border so only the input's single
border renders the seam. Width is kept, so layout/overlap is unchanged.
Placed after the focus recolor and matched in specificity so the seam
stays single in both states. */
.input-group.input-group-unified > .input-group-prepend > .input-group-text,
.input-group.input-group-unified > .input-group-prepend > .btn {
border-right-color: transparent !important;
}
.input-group.input-group-unified > .input-group-append > .input-group-text,
.input-group.input-group-unified > .input-group-append > .btn {
border-left-color: transparent !important;
}
/* Neutral-bordered input-group (opt-in modifier). Recolors the group's
border to a stronger neutral gray instead of the primary-tinted
--input-border, and brightens it on focus. Pair with .input-group-unified
so an append/prepend button shares the border as one control. */
.input-group-border-secondary.input-group-unified > .form-control,
.input-group-border-secondary.input-group-unified > .input-group-append > .btn,
.input-group-border-secondary.input-group-unified > .input-group-prepend > .btn {
border-color: var(--border-emphasis) !important;
}
.input-group-border-secondary.input-group:focus-within .form-control,
.input-group-border-secondary.input-group:focus-within .input-group-append > .btn,
.input-group-border-secondary.input-group:focus-within .input-group-prepend > .btn {
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* Keep the button/input seam a single border in every state: the border
recolor above would otherwise repaint the inner (seam) edge. */
.input-group-border-secondary.input-group-unified > .input-group-append > .btn,
.input-group-border-secondary.input-group:focus-within .input-group-append > .btn {
border-left-color: transparent !important;
}
.input-group-border-secondary.input-group-unified > .input-group-prepend > .btn,
.input-group-border-secondary.input-group:focus-within .input-group-prepend > .btn {
border-right-color: transparent !important;
}
/* Custom checkboxes and radios */
.custom-control-label {
color: var(--text-secondary);
}
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--color-blue);
border-color: var(--color-blue);
}
/* ============================================
TABLES - Override Bootstrap .table
============================================ */
.table {
color: var(--text-secondary);
}
.table thead th {
color: var(--text-primary);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--border-normal);
padding: 0.75rem 1rem;
}
.table td {
border-top: 1px solid var(--border-subtle);
padding: 0.75rem 1rem;
vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--surface-1);
}
.table-hover tbody tr:hover {
background-color: var(--surface-2);
}
.table-dark {
background-color: rgba(20, 20, 20, 0.95);
color: var(--text-secondary);
}
.table-dark thead th {
border-bottom-color: var(--border-emphasis);
}
.table-dark td {
border-top-color: var(--border-normal);
}
/* Table contextual classes */
.table-warning,
.table-warning > th,
.table-warning > td {
background-color: rgba(var(--bs-warning-rgb), 0.03) !important;
}
.table-danger,
.table-danger > th,
.table-danger > td {
background-color: rgba(var(--bs-danger-rgb), 0.05) !important;
}
.table-success,
.table-success > th,
.table-success > td {
background-color: rgba(var(--bs-success-rgb), 0.08) !important;
}
.table-info,
.table-info > th,
.table-info > td {
background-color: rgba(var(--bs-info-rgb), 0.08) !important;
}
/* ============================================
LINKS
============================================ */
a {
color: var(--color-blue);
transition: color 0.2s ease;
}
a:hover {
color: var(--color-blue-hover);
}
/* ============================================
LIST GROUPS - Override Bootstrap .list-group
============================================ */
.list-group {
border-radius: 8px;
}
.list-group-item {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.list-group-item:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.list-group-item:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.list-group-item:hover {
background: var(--surface-2);
border-color: var(--border-normal);
}
.list-group-item-action:hover {
color: var(--text-primary);
}
.list-group-item-primary {
background: rgba(var(--bs-primary-rgb), 0.15);
color: var(--color-blue);
border-color: rgba(var(--bs-primary-rgb), 0.3);
}
.list-group-item-success {
background: rgba(var(--bs-success-rgb), 0.15);
color: var(--color-green);
border-color: rgba(var(--bs-success-rgb), 0.3);
}
.list-group-item-warning {
background: rgba(var(--bs-warning-rgb), 0.15);
color: var(--color-orange);
border-color: rgba(var(--bs-warning-rgb), 0.3);
}
.list-group-item-danger {
background: rgba(var(--bs-danger-rgb), 0.15);
color: var(--color-red);
border-color: rgba(var(--bs-danger-rgb), 0.3);
}
.list-group-item-info {
background: rgba(var(--bs-info-rgb), 0.15);
color: var(--color-purple);
border-color: rgba(var(--bs-info-rgb), 0.3);
}
/* ============================================
BREADCRUMBS
============================================ */
.breadcrumb {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 0.75rem 1rem;
}
.breadcrumb-item {
color: var(--text-tertiary);
}
.breadcrumb-item.active {
color: var(--text-secondary);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--text-muted);
}
/* ============================================
PAGINATION
============================================ */
.pagination .page-link {
background: var(--surface-1) !important;
border: 1px solid var(--border-normal) !important;
color: var(--text-secondary) !important;
padding: 0.5rem 0.75rem;
transition: all 0.2s ease;
}
.pagination.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
}
.pagination .page-link:hover {
background: var(--surface-2) !important;
border-color: var(--border-emphasis) !important;
color: var(--text-primary) !important;
}
.pagination .page-item.active .page-link {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.25),
rgba(var(--bs-primary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
color: var(--color-blue) !important;
}
.pagination .page-item.disabled .page-link {
background: var(--surface-1) !important;
border-color: var(--border-subtle) !important;
color: var(--text-muted) !important;
opacity: 0.5;
}
/* ============================================
PROGRESS BARS
============================================ */
.progress {
background-color: var(--surface-2);
border-radius: 6px;
height: 1rem;
}
.progress-bar {
background: linear-gradient(
90deg,
rgba(var(--bs-primary-rgb), 0.8),
rgba(var(--bs-primary-rgb), 1)
);
border-radius: 6px;
}
.progress-bar-success,
.bg-success {
background: linear-gradient(
90deg,
rgba(var(--bs-success-rgb), 0.8),
rgba(var(--bs-success-rgb), 1)
) !important;
}
.progress-bar-warning,
.bg-warning {
background: linear-gradient(
90deg,
rgba(var(--bs-warning-rgb), 0.8),
rgba(var(--bs-warning-rgb), 1)
) !important;
}
.progress-bar-danger,
.bg-danger {
background: linear-gradient(
90deg,
rgba(var(--bs-danger-rgb), 0.8),
rgba(var(--bs-danger-rgb), 1)
) !important;
}
.progress-bar-info,
.bg-info {
background: linear-gradient(
90deg,
rgba(var(--bs-info-rgb), 0.8),
rgba(var(--bs-info-rgb), 1)
) !important;
}
/* ============================================
TOOLTIPS & POPOVERS
============================================ */
.tooltip-inner {
opacity: 100%;
color: var(--text-primary);
/* opaque floating surface — matches the app popover (--pop-bg); a
translucent surface would let content behind bleed through */
background: var(--pop-bg, #0d1117);
border: 1px solid var(--border-emphasis);
box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
padding: 8px 10px;
border-radius: 8px;
font-size: 0.8rem;
}
/* Two-layer tooltip arrow that mirrors the popover: ::before is the edge
(same border as .tooltip-inner) sitting at Bootstrap's arrow position,
::after is the fill nudged 1px back toward the base. That leaves a 1px
edge on the two slanted sides and the point, and no edge where the arrow
meets the tooltip body. Bootstrap only styles ::before, so ::after needs
its own base triangle geometry. */
.tooltip .arrow::before {
border-color: transparent;
}
.tooltip .arrow::after {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: var(--border-emphasis);
}
.tooltip.bs-tooltip-top .arrow::after,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::after {
top: -1px;
border-width: .4rem .4rem 0;
border-top-color: var(--pop-bg, #0d1117);
}
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: var(--border-emphasis);
}
.tooltip.bs-tooltip-bottom .arrow::after,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::after {
bottom: -1px;
border-width: 0 .4rem .4rem;
border-bottom-color: var(--pop-bg, #0d1117);
}
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: var(--border-emphasis);
}
.tooltip.bs-tooltip-right .arrow::after,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::after {
right: -1px;
border-width: .4rem .4rem .4rem 0;
border-right-color: var(--pop-bg, #0d1117);
}
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: var(--border-emphasis);
}
.tooltip.bs-tooltip-left .arrow::after,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::after {
left: -1px;
border-width: .4rem 0 .4rem .4rem;
border-left-color: var(--pop-bg, #0d1117);
}
.popover {
/* Surface + edge tokens the arrow rules below reference. The light
audio-player popover just overrides these two vars. */
/*--pop-bg: rgba(30, 30, 30, 0.98);*/
--pop-bg: #0d1117;
--pop-edge: var(--border-emphasis);
background: var(--pop-bg) !important;
border: 1px solid var(--pop-edge);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Theme the arrow per placement; Bootstrap leaves it white otherwise. The
fill (::after) and edge (::before) read the --pop-* vars, so each popover
themes its own arrow. Both the explicit `.bs-popover-{dir}` class and the
auto-placement `.bs-popover-auto[x-placement^="dir"]` form are covered. */
.popover.bs-popover-top > .arrow::after,
.popover.bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--pop-bg); }
.popover.bs-popover-top > .arrow::before,
.popover.bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--pop-edge); }
.popover.bs-popover-bottom > .arrow::after,
.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--pop-bg); }
.popover.bs-popover-bottom > .arrow::before,
.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--pop-edge); }
.popover.bs-popover-left > .arrow::after,
.popover.bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--pop-bg); }
.popover.bs-popover-left > .arrow::before,
.popover.bs-popover-auto[x-placement^="left"] > .arrow::before { border-left-color: var(--pop-edge); }
.popover.bs-popover-right > .arrow::after,
.popover.bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--pop-bg); }
.popover.bs-popover-right > .arrow::before,
.popover.bs-popover-auto[x-placement^="right"] > .arrow::before { border-right-color: var(--pop-edge); }
.popover .popover-header {
background: var(--surface-2);
color: var(--text-primary);
border-bottom: 1px solid var(--border-normal);
}
/* Bootstrap draws a seam line under a below-placed titled popover's arrow,
tinted with its (default white) header bg — recolor it to the themed
header so it doesn't flash white. */
.popover.bs-popover-bottom > .popover-header::before,
.popover.bs-popover-auto[x-placement^="bottom"] > .popover-header::before {
border-bottom-color: var(--surface-2);
}
.popover .popover-body {
padding: 0.625rem 0.75rem;
}
/* ============================================
NAVS & TABS
============================================ */
/* Segmented-control style nav-tabs: tabs grouped in a rounded container,
active tab has a filled background. No underline. */
.nav-tabs {
display: inline-flex;
border: 1px solid var(--border-normal);
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
padding: 4px;
gap: 4px;
}
.nav-tabs .nav-item {
margin: 0;
}
.nav-tabs .nav-link {
color: var(--text-tertiary);
border: none;
padding: 0.35rem 0.7rem;
font-size: 0.85rem;
font-weight: 500;
border-radius: 5px;
background: transparent;
transition: all 0.15s ease;
}
.nav-tabs .nav-link:hover {
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.05);
}
/* Active tab reads as the accent-filled selected state, matching .btn.on:
a solid blue pill with near-black text. */
.nav-tabs .nav-link.active {
color: #08111f;
background: var(--color-blue);
font-weight: 600;
}
.nav-tabs .nav-link .fa,
.nav-tabs .nav-link .fas,
.nav-tabs .nav-link .far {
opacity: 0.75;
margin-right: 0.35rem;
}
.nav-tabs .nav-link.active .fa,
.nav-tabs .nav-link.active .fas,
.nav-tabs .nav-link.active .far {
opacity: 1;
color: inherit;
}
.nav-pills .nav-link {
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 20px !important;
transition: all 0.2s ease !important;
}
.nav-pills .nav-link:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
color: rgba(255, 255, 255, 0.95) !important;
}
.nav-pills .nav-link.active {
background: rgba(var(--bs-primary-rgb), 0.35) !important;
color: #ffffff !important;
border-color: var(--color-blue) !important;
font-weight: 600 !important;
}
/* ============================================
UTILITIES - Background & Text colors
============================================ */
/* Background color utilities */
.bg-primary {
background: rgba(var(--bs-primary-rgb), 0.15) !important;
}
.bg-success {
background: rgba(var(--bs-success-rgb), 0.15) !important;
}
.bg-warning {
background: rgba(var(--bs-warning-rgb), 0.15) !important;
}
.bg-danger {
background: rgba(var(--bs-danger-rgb), 0.45) !important;
}
.bg-info {
background: rgba(var(--bs-info-rgb), 0.55) !important;
}
.bg-secondary {
background: rgba(var(--bs-secondary-rgb), 0.15) !important;
}
.bg-light {
background: rgba(var(--bs-light-rgb), 0.1) !important;
}
.bg-dark {
background: rgba(var(--bs-dark-rgb), 0.08) !important;
}
/* Text color utilities */
.text-primary,
.text-primary:hover,
.text-primary:focus,
.text-primary a,
.text-primary a:focus {
color: var(--bs-primary) !important;
}
a.text-primary:hover,
a.text-primary:focus,
.text-primary a:hover {
color: rgba(var(--bs-primary-rgb), 0.75) !important;
}
.text-secondary,
.text-secondary:hover,
.text-secondary:focus,
.text-secondary a,
.text-secondary a:focus {
color: var(--bs-secondary) !important;
}
a.text-secondary:hover,
a.text-secondary:focus,
.text-secondary a:hover {
color: rgba(var(--bs-secondary-rgb), 0.75) !important;
}
.text-muted,
.text-muted:hover,
.text-muted:focus,
.text-muted a,
.text-muted a:focus {
color: var(--text-muted) !important;
}
a.text-muted:hover,
a.text-muted:focus,
.text-muted a:hover {
color: rgba(var(--text-muted-rgb), 0.75) !important;
}
.text-tertiary,
.text-tertiary:hover,
.text-tertiary:focus,
.text-tertiary a,
.text-tertiary a:focus {
color: var(--text-tertiary) !important;
}
a.text-tertiary:hover,
a.text-tertiary:focus,
.text-tertiary a:hover {
color: rgba(var(--text-tertiary-rgb), 0.75) !important;
}
.text-success,
.text-success:hover,
.text-success:focus,
.text-success a,
.text-success a:focus {
color: var(--bs-success) !important;
}
a.text-success:hover,
a.text-success:focus,
.text-success a:hover {
color: rgba(var(--bs-success-rgb), 0.75) !important;
}
.text-warning,
.text-warning:hover,
.text-warning:focus,
.text-warning a,
.text-warning a:focus {
color: var(--bs-warning) !important;
}
a.text-warning:hover,
a.text-warning:focus,
.text-warning a:hover {
color: rgba(var(--bs-warning-rgb), 0.75) !important;
}
.text-danger,
.text-danger:hover,
.text-danger:focus,
.text-danger a,
.text-danger a:focus {
color: var(--bs-danger) !important;
}
a.text-danger:hover,
a.text-danger:focus,
.text-danger a:hover {
color: rgba(var(--bs-danger-rgb), 0.75) !important;
}
.text-info,
.text-info:hover,
.text-info:focus,
.text-info a,
.text-info a:focus {
color: var(--bs-info) !important;
}
a.text-info:hover,
a.text-info:focus,
.text-info a:hover {
color: rgba(var(--bs-info-rgb), 0.75) !important;
}
/* Hover utilities */
.hover-lift {
transition: transform 0.15s ease;
}
.hover-lift:hover {
transform: translateY(-1px);
}
/* The .text-* utilities above lock their color on :hover (with !important), so
a tinted element can't show a hover affordance on its own. Pair .text-hover-bright
with any .text-* class to brighten whatever its color is on hover — `brightness`
lifts the existing tint instead of overriding it, so it works with any text color. */
.text-hover-bright {
transition: filter 0.12s ease;
cursor: pointer;
}
.text-hover-bright:hover {
filter: brightness(1.3);
}
.text-light, .text-light:hover, .text-light a, .text-light a:hover {
color: var(--bs-light) !important;
}
.text-dark, .text-dark:hover, .text-dark a, .text-dark a:hover {
color: #2d2929 !important;
}
.text-purple {
color: var(--color-purple) !important;
}
.text-blue {
color: var(--color-blue) !important;
}
.text-green {
color: var(--color-green) !important;
}
.text-orange {
color: var(--color-orange) !important;
}
.text-red {
color: var(--color-red) !important;
}
.text-purple-muted {
color: rgba(var(--bs-info-rgb), 0.6) !important;
}
.text-blue-muted {
color: rgba(var(--bs-primary-rgb), 0.6) !important;
}
.text-green-muted {
color: rgba(var(--bs-success-rgb), 0.6) !important;
}
.text-orange-muted {
color: rgba(var(--bs-warning-rgb), 0.6) !important;
}
.text-red-muted {
color: rgba(var(--bs-danger-rgb), 0.6) !important;
}
/* ============================================
ADDITIONAL FANCY CLASSES
(Not Bootstrap overrides but useful additions)
============================================ */
/* Empty state styling */
.empty-state {
padding: 3rem 1rem;
text-align: center;
color: var(--text-muted);
}
.empty-state > i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
/* Section titles */
.section-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0;
}
/* Small uppercase eyebrow heading — the quiet section label used on the home
dashboard and the Location hub. Pairs with .section-title, overriding its
size/colour. Shared here so both pages render an identical heading. */
.home-section-heading {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
margin-bottom: 0.5rem;
}
/* Stat cards (compact and regular) */
.stat-card {
background: var(--surface-1);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.2s ease;
text-decoration: none;
}
.stat-card:hover {
background: var(--surface-2);
border-color: var(--border-normal);
transform: translateY(-2px);
text-decoration: none;
}
.stat-card-primary {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.15),
rgba(var(--bs-primary-rgb), 0.08)
);
border-color: rgba(var(--bs-primary-rgb), 0.4);
}
.stat-card-danger {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.15),
rgba(var(--bs-danger-rgb), 0.08)
);
border-color: rgba(var(--bs-danger-rgb), 0.4);
}
.stat-card-warning {
background: linear-gradient(
135deg,
rgba(var(--bs-warning-rgb), 0.15),
rgba(var(--bs-warning-rgb), 0.08)
);
border-color: rgba(var(--bs-warning-rgb), 0.4);
}
.stat-card-success {
background: linear-gradient(
135deg,
rgba(var(--bs-success-rgb), 0.15),
rgba(var(--bs-success-rgb), 0.08)
);
border-color: rgba(var(--bs-success-rgb), 0.4);
}
.stat-card-info {
background: linear-gradient(
135deg,
rgba(var(--bs-info-rgb), 0.15),
rgba(var(--bs-info-rgb), 0.08)
);
border-color: rgba(var(--bs-info-rgb), 0.4);
}
.stat-card-secondary {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.15),
rgba(var(--bs-secondary-rgb), 0.08)
);
border-color: rgba(var(--bs-secondary-rgb), 0.4);
}
/* ============================================
STAT CARD ICONS
============================================ */
.stat-icon {
--stat-icon-rgb: var(--bs-primary-rgb);
--stat-icon-color: var(--bs-primary);
--stat-icon-bg-start-alpha: 0.25;
--stat-icon-bg-end-alpha: 0.15;
--stat-icon-border-alpha: 0.4;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 1.125rem;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border: 1px solid rgba(var(--stat-icon-rgb), var(--stat-icon-border-alpha));
background: linear-gradient(
135deg,
rgba(var(--stat-icon-rgb), var(--stat-icon-bg-start-alpha)),
rgba(var(--stat-icon-rgb), var(--stat-icon-bg-end-alpha))
);
color: var(--stat-icon-color);
}
.stat-icon-purple {
--stat-icon-rgb: var(--bs-info-rgb);
--stat-icon-color: var(--bs-info);
}
.stat-icon-blue {
--stat-icon-rgb: var(--bs-primary-rgb);
--stat-icon-color: var(--bs-primary);
}
.stat-icon-green {
--stat-icon-rgb: var(--bs-success-rgb);
--stat-icon-color: var(--bs-success);
}
.stat-icon-orange {
--stat-icon-rgb: var(--bs-warning-rgb);
--stat-icon-color: var(--bs-warning);
}
.stat-icon-red {
--stat-icon-rgb: var(--bs-danger-rgb);
--stat-icon-color: var(--bs-danger);
}
.stat-label {
display: flex;
align-items: baseline;
gap: 0.25rem;
width: 100%;
overflow: hidden;
line-height: 1.1;
}
.stat-label-main {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.stat-subscript {
flex: 0 0 auto;
font-size: 0.65rem;
line-height: 1;
text-transform: none;
letter-spacing: normal;
opacity: 0.7;
white-space: nowrap;
}
/* ============================================
SWEETALERT2 - Dark theme styling
============================================ */
/* Main popup container */
.swal2-popup {
background: linear-gradient(
135deg,
rgba(26, 28, 34, 0.98),
rgba(22, 24, 30, 0.98)
) !important;
border: 1px solid rgba(var(--bs-primary-rgb), 0.2) !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
color: var(--text-secondary) !important;
padding: 0 !important;
}
/* Title */
.swal2-title {
color: var(--text-primary) !important;
font-weight: 600 !important;
font-size: 1.125rem !important;
padding: 1.25rem 1.5rem 0 !important;
}
/* Content/HTML container. margin:0 kills swal2's lopsided default
(1em top / .3em bottom) so the message sits evenly inside the popup. */
.swal2-html-container {
color: var(--text-secondary) !important;
padding: 1rem !important;
margin: 0 !important;
line-height: 1.5 !important;
}
/* Actions container */
.swal2-actions {
background: rgba(18, 20, 26, 0.5) !important;
border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
border-bottom: none !important;
border-radius: 0 0 12px 12px !important;
padding: 1rem 1.5rem !important;
margin: 0 !important;
width: 100% !important;
}
/* Tighten spacing on small screens so modal isn't mostly whitespace */
@media (max-width: 576px) {
.swal2-title {
padding: 0.75rem 0.75rem 0.25rem !important;
font-size: 1rem !important;
}
.swal2-html-container {
padding: 0.75rem !important;
margin: 0 !important;
}
.swal2-actions {
padding: 0.5rem 0.75rem !important;
}
}
.swal2-actions:not(.swal2-loading) .swal2-styled {
margin: 0.25rem !important;
}
/* SweetAlert2 Buttons */
.swal2-styled {
padding: 0.5rem 1rem !important;
border-radius: 6px !important;
border: 1px solid !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.swal2-styled:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.swal2-styled:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Confirm button (Primary/Blue) */
.swal2-confirm {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.15),
rgba(var(--bs-primary-rgb), 0.08)
) !important;
color: var(--bs-primary) !important;
border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
}
.swal2-confirm:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.25),
rgba(var(--bs-primary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
color: var(--bs-primary) !important;
}
.swal2-confirm:active {
background: linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.35),
rgba(var(--bs-primary-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-primary-rgb), 0.7) !important;
}
/* Deny button (Danger/Red) */
.swal2-deny {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.15),
rgba(var(--bs-danger-rgb), 0.08)
) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}
.swal2-deny:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.25),
rgba(var(--bs-danger-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
color: var(--bs-danger) !important;
}
.swal2-deny:active {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.35),
rgba(var(--bs-danger-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
}
/* Cancel button (Secondary/Gray) */
.swal2-cancel {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.15),
rgba(var(--bs-secondary-rgb), 0.08)
) !important;
color: var(--bs-secondary) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.4) !important;
}
.swal2-cancel:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.25),
rgba(var(--bs-secondary-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.6) !important;
color: var(--text-primary) !important;
}
.swal2-cancel:active {
background: linear-gradient(
135deg,
rgba(var(--bs-secondary-rgb), 0.35),
rgba(var(--bs-secondary-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-secondary-rgb), 0.7) !important;
}
/* Input fields */
.swal2-input,
.swal2-textarea,
.swal2-select {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
border-radius: 6px !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
background: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2) !important;
outline: none !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
}
/* Validation message */
.swal2-validation-message {
background: rgba(var(--bs-danger-rgb), 0.15) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
}
/* Close button */
.swal2-close {
color: var(--text-secondary) !important;
opacity: 0.8 !important;
}
.swal2-close:hover {
color: var(--text-primary) !important;
opacity: 1 !important;
}
/* Icons */
.swal2-icon.swal2-success .swal2-success-ring {
border-color: rgba(var(--bs-success-rgb), 0.3) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
background-color: var(--bs-success) !important;
}
.swal2-icon.swal2-error {
border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
color: var(--bs-danger) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
background-color: var(--bs-danger) !important;
}
.swal2-icon.swal2-warning {
border-color: rgba(var(--bs-warning-rgb), 0.3) !important;
color: var(--bs-warning) !important;
}
.swal2-icon.swal2-info {
border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
color: var(--bs-primary) !important;
}
.swal2-icon.swal2-question {
border-color: rgba(var(--bs-info-rgb), 0.3) !important;
color: var(--bs-info) !important;
}
/* Progress steps */
.swal2-progress-steps .swal2-progress-step {
background: var(--bs-primary) !important;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
background: var(--color-blue-hover) !important;
}
.swal2-progress-steps .swal2-progress-step-line {
background: var(--border-normal) !important;
}
/* Timer progress bar */
.swal2-timer-progress-bar {
background: var(--bs-primary) !important;
}
/* Footer */
.swal2-footer {
border-top: 1px solid rgba(var(--bs-primary-rgb), 0.15) !important;
color: var(--text-tertiary) !important;
padding: 1rem 1.5rem !important;
background: rgba(18, 20, 26, 0.5) !important;
border-radius: 0 0 12px 12px;
}
/* Backdrop */
.swal2-container.swal2-backdrop-show {
background: rgba(0, 0, 0, 0.7) !important;
}
/* hx-confirm dialog (htmx_confirm.js) — compact confirm card that mirrors
the anchored-popover confirm (.anchor-pop-confirm): a danger icon tile
over the question, then an equal-width cancel/confirm row. */
.swal-confirm .swal2-icon {
width: 44px !important;
height: 44px !important;
margin: 1.5rem auto 0 !important;
border: none !important;
border-radius: 12px !important;
background: rgba(var(--bs-danger-rgb), 0.14) !important;
color: var(--bs-danger) !important;
animation: none !important;
}
.swal-confirm .swal2-icon .swal2-icon-content {
font-size: 1.1rem !important;
animation: none !important;
}
.swal-confirm .swal2-html-container {
color: var(--text-primary) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
padding: 0.9rem 1.5rem 0 !important;
text-wrap: pretty;
}
/* buttons sit inside the card — no footer bar */
.swal-confirm .swal2-actions {
background: transparent !important;
border-top: none !important;
gap: 9px !important;
padding: 1.25rem 1.25rem 1.35rem !important;
}
.swal-confirm .swal2-actions:not(.swal2-loading) .swal2-styled {
flex: 1 1 0 !important;
margin: 0 !important;
}
/* confirms guard destructive actions — danger flavor, like the popover */
.swal-confirm .swal2-confirm {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.15),
rgba(var(--bs-danger-rgb), 0.08)
) !important;
color: var(--bs-danger) !important;
border-color: rgba(var(--bs-danger-rgb), 0.4) !important;
}
.swal-confirm .swal2-confirm:hover:not(:disabled) {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.25),
rgba(var(--bs-danger-rgb), 0.15)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.6) !important;
color: var(--bs-danger) !important;
}
.swal-confirm .swal2-confirm:active {
background: linear-gradient(
135deg,
rgba(var(--bs-danger-rgb), 0.35),
rgba(var(--bs-danger-rgb), 0.25)
) !important;
border-color: rgba(var(--bs-danger-rgb), 0.7) !important;
}
body[data-background-color="dark"] .form-control,
body[data-background-color="dark"] .form-group-default,
body[data-background-color="dark"] .select2-selection,
body[data-background-color="dark"] select.form-control
{
color: var(--text-primary) !important;
background-color: var(--input-bg) !important;
border-color: var(--input-border) !important;
}
input.form-control[type="text"]:read-only
{
background-color: var(--input-bg-disabled) !important;
border: 1px solid var(--input-border) !important;
}
.table tr td, .table tr th {
padding: .5rem .5rem !important;
}
.gap-1 {
gap: 0.25rem !important;
}
.gap-1_5 {
gap: 0.375rem !important;
}
.gap-2 {
gap: 0.5rem !important;
}
.gap-2_5 {
gap: 0.75rem !important;
}
.gap-3 {
gap: 1rem !important;
}
.gap-4 {
gap: 1.5rem !important;
}
.row-gap-1 {
row-gap: 0.25rem !important;
}
.row-gap-1_5 {
row-gap: 0.375rem !important;
}
.row-gap-2 {
row-gap: 0.5rem !important;
}
.row-gap-2_5 {
row-gap: 0.75rem !important;
}
.row-gap-3 {
row-gap: 1rem !important;
}
.row-gap-4 {
row-gap: 1.5rem !important;
}
.custom-select {
background-color: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}
.custom-select:focus {
background-color: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2) !important;
}
.custom-select option {
background-color: var(--select-option-bg);
color: var(--text-primary);
}
.custom-select option:checked,
.custom-select option:focus {
background-color: var(--select-option-bg-active);
color: var(--text-primary);
}
.navbar-header .dropdown-menu:after {
border-bottom-color: var(--border-normal) !important;
}
#id-page-header-wrapper {
margin-right: 0;
margin-bottom: .25rem;
}
.btn-icon.btn-xs {
height: 1.439rem;
min-width: 1.439rem;
width: 1.439rem;
font-size: .7rem;
}
textarea.form-control::-webkit-resizer {
background: linear-gradient(
-45deg,
transparent 0px,
transparent 1px,
rgba(255, 255, 255, 0.3) 1px,
rgba(255, 255, 255, 0.3) 2px,
transparent 2px,
transparent 5px,
rgba(255, 255, 255, 0.3) 5px,
rgba(255, 255, 255, 0.3) 6px,
transparent 6px,
transparent 9px,
rgba(255, 255, 255, 0.3) 9px,
rgba(255, 255, 255, 0.3) 10px,
transparent 10px
) var(--input-bg);
}
.navbar-header .dropdown-menu {
margin-top: 0;
}
.navbar-header .dropdown-menu:after {
border: none;
}
.navbar-header .navbar-nav .dropdown-menu {
left: auto;
right: 0;
}
pre {
color: var(--text-tertiary);
}
.btn {
word-wrap: normal;
}
/* ============================================
SELECT2 — unified skin
One visual language for both live themes: `default` (manual
`data-select2-init` inits) and `bootstrap` (django-select2
widgets via SELECT2_THEME — no vendor theme CSS exists for it,
this block IS its skin). This block owns colors, chips, and
dropdowns; box heights/padding live in the STANDARDIZED
FORM-CONTROL HEIGHTS section below, which sizes select2
together with every other form control.
============================================ */
/* --- container plumbing --- */
.content .select2-container,
.modal .select2-container,
.swal2-html-container .select2-container {
width: 100% !important;
}
/* sidebar.css slide-outs sit at 1000001 to clear this */
.select2-container.select2-container--open {
z-index: 1000000 !important;
}
/* collapse the original