/*Write your custom css in this file.*/

/* jQuery validate error messages */
span.help-block {
    color: #dc3545;
    font-size: .85em;
}
span.help-block::before {
    content: "⚠ ";
}

/* Project form tabs */
#project-form-tabs {
    border-bottom: 2px solid #e9ecef;
    gap: .25rem;
    margin-bottom: 1.25rem !important;
}
#project-form-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .65rem 1.25rem;
    margin-bottom: -2px;
    transition: color .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
#project-form-tabs .nav-link:hover:not(.active) {
    color: #0d6efd;
    border-bottom-color: #c6d8ff;
    background: transparent;
}
#project-form-tabs .nav-link.active {
    color: #0d6efd;
    font-weight: 600;
    border-bottom: 3px solid #0d6efd;
    background: transparent;
}

/* Fix: When sidebar is collapsed, the PerfectScrollbar instance that was
   initialized on .main-scrollable-page (from setPageScrollable) remains active
   even after its height/class are removed. This orphaned PS scrollbar appears
   in the center of the page. Hide it and allow overflow so the mask's PS
   handles horizontal scrolling correctly. */
.sidebar-toggled .main-scrollable-page {
    overflow: visible !important;
    height: auto !important;
}

.sidebar-toggled .main-scrollable-page > .ps__rail-x,
.sidebar-toggled .main-scrollable-page > .ps__rail-y {
    display: none !important;
}

/* Active filter styling - Direct CSS approach */
/* Target Select2 containers that don't have default placeholder text */
.filter-section-container .select2-container:not([class*="select2-container-disabled"]) .select2-choice:not(:contains("- Περιφέρεια -")):not(:contains("- Περιφερειακή ενότητα -")):not(:contains("- MIS -")):not(:contains("- Τύπος έργου -")):not(:contains("- Ετικέτα -")) {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

.filter-section-container .select2-container:not([class*="select2-container-disabled"]) .select2-choice:not(:contains("- Περιφέρεια -")):not(:contains("- Περιφερειακή ενότητα -")):not(:contains("- MIS -")):not(:contains("- Τύπος έργου -")):not(:contains("- Ετικέτα -")) .select2-arrow {
    color: #1976d2 !important;
}

/* Alternative approach - target by specific text content */
.filter-section-container .select2-container .select2-choice:has(.select2-chosen:not(:contains("- Περιφέρεια -")):not(:contains("- Περιφερειακή ενότητα -")):not(:contains("- MIS -")):not(:contains("- Τύπος έργου -")):not(:contains("- Ετικέτα -"))) {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

/* JavaScript-based approach - class-based styling */
.filter-section-container .select2-container.filter-active .select2-choice {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

.filter-section-container .select2-container.filter-active .select2-choice .select2-arrow {
    color: #1976d2 !important;
}

/* Dark theme support for active filters */
body.dark-theme .filter-section-container .select2-container.filter-active .select2-choice {
    background: #1e3a5f !important;
    border-color: #4fc3f7 !important;
    color: #81d4fa !important;
    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.3) !important;
}

body.dark-theme .filter-section-container .select2-container.filter-active .select2-choice .select2-arrow {
    color: #81d4fa !important;
}
/* === ΕΔΕΠΟΛ branding overrides — bigger sidebar logo === */
.sidebar-brand {
    height: 92px !important;
    padding: 8px 14px !important;
}
.brand-logo img {
    max-height: 72px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
}
.sidebar-scroll,
.sidebar-menu {
    margin-top: 92px !important;
}
@media (max-width: 768px) {
    .sidebar-brand { height: 70px !important; }
    .brand-logo img { max-height: 54px !important; }
    .sidebar-scroll, .sidebar-menu { margin-top: 70px !important; }
}