/* static/css/custom_admin.css */
@import url('tokens.css');

/* --- 0. THE ULTIMATE GLOBAL FONT OVERRIDE --- */

/* Force literally every single element to use the system font... */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
    font-family: var(--font-primary) !important;
}

/* ...except the icons, which we explicitly protect here */
.fa, .fas, .far, .fab, .fal, .fa-solid, .fa-brands, .fa-regular {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
}

/* --- 1. Sidebar Background (Deep Brand Navy) --- */
.main-sidebar.sidebar-dark-primary,
.main-sidebar.sidebar-dark-primary .brand-link {
    background-color: var(--color-brand-navy) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important; /* Subtle line under logo */
}

/* --- 2. Active Menu Item (Primary Brand Blue) --- */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--color-brand-blue) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

/* --- 3. Buttons (Primary Brand Blue & Pill Shaped) --- */
/* Target generic primary buttons and the search button */
.btn-primary,
.bg-primary {
    background-color: var(--color-brand-blue) !important;
    border-color: var(--color-brand-blue) !important;
}

/* Pill shape only for non-submit-row primary/success buttons */
.btn-primary,
.btn-success {
    border-radius: var(--radius-pill) !important;
    padding: var(--btn-padding-y-sm) var(--btn-padding-x) !important;
}

/* Hover state for buttons so they slightly darken when hovered */
.btn-primary:hover {
    background-color: var(--color-brand-blue-hover) !important;
    border-color: var(--color-brand-blue-hover) !important;
}

/* --- 4. Refine the Table & Badges --- */
/* Give the table container softer edges */
.card {
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; /* Soft modern shadow */
}

/* Soften the status badges (To do, dropped out, etc.) */
.badge {
    border-radius: var(--radius-lg) !important;
    padding: 5px 10px !important;
}

/* --- 6. Sidebar Text Colors & Hover Effects --- */

/* Make all standard sidebar links, icons, user profile, and brand text white */
.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link i,
.sidebar-dark-primary .user-panel a,
.sidebar-dark-primary .brand-link {
    color: #ffffff !important;
}

/* Make the category headers (e.g., "Jobs", "Recruitment") white,
   but slightly transparent so they look like headers and not clickable links */
.sidebar-dark-primary .nav-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
}

/* Add a hover effect to the sidebar menu items */
.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* Subtle white highlight */
    color: #ffffff !important;
    border-radius: var(--radius-md) !important; /* Keeps the soft edges consistent */
    transition: background-color 0.2s ease-in-out;
}

/* Ensure the currently active link doesn't get its primary blue overwritten on hover */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    background-color: var(--color-brand-blue) !important;
}

/* --- Simple Top Header Override --- */

/* Force the background color */
.main-header {
    background-color: var(--color-brand-navy) !important; /* Change to var(--color-brand-blue) if you want it lighter */
    border-bottom: none !important;
}
.elevation-4 {
    box-shadow: none !important;
}
/* Force all links, icons, and text inside the header to be white */
.main-header .nav-link,
.main-header .dropdown-toggle,
.main-header i,
.main-header span {
    color: #ffffff !important;
}

/* Optional: Slight hover effect so users know it's clickable */
.main-header .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- User Dropdown Menu Styling --- */
/* Hide the user profile header (top section with user info) */
.main-header .dropdown-menu .dropdown-header {
    display: none !important;
}

/* Hide the divider that follows the header to avoid orphan line */
.main-header .dropdown-menu .dropdown-header + .dropdown-divider {
    display: none !important;
}

/* Icons inside dropdown menu should be dark by default (visible on white background) */
.main-header .dropdown-menu i {
    color: #333333 !important;
}

/* Dropdown menu items */
.main-header .dropdown-menu .dropdown-item {
    color: #333333 !important;
    transition: all 0.2s ease !important;
}

/* Hover state: blue background with white text and white icons */
.main-header .dropdown-menu .dropdown-item:hover {
    background-color: var(--srp-blue) !important;
    color: #ffffff !important;
}

.main-header .dropdown-menu .dropdown-item:hover i {
    color: #ffffff !important;
}

/* Ensure non-hovered items remain styled correctly */
.main-header .dropdown-menu .dropdown-item i {
    transition: color 0.2s ease !important;
}

/* --- Remove Navbar Shadow --- */
.main-header {
    box-shadow: none !important;
}

/* --- Remove the Line Above 'admin' --- */
.main-sidebar .brand-link {
    border-bottom: none !important;
}

/* 1. Hide the dropdown and labels */
.actions select,
.actions .action-counter,
.actions label {
    display: none !important;
}

/* Top bar: Delete Selected (left) … count (right) via space-between */
.change-list-actions > .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.change-list-actions .dataTables_info {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.change-list-actions .dataTables_info .btn,
.change-list-actions .dataTables_info input[name="_save"] {
    margin-left: 0.75rem;
}

#changelist .change-list-actions > .col-12:not(.application-changelist-actions) > .actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    border: none;
    line-height: normal;
}

#changelist .change-list-actions > .col-12:not(.application-changelist-actions) > .actions button[name="index"] {
    margin: 0 !important;
}

/* After moving .dataTables_info, hide the empty bottom column and full-width pagination */
#changelist > .row > .col-5:empty {
    display: none !important;
}

#changelist > .row > .col-5:empty + .col-7 {
    flex: 0 0 100%;
    max-width: 100%;
}

.custom-time-input {
    height: calc(2.25rem + 2px)!important; ;
    border-radius: .25rem !important;
    border: 1px solid #d1d5db !important;
    padding: .375rem .75rem!important;
    font-size: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.custom-time-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* static/css/admin_modal.css */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
}

.modal-content {
    background-color: #fff;
    margin: 8% auto;
    border-radius: 8px;
    width: 550px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
}

.modal-header {
    background: #417690;
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.close-btn {
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
}

.modal-form {
    padding: 24px;
}

.modal-form .form-group {
    margin-bottom: 20px;
}

.modal-form .form-group label {
    display: block;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.modal-form .form-group input,
.modal-form .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.modal-footer {
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 10px;
}



.object-tools li.no-bullet {
        list-style-type: none !important;
        display: inline-block !important;
    }

.object-tools {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* 2. Tugmaning o'ziga zamonaviy stil berish */
.kanban-action-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--color-brand-blue) !important;
    color: #ffffff !important;
    border: none !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    border-radius: var(--radius-pill) !important; /* Biroz yumshoqroq burchaklar */
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 3. Hover effekti */
.kanban-action-btn:hover {
    background: var(--color-brand-blue-hover) !important; /* Brend rangining bosilgan holati */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* 4. Ikonka stili */
.kanban-action-btn svg {
    opacity: 0.9;
    stroke-width: 2.5;
}
.elevation-3 {
    box-shadow: none !important;
}

/* BRUTE-FORCE UNIFORMITY FOR ALL SIDEBAR BUTTONS */
#jazzy-actions .btn,
#jazzy-actions input[type="submit"],
#jazzy-actions a.btn {
    border-radius: var(--radius-sm) !important;
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-sm) !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    height: auto !important;
    line-height: 1.5 !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 15px !important;
}

/* SPECIFIC STYLE FOR THE HISTORY BUTTON */
#jazzy-actions a[href*="/history/"] {
    background-color: #d39e00 !important;
    color: #ffffff !important;
}

#jazzy-actions a[href*="/history/"]:hover {
    background-color: #b58900 !important;
    color: #ffffff !important;
}

/* --- Changelist filter bar ---------------------------------------------
   Wraps onto as many rows as it needs instead of forcing one line.

   This used to be `flex-wrap: nowrap` with `min-width: 110px` per filter.
   With eight or more filters the sum of those minimums exceeds the content
   column, and because nowrap forbids a second row the overflow simply spilled
   past the right edge — the search field and the Search button ended up
   outside the container, sitting on top of each other. Wrapping is the fix;
   the minimum below is sized to fit the longest filter label instead.
   ---------------------------------------------------------------------- */
#change-list-filters #changelist-search {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    width: 100%;
}

#change-list-filters #changelist-search > .form-group {
    margin: 0 !important;
    /* Basis wide enough for labels like "Deadline status" and "Vacancy office",
       which were previously clipped mid-word. */
    flex: 1 1 165px;
    min-width: 165px;
    max-width: 220px;
}

/* Controls fill their own group. Bootstrap's .form-inline sets width:auto on
   .form-control, which let the search input render wider than the group that
   contains it and overlap the button beside it.

   The :not(.select2-hidden-accessible) guard is essential: Select2 keeps the
   original <select> in the DOM and hides it with width:1px. Widening that
   element too would drag a ~1100px invisible box back into the layout and put
   a horizontal scrollbar on the whole page. */
#change-list-filters #changelist-search > .form-group > .form-control:not(.select2-hidden-accessible),
#change-list-filters #changelist-search > .form-group .select2-container,
#change-list-filters #changelist-search > .form-group .select2-selection {
    width: 100% !important;
    max-width: 100% !important;
}

/* Jazzmin's main.css pins every .select2-container to min-width: 200px. Eight
   filters at that minimum need ~1700px, far more than the content column ever
   offers, so each control stayed 200px wide no matter how narrow its group got
   and pushed into the control beside it. Released here only — select2 elsewhere
   in the admin (change forms, filter_horizontal) keeps Jazzmin's minimum. */
#change-list-filters #changelist-search .select2-container {
    min-width: 0 !important;
}

/* One shared control height so every row of the bar lines up. */
#change-list-filters #changelist-search .form-control:not(.select2-hidden-accessible),
#change-list-filters #changelist-search .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
}

#change-list-filters #changelist-search > .form-group.applied-at-filter {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

#change-list-filters #changelist-search > .form-group.applied-at-filter .applied-at-input {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: calc(2.25rem + 2px) !important;
    padding: 0.375rem 0.5rem !important;
    margin: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

#change-list-filters #changelist-search > .form-group:has(#searchbar) {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
}

/* The Search button keeps its natural width and is never compressed, so its
   label can't spill outside the button's own border. */
#change-list-filters #changelist-search > #search_group {
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#change-list-filters #changelist-search > #search_group .btn {
    flex: 0 0 auto;
    height: calc(2.25rem + 2px);
    padding: 0 var(--btn-padding-x-lg) !important;
    line-height: 1 !important;
}

/* On narrow viewports let each control take a full row rather than shrink
   below a readable width. */
@media (max-width: 575.98px) {
    #change-list-filters #changelist-search > .form-group,
    #change-list-filters #changelist-search > .form-group:has(#searchbar) {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* --- 7. Sidebar Bottom Padding --- */
/* Add breathing room below the last sidebar menu item */
.sidebar .nav-sidebar {
    padding-bottom: 30px !important;
}

/* Ensure proper spacing on smaller viewports */
@media (max-width: 768px) {
    .sidebar .nav-sidebar {
        padding-bottom: 20px !important;
    }
}

/* ==========================================================================
   Changelist action buttons (Unified UI Kit)

   One shape/size/typography for every button in the changelist action bar,
   with colour carrying the only meaning: brand blue = constructive,
   red = destructive, outline = the lower-weight variant of each.

   These replace per-button inline styles that used to be written from JS
   (talent_pool_action.js, custom_admin.js). Inline styles outrank any
   stylesheet, so as long as they existed the design tokens could never
   apply here. Style buttons with these classes — never with element.style.
   ========================================================================== */
/* The action bar itself. This lives in CSS rather than in custom_admin.js so
   the spacing survives on changelists that have no "Add" button — e.g. Talent
   Pool Candidates, where has_add_permission is False and the JS branch that
   used to set these inline never runs. */
.actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.srp-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    height: 38px;
    padding: var(--btn-padding-y) var(--btn-padding-x-lg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-pill) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.2s ease;
}

.srp-action-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.srp-action-btn:focus-visible {
    outline: 2px solid var(--color-brand-blue);
    outline-offset: 2px;
}

.srp-action-btn i,
.srp-action-btn .fa {
    font-size: 12px;
}

/* Constructive, highest weight — e.g. "Add candidate" */
.srp-action-btn--primary {
    background-color: var(--color-brand-blue) !important;
    border-color: var(--color-brand-blue) !important;
    color: var(--color-surface-white) !important;
}

.srp-action-btn--primary:hover {
    background-color: var(--color-brand-blue-hover) !important;
    border-color: var(--color-brand-blue-hover) !important;
    color: var(--color-surface-white) !important;
}

/* Constructive, lower weight — e.g. "Add to Talent Pool" */
.srp-action-btn--secondary {
    background-color: var(--color-surface-white) !important;
    border-color: var(--color-brand-blue) !important;
    color: var(--color-brand-blue) !important;
}

.srp-action-btn--secondary:hover {
    background-color: var(--color-hover-bg) !important;
    border-color: var(--color-brand-blue-hover) !important;
    color: var(--color-brand-blue-hover) !important;
}

/* Destructive, highest weight — e.g. "Delete Selected" */
.srp-action-btn--danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-surface-white) !important;
}

.srp-action-btn--danger:hover {
    background-color: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
    color: var(--color-surface-white) !important;
}

/* Destructive, lower weight (reversible) — e.g. "Remove from Talent Pool" */
.srp-action-btn--danger-outline {
    background-color: var(--color-surface-white) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

.srp-action-btn--danger-outline:hover {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-surface-white) !important;
}

/* Jazzmin renders the run-action button itself, so map it onto the kit here.
   rename_go_button.js relabels it to "Delete Selected". */
#changelist-form .actions button[name="index"] {
    background-color: var(--color-danger) !important;
    border: 1px solid var(--color-danger) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--color-surface-white) !important;
    height: 38px;
    /* Jazzmin hardcodes margin-right/left on this button in actions.html;
       the flex gap on .actions owns the spacing instead. */
    margin: 0 !important;
    padding: var(--btn-padding-y) var(--btn-padding-x-lg) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                transform 0.2s ease;
}

#changelist-form .actions button[name="index"]:hover {
    background-color: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
    transform: translateY(-1px);
}