/* AdminLTE 2.x to 3.x Compatibility Layer */
/* This file maps old AdminLTE 2.x classes to new 3.x classes for backward compatibility */

/* Make sidebar sticky and scrollable - fixed height and width */
.main-sidebar,
aside.main-sidebar {
    position: fixed !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 250px !important;
    max-width: 250px !important;
    overflow: hidden !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 810 !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, max-width 0.3s ease-in-out !important;
}

/* Sidebar inner content wrapper */
.main-sidebar .sidebar,
.sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Logo section - sticky at top, prevent scroll overlap */
.main-sidebar .brand-link,
.brand-link {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #367fa9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* HR Genie logo sizing: public/css/hr-genie-brand.css (loaded last from vendor/adminlte/page.blade.php). */

/* Ensure brand link content fits within sidebar */
.main-sidebar .brand-link * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Adjust content wrapper when sidebar is present */
.content-wrapper,
.main-content {
    margin-left: 250px !important;
    transition: margin-left 0.3s ease-in-out !important;
}

/* For collapsed sidebar - hide the sidebar completely */
.sidebar-collapse .main-sidebar,
.sidebar-collapse aside.main-sidebar {
    transform: translateX(-100%) !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Ensure sidebar inner content is also hidden when collapsed */
.sidebar-collapse .main-sidebar .sidebar,
.sidebar-collapse .main-sidebar *,
.sidebar-collapse aside.main-sidebar .sidebar,
.sidebar-collapse aside.main-sidebar * {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Adjust content wrapper when sidebar is collapsed */
.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-content {
    margin-left: 0 !important;
}

/* Sidebar navigation container - single scroll parent is .sidebar (see below) */
.main-sidebar .nav-sidebar,
.main-sidebar .nav.nav-sidebar,
.nav-sidebar {
    flex: 1 1 auto !important;
    overflow: visible !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Navigation items - constrain to sidebar width */
.main-sidebar .nav-item,
.sidebar .nav-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation links - prevent overflow, keep within sidebar */
.main-sidebar .nav-link,
.sidebar .nav-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* allow flex shrink so text can ellipsis */
    box-sizing: border-box !important;
    padding: 0.5rem 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
}

/* Navigation icons */
.main-sidebar .nav-icon,
.sidebar .nav-icon {
    flex-shrink: 0 !important;
    width: 1.2rem !important;
    margin-right: 0.5rem !important;
}

/* Navigation text */
.main-sidebar .nav-link p,
.sidebar .nav-link p {
    flex: 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Navbar search overlay - constrain so it doesn't span the whole top bar.
   AdminLTE defaults the .navbar-search-block to a full-width absolute overlay
   (left:0; right:0). Cap it to a compact, right-aligned search box instead. */
.navbar .navbar-search-block {
    left: auto !important;
    right: 1rem !important;
    width: 260px !important;
    max-width: calc(100% - 2rem) !important;
    padding: 0 !important;
}

.navbar .navbar-search-block .input-group {
    width: 100% !important;
}

/* Sidebar search widget - constrain to sidebar width */
.main-sidebar [data-widget="sidebar-search"],
.sidebar [data-widget="sidebar-search"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem !important;
}

/* Search input group */
.main-sidebar .input-group,
.sidebar .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Search input */
.main-sidebar .form-control-sidebar,
.sidebar .form-control-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Search button */
.main-sidebar .btn-sidebar,
.sidebar .btn-sidebar {
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: none !important;
}

/* Sidebar menu headers */
.main-sidebar .nav-header,
.sidebar .nav-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 1rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Sidebar submenu items */
.main-sidebar .nav-treeview .nav-item,
.sidebar .nav-treeview .nav-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Level 1 submenu links (direct children under a module) */
.main-sidebar .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link,
.sidebar .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 2rem !important;
}

/* Level 2+ nested submenu links */
.main-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link,
.sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 3.25rem !important;
}

/* Nested submenu parent togglers */
.main-sidebar .nav-treeview > .nav-item.has-treeview > .nav-link,
.sidebar .nav-treeview > .nav-item.has-treeview > .nav-link {
    padding-left: 2rem !important;
}

/* Section headers inside expanded module submenus */
.main-sidebar .nav-treeview > .nav-header,
.sidebar .nav-treeview > .nav-header {
    padding: 0.7rem 1rem 0.3rem 2rem !important;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42) !important;
    background: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-sidebar .nav-treeview > .nav-header:first-child,
.sidebar .nav-treeview > .nav-header:first-child {
    margin-top: 0;
    padding-top: 0.35rem !important;
}

/* Compact bullet icons for submenu leaves */
.main-sidebar .nav-treeview .nav-icon,
.sidebar .nav-treeview .nav-icon {
    width: 0.55rem !important;
    margin-right: 0.65rem !important;
    font-size: 0.45rem !important;
    opacity: 0.65;
}

/* Avoid universal * selector here - it breaks AdminLTE 3 sidebar flex layout
   (nav-link, nav-icon, and treeview). Only constrain specific containers. */

/* Override any Bootstrap or AdminLTE width classes within sidebar */
.main-sidebar .w-100,
.main-sidebar .w-auto,
.sidebar .w-100,
.sidebar .w-auto {
    width: 100% !important;
    max-width: 100% !important;
}

/* Scrollbar styling for sidebar - single scrollbar only */
.main-sidebar .sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: #2c3b41 !important;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: #3c8dbc !important;
    border-radius: 3px !important;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
    background: #357ca5 !important;
}

/* Firefox scrollbar styling */
.main-sidebar .sidebar {
    scrollbar-width: thin !important;
    scrollbar-color: #3c8dbc #2c3b41 !important;
}

/* Chart and Canvas containment - prevent overflow from boxes */
.box-body canvas,
.box-body .chart-container,
.box canvas,
.box .chart-container {
    max-width: 100% !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Specific fix for canvas elements */
canvas {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Chart containers should be responsive */
.chart-container,
.chart-responsive {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Ensure chart parent containers don't overflow */
.box-body .row,
.box .row {
    max-width: 100% !important;
    overflow: hidden !important;
}

.box-body .col-md-12,
.box .col-md-12 {
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Box classes -> Card classes */
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box-primary {
    border-top-color: #3c8dbc;
}

.box-info {
    border-top-color: #00c0ef;
}

.box-warning {
    border-top-color: #f39c12;
}

.box-danger {
    border-top-color: #dd4b39;
}

.box-success {
    border-top-color: #00a65a;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #ffffff;
}

/* Sidebar menu classes for OLD format */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu>li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar-menu>li>a {
    padding: 12px 5px 12px 15px;
    display: block;
    text-decoration: none;
}

.sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 5px;
}

.sidebar-menu .treeview.active>.treeview-menu,
.sidebar-menu .treeview.menu-open>.treeview-menu {
    display: block;
}

.sidebar-menu .treeview>a>.pull-right-container>.fa-angle-left,
.sidebar-menu .treeview>a>.fa-angle-left {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 10px;
    transition: transform 0.5s ease;
}

.sidebar-menu .treeview.active>a>.fa-angle-left,
.sidebar-menu .treeview.menu-open>a>.fa-angle-left,
.sidebar-menu .treeview.active>a>.pull-right-container>.fa-angle-left,
.sidebar-menu .treeview.menu-open>a>.pull-right-container>.fa-angle-left {
    transform: rotate(-90deg);
}

.sidebar-menu .treeview-menu>li {
    margin: 0;
}

.sidebar-menu .treeview-menu>li>a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 14px;
}

/* Pull right container */
.pull-right-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
}

/* Content wrapper adjustments */
.content-wrapper {
    min-height: calc(100vh - 50px);
}

/* DataTable fixes for AdminLTE 3.x - Match AdminLTE 2.x Layout */
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

table.dataTable {
    width: 100% !important;
    margin-top: 10px !important;
}

/* Ensure table headers show sorting indicators */
table.dataTable thead th {
    position: relative !important;
    cursor: pointer !important;
}

/* DataTables swaps `sorting` for `sorting_asc`/`sorting_desc` rather than adding
   to it, so the sorted column matches none of the base rule below. The font has to
   be declared for all three states or the arrow falls back to the body font and
   renders as a tofu box - which is what the sorted header was showing. */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

table.dataTable thead th.sorting:after {
    content: "\f0dc" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.5 !important;
}

table.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
    opacity: 1 !important;
}

table.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
    opacity: 1 !important;
}

/* Ensure table headers are clickable */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer !important;
    user-select: none !important;
}

table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
    background-color: #f5f5f5 !important;
}

/* DataTables controls positioning - AdminLTE 2.x style - STRONG OVERRIDES */

/* Ensure the wrapper row displays properly */
.dataTables_wrapper .row:first-child {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Override Bootstrap column classes in DataTables wrapper */
.dataTables_wrapper .row:first-child>[class*="col-"] {
    float: left !important;
    width: auto !important;
    display: block !important;
}

/* Show entries dropdown - position it BEFORE buttons */
.dataTables_wrapper .dataTables_length,
#dataTableBuilder_length,
div.dataTables_length {
    float: left !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_length label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: normal !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_length select {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    text-align: right !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    right: 0 !important;
    width: auto !important;
}

/* More specific selector for search filter */
#dataTableBuilder_filter,
div.dataTables_filter,
.dataTables_wrapper>.row:first-child .dataTables_filter {
    float: right !important;
    text-align: right !important;
    margin-left: auto !important;
    display: block !important;
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: normal !important;
    white-space: nowrap !important;
    text-align: left !important;
    display: inline-block !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 200px !important;
}

.dataTables_wrapper .dataTables_info {
    float: left !important;
    padding-top: 8px !important;
    clear: both !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: right !important;
    padding-top: 8px !important;
    display: block !important;
    visibility: visible !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* Ensure pagination UL is aligned to the right */
.dataTables_wrapper .dataTables_paginate .pagination {
    float: right !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Pagination buttons - AdminLTE 2.x style */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box !important;
    display: inline-block !important;
    min-width: 1.5em !important;
    padding: 0.5em 1em !important;
    margin-left: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 2px !important;
    background: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #333 !important;
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border: 1px solid #3c8dbc !important;
    background: #3c8dbc !important;
    background: linear-gradient(to bottom, #5fa1c7 0%, #3c8dbc 100%) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    cursor: not-allowed !important;
    color: #999 !important;
    border: 1px solid #ddd !important;
    background: white !important;
    opacity: 0.5 !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 1em !important;
}

/* Override AdminLTE 3.x DataTables row layout */
.dataTables_wrapper .row:first-child {
    display: block !important;
}

.dataTables_wrapper .row:first-child .col-sm-6:first-child {
    float: left !important;
    width: auto !important;
}

.dataTables_wrapper .row:first-child .col-sm-6:last-child {
    float: right !important;
    width: auto !important;
    text-align: right !important;
}

/* Clear floats after DataTables controls */
.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

/* DataTables buttons toolbar - AdminLTE 2.x style */
/* Position buttons AFTER the length dropdown */
.dt-buttons,
.dt-buttons.btn-group {
    float: left !important;
    margin-bottom: 10px !important;
    margin-right: 20px !important;
    margin-left: 0px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.dt-buttons .btn {
    margin-right: 5px !important;
    margin-bottom: 5px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure DataTables buttons are visible and styled */
.dt-button {
    background: #3c8dbc !important;
    color: white !important;
    border: 1px solid #3c8dbc !important;
    border-radius: 3px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

.dt-button:hover {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
    color: white !important;
}

.dt-button.active {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
}

/* DataTables CSS fixes */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #333 !important;
    visibility: visible !important;
    display: block !important;
}

/* Processing/Loading indicator - AdminLTE 2.x style with blue animation */
.dataTables_wrapper .dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 80px !important;
    height: 80px !important;
    margin-left: -40px !important;
    margin-top: -40px !important;
    padding: 20px !important;
    border: 1px solid #3c8dbc !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    text-align: center !important;
    font-size: 0 !important;
    color: transparent !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
}

/* Hide the "Processing..." text and show a spinner instead */
.dataTables_wrapper .dataTables_processing:after {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
    border: 4px solid #3c8dbc !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: datatables-spinner 0.8s linear infinite !important;
}

@keyframes datatables-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Ensure processing indicator is hidden when not processing */
.dataTables_wrapper .dataTables_processing[style*="display: none"] {
    display: none !important;
}


/* DataTables top row layout - force AdminLTE 2.x style */
.dataTables_wrapper .row:first-child {
    display: block !important;
    margin-bottom: 10px !important;
}

.dataTables_wrapper .row:first-child .col-sm-6:first-child {
    float: left !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dataTables_wrapper .row:first-child .col-sm-6:last-child {
    float: right !important;
    width: auto !important;
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Form controls within DataTables */
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid #d2d6de;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 12px;
}

/* Responsive table */
.table-responsive {
    min-height: 0.01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {

    .dataTables_length,
    .dataTables_filter {
        float: none;
        text-align: center;
    }

    .dataTables_info,
    .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 10px;
    }
}

/* Form elements compatibility */
.form-control {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-color: #d2d6de !important;
}

.form-control:focus {
    border-color: #3c8dbc !important;
    box-shadow: none !important;
}

/* Button compatibility */
.btn {
    border-radius: 3px !important;
}

.btn-flat {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-width: 1px !important;
}

/* FORCE breadcrumb positioning - AdminLTE 2.x style */
.content-header .breadcrumb {
    float: right !important;
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    padding: 7px 5px !important;
    position: absolute !important;
    top: 15px !important;
    right: 10px !important;
    border-radius: 2px !important;
    list-style: none !important;
    z-index: 10 !important;
}

/* FORCE username visibility - MAXIMUM SPECIFICITY */
.navbar-nav .user-menu .nav-link span,
.navbar-nav .user-menu .nav-link .d-none,
.navbar-nav .user-menu .nav-link .d-md-inline,
.user-menu .nav-link span,
.user-menu .nav-link .d-none,
.user-menu .nav-link .d-md-inline {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override Bootstrap responsive classes with maximum specificity */
@media (max-width: 767.98px) {

    .navbar-nav .user-menu .nav-link span,
    .navbar-nav .user-menu .nav-link .d-none,
    .navbar-nav .user-menu .nav-link .d-md-inline,
    .user-menu .nav-link span,
    .user-menu .nav-link .d-none,
    .user-menu .nav-link .d-md-inline {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 768px) {

    .navbar-nav .user-menu .nav-link span,
    .navbar-nav .user-menu .nav-link .d-none,
    .navbar-nav .user-menu .nav-link .d-md-inline,
    .user-menu .nav-link span,
    .user-menu .nav-link .d-none,
    .user-menu .nav-link .d-md-inline {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Force username visibility with JavaScript override */
.navbar-nav .user-menu .nav-link span[class*="d-"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Content header structure */
.content-header {
    padding: 15px 15px 0 15px !important;
    position: relative !important;
    min-height: 50px !important;
}

.content-header>h1 {
    margin: 0 !important;
    font-size: 24px !important;
    display: inline-block !important;
}

.breadcrumb>li {
    display: inline-block;
}

.breadcrumb>li+li:before {
    content: ">\00a0" !important;
    padding: 0 5px;
    color: #ccc;
}

.breadcrumb>li a {
    color: #444;
    text-decoration: none;
}

.breadcrumb>.active {
    color: #777;
}

/* Content padding */
.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Make sure tables don't have margins that break the box styling */
.box-body .table {
    margin-bottom: 0;
}

/* Skin blue specific classes - STRONG OVERRIDES */
.skin-blue .main-header .navbar,
.main-header .navbar {
    background: linear-gradient(90deg, #2f6fa1 0%, #3c8dbc 60%, #4a9ed6 100%) !important;
    min-height: 50px !important;
}

.skin-blue .main-header .logo,
.main-header .logo {
    background-color: transparent !important;
    color: #fff !important;
    border-bottom: 0 solid transparent !important;
}

.skin-blue .main-header .logo:hover,
.main-header .logo:hover {
    background-color: transparent !important;
}

/* Force blue header even without skin-blue class */
.main-header {
    background-color: #2f6fa1 !important;
}

.main-header .navbar {
    background-color: #3c8dbc !important;
}

.main-header .logo {
    background-color: #ffffff !important; /* match page background so logo sits cleanly above sidebar */
    color: #fff !important;
    width: 250px !important;
    /* align exactly with sidebar width */
    max-width: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    height: 50px !important;
    line-height: 50px !important;
}

/* CloudHR / HR Genie header brand: see end of file — .hrgenie-brand rules consolidated there. */

/* Generic CloudHR headerbar container for AdminLTE 3 (brand-link) */
.main-header .brand-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    height: 50px;
    background-color: #2f6fa1;
}

/* Ensure navbar items are visible */
.navbar-nav .nav-link {
    color: #fff !important;
}

.navbar-nav .nav-link:hover {
    color: #f8f9fa !important;
}


/* Modules dropdown - modern tiles (AdminLTE topnav) */
.navbar-nav .dropdown-menu .module-switch-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px 14px !important;
    gap: 2px !important;
    white-space: normal !important;
    border-radius: 6px !important;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .navbar-nav .dropdown-menu .module-switch-item {
        transition: background-color 120ms ease-out !important;
    }
}

.navbar-nav .dropdown-menu .module-switch-item .module-switch-description {
    font-size: 11px;
    color: #6b7280;
}

.navbar-nav .dropdown-menu .module-switch-item .module-switch-tag {
    margin-top: 1px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b91c1c;
}

.navbar-nav .dropdown-menu .module-switch-item--subscribed:hover {
    background-color: #f3f4ff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.navbar-nav .dropdown-menu .module-switch-item--unsubscribed {
    opacity: 0.55;
    cursor: not-allowed;
}

.navbar-nav .dropdown-menu .module-switch-item--unsubscribed:hover {
    background-color: transparent !important;
    transform: none;
    box-shadow: none;
}


/* AGGRESSIVE navbar positioning - Force fullscreen to far right */
.main-header .navbar .navbar-nav.ml-auto {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    width: auto !important;
}

/* Force fullscreen widget to absolute right - SPECIFIC TARGETING */
.main-header .navbar .navbar-nav.ml-auto .nav-item[data-widget="fullscreen"] {
    position: absolute !important;
    right: 0 !important;
    margin-left: 0 !important;
    z-index: 1000 !important;
}

/*
 * NOTE: A rule here previously hid `.user-menu:not(:first-child)` to suppress a
 * historical duplicate user menu. The app now renders a single profile user menu
 * (the restored avatar card) as the last navbar item, so that rule incorrectly
 * hid it. It has been removed — there is no longer a duplicate to hide.
 */

/* Ensure user menu stays in normal flow and is VISIBLE */
.main-header .navbar .navbar-nav.ml-auto .user-menu {
    position: relative !important;
    margin-right: 50px !important;
    /* Make space for absolute fullscreen widget */
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force user menu link to be visible */
.main-header .navbar .navbar-nav.ml-auto .user-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
}

/* Ensure navbar has relative positioning for absolute child */
.main-header .navbar {
    position: relative !important;
}

.skin-blue .sidebar-menu>li>a {
    border-left: 3px solid transparent;
}

.skin-blue .sidebar-menu>li:hover>a,
.skin-blue .sidebar-menu>li.active>a {
    color: #fff;
    background: #1e282c;
    border-left-color: #3c8dbc;
}

.skin-blue .treeview-menu>li>a {
    color: #8aa4af;
}

.skin-blue .treeview-menu>li.active>a,
.skin-blue .treeview-menu>li>a:hover {
    color: #fff;
}

.skin-blue .treeview-menu>li.active>a {
    background: rgba(60, 141, 188, 0.18);
    border-radius: 6px;
    margin: 2px 6px;
    padding-left: 12px;
}

.skin-blue .sidebar-menu>li.active>a {
    border-radius: 8px;
    margin: 2px 6px;
}

/* AdminLTE v3 sidebar active link highlighting */
.main-sidebar .nav-sidebar>.nav-item>.nav-link.active {
    background: #1e282c !important;
    color: #ffffff !important;
    border-radius: 8px;
    margin: 2px 6px;
}

.main-sidebar .nav-sidebar .nav-treeview>.nav-item>.nav-link.active {
    background: rgba(60, 141, 188, 0.18) !important;
    color: #ffffff !important;
    border-radius: 6px;
    margin: 2px 6px;
}

/* DataTables Buttons - Export dropdown visual fixes */
ul.dt-button-collection.dropdown-menu {
    padding: 8px !important;
    min-width: 180px !important;
}

ul.dt-button-collection.dropdown-menu .dt-button,
ul.dt-button-collection.dropdown-menu .btn,
ul.dt-button-collection.dropdown-menu .buttons-html5 {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: #3c8dbc !important;
    color: #ffffff !important;
    border: 1px solid #3c8dbc !important;
    border-radius: 3px !important;
    padding: 6px 12px !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

ul.dt-button-collection.dropdown-menu .dt-button:hover,
ul.dt-button-collection.dropdown-menu .btn:hover,
ul.dt-button-collection.dropdown-menu .buttons-html5:hover {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
    color: #ffffff !important;
}

/* Toolbar buttons consistency */
.dt-buttons .btn,
.dt-buttons .dt-button {
    background: #3c8dbc !important;
    color: #ffffff !important;
    border-color: #3c8dbc !important;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
    color: #ffffff !important;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
    color: #ffffff !important;
}

/* Force white text for anchors/icons inside export dropdown */
ul.dt-button-collection.dropdown-menu li.dt-button>a,
ul.dt-button-collection.dropdown-menu li.dt-button>a:link,
ul.dt-button-collection.dropdown-menu li.dt-button>a:visited,
ul.dt-button-collection.dropdown-menu li.dt-button>a:hover,
ul.dt-button-collection.dropdown-menu li.dt-button>a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

ul.dt-button-collection.dropdown-menu li.dt-button>a i {
    color: #ffffff !important;
}

/* Export dropdown buttons side-by-side with readable text */
ul.dt-button-collection.dropdown-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    min-width: auto !important;
    white-space: nowrap !important;
}

ul.dt-button-collection.dropdown-menu .dt-button,
ul.dt-button-collection.dropdown-menu .btn,
ul.dt-button-collection.dropdown-menu .buttons-html5 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 90px !important;
    text-align: center !important;
    background: #3c8dbc !important;
    color: #ffffff !important;
    /* ensure visible */
    border: 1px solid #3c8dbc !important;
    border-radius: 3px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    /* override any dimming */
}

ul.dt-button-collection.dropdown-menu .dt-button:hover,
ul.dt-button-collection.dropdown-menu .btn:hover,
ul.dt-button-collection.dropdown-menu .buttons-html5:hover {
    background: #357ca5 !important;
    border-color: #357ca5 !important;
    color: #ffffff !important;
}

/* --- Fix hidden menu items under "application settings" --- */
.main-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    /* keep layout stable */
}

.main-sidebar .sidebar {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 80px !important;
    /* ensures last item isn't cut off */
    scrollbar-width: thin;
    scrollbar-color: #3c8dbc transparent;
}

.main-sidebar .nav-sidebar,
.main-sidebar .nav.nav-sidebar {
    overflow: visible !important;
}

@media (max-width: 767.98px) {
    .main-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Ensure clicks pass through correctly in mobile sidebar overlay mode */
body.sidebar-open .main-sidebar {
    z-index: 1050 !important;
    /* above overlay */
    pointer-events: auto !important;
}

body.sidebar-open .content-wrapper,
body.sidebar-open .main-footer {
    pointer-events: none;
    /* prevent content from intercepting clicks */
}

/* -------------------------------------------------------------------------- */
/* User menu (top-right): highlight Employee Self-Service like a primary CTA */
/* -------------------------------------------------------------------------- */

.navbar-nav .user-menu .dropdown-menu > .dropdown-item.hr-user-menu-self-service,
.navbar-nav .user-menu .dropdown-menu a.dropdown-item.hr-user-menu-self-service {
    margin: 0.4rem 0.65rem 0.55rem;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    background: #fff;
    color: #1a5f9e !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar-nav .user-menu .dropdown-menu > .dropdown-item.hr-user-menu-self-service:hover,
.navbar-nav .user-menu .dropdown-menu a.dropdown-item.hr-user-menu-self-service:hover {
    background: #f0f6fc !important;
    color: #144a7d !important;
}

.navbar.navbar-dark .navbar-nav .user-menu .dropdown-menu > .dropdown-item.hr-user-menu-self-service,
.navbar.navbar-dark .navbar-nav .user-menu .dropdown-menu a.dropdown-item.hr-user-menu-self-service {
    border-color: rgba(255, 255, 255, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Top navbar: dedicated "Profile" dropdown (Self Service + Logout)           */
/* -------------------------------------------------------------------------- */

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu {
    padding: 0.75rem;
    background: #367fa9;
    min-width: 220px;
    margin-top: 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu > li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu a.dropdown-item.hr-profile-nav-self-service {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem !important;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    background: #fff !important;
    color: #1a5f9e !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu a.dropdown-item.hr-profile-nav-self-service:hover {
    background: #f0f6fc !important;
    color: #144a7d !important;
}

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu a.dropdown-item.hr-profile-nav-logout {
    margin: 0;
    padding: 0.5rem 0.75rem !important;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.92);
}

.main-header .navbar-nav .nav-item.dropdown .nav-link.hr-profile-nav-dropdown-toggle + .dropdown-menu a.dropdown-item.hr-profile-nav-logout:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Fix vue-multiselect / vue-select dropdown option lists rendering hidden.   */
/* resources/sass/app.scss already carries this fix, but public/css/app.css  */
/* is never linked on AdminLTE pages (config('adminlte.laravel_asset_bundling')*/
/* is boolean false, which never matches the vendor blade's 'mix' string     */
/* case), so it silently never reached the browser. This file IS loaded on   */
/* every AdminLTE page via the AdminLTECompatibility plugin entry.           */
/* -------------------------------------------------------------------------- */

.multiselect {
    position: relative;
    z-index: 1;
}

.multiselect--active {
    z-index: 9999 !important;
}

.multiselect__content-wrapper {
    z-index: 999999 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 300px !important;
}

.multiselect__content {
    display: block !important;
}

.v-select {
    position: relative;
}

.v-select .vs__dropdown-menu {
    z-index: 99999 !important;
    max-height: 350px !important;
    min-width: 100% !important;
}

.form-group,
.box-body,
.box,
.row,
.col-sm-12,
.col-md-12 {
    overflow: visible !important;
}

/* Summernote 0.8.9 ships Bootstrap 3 markup (.note-popover.popover), but this
   app runs Bootstrap 4. BS3 styled .popover as display:none until shown; BS4
   styles it display:block, so the editor popover sits permanently at the
   document origin, covering the sidebar brand. Restore the BS3 default —
   Summernote still reveals it via jQuery .show(), which sets display inline
   and so wins over this rule. */
.note-popover.popover {
    display: none;
}

/* ---------------------------------------------------------------------------
   ESS sidebar: full-phrase labels wrap instead of ellipsizing.

   The employee portal sidebar is a list of applications, so every label is a
   task phrase ("Apply for compensatory off", "Request a profile change") and
   several are wider than the fixed sidebar. The global .nav-link rules above
   ellipsize them to "Apply for compensat...". Let ESS rows run to two lines —
   the menu is short, so the extra height costs nothing, and the label is the
   whole point of the row. Scoped to body.ess-portal (set in
   vendor/adminlte/page.blade.php) so the admin menu keeps single-line rows.

   Skipped while the sidebar is collapsed: in that state AdminLTE hides the
   label and re-shows it as a hover flyout, which relies on nowrap.
   --------------------------------------------------------------------------- */
body.ess-portal:not(.sidebar-collapse) .main-sidebar .nav-link,
body.ess-portal:not(.sidebar-collapse) .sidebar .nav-link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body.ess-portal:not(.sidebar-collapse) .main-sidebar .nav-link p,
body.ess-portal:not(.sidebar-collapse) .sidebar .nav-link p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
}

/* The treeview caret is absolutely positioned by AdminLTE against a one-line
   row; pin it to the first line so a wrapped parent label keeps it level. */
body.ess-portal:not(.sidebar-collapse) .main-sidebar .nav-link p > .right,
body.ess-portal:not(.sidebar-collapse) .sidebar .nav-link p > .right {
    top: 0.75rem !important;
}