@font-face {
    font-family: "Sixtyfour";
    src: url("fonts/Sixtyfour[BLED,SCAN].woff2") format("woff2");
}

/* Force color-scheme to match data-bs-theme, not OS preference */
:root {
    color-scheme: light;
}
:root[data-bs-theme="dark"] {
    color-scheme: dark;
}

:root {
    --navbar-height: 56px;
    --sidemenu-width: 230px;
    --sidemenu-width-collapsed: 65px;

    --is-body-bg: #f2f5f7;

    --is-ascii-frame-bg: #ffffff;

    --is-navbar-bg: #0d47a1;
    --is-navbar-divider: #ffffff;

    --btn-navbar-bg: #2c55ad;
    --btn-navbar-bg-hover: #3a61b3;
    --btn-navbar-color: #ffffff;
    --btn-navbar-color-hover: #ffffff;

    --is-nav-link-color-hover: #000;
    --is-nav-link-bg-hover: #e0ebf7;
    --is-nav-link-color-active: #fff;
    --is-nav-link-bg-active: #1863d1;
    --is-nav-link-icon: #dadada;

    --is-card-link-color: var(--bs-link-color);

    /* Inline code */
    --is-inline-code-bg: #e9ecef;
    --is-inline-code-color: #476582;

    --container-max-xxxl: 1600px;
    --container-max-xxxl-wide: 1520px;
}

.navbar {
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

.navbar .btn-light {
    --bs-btn-bg: #d8e3ff;
    --bs-btn-color: #212529;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #c1d2ff;
    --bs-btn-active-bg: #c1d2ff;
}

.top-navbar {
    --is-top-navbar-bg: #ffffff;
    --is-top-navbar-link: #575757;
    --is-top-navbar-hover-bg: #3498db;
    --is-top-navbar-hover-color: #ffffff;
    --is-top-navbar-active-bg: #3498db;
    --is-top-navbar-active-color: #ffffff;
}

.ascii-art-label, .breadcrumb-container {
    --is-ascii-art-label-bg: #ffffff;
    --is-ascii-art-label-color: #000000;
    --is-ascii-art-label-btn-color: #575757;
    --is-ascii-art-label-border-color: #dee2e6;
}

.sidebar .nav-link {
    --bs-nav-link-color: #191818;
}

#mainContent .card {
    --bs-card-bg: #fff;
    --bs-card-color: rgb(33, 37, 41);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

#mainContent .card-href:hover {
    --is-card-href-hover-bg: #f1f4f6;
}

#mainContent .card.invert-colors {
    --bs-card-bg: #000;
    --bs-card-color: rgb(239, 241, 244);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
}

.card-header {
    --is-card-cap-icon: #7e7e7e;
    --is-card-cap-icon-hover: #000;
}

.alert-desktop {
    --is-primary-color:#052c65;
    --is-primary-bg: #eff6ff;
    --is-primary-border: #7db1ff;
    --is-primary-link:#fff;
}

.btn-main-content {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2469cd;
    --bs-btn-border-color: #2469cd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2469cd;
    --bs-btn-disabled-border-color: #2469cd;
}

.btn-main-content-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #e8e8e8;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-control {
    --bs-btn-color: #000;
    --bs-btn-bg: #f4f5f7;
    --bs-btn-border-color: #a9a9a9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.timeline {
    --is-timeline-color: #4C84C2FF;
    --is-timeline-dot-color: #ffffff;
    --is-timeline-header-bg: #f2f2f6;
}

.bg-control {
    --is-bg-control: #ebebeb;
    --is-bg-control-color: #101010;
}

@media (max-width: 991.98px) {
    :root {
        --is-navbar-divider: #000;
    }

    .sidemenu .nav-link {
        --bs-nav-link-color: #191818;
    }
}

@media (min-width: 992px) {
    .sidemenu .nav-link {
        --bs-nav-link-color: #fff;
    }
}

/* ================ */
/* ===== Dark ===== */
/* ================ */
:root[data-bs-theme="dark"] {
    --is-body-bg: #212529;

    --is-ascii-frame-bg: #16171b;
}

:root[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: #1a1d21!important;
}

:root[data-bs-theme="dark"] .top-navbar {
    --is-top-navbar-bg: #1a1d21;
    --is-top-navbar-link: #d0d0d0;
    --is-top-navbar-hover-bg: #2c3e50;
    --is-top-navbar-hover-color: #ffffff;
    --is-top-navbar-active-bg: #4c8cff;
    --is-top-navbar-active-color: #ffffff;
}

:root[data-bs-theme="dark"] .ascii-art-label,
:root[data-bs-theme="dark"] .breadcrumb-container {
    --is-ascii-art-label-bg: #16171b;
    --is-ascii-art-label-color: #e0e0e0;
    --is-ascii-art-label-btn-color: #bdbdbd;
    --is-ascii-art-label-border-color: #333333;
}

:root[data-bs-theme="dark"] .sidebar .nav-link {
    --bs-nav-link-color: #e0e0e0;
}

:root[data-bs-theme="dark"] .ascii-frame {
    border-image: url("/images/ascii-frame.dark.png") 15 / 15px / 0 round;
}

:root[data-bs-theme="dark"] #mainContent .card {
    --bs-card-bg: #16171b;
    --bs-card-color: #d8d9d;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.20);
}

:root[data-bs-theme="dark"] .alert-desktop {
    --is-primary-color: #dbe8ff;
    --is-primary-bg: #102030;
    --is-primary-border: #3d6fb5;
    --is-primary-link: #ffffff;
}

:root[data-bs-theme="dark"] #mainContent .card-href:hover {
    --is-card-href-hover-bg: #2a2d31;
}

:root[data-bs-theme="dark"] .timeline {
    --is-timeline-color: #58a6ff;
    --is-timeline-dot-color: #16171b;
    --is-timeline-header-bg: #1e2127;
}

:root[data-bs-theme="dark"] .bg-control {
    --is-bg-control: #000;
    --is-bg-control-color: #eff6ff;
}

@media (max-width: 991.98px) {
    :root[data-bs-theme="dark"] .sidemenu .nav-link {
        --bs-nav-link-color: #ece5e5;
    }
}

/* ========================= */
/* === Tool Components === */
/* ========================= */

/* MonoGrid Editor */
:root {
    --mg-grid: rgba(0,0,0,.10);
    --mg-cell-bg: rgba(255,230,150,.6);
    --mg-text: #111;
    --mg-caret: #111;
    --mg-border: rgba(0,0,0,.25);
    --mg-bg: #fff;
    --mg-status-text: #666;
    --mg-status-bg: #fafafa;
    --mg-scrollbar: rgba(0,0,0,.3);
    --mg-scrollbar-hover: rgba(0,0,0,.5);
}

:root[data-bs-theme="dark"] {
    --mg-grid: rgba(255,255,255,.12);
    --mg-cell-bg: rgba(100,140,200,.35);
    --mg-text: #e0e0e0;
    --mg-caret: #e0e0e0;
    --mg-border: rgba(255,255,255,.20);
    --mg-bg: #1a1d21;
    --mg-status-text: #9ca3af;
    --mg-status-bg: #16171b;
    --mg-scrollbar: rgba(255,255,255,.3);
    --mg-scrollbar-hover: rgba(255,255,255,.5);
}

:root {
    /* Section backgrounds */
    --is-section-bg: #ffffff;
    --is-section-border: #eee;
    --is-section-shadow: 0 2px 10px rgba(0,0,0,0.05);

    /* Stat cards / KPI boxes */
    --is-stat-bg: #f8f9fa;
    --is-stat-border: #e9ecef;
    --is-stat-value: #495057;
    --is-stat-label: #6c757d;

    /* Bars (progress, frequency) */
    --is-bar-bg: #eee;
    --is-bar-fill: #495057;
    --is-bar-text: #666;

    /* Tables */
    --is-table-border: #eee;
    --is-table-header: #888;
    --is-table-label: #666;
    --is-table-value: inherit;

    /* Chips / badges */
    --is-chip-bg: #f0f0f0;
    --is-chip-color: inherit;
    --is-chip-primary-bg: #495057;
    --is-chip-primary-color: #fff;
    --is-chip-secondary-bg: #e9ecef;
    --is-chip-secondary-color: #495057;

    /* Help text */
    --is-help-bg: #f8f9fa;
    --is-help-color: #495057;
    --is-help-border: #0d6efd;

    /* Code/ASCII input */
    --is-code-bg: #1a1a2e;
    --is-code-color: #eee;
    --is-code-border: #444;
    --is-code-focus: #6c5ce7;
    --is-code-placeholder: #666;

    /* Muted text */
    --is-muted: #888;
    --is-muted-light: #adb5bd;
}

:root[data-bs-theme="dark"] {
    /* Section backgrounds */
    --is-section-bg: #1e2127;
    --is-section-border: #333;
    --is-section-shadow: 0 2px 10px rgba(0,0,0,0.3);

    /* Stat cards / KPI boxes */
    --is-stat-bg: #16171b;
    --is-stat-border: #2a2d31;
    --is-stat-value: #e0e0e0;
    --is-stat-label: #9ca3af;

    /* Bars (progress, frequency) */
    --is-bar-bg: #2a2d31;
    --is-bar-fill: #6b7280;
    --is-bar-text: #9ca3af;

    /* Tables */
    --is-table-border: #333;
    --is-table-header: #9ca3af;
    --is-table-label: #9ca3af;
    --is-table-value: #e0e0e0;

    /* Chips / badges */
    --is-chip-bg: #2a2d31;
    --is-chip-color: #e0e0e0;
    --is-chip-primary-bg: #4b5563;
    --is-chip-primary-color: #fff;
    --is-chip-secondary-bg: #2a2d31;
    --is-chip-secondary-color: #e0e0e0;

    /* Help text */
    --is-help-bg: #1a1d21;
    --is-help-color: #d0d0d0;
    --is-help-border: #3b82f6;

    /* Inline code */
    --is-inline-code-bg: #2a2d31;
    --is-inline-code-color: #a8c7e0;

    /* Code/ASCII input */
    --is-code-bg: #0d0d14;
    --is-code-color: #e0e0e0;
    --is-code-border: #333;
    --is-code-focus: #8b7cf7;
    --is-code-placeholder: #555;

    /* Muted text */
    --is-muted: #9ca3af;
    --is-muted-light: #6b7280;
}