/* ==========================================================================
   custom.css — Legacy compatibility & page-specific overrides
   All core design handled by design-system.css
   ========================================================================== */

/* ── Image Upload Widget ───────────────────────────────────────── */
.col-container {
    height: 250px;
    width: 100%;
    position: relative;
}
.col-container .col-wrapper {
    position: relative;
    height: 200px;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    border: 2px dashed #c2cdda;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.col-wrapper.active {
    border: none;
}
.col-wrapper .image {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.col-wrapper .icon {
    font-size: 100px;
    color: #9658fe;
    padding-left: 10px;
}
.col-wrapper .text {
    font-size: 15px;
    font-weight: 500;
    color: #5b5b7b;
}
.col-wrapper #cancel-btn i {
    position: absolute;
    font-size: 15px;
    right: 15px;
    top: 15px;
    color: #9658fe;
    cursor: pointer;
    display: none;
}
.col-wrapper.active:hover #cancel-btn i {
    display: block;
}
.col-wrapper #cancel-btn i:hover {
    color: #e74c3c;
}
.col-wrapper .file-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    color: #fff;
    display: none;
    background: linear-gradient(135deg, #3a8ffe, #9658fe);
}
.col-wrapper.active:hover .file-name {
    display: block;
}
.col-container #custom-btn {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, #3a8ffe, #9658fe);
}
.col-container #custom-btn-file,
.upload-excel {
    margin-top: 10px;
    margin-left: 10px;
    display: block;
    width: 20%;
    height: 50px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, #3a8ffe, #9658fe);
}

/* ── Page-specific overrides (non-breaking) ────────────────────── */
.emp-topics {
    color: #6a6c6d !important;
}
.emp-topics:hover {
    color: #a4b2a8 !important;
    transition: 2s ease !important;
}
.emp-topics-img {
    width: 44px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
}
.hidegalimage {
    display: none;
}

/* Edit/Delete button sizing */
.edit-item,
.delete-item {
    padding: 0 7px !important;
    align-content: center !important;
}

/* Theme toggle override – kept from old system */
html.dark #theme-toggle {
    color: var(--text-secondary) !important;
}

/* Datepicker theme overrides */
.ui-datepicker,
.ui-datepicker-div,
.datepicker-dropdown {
    position: absolute !important;
    z-index: 30000 !important;
}
.datepicker.dropdown-menu {
    z-index: 30000 !important;
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active a,
.ui-datepicker .ui-state-hover,
.ui-datepicker td a:hover,
.datepicker table thead tr th:hover,
.datepicker table thead tr:first-child th:hover,
.datepicker table thead tr:last-child th:hover,
.datepicker table tbody tr td.day:hover,
.datepicker table tbody tr td.day.active,
.datepicker table tbody tr td.day.new:hover,
.datepicker table tr td span:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover,
.datepicker tfoot tr th:hover,
.datepicker.datepicker-primary table thead tr:first-child th:hover,
.datepicker.datepicker-primary table thead tr:last-child th:hover,
html:not(.sidebar-light)
    .datepicker.datepicker-dark
    table
    tbody
    tr
    td.day:hover,
html:not(.sidebar-light)
    .datepicker.datepicker-dark
    table
    tbody
    tr
    td.day.active {
    background-color: var(--clr-maroon) !important;
    border-color: var(--clr-maroon) !important;
    color: #fff !important;
}

.datepicker.datepicker-primary table thead tr:first-child,
.datepicker.datepicker-primary table thead tr:last-child {
    background-color: var(--clr-maroon) !important;
    color: #fff !important;
}

/* Header shimmer line should stay behind header content */
header.header::after {
    z-index: -1 !important;
}

header.header {
    position: relative;
    z-index: 1001;
}