/* Slate accent palette + off-white surfaces + dark navbar.
   Loaded after assets/css/*, overriding the template's default blue
   (#3461ff) and flat white/near-white surfaces. */

:root {
    --bs-primary: #334155;
    --bs-primary-rgb: 51, 65, 85;
}

.bg-primary {
    background-color: #334155 !important;
}

.text-primary,
.text-tiffany {
    color: #334155 !important;
}

.border-primary {
    border-color: #334155 !important;
}

.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
    color: #334155;
    background-color: rgb(51 65 85 / 10%);
}

.fm-menu .list-group a:hover {
    background-color: rgb(51 65 85 / 15%);
    color: #334155;
}

.btn-primary {
    color: #fff;
    background-color: #334155;
    border-color: #334155;
}
.btn-primary:hover {
    color: #fff;
    background-color: #1e293b;
    border-color: #1e293b;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: #1e293b;
    border-color: #1e293b;
    box-shadow: 0 0 0 .25rem rgba(51, 65, 85, .5);
}
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0f172a;
    border-color: #0f172a;
}
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(51, 65, 85, .5);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #334155;
    border-color: #334155;
}

.btn-outline-primary {
    color: #334155;
    border-color: #334155;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #334155;
    border-color: #334155;
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(51, 65, 85, .5);
}
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    color: #fff;
    background-color: #334155;
    border-color: #334155;
}
.btn-check:active + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus {
    box-shadow: 0 0 0 .25rem rgba(51, 65, 85, .5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #334155;
    background-color: transparent;
}

.btn-link {
    color: #334155;
}
.btn-link:hover {
    color: #0f172a;
}

/* The slate accent is too close to dark-theme table backgrounds. Keep the
   application listing's ID and action controls readable in dark mode. */
html.dark-theme .application-id-link {
    color: #bfdbfe;
}

html.dark-theme .application-id-link:hover,
html.dark-theme .application-id-link:focus {
    color: #ffffff;
}

html.dark-theme .application-view-link {
    color: #bfdbfe;
    border-color: #60a5fa;
}

html.dark-theme .application-view-link:hover,
html.dark-theme .application-view-link:focus,
html.dark-theme .application-view-link:active {
    color: #ffffff;
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Bootstrap components that hardcode their own active-state variable
   rather than inheriting --bs-primary */

.form-check-input:checked {
    background-color: #334155;
    border-color: #334155;
}
.form-check-input:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 .25rem rgba(51, 65, 85, .25);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #334155;
}

.pagination {
    --bs-pagination-active-bg: #334155;
    --bs-pagination-active-border-color: #334155;
}

.list-group {
    --bs-list-group-active-bg: #334155;
    --bs-list-group-active-border-color: #334155;
}

html:not(.dark-theme) .accordion {
    --bs-accordion-active-color: #1e293b;
    --bs-accordion-active-bg: #e2e8f0;
}

/* LicenseBuilder applies light, !important alternating header colors. Override
   them with dark navy shades when dark mode is active. */
html.dark-theme .custom-card .accordion-button.license-bg {
    color: #e2e8f0 !important;
    background-color: #303b4c !important;
}

html.dark-theme .custom-card .accordion-button.license-bg-alt {
    color: #cbd5e1 !important;
    background-color: #242d3b !important;
}

html.dark-theme .custom-card .accordion-button.license-bg:not(.collapsed),
html.dark-theme .custom-card .accordion-button.license-bg-alt:not(.collapsed) {
    color: #f8fafc !important;
    background-color: #3b4758 !important;
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 12%);
}

html.dark-theme .custom-card .accordion-button.license-bg:focus,
html.dark-theme .custom-card .accordion-button.license-bg-alt:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 .25rem rgb(148 163 184 / 20%);
}

/* Expanded license data is rendered from a light-mode form builder. Keep its
   read-only controls, headings, and tables legible without bright surfaces. */
html.dark-theme .custom-card .accordion-body {
    color: #dbe2ea;
    background-color: #1c2739;
}

html.dark-theme .custom-card .accordion-body h1,
html.dark-theme .custom-card .accordion-body h2,
html.dark-theme .custom-card .accordion-body h3,
html.dark-theme .custom-card .accordion-body h4,
html.dark-theme .custom-card .accordion-body h5,
html.dark-theme .custom-card .accordion-body h6,
html.dark-theme .custom-card .accordion-body .license-section-title {
    color: #f1f5f9;
}

html.dark-theme .custom-card .accordion-body .form-label {
    color: #b9c4d2;
}

html.dark-theme .custom-card .accordion-body input,
html.dark-theme .custom-card .accordion-body select,
html.dark-theme .custom-card .accordion-body textarea {
    color: #edf2f7 !important;
    background-color: #2b3748 !important;
    border-color: #536174 !important;
}

html.dark-theme .custom-card .accordion-body .form-control:disabled,
html.dark-theme .custom-card .accordion-body .form-control[readonly],
html.dark-theme .custom-card .accordion-body .form-select:disabled {
    color: #e2e8f0 !important;
    background-color: #263244 !important;
    opacity: 1;
}

html.dark-theme .custom-card .accordion-body .table-primary {
    --bs-table-bg: #3b4758;
    --bs-table-color: #f8fafc;
    --bs-table-border-color: #5a687c;
}

/* Off-white surfaces (page/sidebar were nearly indistinguishable from
   white cards). Scoped to :not(.dark-theme) - this file loads after
   assets/css/dark-theme.css, so an unscoped rule here would win the
   cascade and paint the page light even when dark mode is active. */

html:not(.dark-theme) body,
html:not(.dark-theme) .wrapper,
html:not(.dark-theme) .sidebar-wrapper {
    background-color: #eaecef;
}

html:not(.dark-theme) .card,
html:not(.dark-theme) .card-header {
    background-color: #f9fafb;
}

/* Dark navbar + dark sidebar logo band, matching the dark-theme navy */

.top-header .navbar,
.sidebar-wrapper .sidebar-header {
    background-color: #1a2232;
}

.sidebar-wrapper .sidebar-header {
    border-right: 1px solid #47536d;
}

.top-header .navbar {
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.top-header .navbar .top-navbar .nav-link {
    color: #cbd5e1;
}
.top-header .navbar .top-navbar .nav-link:hover {
    color: #fff;
}

.sidebar-wrapper .sidebar-header .logo-text,
.sidebar-wrapper .sidebar-header .toggle-icon {
    color: #e2e8f0;
}

/* The template's round header icons (app grid, dark-mode toggle,
   avatar, bell) default to a solid white circle, which clashes with
   the dark navbar above. Swap them for a translucent chip that sits
   on the navy background instead. */

.top-header .navbar .mobile-toggle-icon,
.top-header .navbar .search-toggle-icon,
.top-header .navbar .projects,
.top-header .navbar .notifications,
.top-header .navbar .messages {
    background-color: rgb(255 255 255 / 10%);
    color: #cbd5e1;
    box-shadow: none;
    border: 1px solid rgb(255 255 255 / 10%);
}

.top-header .navbar .mobile-toggle-icon:hover,
.top-header .navbar .search-toggle-icon:hover,
.top-header .navbar .projects:hover,
.top-header .navbar .notifications:hover,
.top-header .navbar .messages:hover {
    background-color: rgb(255 255 255 / 16%);
    color: #fff;
}

/* resources/css/style.css bumps .top-header/.navbar to z-index:1040
   (to sit above dropdowns etc.), but the sidebar was still on the base
   theme's z-index:16 - lower than the navbar. Whenever the sidebar
   overlaps the navbar (hover-expanding a collapsed desktop sidebar, or
   opening the mobile off-canvas sidebar) the navbar painted over the
   sidebar header, hiding the restore chevron entirely. */

/* .trigger-modal-samplefile (file-tip "view sample" icon) needs its own
   color rather than a Bootstrap text-* utility: text-primary is remapped
   to the dark slate accent above (invisible on the dark navbar/dropzone),
   and text-info's default pale cyan is too washed out on light surfaces.
   Scoped explicitly per theme since this file loads after dark-theme.css
   and would otherwise win the cascade in both modes. */
html:not(.dark-theme) .trigger-modal-samplefile {
    color: #0e7490 !important;
}

html.dark-theme .trigger-modal-samplefile {
    color: #22d3ee !important;
}

/* .field-tooltip-icon (generic field help tooltip, class.formrenderer.php)
   was rendering with text-muted, which is too low-contrast to notice next
   to a label in either theme. Same teal/cyan treatment as the sample-file
   icon above so both help affordances read consistently. */
html:not(.dark-theme) .field-tooltip-icon {
    color: #0e7490 !important;
}

html.dark-theme .field-tooltip-icon {
    color: #22d3ee !important;
}

.field-tooltip-icon {
    cursor: help;
    font-size: 0.95em;
    vertical-align: -0.05em;
}

.field-tooltip-icon:hover {
    opacity: 0.75;
}

.sidebar-wrapper {
    z-index: 1045;
}