/* Keysmash-inspired layout: page + navbar share one background; main body sits in a card */

:root {
    --keysmash-page-bg: #0c0c0e;
    --keysmash-card-bg: #141418;
    --keysmash-card-border: rgba(255, 255, 255, 0.08);
    --keysmash-text: #e8e8ec;
    --keysmash-muted: rgba(232, 232, 236, 0.65);
    --keysmash-link: #ffffff;
    --keysmash-link-hover: #ffffff;
    --keysmash-breadcrumb-divider: rgba(255, 255, 255, 0.35);
    --keysmash-pagination-active-bg: #ffffff;
    --keysmash-pagination-active-fg: #000000;
    --keysmash-pagination-active-outline: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] {
    --keysmash-page-bg: #e8e8ee;
    --keysmash-card-bg: #ffffff;
    --keysmash-card-border: rgba(0, 0, 0, 0.08);
    --keysmash-text: #1a1a1f;
    --keysmash-muted: rgba(26, 26, 31, 0.65);
    --keysmash-link: #1a1a1f;
    --keysmash-link-hover: #000000;
    --keysmash-breadcrumb-divider: rgba(0, 0, 0, 0.25);
    --keysmash-pagination-active-bg: #000000;
    --keysmash-pagination-active-fg: #ffffff;
    --keysmash-pagination-active-outline: rgba(255, 255, 255, 0.5);
}

.keysmash-app {
    background-color: var(--keysmash-page-bg);
    color: var(--keysmash-text);
}

html[data-theme="light"] .keysmash-app {
    background-image: linear-gradient(165deg, #e4e4ec 0%, #f0f0f6 42%, #e9e9f0 100%);
}

.keysmash-navbar {
    background-color: var(--keysmash-page-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.keysmash-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
}

.keysmash-navbar .navbar-nav .nav-link:hover,
.keysmash-navbar .navbar-nav .nav-link:focus {
    color: #fff;
}

.keysmash-navbar-logo {
    width: auto;
    display: block;
}

/* Keydata wordmark: dark theme uses keydata-on-light-bg.svg; light theme uses keydata-on-dark-bg.svg */
.keysmash-navbar-logo--lighttheme {
    display: none;
}

html[data-theme="light"] .keysmash-navbar-logo--darktheme {
    display: none;
}

html[data-theme="light"] .keysmash-navbar-logo--lighttheme {
    display: block;
}

/* Sun = switch to light (visible in dark mode); moon = switch to dark (visible in light mode) */
[data-theme="dark"] .keysmash-theme-icon-sun {
    display: inline-flex;
}

[data-theme="dark"] .keysmash-theme-icon-moon {
    display: none;
}

[data-theme="light"] .keysmash-theme-icon-sun {
    display: none;
}

[data-theme="light"] .keysmash-theme-icon-moon {
    display: inline-flex;
}

.keysmash-theme-toggle .keysmash-theme-icon {
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

main > .container, main > .container-fluid
{
    padding: 70px 15px 20px;
}

/* Centered login (narrow column, responsive padding; matches shadcn login-01 layout) */
.site-login {
    max-width: 24rem;
}

.keysmash-main--centered-login > .container {
    padding-top: 70px;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .keysmash-main--centered-login > .container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.keysmash-content-card {
    background-color: var(--keysmash-card-bg);
    border: 1px solid var(--keysmash-card-border) !important;
    border-radius: 12px;
    color: var(--keysmash-text);
}

.keysmash-content-card .card-body {
    padding: 1.5rem 1.75rem;
}

.keysmash-content-card a:not(.btn) {
    color: var(--keysmash-link);
}

.keysmash-content-card a:not(.btn):hover {
    color: var(--keysmash-link-hover);
}

.keysmash-content-card .text-muted {
    color: var(--keysmash-muted) !important;
}

.keysmash-content-card .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--keysmash-text);
    --keysmash-table-row-radius: 0.5rem;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--keysmash-text);
}

/* BS 5.3 table-hover uses --bs-table-hover-bg; app uses data-theme without data-bs-theme, so default hover is a black tint. */
html[data-theme="dark"] .keysmash-content-card .table {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.14);
}

.keysmash-content-card .table > :not(caption) > * > * {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.keysmash-content-card .table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.keysmash-content-card .table-hover > tbody > tr:hover > * {
    color: var(--keysmash-text);
}

.keysmash-content-card .table-hover > tbody > tr:hover > *:first-child {
    border-top-left-radius: var(--keysmash-table-row-radius);
    border-bottom-left-radius: var(--keysmash-table-row-radius);
}

.keysmash-content-card .table-hover > tbody > tr:hover > *:last-child {
    border-top-right-radius: var(--keysmash-table-row-radius);
    border-bottom-right-radius: var(--keysmash-table-row-radius);
}

.keysmash-content-card .form-control,
.keysmash-content-card .form-select {
    background-color: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--keysmash-text);
}

.keysmash-content-card .form-control:focus,
.keysmash-content-card .form-select:focus {
    background-color: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--keysmash-text);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.12);
}

.keysmash-content-card .form-check-input {
    background-color: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.25);
}

.keysmash-content-card .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

html[data-theme="dark"] .keysmash-content-card .form-switch .form-check-input:checked {
    background-color: #ffffff;
    border-color: #ffffff;
}

/* Status filter switches: no Bootstrap blue glow; grey thumb off, black thumb on. */
.keysmash-content-card .employee-import-request-search .form-switch .form-check-input {
    transition:
        background-position 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus {
    box-shadow: none;
    outline: none;
}

.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

html[data-theme="light"] .keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus-visible {
    outline-color: rgba(0, 0, 0, 0.35);
}

/* Inactive thumb (override Bootstrap’s blue thumb on :focus) */
.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:not(:checked),
.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239e9e9e'/%3e%3c/svg%3e");
}

.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus:not(:checked) {
    border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="light"] .keysmash-content-card .employee-import-request-search .form-switch .form-check-input:focus:not(:checked) {
    border-color: rgba(0, 0, 0, 0.25);
}

/* Active thumb */
.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:checked,
.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}

.keysmash-content-card .employee-import-request-search .form-switch .form-check-input:checked:focus {
    border-color: #ffffff;
}

html[data-theme="light"] .keysmash-content-card .employee-import-request-search .form-switch .form-check-input:checked:focus {
    border-color: #198754;
}

.keysmash-content-card .page-link {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--keysmash-link);
}

.keysmash-content-card .page-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--keysmash-link-hover);
}

/* Drop Bootstrap’s blue focus ring; keep neutral focus styling */
.keysmash-content-card .page-link:focus {
    box-shadow: none;
    outline: none;
}

.keysmash-content-card .page-item:not(.disabled):not(.active) .page-link:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--keysmash-link-hover);
    border-color: rgba(255, 255, 255, 0.12);
}

.keysmash-content-card .page-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

.keysmash-content-card .page-item.active .page-link,
.keysmash-content-card .page-item.active .page-link:hover,
.keysmash-content-card .page-item.active .page-link:focus {
    background-color: var(--keysmash-pagination-active-bg);
    border-color: var(--keysmash-pagination-active-bg);
    color: var(--keysmash-pagination-active-fg);
}

.keysmash-content-card .page-item.active .page-link:focus-visible {
    outline-color: var(--keysmash-pagination-active-outline);
}

/* Primary actions: match site black (footer, active pagination), not Bootstrap blue */
.keysmash-content-card .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a1a1a;
    --bs-btn-hover-border-color: #1a1a1a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2a2a2a;
    --bs-btn-active-border-color: #2a2a2a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(0, 0, 0, 0.35);
    --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.35);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.keysmash-content-card .btn-primary:focus {
    box-shadow: none;
}

.keysmash-content-card .btn-primary:focus-visible {
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

html[data-theme="light"] .keysmash-content-card .btn-primary:focus-visible {
    outline-color: rgba(0, 0, 0, 0.35);
}

.keysmash-content-card .page-item.disabled .page-link {
    background-color: rgba(0, 0, 0, 0.15);
    color: var(--keysmash-muted);
}

.keysmash-breadcrumb {
    background-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
}

.keysmash-breadcrumb .breadcrumb-item a {
    color: var(--keysmash-muted);
    text-decoration: none;
}

.keysmash-breadcrumb .breadcrumb-item a:hover {
    color: var(--keysmash-text);
}

.keysmash-breadcrumb .breadcrumb-item.active {
    color: var(--keysmash-text);
    opacity: 0.92;
}

.keysmash-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--keysmash-breadcrumb-divider);
}

.footer {
    font-size: .9em;
}

/* Keysmash.cz-style footer: solid bar, centered credit line (content unchanged) */
.keysmash-footer {
    background-color: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0a0a0;
}

.keysmash-footer-legal {
    color: #a0a0a0;
    letter-spacing: 0.01em;
}

.keysmash-footer-dot {
    opacity: 0.65;
}

.keysmash-footer a {
    color: #fff;
    text-decoration: none;
}

.keysmash-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.keysmash-navbar .btn-link {
    color: rgba(255, 255, 255, 0.65);
}

.keysmash-navbar .btn-link:hover {
    color: #fff;
}

.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.keysmash-content-card a.asc:after {
    border-bottom-color: var(--keysmash-text);
}

.keysmash-content-card a.desc:after {
    border-top-color: var(--keysmash-text);
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.keysmash-content-card .hint-block {
    color: var(--keysmash-muted);
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.keysmash-content-card .error-summary {
    color: #f8a8a8;
    background: rgba(169, 68, 66, 0.15);
    border-left-color: #c55;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

/* Breadcrumb default (layouts using Keysmash use .keysmash-breadcrumb above) */
.breadcrumb:not(.keysmash-breadcrumb) {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item > a {
    text-decoration: none;
}

/* Light mode: navbar stays Bootstrap navbar-dark; override colors + toggler for light page background */
html[data-theme="light"] .keysmash-navbar {
    background-color: transparent !important;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease;
}

/* Light mode, scrolled: match footer bar (solid black, light chrome) */
html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled {
    background-color: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled .keysmash-navbar-logo--darktheme {
    display: block;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled .keysmash-navbar-logo--lighttheme {
    display: none;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled.navbar-dark .navbar-nav .nav-link:hover,
html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff !important;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled.navbar-dark .navbar-toggler-icon {
    filter: none;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled .btn-link {
    color: rgba(255, 255, 255, 0.65);
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled .btn-link:hover {
    color: #fff;
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled form > button.logout {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled form > button.logout:focus,
html[data-theme="light"] .keysmash-navbar.keysmash-navbar--scrolled form > button.logout:hover {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .keysmash-navbar.navbar-dark .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="light"] .keysmash-navbar.navbar-dark .navbar-nav .nav-link:hover,
html[data-theme="light"] .keysmash-navbar.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.95) !important;
}

html[data-theme="light"] .keysmash-navbar.navbar-dark .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .keysmash-navbar.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

html[data-theme="light"] .keysmash-navbar .btn-link {
    color: rgba(0, 0, 0, 0.65);
}

html[data-theme="light"] .keysmash-navbar .btn-link:hover {
    color: #000;
}

html[data-theme="light"] .navbar form > button.logout {
    color: rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .navbar form > button.logout:focus,
html[data-theme="light"] .navbar form > button.logout:hover {
    color: rgba(0, 0, 0, 0.78);
}

html[data-theme="light"] .keysmash-content-card .form-control,
html[data-theme="light"] .keysmash-content-card .form-select {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--keysmash-text);
}

html[data-theme="light"] .keysmash-content-card .form-control:focus,
html[data-theme="light"] .keysmash-content-card .form-select:focus {
    background-color: #fff;
    border-color: rgba(13, 128, 104, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(13, 128, 104, 0.12);
    color: var(--keysmash-text);
}

html[data-theme="light"] .keysmash-content-card .form-check-input {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .keysmash-content-card .table > :not(caption) > * > * {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .keysmash-content-card .table thead th {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .keysmash-content-card .page-link {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .keysmash-content-card .page-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .keysmash-content-card .page-item:not(.disabled):not(.active) .page-link:focus {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--keysmash-text);
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .keysmash-content-card .page-link:focus-visible {
    outline-color: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .keysmash-content-card .page-item.disabled .page-link {
    background-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .keysmash-content-card .error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left-color: #eed3d7;
}