/* HireMe — Velzon layout fixes (do not override Velzon footer/shell globally) */

html {
    scroll-behavior: auto !important;
    overflow-x: hidden !important;
    max-width: 100%;
}

body {
    overflow-x: hidden !important;
    max-width: 100%;
}

#layout-wrapper,
.main-content,
.page-content,
.container-fluid {
    overflow-x: hidden;
    max-width: 100%;
}

/* Footer sits at bottom of main column (right of sidebar), same as WebSocket Velzon */
.main-content {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1 0 auto;
    padding-bottom: var(--vz-grid-gutter-width, 1.5rem) !important;
}

/* Keep page title below fixed topbar (Velzon negative margins can overlap header) */
[data-layout="vertical"] .main-content > .page-content {
    padding-top: calc(70px + var(--vz-grid-gutter-width, 1.5rem)) !important;
}

/* Admin: topbar + sidebar scroll with page (no fixed chrome) */
html[data-hireme-scroll-chrome="1"] #page-topbar,
html[data-hireme-scroll-chrome="1"] .navbar-menu {
    position: absolute !important;
}

html[data-hireme-scroll-chrome="1"][data-layout="vertical"] .main-content > .page-content {
    padding-top: var(--vz-grid-gutter-width, 1.5rem) !important;
}

html[data-hireme-scroll-chrome="1"][data-layout="horizontal"] .main-content > .page-content {
    padding-top: var(--vz-grid-gutter-width, 1.5rem) !important;
    margin-top: 0 !important;
}

/* CKEditor: toolbar scrolls with the field (no sticky panel; JS also disables StickyPanel) */
.ck.ck-editor .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor .ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky,
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}
.ck.ck-editor .ck-sticky-panel__placeholder {
    display: none !important;
    height: 0 !important;
}

[data-layout="vertical"] .main-content .page-title-box {
    margin: 0 0 1rem 0 !important;
    padding: 0.25rem 0 0.75rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-layout="vertical"] .main-content .page-title-box h4 {
    font-size: 1rem !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vz-heading-color, inherit);
}

/* Two column: same top spacing + page title as vertical (Velzon negative margins overlap topbar) */
[data-layout="twocolumn"] .main-content > .page-content {
    padding-top: calc(70px + var(--vz-grid-gutter-width, 1.5rem)) !important;
}

[data-layout="twocolumn"] .main-content .page-title-box {
    margin: 0 0 1rem 0 !important;
    padding: 0.25rem 0 0.75rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-layout="twocolumn"] .main-content .page-title-box h4 {
    font-size: 1rem !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vz-heading-color, inherit);
}

[data-layout="twocolumn"] .app-menu .hireme-app-menu-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
}

[data-layout="twocolumn"] #two-column-menu {
    position: relative;
    z-index: 2;
}

[data-layout="twocolumn"] .app-menu .navbar-nav {
    height: calc(100vh - 70px) !important;
    overflow-y: auto;
}

@media (min-width: 1024.1px) {
    [data-layout="horizontal"] .main-content > .page-content {
        margin-top: 70px;
        padding-top: calc(52px + var(--vz-grid-gutter-width, 1.5rem)) !important;
    }
}

@media (max-width: 1024px) {
    [data-layout="horizontal"] .main-content > .page-content {
        padding-top: calc(70px + var(--vz-grid-gutter-width, 1.5rem)) !important;
    }
}

/*
 * Footer lives inside .main-content (already inset for the sidebar in every layout).
 * Keep it in normal flex flow at the bottom of the main column instead of Velzon's
 * absolute positioning: it then follows the column in vertical, horizontal, two column,
 * semibox, boxed and detached modes, never overlaps page content, and grows when the
 * two columns stack on small screens.
 */
.main-content > .footer {
    position: relative !important;
    inset: auto !important;
    flex-shrink: 0;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    min-height: 60px;
    margin-top: auto !important;
    padding: 18px calc(var(--vz-grid-gutter-width, 1.5rem) * 0.5);
    display: flex;
    align-items: center;
    color: var(--vz-footer-color);
    background-color: var(--vz-footer-bg);
    border-top: 1px solid var(--vz-border-color, rgba(0, 0, 0, 0.08));
    z-index: 2;
}

.main-content > .footer > .container-fluid {
    width: 100%;
}

/* Detached sidebar: Velzon keeps the footer transparent with a dashed rule */
@media (min-width: 1024.1px) {
    [data-layout="vertical"][data-layout-style="detached"] .main-content > .footer {
        background-color: transparent;
        border-top-style: dashed;
    }
}

/* Semibox: footer stays inside the boxed content column */
[data-layout="semibox"] .main-content > .footer {
    background-color: transparent;
}

/* Sidebar above page content (vertical only — horizontal topnav stays below topbar) */
:is([data-layout="vertical"], [data-layout="semibox"], [data-layout="twocolumn"]) .app-menu.navbar-menu {
    z-index: 1002;
}

[data-layout="horizontal"] .app-menu.navbar-menu {
    z-index: 100;
}

:is([data-layout="vertical"], [data-layout="semibox"], [data-layout="twocolumn"]) .app-menu .hireme-app-menu-scroll {
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

:is([data-layout="vertical"], [data-layout="semibox"], [data-layout="twocolumn"]) .app-menu .hireme-app-menu-scroll.h-100,
:is([data-layout="vertical"], [data-layout="semibox"], [data-layout="twocolumn"]) .app-menu .hireme-app-menu-scroll[data-simplebar] {
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
}

/* Horizontal topnav: must stay one row — full-height sidebar rules hide page content */
[data-layout="horizontal"] .app-menu.navbar-menu {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}

[data-layout="horizontal"] .app-menu .hireme-app-menu-scroll,
[data-layout="horizontal"] .app-menu .hireme-app-menu-scroll.h-100,
[data-layout="horizontal"] .app-menu .hireme-app-menu-scroll[data-simplebar] {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

[data-layout="horizontal"] .main-content {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.app-menu .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.app-menu .navbar-nav .nav-link > span:not(.badge) {
    flex: 1 1 auto;
}

.app-menu .navbar-nav .nav-link .badge {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 10px;
    padding: 0.25em 0.5em;
    line-height: 1.2;
}

.app-menu .menu-title span {
    font-size: 11px;
    letter-spacing: 0.04em;
}

#page-topbar .badge.rounded-pill {
    min-width: 18px;
    padding: 0.15em 0.45em;
    font-size: 10px;
}

#page-topbar,
#page-topbar .layout-width,
#page-topbar .navbar-header {
    overflow: visible !important;
}

#page-topbar .topbar-user.topbar-head-dropdown {
    position: relative;
}

#page-topbar .topbar-head-dropdown .dropdown-menu {
    min-width: 12rem;
    position: absolute !important;
    inset: auto 0 auto auto !important;
    top: 100% !important;
    margin-top: 6px !important;
    transform: none !important;
}

#page-topbar .topbar-head-dropdown .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Sidebar user avatar enabled: keep topbar account menu available */
[data-sidebar-user-show] #page-topbar .topbar-user.topbar-head-dropdown {
    display: flex !important;
}

/* legacy theme submit buttons — hide "Please wait" until click */
.btn .indicator-progress,
button .indicator-progress,
[data-hireme-loading]:not([data-hireme-loading="on"]) .indicator-progress {
    display: none !important;
}

[data-hireme-loading="on"] .indicator-label {
    display: none !important;
}

[data-hireme-loading="on"] .indicator-progress {
    display: inline-flex !important;
    align-items: center;
}

/* Filter toolbar counts — readable in light & dark (not badge-light on btn-light) */
.hireme-filter-count,
.main-content .role-filter .badge,
.main-content .filter-btn .badge,
.modal .role-filter .badge,
.modal .filter-btn .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.2em 0.5em;
    border-radius: 999px;
    vertical-align: middle;
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.12) !important;
    color: var(--vz-primary, #405189) !important;
    border: 1px solid rgba(var(--vz-primary-rgb, 64, 81, 137), 0.2);
}

.main-content .role-filter.btn-light-primary .badge,
.main-content .role-filter.active .badge,
.main-content .filter-btn.active .badge,
.modal .role-filter.btn-light-primary .badge,
.modal .role-filter.active .badge {
    background-color: #fff !important;
    color: var(--vz-primary, #405189) !important;
    border-color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .hireme-filter-count,
[data-bs-theme="dark"] .main-content .role-filter.btn-light .badge,
[data-bs-theme="dark"] .main-content .filter-btn:not(.active) .badge {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--vz-body-color, #e9ecef) !important;
    border-color: rgba(255, 255, 255, 0.22);
}

[data-bs-theme="dark"] .main-content .role-filter.btn-light-primary .badge,
[data-bs-theme="dark"] .main-content .role-filter.active .badge,
[data-bs-theme="dark"] .main-content .filter-btn.active .badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35);
}

/* Sidebar / checkbox filter counts (jobs browse filters) */
.main-content .form-check-label .badge.badge-light,
.main-content .browse-filter-scroll .badge.badge-light {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.12) !important;
    color: var(--vz-primary, #405189) !important;
    font-weight: 700;
    border: 1px solid rgba(var(--vz-primary-rgb, 64, 81, 137), 0.15);
}

[data-bs-theme="dark"] .main-content .form-check-label .badge.badge-light,
[data-bs-theme="dark"] .main-content .browse-filter-scroll .badge.badge-light {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--vz-body-color, #e9ecef) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Login / auth cover — avoid missing cover-pattern.png (404) */
.auth-bg-cover > .bg-overlay {
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.07) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.07) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 28px 28px !important;
    background-position: center !important;
    background-color: transparent !important;
    opacity: 0.45;
}